// componenti
Design system
Colori, tipografia, pulsanti, campi e superfici usati nel sito, tutti con le classi reali. Cambia tema dall’interruttore in alto per vedere la versione chiara.
Colori
Token in @theme di main.css. Nel tema chiaro white diventa l’inchiostro e gli slate si invertono.
Brand
ink
#060b1f
Sfondo (scuro)
ink-2
#0b1230
Sfondo secondario
iris
#635bff
Primario, focus, selezione
sky
#00d4ff
Link, accenti, prompt
rose
#ff80b5
Tag HTML, secondario
amber
#ff9b51
Secondario caldo
Slate (testi e bordi)
100
#f1f5f9
200
#e2e8f0
300
#cbd5e1
400
#94a3b8
500
#64748b
600
#475569
700
#334155
800
#1e293b
Trasparenze su bianco
white/3.5
white/5
white/10
white/12
white/25
white/40
Stati e testo
Sfumature
Pulsante principale
Pulsante hover (nav)
Testo (.text-gradient)
Ribbon sfondo
Tipografia
Aa
Inter — font-sans
Testi e titoli · pesi 400 500 600 700 800
400 · 500 · 600 · 700 · 800
Aa
JetBrains Mono — font-mono
Eyebrow, etichette, codice, terminale · pesi 400 500
const fab = 10 // 0123456789
Aa
Orbitron — 800
Solo gioco / 404
Aa
Press Start 2P — 400
Solo gioco / 404
Scala
Ruoli
// eyebrow
Titolo di sezione con gradiente
Testo corrente in slate-300, interlinea ampia.
Testo secondario in slate-400.
Nota o didascalia in slate-500.
label · mono 11px
Etichetta di gruppo
Link nel testo (sky, sottolineato)
>_ prompt del terminale
Selezione: testo selezionato
Pulsanti
Primario — .btn-aqua (due misure: normale e .btn-sm)
Menu — .btn-nav (hover rosa/ambra)
Contorno e fantasma
Chip selezionabili (toggle)
Interruttore a due vie (tab) e switch
Icona rotonda
Riga azione (tile) e accordion
Risposta che si apre sotto la domanda.
Campi
Classe base .field: bordo white/10, sfondo ink/60, focus iris.
Messaggio d’errore sotto il campo
Superfici
.glass
Vetro rifrangente, bordo speculare, riflesso al passaggio.
SpotlightCard
Vetro con bagliore sky che segue il cursore.
.glass-lift
Si solleva di 3px al hover.
Card semplice
border white/10 + bg white/5.
.blueprint-card
Carta millimetrata dietro i telefoni.
Isola scura
data-theme="dark": resta scura nel tema chiaro.
Raggi e ombre
rounded-lg
rounded-xl
rounded-2xl
rounded-[2rem]
rounded-full
Testo da Markdown
Icone
<AppIcon name="…" /> — SVG a tratto, prendono currentColor.