styleguide

Fundament.Etap 0.

Strona robocza do przeglądu tokenów i komponentów bazowych. Nie trafia do wyszukiwarek i nie jest linkowana z nawigacji.

Paleta

Baza jest prawdziwą czernią. Gradient pojawia się najwyżej trzy razy na ekran; nie ma go na przyciskach ani w tekście poza wordmarkiem.

  • black#000000 — tło głównekontrast na czerni 1,00 : 1
  • ink-1#0E1210 — panele, karty, tło inputówkontrast na czerni 1,11 : 1
  • ink-2#171D1A — powierzchnie podniesione, hoverkontrast na czerni 1,23 : 1
  • text#EEF2EF — tekst głównykontrast na czerni 18,58 : 1
  • text-2#A6B0AA — leady i opisykontrast na czerni 9,41 : 1
  • text-3#6E7873 — meta, tylko od 14 px w górękontrast na czerni 4,60 : 1
  • teal#4898AB — początek gradientukontrast na czerni 6,35 : 1
  • green#6CB68B — akcent: linki, aktywne stanykontrast na czerni 8,70 : 1
  • lime#8FD46C — gradient i focus ringkontrast na czerni 11,80 : 1
  • error#E08C7C — komunikaty błędówkontrast na czerni 8,21 : 1
  • tint-aurelia#1A1407 — przebarwienie Aureliikontrast na czerni 1,15 : 1
  • tint-elara#1C1210 — przebarwienie ELARYkontrast na czerni 1,14 : 1
  • tint-halicka#0A1611 — przebarwienie HALICKIEJkontrast na czerni 1,14 : 1
  • linergb(242 246 243 / 0.10) — linie podziału
  • line-2rgb(242 246 243 / 0.22) — obramowania przycisków wtórnych

Gradient marki

--g-brand: #4898AB 0%, #6CB68B 50%, #8FD46C 100%

Głębia bez cieni

black
ink-1
ink-2

Typografia

Newsreader na nagłówki i liczby, Hanken Grotesk na treść i interfejs. Obie rodziny z podzbiorem latin-ext — polskie znaki poniżej są testem, nie ozdobą.

display-1 — 44 → 96 px, Newsreader 400

Strona, która zapełnia kalendarz

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

display-2 — 34 → 64 px, Newsreader 400

Strona, która zapełnia kalendarz

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

price — 48 → 88 px, Newsreader 300, tabular-nums

Strona, która zapełnia kalendarz

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

h3 — 22 → 28 px, Hanken 500

Strona, która zapełnia kalendarz

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

lead — 18 → 20 px, Hanken 400, text-2

Strona, która zapełnia kalendarz

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

body — 16 → 17 px, Hanken 400

Strona, która zapełnia kalendarz

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

small — 14 px, Hanken 400/500

Strona, która zapełnia kalendarz

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

index — 14 px, Hanken 500, tabular-nums

Strona, która zapełnia kalendarz

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

Polska typografia w praktyce

Cena mieści się w widełkach 8 000–10 000 zł, a strona powstaje w cztery tygodnie. Pracujemy w Gdyni, w Gdańsku i w Toruniu. Klientka mówi: „to wygląda drogo”, i zostaje.

Sprawdzane: cudzysłowy „ ”, półpauza w zakresie, twarda spacja po spójnikach jednoliterowych, tysiące z twardą spacją.

Miara tekstu

Akapit ma domyślnie max-width: 40rem, czyli mniej więcej siedemdziesiąt znaków w wierszu. To jest ta granica — jeżeli wiersz robi się dłuższy, oko gubi początek następnego.

Łącznik

Dwie kreski w przesunięciu, które kończą się w tym samym punkcie w poziomie, ale na dwóch poziomach. Jedyny motyw dekoracyjny na stronie.

hero — 60% kontenera, pod H1

section — 160 px, statyczny

inline — 56 px, marker w listach

  • Projekt szyty pod Twoją markę
  • System pozyskiwania klientek
  • Rezerwacja online bez prowizji

cta — podkreślenie przycisku głównego. Górna kreska dorysowuje się przy najechaniu na przycisk poniżej.

Przyciski

Wysokość 48 px, zaokrąglenie 6 px, nigdy pill. Najedź na przycisk główny, żeby zobaczyć Łącznik. Przejdź tabulatorem, żeby zobaczyć focus.

Bezpłatny audyt w 60 sekundZobacz projektyZobacz case study

Para w przesunięciu

Na desktopie przycisk wtórny stoi 8 px niżej — zasada przesunięcia.

Bezpłatny audytZobacz projekty

Link zewnętrzny

Otwórz demo (otwiera się w nowej karcie)

Dokłada target="_blank", rel="noopener"i „otwiera się w nowej karcie" dla czytników.

Nagłówek sekcji

Licznik pozycji, H2 złożony ręcznie z dwóch linii, druga wcięta. Bez etykiet wielkimi literami i bez akcentowania pojedynczych słów.

01 / 07

Trzy segmenty rynku.Trzy projekty pokazowe.

Trzy pełne strony dla fikcyjnych marek — po jednej na każdy typ gabinetu.

06 / 07

8 000–10 000 zł.Tyle, nie „od”.

Jedna cena widełkowa, znana przed startem.