Design Operating System

Il nostro Design System

Le fondamenta visive che rendono coerenti tutti i nostri progetti. Token, palette, tipografia, spaziature: aperti e documentati.

Palette di colori

Primary — Terracotta

--primary: 16 71% 42%

IL colore d'azione: CTA, link. 5,3:1 su bianco

Accent — Navy

--accent: 214 52% 25%

Titoli, struttura. 11,3:1 su bianco

Navy profondo

--navy-deep: 213 56% 17%

Sfondi di fasce e footer

Oro acceso

--gold-bright: 41 88% 62%

Cifre solo su sfondi navy

Testo

--foreground: 215 28% 17%

Corpo del testo. 14,7:1 su bianco

Testo secondario

--muted-foreground: 215 14% 40%

Note, didascalie. 6,0:1 su bianco

Rosa

--rose: 14 62% 40%

Palette estesa, riportata alla gamma

Viola

--violet: 214 52% 32%

Palette estesa, riportata alla gamma

Ciano

--cyan: 205 48% 33%

Palette estesa, riportata alla gamma

Oro

--gold: 40 90% 30%

Recensioni, riconoscimenti. ≥ 4,5:1 su bianco

Indaco

--indigo: 213 56% 25%

Palette estesa, riportata alla gamma

Destructive

--destructive: 0 72% 42%

Errori, eliminazione

Tipografia

Display — Outfit Variable

Eleganza tipografica lionese

Titoli, CTA, accenti. 100–900.

Body — Plus Jakarta Sans Variable

Leggibilità ottimale per i paragrafi lunghi, con un ritmo editoriale curato.

Corpo del testo, navigazione, etichette. 200–800.

Elemento	Dimensione (fluida)	Interlinea	Uso
`h1`	clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem)	1.06	Titolo di pagina, prima schermata
`h2`	clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem)	1.14	Titolo di sezione
`h3`	clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem)	1.25	Sottotitolo, card
`h4`	1.125rem	1.35	Titoletto
`h5, h6`	1rem	1.4	Titoli minori
`body`	1rem	1.65	Corpo del testo (Plus Jakarta Sans)
`text-sm`	0.875rem	1.25rem	Testo secondario, note
`text-xs`	0.75rem	1rem	Meta, badge, didascalie

Spaziatura (scala Tailwind)

0.52px

14px

28px

312px

416px

624px

832px

1248px

1664px

2496px

Ombre

shadow-e1

Filetto appena percettibile — campi, chip

shadow-e2

Card a riposo

shadow-e3

Card al passaggio del mouse, pulsanti flottanti

shadow-e4

Finestre di dialogo, pannelli

Utility CSS personalizzate

.glass

Card bianca, filetto sottile, ombra morbida — card, campi

.glass-strong

Stessa superficie, ombra più marcata — dialoghi, intestazioni

.glass-premium

Superficie in evidenza — prima schermata, portfolio

.surface-sunken

Sezione alternata grigio freddo, bordi sfumati su 40 px

.section-y

Ritmo verticale di sezione (--section-y)

.measure

Lunghezza della riga limitata a 68 caratteri

.text-gradient-warm

Campitura terracotta su una parola del titolo

.text-gradient-cool

Campitura navy su una parola del titolo

.cta-gradient

Campitura terracotta + testo --primary-foreground

.section-divider

Filetto di 1 px, sfumato alle due estremità

.card-img-frame

Cornice immagine 16/10, CLS zero, zoom al passaggio del mouse

.spot-card

Bagliore e bordo che seguono il cursore

.btn-glow-fill

Pulsante pieno: riflesso + alone terracotta al passaggio del mouse

.btn-glow-ring

Pulsante con contorno: bordo luminoso al passaggio del mouse

.link-grow

Sottolineatura che si allunga da sinistra

.skip-link

Link di salto, visibile al focus

Anteprima dei componenti

Pulsanti

Badge

PrimarySuccessWarningError

Sfumature

KAYZEN Premium

Ingegneria moderna

Glass Strong

Esempio di card che utilizza la classe .glass-strong.

Un design system riutilizzabile

I tuoi progetti beneficiano di questo design system collaudato. Coerenza visiva, accessibilità e prestazioni sono garantite fin dalla struttura.

Vedi lo stack tecnico Registro delle modifiche Avvia un progetto