Typografia

Kroje

Dwie otwarte rodziny, obie hostowane lokalnie, żeby build nie zależał od zewnętrznej usługi fontów. Domyślne fonty Tailwinda są wyłączone, więc produkt może użyć tylko tych dwóch.

Skala nagłówków

Sześć poziomów ze stałą interlinią w pikselach; duże są zagęszczone ujemnym światłem. Rozmiar, interlinia i światło w px.

1. heading-1Sora 600 · 60 / 69 · −1,5

   Zajęcia, które dziecko pokocha

2. heading-2Sora 600 · 48 / 56 · −1

   Zajęcia, które dziecko pokocha

3. heading-3Sora 600 · 40 / 46 · −1

   Zajęcia, które dziecko pokocha

4. heading-4Sora 600 · 32 / 37

   Zajęcia, które dziecko pokocha

5. heading-5Sora 600 · 24 / 28

   Zajęcia, które dziecko pokocha

6. heading-6Sora 600 · 20 / 24

   Zajęcia, które dziecko pokocha

Skala tekstu

Style akapitu mają domyślnie drugi kolor tekstu (slate-700, 9,4:1 na tle strony); każdy rozmiar istnieje też w wadze medium i semibold.

1. captionSora 500 · 14 / 21 · +1,5 · uppercase

   Nowe w tym tygodniu

2. paragraph-xlInter 400 · 20 / 28

   Robotyka, basen i plastyka blisko Ciebie, z wolnymi miejscami w tym tygodniu.

3. paragraph-lgInter 400 · 18 / 22

   Robotyka, basen i plastyka blisko Ciebie, z wolnymi miejscami w tym tygodniu.

4. paragraphInter 400 · 16 / 20

   Robotyka, basen i plastyka blisko Ciebie, z wolnymi miejscami w tym tygodniu.

5. paragraph-smInter 400 · 14 / 20

   Robotyka, basen i plastyka blisko Ciebie, z wolnymi miejscami w tym tygodniu.

Zasady

• Jeden h1 na stronę. Przykłady w katalogu używają klas skali na akapicie, nigdy drugiego h1.
• Grubość ramki wynika z tekstu, który obramowuje: 2 px dla tekstu od 16 px, 1,5 px dla 12–14 px w wadze 600, 1 px dla małego tekstu regular i linii podziału.
• Linki rozpoznaje się po wadze i kolorze; na hover zmienia się tylko kolor.