Brand Kit
01 / Palette
Palette
PrimarioSfondi, testi, accent — nucleo del sistema visivo
● DARK — #0a0f0a
Background--bg#0a0f0aSfondo base
Background Elev--bg-elev#0f1510Card / hover
Background Panel--bg-panel#121a13Terminale
Foreground--fg#d6ffd6Testo primario
Foreground Dim--fg-dim#7aa582Testo secondario
Foreground Mute--fg-mute#4a6a52Testo disabilitato
Accent--accent#00ff66Highlight, CTA
Accent Dim--accent-dim#00b847Accent attenuato
○ LIGHT — #f3ede2
Background--bg#f3ede2Sfondo base
Background Elev--bg-elev#ece5d7Card / hover
Background Panel--bg-panel#e4dccbTerminale
Foreground--fg#1a1a1aTesto primario
Foreground Dim--fg-dim#4a4a42Testo secondario
Foreground Mute--fg-mute#8a8a80Testo disabilitato
Accent--accent#006b2eHighlight, CTA
Accent Dim--accent-dim#009140Accent attenuato
SecondarioBordi e superfici strutturali
● DARK — #0a0f0a
Border--border#2a3a2eBordo standard
Border Strong--border-strong#3e5744Bordo evidente
○ LIGHT — #f3ede2
Border--border#c9bfa8Bordo standard
Border Strong--border-strong#9c8f74Bordo evidente
StatoColori semantici: avviso, glitch, errore
● DARK — #0a0f0a
Amber--amber#ffb000Stato warning
Magenta--magenta#ff4dffStato glitch
Warning--warning#ff4d4dErrore / alert
○ LIGHT — #f3ede2
Amber--amber#b87500Stato warning
Magenta--magenta#b80080Stato glitch
Warning--warning#c62828Errore / alert
02 / Logo
Logo
1.0×
Courier New — ASCII block logo
ALL SIZES
_
12px_
16px_
20px_
24px_
32px_
40px_
48px_
64px_
80pxALL COLORS
_
accent_
fg_
fg-dim_
amber_
magenta_
white_
black03 / Fonts
Fonts
Display--font-display
VT323
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Titoli display, ASCII, hero
Mono--font-mono
JetBrains Mono
abcdef ABCDEF 0123 ▓▒░ ─┌┐└┘
Terminale, label, codice, mono-xs/sm
Sans--font-sans
Space Grotesk
The quick brown fox jumps over the lazy dog.
Editorial, body, paragraphi long-form
04 / Type Scale
Scala tipografica
VT323 — Display
.h-displayAa — 0123clamp(56px, 10vw, 120px) · Titoli hero enormi
.h-xlAa — 0123clamp(36px, 5vw, 64px) · Titolo sezione
.h-lgAa — 0123clamp(24px, 3.5vw, 40px) · Titolo sotto-sezione
.h-mdAa — 0123clamp(20px, 2.5vw, 28px) · Titolo card / progetto
.h-smAa — 012320px · Titolo piccolo
JetBrains Mono — Monospace
terminal outputABCDEF abcdef 0123 ▓▒░14px · Terminale, corpo
mono-smABCDEF abcdef 0123 ▓▒░13px · Tag, metadati, stack
mono-xsABCDEF abcdef 0123 ▓▒░11px · Badge, chip, etichette uppercase
nav linkABCDEF abcdef 0123 ▓▒░12px · Navigazione
section-labelABCDEF abcdef 0123 ▓▒░11px · Etichetta sezione (uppercase 0.1em)
Space Grotesk — Sans
editorialIl design è funzione, la forma segue il progetto.clamp(18px, 2.2vw, 22px) · Lede, bio, paragrafi hero
bodyIl design è funzione, la forma segue il progetto.15px · Paragrafi standard (.text-dim)
footer descIl design è funzione, la forma segue il progetto.12px · Footer, note, didascalie
05 / Text Styles
Stili testo
.h-displayGENNARO GIORDANO
VT323 · clamp(56–120px) · lh 1
Titolo hero
.h-xlScala tipografica
VT323 · clamp(36–64px) · lh 1
Titolo sezione
.h-lgProgetti selezionati
VT323 · clamp(24–40px) · lh 1.1
Sotto-sezione
.h-mdAltura — Brand Identity
VT323 · clamp(20–28px) · lh 1.2
Titolo card
.h-smMario Rossi
VT323 · 20px · lh 1.3
Titolo piccolo
.editorialFreelance developer & web designer basato a Milano.
Space Grotesk · 18–22px · lh 1.7
Lede / bio
.text-dimInterfacce pulite, veloci, costruite a mano.
Space Grotesk · inherit · fg-dim
Descrizioni
.text-muteMilano · Remoto EU · P.IVA IT09124680630
Space Grotesk · inherit · fg-mute
Meta, note
.text-accent● DISPONIBILE Q3 2026
inherit · var(--accent)
Stato, evidenza
.section-label01 / Progetti selezionati
Mono · 11px · uppercase · ls 0.1em
Etichetta sezione
.mono-smNext.js · TypeScript · Webflow · Figma
JetBrains Mono · 13px · ls 0.06em
Tag, stack
.mono-xsBADGE · META · CONTRACTOR · P.IVA · IT
JetBrains Mono · 11px · uppercase
Badge, chip, etichette
06 / Spacing
Spaziatura
4px
8px
16px
32px
64px
128px