2.3 · Identyfikacja

Typografia

Krój Satoshi w komunikacji cyfrowej, hierarchia i interlinia tekstu, wyrównanie oraz granica między krojem tekstu a krojem logotypu. Korzystaj przy projektowaniu stron, interfejsów i materiałów z tekstem.

Wersja 2026.1Aktualizacja 2026-10-06 Markdown

Tekst Refindi ma być przede wszystkim czytelny — zasada z brandbooka brzmi „czytelność = funkcjonalność”: dobrze złożony tekst informuje, prowadzi i nie przeszkadza. Obecny system cyfrowy opiera się na jednym kroju — Satoshi — w kilku grubościach. Kroje z brandbooka 2025 (Kumbh Sans, Inter) są historyczne, a Mazzard H żyje wyłącznie w logotypie.

Krój

Satoshi (Fontshare) to jedyny krój tekstowy witryny. Fakty z repozytorium refindi-concierge-web:

import: src/index.css, linia 2 — https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap; index.html ma preconnect do api.fontshare.com i cdn.fontshare.com;
wagi ładowane: 300, 400, 500, 700, 900;
rodziny w tailwind.config.ts: sans, heading i body = ["Satoshi", "sans-serif"]; zmienna --font-family: 'Satoshi', sans-serif w src/index.css;
w repo nie ma lokalnych plików fontu (public/fonts nie istnieje) — font pochodzi z CDN.

Mazzard H Semibold — krój, na którym narysowano logotyp. Nie jest dystrybuowany i nie służy do składu (zob. Logo).

Musi
W komunikacji cyfrowej — witryna, interfejsy, materiały marketingowe online — używaj kroju Satoshi.
Nie wolno
Mazzard H Semibold występuje wyłącznie w pliku logo — nie składaj nim nagłówków, tekstu ani elementów UI.
Unikaj
Nie używaj Kumbh Sans ani Inter w nowych materiałach — to kroje poprzedniego systemu.
PowinnoDo weryfikacji
Gdy nie da się osadzić Satoshi (np. e-mail, dokumenty Office), stosuj systemowy krój bezszeryfowy; konkretny zamiennik do ustalenia.

Refindi Guidelines2.3.a · Typografia · krójv2026.1

2.3.a

Satoshi — jedyny krój tekstowy

Jeden krój bezszeryfowy w kilku grubościach buduje całą hierarchię witryny. Linie metryk pokazują, na czym opiera się skład: wysokość x decyduje o czytelności małych stopni, a wysokość wersalików i wydłużenia — o tym, jak ciasno można złożyć nagłówek.

Krój tekstowy marki

Satoshi

Źródło: Fontshare (CDN), bez plików lokalnych
Wagi ładowane: 300 · 400 · 500 · 700 · 900
Rodziny w Tailwind: sans · heading · body
Zamiennik: sans-serif — krój do ustalenia

Wydłużenie górne: —; b d h l · pomiar po załadowaniu fontu
Wysokość wersalików: —; H E · pomiar po załadowaniu fontu
Wysokość x: —; x z · pomiar po załadowaniu fontu
Linia bazowa: 0; punkt odniesienia
Wydłużenie dolne: —; p q · pomiar po załadowaniu fontu

Satoshi jeszcze się nie załadował albo przeglądarka nie udostępnia metryk — linie pokazują położenie przybliżone, bez liczb.

Źródło: src/index.css (import Fontshare), tailwind.config.ts (sans, heading, body = Satoshi, sans-serif). Mazzard H — wyłącznie w pliku logo.

Refindi Guidelines2.3.b · Typografia · znaki i wagiv2026.1

2.3.b

Zestaw znaków i drabina wag

Najedź na znak lub przejdź po nich klawiszem Tab, aby zobaczyć go w dużym stopniu i w wybranej wadze. Polskie znaki diakrytyczne są częścią kroju — nie podmieniaj ich innym fontem.

Podgląd znaku

U+0104Satoshi Bold 700

Wersaliki

Minuskuły

Cyfry

Polskie znaki

Drabina wag

Ładowane z Fontshare: 300, 400, 500, 700, 900

