System kolorów w Design Systemie
System kolorów to fundament każdego Design Systemu. Definiuje paletę, role semantyczne kolorów i zasady ich stosowania w interfejsie.
Co to jest?
System kolorów w Design Systemie to uporządkowany zbiór kolorów z jasno określonymi rolami i zasadami użycia. Obejmuje paletę bazową (surowe wartości kolorów), kolory semantyczne (primary, secondary, error, success), kolory powierzchni (surface, background) i kolory tekstu. Każdy kolor ma określony kontekst użycia i kontrast względem tła.
Jak to działa?
Paleta bazowa zawiera pełne spektrum odcieni każdego koloru (np. blue-50 do blue-900). Z palety bazowej tworzy się role semantyczne: primary (główny akcent), secondary, error (błędy), warning (ostrzeżenia), success (potwierdzenia), info (informacje). Każda rola ma warianty: base, hover, active, disabled. System musi zapewniać kontrast WCAG AA (4.5:1 dla tekstu, 3:1 dla dużego tekstu).
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Material Design 3 generuje dynamiczne palety z jednego koloru seed za pomocą algorytmu HCT. Carbon IBM oferuje 4 gotowe motywy (White, Gray 10, Gray 90, Gray 100) z pełną paletą 16 odcieni na kolor. Tailwind CSS definiuje 22 kolory z 11 odcieniami każdy (50–950).