Design System — Luglio 2026
Design System
Un sistema, una famiglia di strumenti. Token di colore, scala tipografica e segni condivisi da ogni Espotron: ciò che vedi in questa pagina è generato dagli stessi token che costruiscono il sito.
Colori
Black
#1E1E1E
Brown
#8A797A
Sage
#8BBAAB
Coral
#FF6B3D
Coral Dark
#D2500F
Light Gray
#E2E2E2
Off-White
#F5F5F5
White
#FFFFFF
SEMANTIC — alias 1:1 sui Primitives, i componenti usano SOLO questi
surface
→ Off-White
sfondo pagina
surface-white
→ White
SOLO superficie della card attiva, mai altrove
text
→ Black
testo primario
text/secondary
→ Black · 78%
testo di supporto
text/muted
→ Black · 54%
titoli ghost, didascalie
text/disabled
→ Black · 36%
contenuti ghost — fallisce il contrasto di proposito
accent
→ Coral
SOLO stroke/fill (segnale) — MAI come testo su fondo chiaro
accent-text
→ Coral Dark
quando l'accento deve funzionare come testo (CTA, eyebrow)
support
→ Sage
SOLO segno (dot di stato, poligono radar) — mai testo
border
→ Brown
Bordi dei campi form e contorni funzionali — mai fill, mai testo
I campioni di questa pagina leggono tokens.css: il colore mostrato è il token di produzione.
Tipografia
font/content
Inter
display, titoli, body
font/ui
Geist
nav, link, bottoni, status
font/mono
Geist Mono
label, meta, numeri
Rispondi,
display/64 · Inter Semi Bold · 64/64
Vedi il tuo report
display/48 · Inter Semi Bold · 48/48 — display mobile
Longevity
title/36 · Inter Semi Bold · 36/40
Longevity
title/36-regular · Inter Regular · 36/40
Vedi il tuo report
step/28 · Inter Regular · 28/33
Il laboratorio digitale di Medicinæ
body/20 · Inter Regular · 20/24
meta/20 · Geist Mono Bold · 20/24
Gli strumenti
label/14 · Geist Mono Regular · 14/14
Privacy policy
ui/14 · Geist Regular · 14/14
Inizia il tuo Espotron
ui/14-medium · Geist Medium · 14/14
01
num/128 · Geist Mono Bold · 128/128 · tracking −5%
Segni
line/1 · 0.16
line/2 · 0.22
line/3 · 0.4
Quadrato di stato 16px · support · radius 0 — sempre rinforzo, mai canale unico
Il pieno è grammatica esclusiva delle CTA. Azione secondaria = bordo text + segno direzionale. Disabled = bordo light-gray + label muted.
Dot grid · text al 10%
Motion
MOTION — i componenti usano SOLO questi. Le eccezioni (shake, radar, reveal dell'esito) sono coreografie di un componente, non valori riusabili.
duration/fast
160ms
feedback di pressione, focus dei campi, fade del drawer
duration/base
200ms
hover colore, micro-lift della card attiva, nav sticky, progress bar
duration/slow
350ms
entrata delle sezioni (reveal on scroll)
ease/out
cubic-bezier(0.23, 1, 0.32, 1)
tutto ciò che si muove: nav, card, entrata delle sezioni
ease/base
cubic-bezier(0.25, 0.1, 0.25, 1)
colore e opacità: cambiano senza muoversi
quest/fast
150ms
microinterazioni del flusso del questionario
quest/base
400ms
transizione fra schermate: avanti sale, indietro scende
quest/ease
cubic-bezier(0.2, 0, 0, 1)
curva del flusso — più secca: lì il movimento è struttura
ease/out · duration/base — si muove
ease/base · duration/base — cambia senza muoversi
I due specimen reagiscono al passaggio del mouse. Con prefers-reduced-motion restano fermi.
Due curve, non una. ease/out governa tutto ciò che si muove — è rinforzata di proposito, perché le curve di serie del browser non sembrano una scelta. ease/base governa ciò che cambia restando fermo, colore e opacità, dove una curva direzionale non aggiunge niente. Il flusso del questionario ha una famiglia sua, più lenta e con una curva più secca: lì il movimento non decora, dice dove sei.
SPEC — prefers-reduced-motion spegne i movimenti: del reveal resta il solo fade. Nessuna animazione è mai l'unico canale di un'informazione.
SPEC — qui stanno i token, non le timeline: la coreografia vive in docs/lab-quest-motion-spec.md (esito v1.1, approvata 2026-07-22). I token quest/* sono dichiarati su .quest-form--flow, non in tokens.css (decisione D3).
Radar
Il frame esagonale inciso è costante; il poligono interno è la firma di ogni strumento della famiglia. Generato da radar.js: mai SVG statici, taratura per breakpoint via configurazione.
Brand kit
Wordmark, palette e coppia tipografica per chi deve citare o comporre con il laboratorio. Gli asset scaricabili sono gli stessi in uso sul sito.
Questa pagina legge gli stessi token del sito. Ciò che vedi è il sistema.