Design system · v1.0

Immagini & codice

Fondamenta visive e componenti del sito, pronte per essere ricreate come variabili, stili e componenti in Figma.

Colori

Pitch Black Forest

color/forest
#012F25

Yippie Ya Yellow

color/paper
#FAF2A0

Orange Popsicle

color/accent
#FC7D14

Le coppie base sono verde su giallo e giallo su verde. L’arancio compare esclusivamente su superfici verdi.

Tipografia

Fraunces 700 — Segni e sistemi.

Fraunces 500 — Titolo editoriale

Fraunces 400 — Testo corrente a 16/24, leggibile e letterario.

Spaziatura

8
16
24
32
48
64

Griglia

123456789101112

Componenti

  • Header / Desktop e MobileBrand, navigazione, controllo tema
  • Carousel / Codice e DisegnoSlide, frecce, pausa, puntini, stati focus
  • Article rowNumero, titolo, estratto, categoria e data
  • Portfolio cardImmagine 4:3 e didascalia
  • Tag e Icon buttonDefault, hover, focus e active