300Zażółć gęślą jaźńLight · font-light
400Zażółć gęślą jaźńRegular · font-normal
500Zażółć gęślą jaźńMedium · font-medium
lead pod H1, akapit (styl bazowy)
600Zażółć gęślą jaźńSemibold · font-semibold
nie ładowana przeglądarka podstawia 700
nadtytuł, przycisk
700Zażółć gęślą jaźńBold · font-bold
H1 hero, nagłówki sekcji
900Zażółć gęślą jaźńBlack · font-black

Waga 600 nie jest ładowana, a interfejs używa font-semibold — powyższy wiersz 600 renderuje się więc jako 700. Decyzja (dociągnąć 600 czy zastąpić 500/700) czeka w otwartych kwestiach.

Błędnie· wszyscy
Nagłówek złożony krojem logotypu
Nagłówek kampanii złożony Mazzard H, żeby „pasował do logo” — krój logotypu nie jest krojem tekstowym marki.

Hierarchia

Wartości odczytane z kodu stron głównych (stan repo e7d7db44):

Element	Wielkość	Grubość	Interlinia / tracking	Kolor	Źródło
H1 hero, strona główna	30 → 36 → 48 px (mobile → desktop)	700	`leading-tight`, `tracking-tight`	#292929, akcent #FF9E6D	`src/index.css` (h1), `src/pages/NewB2C.tsx`
H1 hero, /dla-biznesu	37 → 44 → do 66 px	700	1,05 / −0,01 em	#151515, akcent #FFAE84	`src/pages/Business.tsx`
Nagłówek sekcji	clamp(40 px, 10,5 vw, 55 px) lub 55 px	700	1,1	#151515	`src/components/business/*`, `NewB2C.tsx`
Nadtytuł	12 px (14 px desktop)	600	0,2 em, wersaliki	brzoskwinia (`text-refindi-peach`)	`NewB2C.tsx`, `Business.tsx`
Lead pod H1	15 → 17 px	500	1,35	`text-muted-foreground`	`Business.tsx`
Akapit (styl bazowy)	15 px	500	1,45	dziedziczony	`src/index.css` (p)
Przycisk	14–15 px	600	1,3	biały na błękicie / #3A3A3A na #E9E8E6	`Business.tsx`, `SiteHeader.tsx`

Skala tokenów w tailwind.config.ts (hero, h1 3 rem/1,05–1,1/700/−0,02 em; h2 2,25 rem/1,15/500; h3 1,5 rem/1,3/500; body 1 rem/1,6; body-lg 1,125 rem/1,6; button 1 rem/1,5/600; caption 0,875 rem/1,5) istnieje, ale nowe sekcje rzadko z niej korzystają — ujednolicenie jest otwartą kwestią.

Zasada z PDF pozostaje aktualna niezależnie od kroju: hierarchia wynika z relacji wielkości. Nagłówek jest punktem odniesienia, lead i tekst główny są jego ułamkami, a odstępy rosną proporcjonalnie do layoutu.

Powinno
Nagłówki składaj pogrubione (700), z lekko zawężonym światłem (−0,01 do −0,02 em) i ciasną interlinią ok. 1,05–1,15.
Powinno
Hierarchię buduj wielkością i grubością, nie liczbą krojów: jeden krój, nagłówek wyraźnie większy od leadu, lead od tekstu głównego.
Można
Nad nagłówkiem sekcji możesz postawić nadtytuł: krótkie wersaliki, półgruby, szeroko rozstrzelony (0,2 em), w kolorze brzoskwiniowym.
MożnaDo weryfikacji
W materiałach statycznych możesz wyznaczać wielkości od nagłówka: lead ½–⅔, tekst główny ¼–½, podpisy i etykiety ⅕–⅓ wielkości nagłówka; odstęp nagłówek–lead X, lead–tekst X–2X.

Refindi Guidelines2.3.c · Typografia · hierarchiav2026.1

2.3.c

Skala i hierarchia

Hierarchię buduje wielkość i grubość jednego kroju. Przełącz widok, aby zobaczyć, jak zmieniają się stopnie: H1 hero rośnie od 37 px do wartości liczonej z clamp(). Kreski po prawej wymiarują wysokość linii (wielkość × interlinia).

Progi: sm 640 px · lg 1024 px

Wartości w komponentach witryny

