Design system Percorso

Atelier dei token

Foundations brand Percorso. Terracotta + ottanio + crema + grafite. Fraunces serif display + Inter Tight UI. Tutti i componenti derivano da CSS variables → la libreria white-label li sovrascrive senza toccare struttura.

Palette

bg-background
bg-surface
bg-surface-raised
bg-surface-sunken
bg-primary
bg-accent
bg-success
bg-warning
bg-danger
bg-muted
bg-foreground
bg-border

Tipografia

Display H1 · Fraunces 500

Display H2 · Fraunces 500

Display H3 · Fraunces 500

Body Inter Tight 400. La quick brown fox jumps over the lazy dog. Voglio sentire il calore del primary e la profondita dell'accent ottanio.

Muted: gerarchia testuale secondaria, opacity controllata via colore.

Eyebrow / kicker uppercase
1234,56 € — Currency it-IT tabular
0.123 — tabular numerals

Buttons

Card

Vetrina creator
Workbook PDF · Cucina senza glutine

52 pagine, ricettario completo. Anteprima dei primi 3 capitoli scaricabile.

29,00 €
Ordine #INV-2026-0042
Stato fattura

Cliente: marco@example.com — Italia

Trasmessa al SDIConsegnata
IVA OSS22% IT
Totale35,38 €

Badges

neutralprimaryaccentsuccesswarningdangeroutline

Inputs

Pressable

Skeleton

Libreria white-label preview

Stessa struttura, token primary/accent override. Sotto: due esempi di tematizzazione (color picker + font alternativo).

Tema "Atelier viola"

Libreria di Marta

primary 260, accent 30 — stessi componenti.

Tema "Foresta"

Libreria di Luca

primary 150 verde, accent 20 ambra.