Wybierz fonty i kolory, sprawdź kontrast WCAG i obejrzyj komponenty na żywo. Na końcu pobierz gotowe zmienne CSS, konfigurację Tailwind, tokeny JSON albo prompt dla AI.
01 · Typografia
Fonty i skala typograficzna
02 · Kolory
Paleta kolorów
Primary
Accent
Neutral
Kontrast WCAG
03 · Komponenty
Podgląd na żywo — jasny i ciemny
Tryb jasny
Tryb ciemny
04 · Eksport
Konfiguracja i eksport
Zanim napiszesz pierwszą linijkę CSS
Czym jest design system i po co go generować?
Design system to jeden spójny zestaw decyzji projektowych — kolory, typografia, odstępy, zaokrąglenia — zapisany jako tokeny projektowe, z których korzysta cały interfejs. Bez niego każdy przycisk i każda karta dostają kolory „na oko", a projekt po kilku tygodniach wygląda jak zlepek pięciu różnych stron.
Ten generator skraca pierwszy etap do kilku minut: wybierasz dwa fonty z Google Fonts, kolor primary i accent, a narzędzie buduje z nich pełne skale odcieni (50–700), neutralną skalę szarości oraz mapowanie na tryb jasny i ciemny. Kontrast każdej kluczowej pary kolorów jest od razu sprawdzany według WCAG 2.1 (progi AA i AAA), a podgląd komponentów pokazuje, jak system wygląda w praktyce.
Wynik zabierasz w formacie, którego używasz na co dzień: zmienne CSS gotowe do wklejenia, konfiguracja Tailwind, tokeny JSON (format W3C Design Tokens) albo prompt dla AI — np. dla Claude — który wygeneruje komponenty zgodne z Twoim systemem. Wszystko liczy się w przeglądarce; żadne dane nie są nigdzie wysyłane.
Najczęstsze pytania
Jak wygenerować paletę kolorów dla strony internetowej?
Wybierz jedną z gotowych palet albo wskaż własny kolor primary i accent. Generator zbuduje z nich pełne skale odcieni 50–700 oraz neutralną skalę szarości, dopasowane do trybu jasnego i ciemnego. Każdą kluczową parę kolorów narzędzie sprawdza pod kątem kontrastu WCAG.
Czy wygenerowany design system jest dostępny (WCAG)?
Generator liczy współczynnik kontrastu dla tekstu na kolorze primary i accent oraz dla tekstu na jasnym i ciemnym tle, i oznacza wyniki znaczkami AA (4.5:1), AA Large (3:1) i AAA (7:1). Jeśli któraś para nie przechodzi, wystarczy przesunąć kolor bazowy — wynik przelicza się na żywo.
W jakich formatach mogę pobrać design system?
Do wyboru są cztery formaty: zmienne CSS (custom properties z obsługą trybu jasnego i ciemnego), konfiguracja Tailwind CSS, tokeny JSON w formacie W3C Design Tokens oraz prompt dla AI, który opisuje cały system i prosi o wygenerowanie komponentów.
Czy narzędzie jest darmowe i co się dzieje z moimi danymi?
Tak, narzędzie jest w pełni darmowe i nie wymaga rejestracji. Cała logika działa w przeglądarce — konfiguracja jest zapisywana wyłącznie lokalnie (localStorage), a link do udostępniania koduje ustawienia w adresie URL. Nic nie jest wysyłane na żaden serwer.