SPORTEX / DESIGN SYSTEM / 01
Mała linia.
Dużo charakteru.
Róż, neon i swoboda ruchu. Wspólny język wizualny dla sportowych butów Sportex.
Jedna rodzina pisma. Trzy grubości.
01 / SPORTEX SYSTEM
Kolory, które robią ruch.
Jasne tło daje oddech. Róż buduje charakter, neon wyróżnia najważniejsze elementy. Na kolorowych tłach używamy ciemnego tekstu.
Pink
#FF77BB / --pink
Green
#B6FF00 / --green
Ink
#171917 / --ink
Canvas
#FAFAF7 / --canvas
Surface
#FFFFFF / --surface
Muted
#62665F / --muted
Line
#DEE2D8 / --line
02 / TIKTOK SANS
Jedna rodzina. Trzy grubości.
Light 300 dla dużych, krótkich tekstów. Normal 400 dla treści. Bold 700 dla nagłówków i przycisków.
Aa Bb 012
Light / 300
Aa Bb 012
Normal / 400
Aa Bb 012
Bold / 700
--text-4xl
Sportex. W swoim tempie.
--text-3xl
Sportex. W swoim tempie.
--text-2xl
Sportex. W swoim tempie.
--text-xl
Sportex. W swoim tempie.
--text-l
Sportex. W swoim tempie.
--text-m
Sportex. W swoim tempie.
--text-s
Sportex. W swoim tempie.
--text-xs
Sportex. W swoim tempie.
03 / SPORTEX SYSTEM
Rytm i przestrzeń.
Jedna płynna skala odstępów od drobnych przerw po oddech między sekcjami. Rozmiary dopasowują się do szerokości ekranu.
--space-2xs
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-2xl
--space-3xl
04 / SPORTEX SYSTEM
Miękkie krawędzie. Lekkie cienie.
Trzy zaokrąglenia: 8 px dla małych powierzchni, 16 px dla kart i pełna pigułka dla przycisków. Domyślnie bez cienia; subtelne uniesienie tylko gdy potrzebna jest hierarchia.
8 px
Zaokrąglenie / small
16 px
Zaokrąglenie / card
999 px
Zaokrąglenie / pill
Bez cienia
Cień subtelny
Cień podniesiony
05 / SPORTEX SYSTEM
Mały zestaw. Spójny efekt.
Jeden podstawowy przycisk i zwykły link tekstowy. Czytelne etykiety, wyraźny fokus klawiatury i wygodne pola kliknięcia.
Przycisk: normalny → neon po najechaniu → obrys przy obsłudze klawiaturą.