01
Przykładowa karta
Krótki opis przykładowej karty usługi.
Wyróżnione zdanie na dole
Katalog tokenów, komponentów i wszystkich duplikatów — niczego tu nie ukrywamy: każdy kolor, radius, cień i równoległy system kart/przycisków z produkcyjnego CSS jest zwizualizowany poniżej. Użyj Reżyserki, żeby przymierzyć zmiany bez pisania kodu.
Przesuń suwak albo zmień kolor — cała ta strona (przyciski, karty, próbki niżej) przełączy się natychmiast. Gdy efekt pasuje, skopiuj wygenerowane tokeny i wklej do designsystem/tokens.css — zmiana obejmie całą stronę atypical.pl.
Wklej te wartości w miejsce odpowiednich linii w designsystem/tokens.css (albo wyślij plik/screena do osoby technicznej — nazwy zmiennych jednoznacznie wskazują miejsce).
Każda karta to jedna podstrona: z czego się składa (sekcje w kolejności) + podgląd na żywo prawdziwej strony. Podgląd ładuje się na kliknięcie (można też wszystkie naraz) i da się w nim scrollować.
Każdy hex, który dziś fizycznie występuje w styles.css, z liczbą wystąpień. Kolory z dopiskiem to wartości, które mają już token, ale w tych miejscach są wpisane ręcznie — kandydaci do podmiany w pierwszej kolejności.
| Kontekst | Zmienne | Gdzie zdefiniowane |
|---|---|---|
| Panele oferty (7 akcentów) | --offer-panel-fade: fiolet, wino, ochra, morski… | styles.css ~linia 2950 |
| Helverth (dark) | --hv-bg0…--hv-accent-deep | styles.css ~linia 3900 |
| Alint (jasny, niebieski akcent) | --alint-below-* + osobny alint.css | styles.css ~linia 4730 |
| Sekcja usługi APS | --of-aps, --of-aps-bg | styles.css ~linia 3150 |
| ESG | --esg-bg…--esg-head-accent | styles.css ~linia 2900 |
Font: Outfit (waga 300 bazowo) + DM Mono do kodu/liczb. Skala --t-* jest płynna (clamp) — rośnie z viewportem, z wyższym sufitem od 1440px.
--t-heroAa--t-2xlNagłówek hero--t-xlNagłówek sekcji--t-lgPodtytuł / claim--t-mdTytuł karty--t-baseTekst akapitu — podstawowy rozmiar treści na stronie.--t-smTekst pomocniczy, opisy kart, stopki.--t-xsEtykiety / kickery / przyciskiSkala odstępów --s-*. Od --s-6 w górę wartości są płynne. --pad to poziomy padding sekcji pełnej szerokości.
--s-1 · 0.5rem--s-2 · 1rem--s-3 · 1.5rem--s-4 · 2rem--s-5 · 2.25rem--s-6 · fluid--s-8 · fluid--s-12 · fluid--s-16 · fluid--pad · fluidGłównie płynne clampy pisane za każdym razem od nowa — kandydaci do sprowadzenia do 2–3 wspólnych tokenów (uwaga: to zmieni wartości o 1–4px, decyzja wizualna).
Każdy pisany od nowa; wiele różni się od tokenów o włos. Cienie z var(...) zależą od kontekstu strony (np. dark mode Helverth) — tu mogą nie być widoczne.
.btn + modyfikatory baza styles.css · SHARED: BUTTONS.al-btn osobny system alint.css · strona produktu Alint.filter-btn / .tab-btn legacy (home EN) styles.css · _includes/layout/en/main.html.a11y-btn specjalizowany styles.css · _includes/a11y/a11y-bar.html.maildlg__timebtn one-off (legacy CSS) styles.css · dialog mailowy.kpr-card__btn one-off · .home-products__nav-btn / .home-news__nav-btn / .proc-nav-btn strzałki karuzelTen sam wzorzec (media + tytuł + treść + CTA) zaimplementowany dwanaście razy. Wszystkie renderowane z produkcyjnego CSS — tak dziś wyglądają obok siebie. Docelowo: jedna .card baza + modyfikatory.
.card baza styles.css · bloki usług (service-page-blocks)01
Krótki opis przykładowej karty usługi.
Wyróżnione zdanie na dole
.cs-card duplikat wzorca _includes/offer/case-studies/section-pl.htmlEtykieta · 2020
Opis projektu i kontekstu wdrożenia u klienta.
.home-products__card duplikat wzorca _includes/layout/main.html · karuzela oferty na home.home-news__card (--lead / --compact) duplikat wzorca _includes/home/home-news-card.liquid.kpr-card duplikat wzorca _includes/offer/kpr/catalog.html · katalog programów.nav-sol-card duplikat wzorca _includes/nav/megamenu/solutions.liquid · megamenu Rozwiązania.page-offer-index__tile duplikat wzorca _includes/offer/landing/offer-index-tile.liquid · landing oferty.blog-card-grid duplikat wzorca _includes/blog/blog-card-grid-item.liquid · lista bloga.proj-card legacy (home EN) _includes/layout/en/main.html · sekcja projectsOpis projektu z portfolio.
.proc-flow-card legacy (JS metodyki) assets/js/main.js · mapa procesu.product-lead-form-card duplikat wzorca styles.css · formularze lead produktówKrótki intro formularza.
.al-card i spółka osobny świat Alint alint.css · 176 klas al-*Produkt Alint ma własny mini-design-system (własne karty, przyciski, tokeny --al-*). Zobacz podgląd strony w sekcji Podstrony.
Kaskada: tokeny → komponenty → sekcje (partiale w _includes/) → strony. Poniżej mapa tego, co jest współdzielone (PL+EN z jednego pliku), a co zduplikowane w dwóch wersjach językowych.
| Obszar | Pliki | Status |
|---|---|---|
| Head, skip-link, GTM, breadcrumbs | _includes/layout/head.html i sąsiednie | współdzielone |
| Megamenu (oferta, rozwiązania, szkolenia) | _includes/nav/megamenu/* | współdzielone |
| Sekcje home (intro, news) | _includes/home/* | współdzielone |
| Oferta: landing, KPR, strony usług | _includes/offer/landing|kpr|service/* | współdzielone |
| Blog (sidebar, listy, karty, covery) | _includes/blog/* | współdzielone |
| Pasek dostępności | _includes/a11y/a11y-bar.html | współdzielone |
| Strona główna (treść) | layout/main.html vs layout/en/main.html | fork z dryfem |
| Nawigacja główna | nav/nav.html vs nav/en/nav.html | fork (ten sam markup) |
| Dialog mailowy | layout/maildlg.html vs layout/en/maildlg.html | fork ~225 linii 1:1 |
| Stopka | layout/footer.html vs layout/en/footer.html | fork trywialny |
| Case studies | offer/case-studies/*-pl|en.html | fork treści |
| Zasada | W praktyce |
|---|---|
| Wartości tylko z tokenów | Nowy CSS nie używa surowych hexów, pikseli radiusa ani własnych cieni — bierze var(--…) z tokens.css. |
| Najpierw sprawdź, co już jest | Zanim powstanie nowa karta/przycisk, sprawdź tę stronę — prawdopodobnie wzorzec istnieje. |
| Nowy wariant = modyfikator | .btn--nowy zamiast nowej klasy przycisku; .card--nowa zamiast nowego systemu kart. |
| Grafiki i materiały | Wrzucaj do designsystem/materialy/ — stamtąd składamy komponenty. |
| Decyzje wizualne w tokenach | „Mniejsze zaokrąglenia na całej stronie” = jedna zmiana --r-12/--radius-card, nie 40 edycji. |
Pełny audyt i roadmapa refactoru: designsystem/AUDYT.md. Instrukcja folderu: designsystem/README.md.