Palette colori
Colori interattivi (primario/secondario con i loro stati) e colori neutri/di sfondo definiti come custom
property in :root.
Interactive — Primary
Interactive — Secondary
Neutral & background
Overlay su sfondo immagine — .bg-overlay
Sfumatura verticale — .bg-gradient
Tipografia
Scale per display, heading, text ed eyebrow. Font family reale del sito non inclusa nel CSS pubblico
(variabile --site-font-family non definita): qui sostituita con Inter per la demo.
Display
Display LG — Aa
.display-lg · 52px / 700
Display MD — Aa
.display-md · 48px / 700
Heading
Heading XL — Team System
.h-xl · 40px / 700
Heading LG — Team System
.h-lg · 32px / 700
Heading MD — Team System
.h-md · 24px / 700
Heading SM — Team System
.h-sm · 20px / 700
Heading XS — Team System
.h-xs · 18px / 700
Heading 2XS — Team System
.h-2xs · 16px / 700
Text
Text 2XL — Il testo del paragrafo
.t-2xl · 24px / 400
Text XL — Il testo del paragrafo
.t-xl · 20px / 400
Text LG — Il testo del paragrafo
.t-lg · 18px / 400
Text MD — Il testo del paragrafo
.t-md · 16px / 400
Text SM — Il testo del paragrafo
.t-sm · 14px / 400
Eyebrow & utility text
Eyebrow large
.eyebrow-lg · 18px / 500 / uppercase
Eyebrow medium
.eyebrow-md · 16px / 500 / uppercase
Eyebrow small
.eyebrow-sm · 14px / 500 / uppercase
.t-pri testo colore primario
.t-pri
.t-sec testo colore secondario
.t-sec
.t-new etichetta "novità"
.t-new
Scala spaziature
Usata da utility come .p-*, .m-*, .vgap-*, .hgap-*.
3xl · 80px
2xl · 64px
xl · 52px
lg · 48px
md · 40px
sm · 32px
xs · 24px
2xs · 16px
3xs · 12px
4xs · 8px
5xs · 4px
Border radius
Raggi predefiniti applicabili a immagini o contenitori (.rnd-*).