Kolory

Paleta, role i pary kategorii.

Jeden plik, tylko role

Każdy surowy kolor żyje w jednym pliku tokenów. Komponenty nigdy nie czytają wartości hex ani stopnia palety: czytają rolę, np. primary, muted-foreground albo destructive. Domyślna paleta Tailwinda jest wyłączona, więc koloru spoza systemu nie da się użyć przypadkiem. Zmiana roli to jedna linia, a test end-to-end sprawdza, że dociera do navbara, sidebara i dolnej nawigacji.

Paleta

Chłodna skala neutralna slate, głęboki elektryczny niebieski do każdego hover i fokusu oraz chartreuse jako wypełnienie marki.

slate

50#f8fafc
100#f1f5f9
200#e2e8f0
300#cbd5e1
400#94a3b8
500#64748b
600#475569
700#334155
800#1e293b
900#0f172a
950#020617

deep-blue

50#f3f3ff
100#e6e6ff
300#b5b5ff
400#6c6cff
500#0a0aff
700#040466

chartreuse

500#e1ff01

Role

Rola	Token	Użycie
`background`	`deep-blue-50` #f3f3ff	Tło strony (liliowe). Karty leżą na nim w bieli.
`foreground`	`slate-950` #020617	Nagłówki i tekst główny: 18,3:1 na tle strony.
`foreground-alt`	`slate-700` #334155	Tekst akapitów: 9,4:1 na tle strony.
`muted-foreground`	`slate-600` #475569	Meta i podpowiedzi: 7,6:1 na bieli, 6,9:1 na tle.
`primary`	`chartreuse-500` #e1ff01	Wypełnienie głównej akcji, zawsze z tekstem slate-900 (15,7:1).
`primary-hover`	`deep-blue-500` #0a0aff	Jedyny akcent hover w całym systemie.
`ring`	`deep-blue-400` #6c6cff	Pierścień fokusu; 3,65:1 wobec tła (WCAG 1.4.11 wymaga 3:1).
`destructive`	`red-600` #dc2626	Błędy i akcje nieodwracalne; tekst 4,8:1 na bieli.
`border`	`slate-200` #e2e8f0	Linie podziału wewnątrz powierzchni, zawsze 1 px.
`card`	`white` #ffffff	Powierzchnie: karty, kafle, okna.

Tony statusu

Toasty i alerty mają jeden przepis na ton: tło 50, ramka 200–300, ikona 500–600, tekst 800. Tekst trzyma co najmniej 6,8:1 na swoim tle.

successtekst 6,8:1

warningtekst 6,8:1

errortekst 7,6:1

infotekst 15,7:1

Pary kategorii

Każda kategoria główna ma własne tło i atrament. Kolor idzie za kategorią do każdej kontrolki, która ją wybiera: zakładek, kafli i chipów. Hover i wybór biorą kolor kategorii, nigdy niebieski akcent: ramka w kolorze plus tint 8 % / 12 %, bez pełnego wypełnienia.

Wszystkie zajęcia #e1ff01 / #4e58006,8:1
Wydarzenia #ff004d / #1f010a5,0:1
Miejsca #1ee47a / #0e3f157,1:1
Edukacja #00cbd8 / #0833446,7:1
Sport #44a1ff / #0202337,4:1
Gastronomia #ff8a2f / #3616047,0:1
Sztuka #c978ff / #5007245,5:1
Zdrowie #b0ccf5 / #08234c9,4:1

Główne role tekstu (foreground, foreground-alt, muted-foreground) przechodzą WCAG AA na bieli i na liliowym tle.
Dwie pary są tuż poniżej 4,5:1 na liliowym tle: tekst destructive (4,4:1) i szarość przycisku-linku (4,3:1). Obie przechodzą na bieli, więc należą na karty. Moja rekomendacja: przy następnej rewizji systemu przesunąć je o stopień ciemniej (red-700, slate-600), co zachowa wygląd i da AA wszędzie.
Atramenty kategorii mają 5,0–9,4:1 na swoich tłach, więc napisy na kolorowych chipach są czytelne.
Kolor nigdy nie niesie znaczenia sam: błąd ma też ikonę i komunikat, aktywna zakładka też aria-current.