Un linguaggio pubblico, chiaro e affidabile.
Fondamenti e componenti dell’interfaccia Padova Attiva, costruiti per rendere servizi e informazioni comprensibili, riconoscibili e accessibili.
Chiarezza prima di tutto
Contenuti, gerarchie e azioni devono essere comprensibili anche fuori dal loro contesto.
Accessibilità nativa
Semantica HTML, tastiera e focus sono requisiti di progetto, non rifiniture finali.
Coerenza operativa
Token e componenti condivisi riducono variazioni e comportamenti inattesi.
Fondamenti 01
Colore con responsabilità
Il blu istituzionale guida le azioni e l’orientamento. I colori di stato comunicano sempre insieme a testo o icone, mai da soli.
Primary
#0B3EE3
bg-primaryAccent
#0059B3
bg-accentBackground
Superficie pagina
bg-backgroundCard
Superficie contenuti
bg-cardSuccess
Esito positivo
bg-success-backgroundDestructive
Errore o azione critica
bg-destructiveFondamenti 02
Una voce leggibile
Titillium Web è il carattere primario. La gerarchia combina pesi netti, righe ariose e misure che mantengono leggibilità e reflow.
Aa
Titillium Web
Servizi vicini alle persone
Informazioni facili da trovare
Una misura confortevole e una lunghezza controllata aiutano la lettura di istruzioni e contenuti amministrativi.
Etichette persistenti e azioni esplicite
Fondamenti 03
Forma e profondità misurate
Bordi, raggi e ombre distinguono livelli e gruppi senza trasformare la pagina in una collezione di contenitori.
Raggio
Raggio base: 10 px
Bordo
Separazione discreta delle superfici
Ombra
Solo per elementi sollevati
Fondamenti 04
Icone semplici, significato esplicito
Lucide offre una grammatica coerente. Le icone decorative sono nascoste alle tecnologie assistive; quelle interattive hanno sempre un nome accessibile.
Interfaccia 01
Componenti condivisi
Le primitive riutilizzabili espongono varianti prevedibili e stati coerenti. Qui sono renderizzati i componenti reali del progetto.
Pulsanti
<Button variant="default">Salva</Button>
<Button variant="outline">Annulla</Button>Link con aspetto di pulsante
Vai ai pattern applicativi<ButtonLink href="/servizi" variant="default">
Vai ai servizi
</ButtonLink>Badge
Dialog
Popover
Card
Richiedi assistenza
Invia una richiesta all’ufficio competente.
Caricamento
Interfaccia 02
Tabelle e paginazione
Dati leggibili, intestazioni associate e controlli espliciti. Il riordino tramite trascinamento ha sempre un’alternativa completa da tastiera.
Tabella
| Servizio | Ufficio | Stato |
|---|---|---|
| Cambio di residenza | Anagrafe | Attivo |
| Occupazione suolo pubblico | Commercio | In revisione |
| Iscrizione mensa scolastica | Istruzione | Attivo |
const columns: TableColumn<Service>[] = [
{ key: "name", header: "Servizio", cell: (item) => item.name },
{ key: "office", header: "Ufficio", cell: (item) => item.office },
];
<Table caption="Elenco dei servizi" columns={columns} data={services} />Tabella riordinabile
Trascina la maniglia oppure usa i pulsanti su e giù per cambiare l’ordine.
| Ordine | Servizio | Ufficio | Stato |
|---|---|---|---|
| Cambio di residenza | Anagrafe | Attivo | |
| Occupazione suolo pubblico | Commercio | In revisione | |
| Iscrizione mensa scolastica | Istruzione | Attivo |
<SortableTable
caption="Priorità dei servizi"
columns={columns}
data={services}
onSorted={setServices}
/>Paginazione
<Pagination
page={page}
pageSize={pageSize}
totalItems={87}
onPageChange={setPage}
onPageSizeChange={(size) => {
setPageSize(size);
setPage(0);
}}
/>Interfaccia 03
Caricamento file
La selezione nativa resta sempre disponibile. L’area drag and drop aggiunge comodità senza diventare l’unico modo per allegare un documento.
Input file semplice
PDF, JPG o PNG. Dimensione massima 10 MB.
<FileInput
label="Documento di identità"
name="identityDocument"
accept=".pdf,.jpg,.jpeg,.png"
helpText="PDF, JPG o PNG. Dimensione massima 10 MB."
/>Area drag and drop
Trascina i file oppure usa il pulsante di selezione.
<FileDropzone
label="Allegati"
name="attachments"
accept=".pdf,.jpg,.jpeg,.png"
multiple
helpText="Trascina i file oppure usa il pulsante di selezione."
onFilesSelected={setFiles}
/>Interfaccia 04
Stati e feedback
Ogni cambiamento importante è espresso con linguaggio comprensibile, semantica adeguata e una gerarchia visiva proporzionata.
Interfaccia 05
Form leggibili e correggibili
Le label restano visibili, le istruzioni precedono l’errore e ogni relazione è espressa anche nel markup.
Regole 01
Accessibilità incorporata
La baseline è WCAG 2.1 AA; WCAG 2.2 AA è l’obiettivo ingegneristico. La conformità richiede verifiche sul prodotto rilasciato.
Un solo main e una gerarchia di titoli logica
Navigazione completa da tastiera e focus sempre visibile
Contrasto verificato in ogni stato del componente
Label, aiuti ed errori associati programmaticamente
Reflow fino al 400% senza perdita di informazioni
Movimento non essenziale ridotto su preferenza dell’utente
Regole 02
Pattern applicativi
Le pagine combinano pochi elementi stabili: contesto, azione principale, stato e possibilità di recupero.
Avvia una richiesta
Spiega subito a chi è rivolto il servizio, cosa serve e quanto tempo richiede.
Controlla i dati
Mostra avanzamento, riepilogo e una via chiara per correggere prima dell’invio.