hero-h1
Business.tsx
Nagłówek hero
60,5 px · lh 1,05 = 63,5 px
700 · -0.01em
clamp(2.75rem, min(4.2vw, 7.2vh), 4.125rem) przy 1440×900
section-h2
sekcje /pl/dla-biznesu
Nagłówek sekcji
55 px · lh 1,10 = 60,5 px
700
clamp(40px, 10.5vw, 55px)
body
Business.tsx hero subtitle; tailwind body 1rem/1.6
Lead pod nagłówkiem hero
17 px · lh 1,35 = 23 px
500
17px (lg)
eyebrow
Business.tsx
Nadtytuł
14 px · lh —
600 (render 700) · 0.2em
14px (lg)
button
Business.tsx CTA
Etykieta przycisku
15 px · lh 1,30 = 19,5 px
600 (render 700)
15px (lg)

Skala tokenów tailwind.config.ts — istnieje, rzadko używana

h1
tailwind fontSize.h1
Token h1
48 px · lh 1,10 = 52,8 px
700 · -0.02em
3rem
h2
tailwind fontSize.h2
Token h2
36 px · lh 1,15 = 41,4 px
500 · -0.01em
2.25rem
h3
tailwind fontSize.h3
Token h3
24 px · lh 1,30 = 31,2 px
500
1.5rem

Kompozycja · Desktop 1440

Nadtytuł sekcji

Nagłówek hero
z akcentem

Lead rozwija nagłówek jednym, dwoma zdaniami — krótko i konkretnie.

Relacje wielkości względem nagłówka (PDF s. 54)

do weryfikacji

Lead ½–⅔
witryna 0,28 · lead 17 / H1 60,5
Tekst główny ¼–½
witryna 0,25 · akapit 15 / H1 60,5
Podpisy, etykiety ⅕–⅓
witryna 0,23 · nadtytuł 14 / H1 60,5

Szary pas — zakres z PDF dla materiałów statycznych (ułamek wielkości nagłówka). Kropka — relacja w witrynie dla wybranego widoku, tylko do porównania; reguła nie dotyczy interfejsu wprost.

Źródło: content/tokens.yaml → typography.scale (Business.tsx, sekcje /pl/dla-biznesu, tailwind fontSize). Desktop liczony dla okna 1440 × 900.

