--color-primary
#663399
Colore principale per azioni, accenti e riconoscibilità.
Style guide
Questa pagina documenta i token visivi e i componenti base di ABC – AI per il Bene Comune.
Colori
I token cromatici mantengono il sito sobrio, riconoscibile e leggibile.
--color-primary-dark
#4b2573
Testi interattivi, bordi attivi e stati più decisi.
--color-primary-light
#8f63c7
Accenti leggeri e dettagli secondari.
--color-accent
#2f8f83
Segnali positivi, evidenze civiche e dettagli di supporto.
--color-accent-soft
#dff3ef
Sfondi delicati per callout e messaggi informativi.
--color-background
#fbfaf8
Sfondo generale, caldo ma neutro.
--color-surface
#ffffff
Card, aree di contenuto e campi form.
--color-surface-muted
#f1edf6
Sezioni alternate e fondi discreti.
--color-text
#1f1b24
Testo principale ad alto contrasto.
--color-text-muted
#62596b
Testi secondari, descrizioni e metadati.
--color-border
#ddd4e8
Bordi sottili, separatori e contorni dei componenti.
--color-warning
#b7791f
Avvisi e messaggi che richiedono attenzione.
--color-success
#2f855a
Conferme, esiti positivi e stati completati.
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.
Spaziatura e layout
Le pagine usano un container massimo di circa 1120px, sezioni ariose e griglie semplici.
Container
Sezione
Una sezione crea ritmo verticale e separa i blocchi di contenuto.
Colonna 1
Griglia responsive.
Colonna 2
Tre colonne su schermi ampi.
Colonna 3
Una colonna su mobile.
Elemento in stack
Elemento in stack
Elemento in stack
Bottoni
Le azioni principali sono visibili, sobrie e coerenti con il tono del progetto.
Card
Le card raccolgono contenuti brevi senza appesantire la pagina.
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.
Callout
Non tutto ciò che è tecnicamente possibile è automaticamente desiderabile.
Il callout serve a portare attenzione su un passaggio importante senza renderlo sensazionalistico.
Licenze e attribuzione
Il footer rende visibile il modello di licenza senza dipendere da JavaScript o asset esterni.
Attribuzione
Attribuzione consigliata: “ABC – AI per il Bene Comune, https://abc.olisti.co, licensed under CC BY-SA 4.0.”
Documenti
Risorse esterne
Le risorse di terze parti possono avere licenze separate e devono essere documentate in NOTICE.md.
Form minimale per usi futuri
I campi sono pronti per eventuali pagine statiche o integrazioni future.
Principi di design
- Chiarezza prima dell’effetto
- Accessibilità prima della decorazione
- Contenuti leggeri
- Sobrietà visiva
- Compatibilità con siti statici
- Performance e sostenibilità