Typografia

Jeden krój, zamknięta skala

Geist (font.family.sans) jest jedynym krojem tekstowym w systemie, self-hosted przez pakiet @fontsource/geist-sans (zero CDN, zgodnie z pryncypium repo). font.family.mono to JetBrains Mono. Skala ma dwanaście poziomów — nie dodajemy nowego rozmiaru dla pojedynczego napisu.

Każdy poziom to kompozyt trzech wartości (rozmiar, interlinia, waga) — nigdy nie zmieniaj jednej bez pozostałych osobno w komponencie (np. sam font-weight: 600 na klasie text-body-m) — wtedy poziom przestaje być tym, za co się podaje.

Jak używać

// Jedna gotowa klasa niesie rozmiar + interlinię + wagę naraz
<h1 className="text-heading-l text-text-primary">Tytuł strony</h1>
<p className="text-body-m text-text-secondary">Tekst podstawowy.</p>

Reguła: używaj gotowej klasy text-<rola>, nie rozbieraj kompozytu w miejscu użycia. Rozmiar/interlinia/waga są rejestrowane osobno w tokens/dist/theme.css (Style Dictionary nie umie wyemitować kompozytu jako jednej zmiennej CSS: --font-heading-l-size, --font-heading-l-line-height, --font-heading-l-weight…) — klasa @utility w ui/src/styles/globals.css scala je z powrotem w jednym miejscu.

Skala

Podgląd renderuje realną klasą text-<rola> — to dokładnie to, co dostaje kod. Cztery największe poziomy (display-l, display, heading-l, heading-m) mają osobną wartość na mobile (poniżej 48rem); pozostałe osiem ma identyczny rozmiar na obu szerokościach.

Podgląd	Rola	Klasa	Desktop (size / line-height / weight)	Mobile
Polisoteka®	display-l	text-display-l	4rem / 1.125 / 600	3rem / 1.1667 / 600
Polisoteka®	display	text-display	3.5rem / 1.2143 / 600	2.5rem / 1.2 / 600
Polisoteka®	heading-l	text-heading-l	2.5rem / 1.2 / 600	2rem / 1.25 / 600
Polisoteka®	heading-m	text-heading-m	2rem / 1.25 / 600	1.75rem / 1.2857 / 600
Polisoteka®	heading-s	text-heading-s	1.5rem / 1.3333 / 600	= desktop
Polisoteka®	heading-xs	text-heading-xs	1.25rem / 1.4 / 600	= desktop
Polisoteka®	body-l	text-body-l	1.125rem / 1.5556 / 400	= desktop
Polisoteka®	body-m	text-body-m	1rem / 1.5 / 400	= desktop
Polisoteka®	body-s	text-body-s	0.875rem / 1.4286 / 400	= desktop
Polisoteka®	label	text-label	1rem / 1.5 / 500	= desktop
Polisoteka®	label-s	text-label-s	0.875rem / 1.4286 / 500	= desktop
Polisoteka®	caption	text-caption	0.75rem / 1.3333 / 400	= desktop

Kiedy którego poziomu

Poziom	Użycie
display-l / display	Hero pojedynczej strony LP — używać oszczędnie, nie jako „duży nagłówek”
heading-l	Jeden na stronę — tytuł artykułu/strony
heading-m / heading-s / heading-xs	Hierarchia sekcji wewnątrz strony, w kolejności (bez przeskoków)
body-l	Lead/wstęp artykułu
body-m	Domyślny tekst UI i treści
body-s	Tekst pomocniczy, opisy pól formularza
label / label-s	Etykiety pól, przycisków, kontrolek — waga 500 odróżnia je od body-* przy tym samym rozmiarze
caption	Metadane, znaczniki czasu, etykiety badge’y