--color-primary
#663399
Colore principale per azioni, accenti e riconoscibilità.
Style guide
Questa pagina documenta i token visivi, i componenti base e le estensioni editoriali usate da ABC.
Colori
I token cromatici mantengono il sito sobrio, riconoscibile e leggibile.
--color-accent
#2f8f83
Segnali positivi, evidenze civiche e dettagli di supporto.
--color-background
#fbfaf8
Sfondo generale, caldo ma neutro.
--color-surface
#ffffff
Card, aree di contenuto e campi form.
--color-text
#1f1b24
Testo principale ad alto contrasto.
--color-border
#ddd4e8
Bordi sottili, separatori e contorni dei componenti.
Tipografia
Il font principale è Atkinson Hyperlegible, con fallback di sistema puliti.
Esempio H1: AI per il Bene Comune
Esempio H2: Perché serve parlarne meglio
Esempio H3: Comprendere
Paragrafo: contenuti chiari, accessibili e orientati alla responsabilità civica.
Testo piccolo: aggiornamenti, note e informazioni di servizio.
La chiarezza non riduce la complessità: la rende condivisibile.
Componenti
Le pagine usano sezioni ariose, griglie semplici, card leggere e callout sobri.
Card standard
Adatta a descrivere temi, attività e contenuti ricorrenti.
Card evidenziata
Utile per un messaggio orientativo o una domanda centrale.
Card compatta
Per note brevi e contenuti di supporto.
Non tutto ciò che è tecnicamente possibile è automaticamente desiderabile.
Il callout serve a portare attenzione su un passaggio importante senza renderlo sensazionalistico.
Blog
Il blog estende il sistema esistente senza introdurre un tema separato.
Titolo dell'articolo
Una descrizione breve chiarisce il tema e aiuta a decidere se leggere.
Titoli interni
Il testo degli articoli mantiene una larghezza leggibile, link evidenti e ritmo verticale stabile.
Le citazioni usano la stessa grammatica visiva dei callout: bordo deciso, fondo chiaro, tono sobrio.
- Le liste sono semplici e leggibili.
- I tag restano piccoli e non decorativi.
draft: truePrincipi di design
- Chiarezza prima dell'effetto
- Accessibilità prima della decorazione
- Contenuti leggeri
- Sobrietà visiva
- Compatibilità con siti statici
- Performance e sostenibilità