Design system di Ager
L'identità visiva di Ager applicata ai componenti dell'interfaccia. Una base coerente, sobria ed editoriale, da rivedere prima di collegare i dati reali.
Palette
Colori ufficiali del brand. Niente alte saturazioni, niente ombre colorate. Distribuzione consigliata: ~60% neutri, ~25% blu, ≤10% verde, ~5% funzionali.
Colori funzionali
Tipografia
Merriweather per titoli e wordmark, Inter per UI e testo. Gerarchia a livelli: sintesi → contesto → approfondimento.
Capire prima, scorrere dopo
H1 · Titolo di sezione
H2 · Sottotitolo
H3 · Contesto
Il testo di lettura usa Inter a 16px con interlinea ampia, pensato per spiegazioni brevi ma dense. La semplificazione serve a comprendere meglio, non a banalizzare: definiamo i termini chiave e distinguiamo i fatti dalle interpretazioni.
Testo secondario · 14px · metadata e fonti
Didascalia · 12px
Logo
Spazio di rispetto pari al 14% del simbolo. Dimensioni minime digitali: logo completo 120px, icona 32px.
Vietato: ombre o effetti, colori fuori palette, rotazione, deformazione, wordmark con font diverso da Merriweather.
Pulsanti
Primaria in blu, secondaria in verde etico. Le CTA secondarie restano un accento.
Badge
Etichette a bassa saturazione. Il verde segnala fiducia e contesto, l'arancione l'evoluzione, il rosso l'errore.
Superfici e stati
Card, scheletri di caricamento e stati vuoti o di errore, in tono misurato.
Titolo della card
Una breve descrizione di supporto in grigio attenuato.
Nessun contenuto
Non c'è ancora nulla da mostrare qui. Torna più tardi.
Qualcosa non ha funzionato
Non siamo riusciti a caricare i contenuti. Riprova tra poco.
FeedCard
Il componente riutilizzabile del feed: solo titolo, anteprima, fonte, immagine e argomenti. Link-first — nessun corpo dell'articolo. La terza card mostra il segnaposto immagine. Dati di esempio.
La nuova legge sull'acqua: cosa cambia per i comuni e perché conta — apri sull'editore
Il provvedimento ridisegna la governance delle risorse idriche locali. Abbiamo letto il testo e isolato i tre punti che incidono davvero sulla gestione comunale.
Inflazione in calo: i dati ISTAT letti senza allarmismi — apri sull'editore
Il dato mensile scende, ma la lettura richiede contesto. Cosa misura l'indice, cosa no, e perché il carrello della spesa racconta una storia diversa.
Scuola e intelligenza artificiale: le linee guida del ministero — apri sull'editore
Arrivano le indicazioni per l'uso dell'IA in classe. Distinguiamo ciò che è vincolante da ciò che resta una raccomandazione, con esempi concreti.