/* ══════════════════════════════════════════════════════════════════════════ STUDIO LEGALE LIZZANI — DESIGN TOKENS Sistema "Doppio Registro" · v1.0 · 2026 ────────────────────────────────────────────────────────────────────────── Unica fonte di verità del sistema. Nessun valore cromatico, tipografico o dimensionale deve comparire hard-coded altrove: ogni pagina interna del sito si costruisce esclusivamente componendo questi token. Ogni token cromatico destinato a portare testo è stato verificato WCAG 2.1 contro il fondo più sfavorevole su cui è ammesso. Il rapporto misurato è annotato accanto al token. I token marcati [NON-TESTO] non devono mai ricevere testo: servono solo per bordi, tratti e superfici. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1. FONDI · REGISTRO CHIARO ("Carta") ───────────────────────────────── Nessun bianco puro come fondo di pagina: il bianco puro a schermo intero è abbagliante e appiattisce la gerarchia. La carta calda lascia al bianco puro il ruolo di superficie elevata, così che l'elevazione si legga senza bisogno di ombre. */ --paper: #F7F6F3; --paper-raised: #FFFFFF; --paper-sunken: #EFEDE7; --paper-inset: #E5E2DA; /* ── 2. FONDI · REGISTRO SCURO ("Grafite") ──────────────────────────────── Grafite neutro-freddo, non blu notte. Il blu notte è la firma cromatica del template legale premium; la grafite è quella della strumentazione. */ --graphite-950: #0C0F12; --graphite-900: #12161A; --graphite-850: #171C21; --graphite-800: #1E242A; --graphite-700: #2A3138; /* ── 3. INCHIOSTRO (testo sul registro chiaro) ────────────────────────────*/ --ink-900: #0E1114; /* 17.52:1 su carta — titoli */ --ink-800: #1B2126; /* 15.04:1 — titoli secondari */ --ink-700: #39424A; /* 9.47:1 — CORPO TESTO */ --ink-600: #5A646D; /* 5.59:1 — testo secondario */ --ink-500: #596369; /* 5.69 carta · 5.25 sunken · 4.75 inset */ --ink-300: #9AA2A9; /* [NON-TESTO] tratti forti, icone decorative */ /* ── 4. GESSO (testo sul registro scuro) ──────────────────────────────────*/ --chalk-050: #F2F4F5; /* 16.47:1 su grafite-900 — titoli */ --chalk-200: #D2D8DC; /* 12.63:1 — CORPO TESTO */ --chalk-400: #98A2AA; /* 7.00:1 gr-900 · 6.03:1 gr-800 */ --chalk-600: #848E96; /* 5.44:1 gr-900 · 4.69:1 gr-800 */ --chalk-800: #5C666D; /* [NON-TESTO] tratti su fondo scuro */ /* ── 5. ACCENTO · "Blu di Prussia / Cianotipo" ──────────────────────────── Il blu di Prussia è il pigmento della cianotipia: il colore con cui per un secolo si sono stampati i disegni tecnici e le tavole scientifiche. È il punto esatto in cui architettura e scienza si incontrano — la stessa giuntura su cui lo Studio fonda il proprio posizionamento. Non è il blu corporate (troppo saturo, troppo chiaro) né l'oro (segnale di lusso). Lascia inoltre libere le frequenze rosso/ambra/verde per la semantica del rischio, che in un prodotto di risk intelligence non è negoziabile. */ --blueprint-950: #06222C; --blueprint-900: #0A3444; --blueprint-800: #0D4356; /* 9.94:1 su carta */ --blueprint-700: #0F5468; /* 7.81:1 su carta — ACCENTO PRIMARIO */ --blueprint-600: #17697F; /* 5.78:1 su carta — testo ammesso */ --blueprint-500: #2A8299; /* [NON-TESTO] 4.09:1 — bordi/icone, ≥3:1 */ --blueprint-400: #4F9FB5; /* 6.02:1 su grafite-900 */ --blueprint-300: #7FBDD2; /* 8.75:1 su grafite — ACCENTO SU SCURO */ --blueprint-200: #ADD6E4; /* 11.70:1 su grafite */ --blueprint-100: #D8ECF3; --blueprint-050: #EEF6F9; /* ── 6. RAMPA SEGNALE (esclusiva dei dati di rischio) ───────────────────── Vietata fuori dai componenti dato. Il colore semantico che sconfina nella grafica di marca smette di essere leggibile come semantica. */ --sig-critical: #B23A2E; /* 5.49:1 su carta */ --sig-elevated: #8A6210; /* 5.07:1 su carta */ --sig-stable: #2C6E52; /* 5.62:1 su carta */ --sig-critical-lum: #E68575; /* 6.90:1 gr-900 · 6.51:1 gr-850 */ --sig-elevated-lum: #E0AC4E; /* 8.81:1 gr-900 */ --sig-stable-lum: #6FBF97; /* 8.29:1 gr-900 */ /* ── 7. TRATTI ──────────────────────────────────────────────────────────── Il sistema si regge sui filetti, non sulle ombre. Un filetto è una decisione; un'ombra è un effetto. */ --rule: rgba(14, 17, 20, 0.13); --rule-strong: rgba(14, 17, 20, 0.26); --rule-heavy: rgba(14, 17, 20, 0.52); --rule-dark: rgba(242, 244, 245, 0.11); --rule-dark-strong: rgba(242, 244, 245, 0.24); /* ── 7-bis. BORDI DI CONTROLLO ──────────────────────────────────────────── Distinzione non estetica ma normativa. I filetti qui sopra sono grafici: se non si vedono non si perde informazione. Il perimetro di un campo di testo, di una casella di spunta o di un menu a tendina è invece un "componente d'interfaccia" ai sensi di WCAG 1.4.11 e deve raggiungere 3:1 contro il proprio fondo. Un filetto al 26% di opacità arriva a 1.80:1: bello e non conforme. Questi due token sono opachi — non alfa, perché l'alfa cambia valore col fondo — e sono verificati contro TUTTI i fondi del proprio registro, così che nessun accostamento possa non essere conforme. #787E84 → raised 4.10 · paper 3.80 · sunken 3.51 · inset 3.17 #6D787F → gr-950 4.25 · gr-900 4.02 · gr-850 3.79 · gr-800 3.46 */ --control-line: #787E84; --control-line-dark: #6D787F; /* Fondo opaco di riga in stato di attenzione per le tabelle dati. Opaco e non rgba: dentro una tabella l'alfa si somma alla riga zebrata e produce quattro tinte invece di due. */ --attention-bed: #F6EDE9; --attention-bed-dark: #2A1C18; /* ── 8. TIPOGRAFIA · le tre voci ────────────────────────────────────────── Newsreader — la voce editoriale. Serif da schermo con asse di optical sizing reale: a 78px stringe e affila, a 17px apre e respira. Porta autorevolezza senza il decorativismo dei display serif da template. Instrument Sans — la voce operativa. Grottesco contemporaneo leggermente stretto: la strettezza non è gusto, è funzione. L'italiano corre il 20-30% più lungo dell'inglese e questo carattere restituisce quello spazio senza comprimere il corpo del testo. IBM Plex Mono — la voce normativa. Ogni riferimento di legge è un codice: "art. 844 c.c.", "Reg. UE 2024/1689", "D.P.R. 380/2001". Comporli in monospaziato con cifre tabulari li rende scansionabili e inconfondibili rispetto alla prosa. */ --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Scala tipografica fluida — rapporto ~1.22 in basso, ~1.33 in alto. Il salto si allarga verso il display perché è lì che serve il contrasto di scala; in basso resta stretto perché è lì che serve la gerarchia fine. */ /* Il gradino più piccolo del sistema è 12px, non 11px: la clientela dello Studio comprende family office e materia successoria, cioè lettori per cui un'etichetta di 11px in maiuscoletto spaziato è un ostacolo reale. */ --t-2xs: 0.75rem; /* 12px */ --t-xs: 0.8125rem; /* 13px */ --t-sm: 0.875rem; /* 14px */ --t-md: 0.9375rem; /* 15px */ --t-base: clamp(1rem, 0.970rem + 0.15vw, 1.0625rem); /* 16→17 */ --t-lg: clamp(1.0625rem, 1.000rem + 0.31vw, 1.1875rem); /* 17→19 */ --t-xl: clamp(1.1875rem, 1.075rem + 0.56vw, 1.375rem); /* 19→22 */ --t-2xl: clamp(1.375rem, 1.213rem + 0.81vw, 1.625rem); /* 22→26 */ --t-3xl: clamp(1.625rem, 1.350rem + 1.38vw, 2.125rem); /* 26→34 */ --t-4xl: clamp(2rem, 1.588rem + 2.06vw, 2.75rem); /* 32→44 */ --t-5xl: clamp(2.375rem, 1.688rem + 3.44vw, 3.625rem); /* 38→58 */ --t-6xl: clamp(2.875rem, 1.775rem + 5.50vw, 4.875rem); /* 46→78 */ --lh-flush: 0.94; --lh-tight: 1.06; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed: 1.62; --lh-prose: 1.70; --tr-display: -0.024em; --tr-tight: -0.014em; --tr-normal: 0em; --tr-wide: 0.018em; --tr-mono: 0.07em; /* ── 9. SPAZIATURA · base 4px ─────────────────────────────────────────────*/ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ --sp-40: 10rem; /* 160 */ /* Ritmo verticale delle fasce: cresce con la viewport ma non oltre. */ --band: clamp(4.5rem, 3.2rem + 6.5vw, 8.5rem); --band-tight: clamp(3rem, 2.2rem + 4vw, 5.5rem); /* ── 10. GRIGLIA E MISURE ───────────────────────────────────────────────── La firma strutturale del sistema è la GRIGLIA A DUE BINARI: una colonna di margine stretta che porta numerazione di sezione, riferimenti normativi e metadati in monospaziato, accanto alla colonna principale. È l'impianto del trattato giuridico e del paper scientifico allo stesso tempo. */ --shell: 1380px; --shell-text: 1100px; --gutter: clamp(1.25rem, 0.65rem + 3vw, 3.5rem); --rail: clamp(7rem, 5rem + 6vw, 12.5rem); --rail-gap: clamp(1.5rem, 0.9rem + 3vw, 4rem); --measure: 68ch; --measure-narrow: 54ch; /* ── 11. GEOMETRIA ──────────────────────────────────────────────────────── Raggio 2px: abbastanza per non sembrare brutalista, troppo poco per sembrare uscito da un builder. Il raggio grande è un tic da template. */ --r-0: 0px; --r-1: 2px; --r-2: 3px; --r-full: 999px; --bw: 1px; --bw-2: 2px; /* ── 12. ELEVAZIONE ─────────────────────────────────────────────────────── Sul registro chiaro l'elevazione si esprime col filetto e col cambio di superficie, non con l'ombra. Le due ombre disponibili sono quasi invisibili e servono solo agli elementi che fluttuano davvero (nav, menu, dialog). */ --shadow-0: none; --shadow-1: 0 1px 1px rgba(14,17,20,.03), 0 2px 6px rgba(14,17,20,.035); --shadow-2: 0 1px 2px rgba(14,17,20,.04), 0 10px 28px rgba(14,17,20,.07); --shadow-d1: 0 1px 0 rgba(255,255,255,.035) inset, 0 10px 30px rgba(0,0,0,.42); /* ── 13. MOVIMENTO ──────────────────────────────────────────────────────── Nessuna animazione supera i 340ms e nessuna sposta più di 14px. Il movimento conferma un'azione, non intrattiene. */ --ease: cubic-bezier(.22,.61,.24,1); --ease-out: cubic-bezier(.16,.84,.3,1); --dur-1: 120ms; --dur-2: 190ms; --dur-3: 340ms; /* ── 14. FOCUS ────────────────────────────────────────────────────────────*/ --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--blueprint-600); --focus-ring-dark: 0 0 0 2px var(--graphite-900), 0 0 0 4px var(--blueprint-300); /* ── 15. CHROME ───────────────────────────────────────────────────────────*/ --nav-h: clamp(60px, 56px + 1vw, 74px); --z-nav: 100; --z-drawer: 200; --z-skip: 300; } /* ── Alias di registro ─────────────────────────────────────────────────────── Un componente non sa su quale registro si trova. Legge sempre gli stessi alias; è la fascia che li rimappa. È questo che permette a card, tabelle, badge e form di funzionare identici in chiaro e in scuro senza duplicazione del CSS — e che rende il sistema applicabile alle altre 15 pagine interne senza riscrivere nulla. */ /* ── Marchio dello Studio ───────────────────────────────────────────────────── Valori campionati sul file fornito dallo Studio, non reinterpretati. Un marchio non segue la palette dell'interfaccia: la precede. Vivono quindi fuori dagli alias di registro e non cambiano fra chiaro e scuro. Il blu è [NON-TESTO]: 3.63:1 su carta. Regge come elemento grafico (WCAG 1.4.11, minimo 3:1) e non deve mai portare testo. */ :root { --marchio-navy: #081C36; /* lastra del marchio */ --marchio-grigio: #878881; /* quadrato mediano della «i» di LIZZANI */ --marchio-blu: #3B7AEB; /* quadrato inferiore [NON-TESTO] 3.63:1 */ } :root, .reg-light { --bg: var(--paper); --bg-raised: var(--paper-raised); --bg-sunken: var(--paper-sunken); --bg-inset: var(--paper-inset); --fg: var(--ink-900); --fg-body: var(--ink-700); --fg-soft: var(--ink-600); --fg-mute: var(--ink-500); --fg-faint: var(--ink-300); --line: var(--rule); --line-strong: var(--rule-strong); --ctl-line: var(--control-line); --attention: var(--attention-bed); --accent: var(--blueprint-700); --accent-text: var(--blueprint-800); --accent-line: var(--blueprint-500); --accent-wash: var(--blueprint-050); --on-accent: var(--paper); --ring: var(--focus-ring); --sig-crit: var(--sig-critical); --sig-elev: var(--sig-elevated); --sig-stab: var(--sig-stable); } .reg-dark { --bg: var(--graphite-900); --bg-raised: var(--graphite-850); --bg-sunken: var(--graphite-950); --bg-inset: var(--graphite-800); --fg: var(--chalk-050); --fg-body: var(--chalk-200); --fg-soft: var(--chalk-400); --fg-mute: var(--chalk-600); --fg-faint: var(--chalk-800); --line: var(--rule-dark); --line-strong: var(--rule-dark-strong); --ctl-line: var(--control-line-dark); --attention: var(--attention-bed-dark); --accent: var(--blueprint-300); --accent-text: var(--blueprint-200); --accent-line: var(--blueprint-400); --accent-wash: rgba(127,189,210,.09); --on-accent: var(--graphite-950); --ring: var(--focus-ring-dark); --sig-crit: var(--sig-critical-lum); --sig-elev: var(--sig-elevated-lum); --sig-stab: var(--sig-stable-lum); color-scheme: dark; }