Przykład· wszyscy
Nagłówek hero z akcentem
Strona główna: wyśrodkowany nagłówek h1 w Satoshi Bold, dwie linie — pierwsza w ciemnym neutralnym, druga w brzoskwini (#FF9E6D). Pod spodem pole wyszukiwania z błękitnym przyciskiem.
Przykład· wszyscy
Nadtytuł i nagłówek sekcji
Mały brzoskwiniowy nadtytuł wersalikami (12 px, półgruby, rozstrzelony), pod nim duży nagłówek sekcji (40–55 px, Bold, interlinia 1,1, kolor #151515), dalej krótki lead w kolorze stonowanym.
Przykład· wszyscyDo weryfikacji
Relacje wielkości — schemat z PDF
Schemat proporcji: brzoskwiniowy NADTYTUŁ, Nagłówek (1:1), Lead (½–⅔), Body (¼–½), z odstępami X i X–2X. Złożony historycznym krojem Kumbh Sans — ilustruje proporcje, nie krój.

Interlinia

Krótkie, duże teksty (nagłówki) składamy ciasno, dłuższe — luźniej. Nagłówki w kodzie mają 1,05–1,15, co odpowiada zaleceniu PDF (100–110%). Dla tekstu głównego kod stosuje 1,45–1,6, czyli więcej niż 120–140% z PDF; w przyciskach etykieta ma 1,3, a nie 100%. Do czasu decyzji trzymaj się wartości z kodu w digital i wartości z PDF w druku.

PowinnoDo weryfikacji
Interlinię dobieraj do funkcji: nagłówki 100–110%, lead 120–130%, tekst główny 120–140%, przyciski i podpisy bez dodatkowego światła.

Refindi Guidelines2.3.d · Typografia · interliniav2026.1

2.3.d

Interlinia według funkcji

Krótkie, duże teksty składamy ciasno, dłuższe — luźniej. Pasy pokazują kolejne linie tekstu, brzoskwiniowa kreska — linię bazową. Zmieniaj interlinię i porównaj wartości z kodu i z PDF.

Nagłówek · 700

Czytelność = funkcjonalność

1,05 — H1 hero w kodzie

Akapit · 15 px · 500

Tekst Refindi ma być przede wszystkim czytelny — zasada z brandbooka brzmi „czytelność = funkcjonalność”: dobrze złożony tekst informuje, prowadzi i nie przeszkadza. Krótkie, duże teksty składamy ciasno, dłuższe — luźniej.

1,45 — akapit (styl bazowy p) w kodzie

PDF s. 53 kod witryny

Nagłówki
Lead
Tekst główny
Przyciski
1,01,11,21,31,41,51,6

Do czasu decyzji: w digital wartości z kodu, w druku wartości z PDF (s. 53).

Wyrównanie

Tekst wyrównujemy do lewej i osadzamy w siatce modułowej (najczęściej 6–12 kolumn). Witryna centruje krótkie bloki wprowadzające — hero i nagłówki sekcji — ale dłuższy tekst czytamy zawsze od lewej krawędzi. Siatki opisuje temat Kompozycja.

Powinno
Domyślnie wyrównuj tekst do lewej — nagłówki, leady i akapity — w obrębie siatki modułowej. Wyśrodkowanie stosuj w krótkich blokach: hero i nagłówkach sekcji.

Historia

Brandbook 2025 (s. 47–55) wskazywał:

Kumbh Sans jako krój główny (Bold dla h1, Medium dla h2, Regular dla tekstu; Google Fonts, wagi 300–700, licencja OFL),
Inter jako krój zastępczy dla e-maili, dokumentów Office i aplikacji natywnych,
wielkości w punktach dla druku (nagłówek 36–40 pt, lead 20–24 pt, tekst 14–18 pt, podpisy 8–13 pt).
claim „5-gwiazdkowa obsługa RZECZY znalezionych” składany Kumbh Sans Bold z interlinią 110% (s. 12) — w obecnym kroju interlinia claimu nie jest określona (zob. Hasła i copy).

Te kroje i wartości nie są już normą. Zachowane zostały zasady niezależne od kroju: proporcje hierarchii, interlinia według funkcji tekstu, wyrównanie do lewej i reguła „czytelność = funkcjonalność”.

Załączniki

Pod każdym przyciskiem pobierania — zasady użycia pliku w Markdown.

Tokeny UI — JSON

JSON · obecny system digital
JSON · 9 KB · v2026.1

Kolory, typografia, kształty (squircle), cienie, ruch i układ obecnej witryny Refindi, każda wartość ze ścieżką źródłową w kodzie.

Pobierz Zasady użycia — Markdown (.md)

Cały temat w Markdown (.md)Wszystkie pliki

Do rozstrzygnięcia (6) — rejestr redakcyjny, nie norma

PDF wyznaczał jeden krój dla całej komunikacji (Kumbh Sans). Obecny system (Satoshi) jest potwierdzony tylko w digital. Ustalić krój dla druku, dokumentów Office i e-maili oraz licencję Satoshi (Fontshare) na te zastosowania. (PDF s. 49, 51)
Brak zdefiniowanego fontu zastępczego. PDF wskazywał Inter (s. 51); kod ma tylko generyczny fallback „sans-serif”. (PDF s. 51)
Satoshi ładowany z Fontshare w wagach 300, 400, 500, 700, 900, a interfejs szeroko używa font-semibold (600) — przeglądarka podstawia sąsiednią wagę. Ustalić, czy 600 ma być dociągnięta, czy zastąpiona 500/700. (PDF s. -)
Skala w tailwind.config.ts (hero/h1 48 px, h2 36 px, h3 24 px, body 16 px/1,6) jest rzadko używana; strony główne mają wartości wpisane w komponentach (np. nagłówki sekcji clamp(40px, 10.5vw, 55px)/1,1, h1 /dla-biznesu do 66 px/1,05, akapit 15 px/1,45). Potrzebna jedna skala tokenów. (PDF s. 54)
Interlinia z PDF (body 120–140%, przyciski 100%) różni się od kodu (akapit 1,45, token body 1,6, przyciski 1,3–1,5). Zdecydować, która wartość obowiązuje. (PDF s. 53)
Kolor nagłówków w kodzie nie jest jednolity: #292929 (style bazowe h1–h3 w src/index.css), #151515 (sekcje nowych stron), token foreground hsl(193 55% 13%). (PDF s. -)