FASE 4 · VERSIONE 1
Design system.
Precisione condivisa.
Specifica del concept Homepage. Pagine interne e template editoriali restano da progettare dopo l’approvazione.
01 / Colori e identità
#215F7B
#17465D
#172A35
#F0F4F6
#52636D
#B95C00
Bianco #FFFFFF; bordi #CED9DF. Blu digitale coordinato al logo, non presentato come specifica cromatica ufficiale. Logo originale non ricolorato, non ridisegnato e mai deformato. Usarlo su bianco con spazio libero di almeno 16 px.
02 / Tipografia e ritmo
| Token | Desktop | Mobile |
|---|---|---|
| Font | Arial / Helvetica / sans-serif: nessuna dipendenza esterna | |
| Display H1 | 52–90 px, line-height 1.08 | 46–66 px, fluido |
| Heading H2 | 32–54 px, line-height 1.08 | 34.4 px |
| Heading H3 | 27.2 px; progetto principale 36 px | 21–30 px secondo componente |
| Body | 16 px / 1.65; introduzione 18 px desktop, 17 px mobile | |
| Label / metadata | 14 px per azioni; 11–12 px solo metadati secondari | |
| Spacing | Scala: 8, 16, 24, 32, 40, 48, 64, 80, 104 px | |
I titoli non sono tutti maiuscoli. Maiuscole e tracking +0.16em solo per le etichette editoriali. Testi tecnici non abbreviati per motivi estetici.
03 / Griglia responsive
| Viewport | Comportamento |
|---|---|
| Oltre 1050 px | Container massimo 1280 px, margini 56 px. Hero due colonne; settori tre colonne; competenze due colonne. |
| 761–1050 px | Margini 32 px, gap ridotti a 32–40 px; restano due colonne nei contenuti principali. |
| Fino a 760 px | Margini 20 px. Menu espandibile; hero testo prima dell’immagine; CTA primaria a tutta larghezza. Tutti i sei settori in due colonne, tutte le 12 competenze in una. Progetti impilati, nessun carosello. |
| Sezioni | 104 px verticali desktop; 64 px mobile. Sequenza e contenuti invariati: il mobile non perde referenze, metodo o contatti. |
04 / Componenti e naming
| Componente | Regola |
|---|---|
| SiteHeader / MobileNav | Logo a sinistra, nav e CTA a destra. Mobile: button con aria-expanded e aria-controls; Escape chiude e riporta il focus. |
| ButtonPrimary / TextLink | 52 px minimo primario, 44 px link/secondario. Hover più scuro, focus arancio 3 px offset 5 px. Niente animazioni di spostamento. |
| SectionHeading | Indice editoriale, titolo H2 e testo di supporto opzionale. Colonne desktop, pila mobile. |
| SectorCard | Numero, nome e freccia. Fondo al passaggio; stessa struttura per tutti i settori, senza priorità arbitrarie. |
| CompetenceLink | Nome completo, linea divisoria, freccia. Target ampio, nessuna informazione solo al passaggio del mouse. |
| ProjectFeatured / ProjectCard | Foto autentica, disciplina, titolo, località/contesto, CTA. Niente KPI o risultati non documentati. |
| Breadcrumb / Tag | Breadcrumb 14 px, separatore /, ultimo elemento aria-current=page. Tag 11–12 px, fondo grigio chiaro, non interattivo salvo filtri espliciti. |
| ArticleCard | Categoria, titolo, sommario, data solo se disponibile. Nessun articolo pubblicato nel concept: archivio e template dopo approvazione. |
| ContactCTA / SiteFooter | Fondo brand, testo bianco, CTA bianca; dati societari separati dalla navigazione. Email e telefono azionabili. |
Home / Competenze / Nome competenza
05 / Form — specifica per le pagine future
Il concept Homepage usa contatti diretti, non invia form. Per Contatti: nome, email e messaggio obbligatori; azienda e telefono facoltativi. Etichette persistenti, messaggi di errore vicini al campo e riepilogo con focus. Informativa privacy da fornire e validare; nessun consenso marketing preselezionato.
Stati previsti: normale, focus, errore (testo + bordo, mai solo colore), invio in corso, successo solo dopo conferma reale del server. Nessun backend predisposto in questa fase.
06 / Accessibilità e motion
Obiettivo WCAG 2.1 AA, non certificazione. Un H1, sezioni H2, progetti H3; link di salto, testi alternativi, controlli nativi, contenuti leggibili senza hover. Animazioni: transizioni colore di 180 ms; nessun autoplay, parallax o carosello. prefers-reduced-motion elimina transizioni e scorrimento animato.
Da verificare prima della consegna definitiva: navigazione tastiera e screen reader, contrasto di tutti gli stati, zoom testo 200%, reflow a 320 px e contrasto non testuale. Foto esterne da trasferire nell’hosting definitivo e ottimizzare dopo conferma dei diritti.
07 / Contenuti e limiti del concept
- Solo Homepage e specifica: nessuna pagina interna nuova realizzata.
- Competenze e progetti aprono le schede del sito attuale, esplicitamente indicate.
- I sei settori portano alla sezione competenze, senza simulare filtri non ancora progettati.
- Referenze testuali da elenco pubblico; non sono partnership attuali dichiarate. Loghi cliente esclusi.
- Numeri aggregati e news esclusi finché non aggiornati o forniti.
- Metodo riformulato a partire dalle descrizioni pubblicate; nessun processo contrattuale nuovo promesso.
- Privacy, cookie, recruiting, organigramma aggiornato, certificazioni e contenuti editoriali: [CONTENUTO DA CONFERMARE].
- Il logo visibile nell’header è il file originale allegato.
Fonti editoriali
Profilo aziendale ↗ · Servizi ↗ · Clienti ↗
Le fotografie sono quelle associate ai progetti sul sito FAPA: mestieri.jpg, gilardi.jpg, conservatorio-2.jpg. Non sono immagini generate. Validare aggiornamento dei dati e diritti di riuso prima della pubblicazione istituzionale.