Generator
Design System
Twórz profesjonalne design systemy online. Generuj palety kolorów, skale typografii, spacing i eksportuj do CSS, Tailwind, SCSS lub JSON.
Primary Palette
50
#fcf3f3
100
#f9e6e6
200
#f3c8c8
300
#eb9494
400
#e45858
500
#e01f1f
600
#b41818
700
#901414
800
#6c0f0f
900
#480a0a
950
#2d0606
Secondary Palette
50
#f7f7f8
100
#eeeff1
200
#dadde2
300
#b5bdc9
400
#8b99b1
500
#62789d
600
#4f607d
700
#3f4d64
800
#2f394b
900
#1f2632
950
#14181f
Accent Palette
50
#fdf7f2
100
#fbefe5
200
#f6dbc6
300
#f0ba8e
400
#ec9650
500
#eb7514
600
#bc5d10
700
#964b0d
800
#71380a
900
#4b2507
950
#2f1704
Neutral Palette
50
#f7f7f7
100
#eff0f0
200
#dddedf
300
#babec4
400
#939ca9
500
#6c7c93
600
#576375
700
#454f5e
800
#343b46
900
#23282f
950
#16191d
Kolory Semantyczne
Success
#1abc50
Warning
#f59f0a
Error
#ef4343
Info
#318ae3
Harmonia Kolorów
Komplementarny
#3ee5e5
Analogiczne
Triadyczne
Split-Complementary
Matryca Kontrastu (WCAG)
Aa Tekst Sample
Primary / White
Aa Tekst Sample
Primary / Black
Aa Tekst Sample
White / Primary
Aa Tekst Sample
Secondary / White
Aa Tekst Sample
P-100 / P-800
Aa Tekst Sample
P-900 / P-100
[ O narzędziu ]
Czymjestdesignsystem?
Design system to fundament spójnego projektowania stron internetowych — zestaw zasad, tokenów i komponentów.
System kolorów
Profesjonalne palety kolorów z odcieniami 50–950. Automatycznie generowane harmonie kolorów i matryca kontrastu WCAG dla dostępności.
Skala typografii
Matematycznie spójne rozmiary czcionek oparte na wybranym ratio. Od Minor Third (1.2) po Golden Ratio (1.618) — każda skala tworzy harmonijną hierarchię.
Spacing & komponenty
Spójna skala odstępów oparta na bazowej jednostce. Podgląd komponentów UI: przyciski, formularze, karty, alerty — wszystko z Twoimi tokenami.
[ Formaty eksportu ]
Gotowykoddokażdegoprojektu
Eksportuj design system w formacie pasującym do Twojego stacku technologicznego.
CSS Custom Properties
:root z zmiennymi CSS. Działa natywnie w każdym projekcie webowym bez dodatkowych narzędzi.
--color-primary-500: #e53e3e;Tailwind CSS Config
Gotowa konfiguracja theme.extend. Wklej do tailwind.config.js i korzystaj z klas utility.
primary: { 500: '#e53e3e' }SCSS Variables
Zmienne SCSS ($var: value) dla projektów używających preprocessora CSS z Sass/SCSS.
$color-primary-500: #e53e3e;JSON Design Tokens
Format tokenów Design Tokens W3C. Kompatybilny z Figma Tokens, Style Dictionary i innymi narzędziami.
"primary": { "500": { "value": "#e53e3e" } }Zaprojektujemy Twój
design system
Studio Kalmus tworzy spójne design systemy dla stron internetowych. Projektowanie stron internetowych z własnym UI kit to inwestycja w przyszłość marki.