Branding
Alege o culoare de brand. Vezi-o ca design system pentru lumină și întuneric, verifică contrastul și copiază CSS-ul într-un repo.
Lumină
Textul de bază stă pe fundal. Trebuie să rămână lizibil dintr-o privire.
Text secundar pentru descrieri, SKU-uri și ore.
O suprafață, cum ar fi un card sau un câmp.
Întuneric
Textul de bază stă pe fundal. Trebuie să rămână lizibil dintr-o privire.
Text secundar pentru descrieri, SKU-uri și ore.
O suprafață, cum ar fi un card sau un câmp.
50
#f8f2ff
100
#f2e5ff
200
#e5d1fb
300
#d3b5f1
400
#ba95de
500
#a077c5
600
#855ca8
700
#6c468d
800
#543370
900
#3c2252
950
#251235
Textul de bază și etichetele de pe butoane au nevoie de 4,5:1. O pereche între 3:1 și 4,5:1 ajunge doar pentru text mare. Culoarea butonului are nevoie de 3:1 față de fundal.
Verificări care nu trec — lumină: 1, întuneric: 0.
:root {
--background: #f8f2ff;
--surface: #ffffff;
--foreground: #251235;
--muted: #6c468d;
--border: #e5d1fb;
--primary: #a67dcc;
--primary-foreground: #1c1b19;
--accent: #6c468d;
--success: #157a45;
--success-foreground: #ffffff;
--warning: #f5d061;
--warning-foreground: #1c1b19;
--danger: #b42318;
--danger-foreground: #ffffff;
--brand-50: #f8f2ff;
--brand-100: #f2e5ff;
--brand-200: #e5d1fb;
--brand-300: #d3b5f1;
--brand-400: #ba95de;
--brand-500: #a077c5;
--brand-600: #855ca8;
--brand-700: #6c468d;
--brand-800: #543370;
--brand-900: #3c2252;
--brand-950: #251235;
}
.dark {
--background: #251235;
--surface: #3c2252;
--foreground: #f8f2ff;
--muted: #d3b5f1;
--border: #543370;
--primary: #a67dcc;
--primary-foreground: #1c1b19;
--accent: #d3b5f1;
--success: #157a45;
--success-foreground: #ffffff;
--warning: #f5d061;
--warning-foreground: #1c1b19;
--danger: #b42318;
--danger-foreground: #ffffff;
}