Design system
CryptoHelvetia Design System
Raccoglie palette, tipografia, componenti e regole visive di CryptoHelvetia, dal rosso brand al tema MI6.
File
design-systems/cryptohelvetia-design.md
Prompt
CryptoHelvetia Design System
Architettura: dark by default, blu notte di fondo, accento rosso.
CryptoHelvetia è dark di default: fondo blu notte, accento rosso acceso, tipografia geometrica Space Grotesk. Su questo si innestano due linguaggi tematici, la palette "tool" per le schede dello stack e il tema MI6 per le sezioni in stile dossier.
I valori qui descritti sono verificati su tokens.json e app/globals.css. Quei file sono il riferimento di implementazione, questo documento li descrive. Quando i due divergono, vince il codice.
Colori di base
Il tema applicato è uno solo, dichiarato sia su :root sia su .dark per coerenza.
| Ruolo | Valore | Note |
|---|---|---|
| Background | #10192b (hsl 221 47% 12%) | Blu notte, fondo dell'app |
| Background secondario | #1a2332 | Superfici sopra il fondo |
| Foreground | #ededed (hsl 0 0% 93%) | Bianco sporco, testo ufficiale |
| Foreground muted | #9ca3af | Testo secondario |
| Primary | #e73b2c (hsl 5 82% 54%) | Rosso di marca |
| Primary foreground | #ffffff | Testo sopra il rosso |
| Muted | hsl 0 0% 15% | Superfici neutre |
| Border | hsl 0 0% 15% | Bordi, di default border-muted-foreground/20 |
| Ring | hsl 5 82% 54% | Focus ring, sul rosso di marca |
Scala primaria
Il rosso di marca ha una scala completa in tokens.json.
| Step | Valore |
|---|---|
| 50 | #fef2f2 |
| 100 | #fee2e2 |
| 200 | #fecaca |
| 300 | #f17f76 |
| 400 | #f06054 |
| 500 | #e73b2c (DEFAULT) |
| 600 | #d03426 |
| 700 | #b02c21 |
| 800 | #8b1a1a |
| 900 | #7f1d1d |
La secondaria è un teal con scala analoga, DEFAULT #14b8a6.
Colori semantici
| Ruolo | Valore |
|---|---|
| Success | #22c55e |
| Warning | #facc15 (testo nero) |
| Info | #0ea5e9 |
| Destructive | #dc2626 |
Palette tool
Usata per le schede dello stack e i quadranti. Vive come variabili CSS in globals.css.
| Token | Valore |
|---|---|
--tool-deep | #0d1428 |
--tool-surface | #111a2d |
--tool-slate | #3f4a69 |
--tool-slate-deep | #252d45 |
--tool-emerald | #23c77b |
--tool-emerald-deep | #0d6f3f |
--tool-teal | #18c1b5 |
--tool-teal-deep | #0d7d78 |
--tool-accent | #f25f4c |
Tipografia
| Famiglia | Stack | Uso |
|---|---|---|
| Sans | Space Grotesk, sans-serif | Default su tutto il body |
| Mono | Courier New, Courier, monospace | Effetti terminale, tema MI6 |
La scala fontSize va da xs (0.75rem) a 4xl (2.25rem), ciascuna con il proprio line-height in tokens.json. Per i titoli delle card esistono utility adattive (.adaptive-card-title, .adaptive-card-title-sm) che scalano con clamp() in base al viewport.
Spaziatura e raggi
Spacing in scala semantica da xs (0.25rem) a 3xl (4rem). Border radius legato a var(--radius), con sm/md/lg derivati e DEFAULT 0.5rem.
Tema MI6
Linguaggio "dossier" applicato con la classe .mi6-theme: fondo nero, font Orbitron in maiuscolo, effetti scanline, glitch, CRT, typing e testo "CLASSIFIED" oscurato.
| Token | Valore |
|---|---|
--mi6-red | #ea2521 |
--mi6-gold | #b08d57 (oro spento) |
--mi6-gray | #9ca3af |
| Background | #000000 |
Quadrant card
Le schede a quadrante (.quadrant-card + .quadrant-bg-*) usano gradienti radiali su lineari, bordo translucido e texture noise. Quattro varianti: gray, success, teal, red. Hover con leggero solleva e scala (translateY(-6px) scale(1.01)).
Animazioni e firme visive
Le particelle di sfondo (.particle) sono cerchi rosso di marca #e73b2c che salgono in loop. Altri tratti ricorrenti: fadeIn per gli ingressi, glow eterei blu-viola sul testo (.text-ethereal-glow) e sul mascotte (.mascot-aura-effect), gradiente animato blu-viola sul bottone menu (.menu-button-gradient).