Token, componenti e regole del sito. Asset da scaricare e contrasti già misurati.
Quattro decisioni che spiegano tutte le altre.
Colori, dimensioni e spazi vivono solo in assets/cm.css, nel blocco :root. Si cambia lì, cambia ovunque.
Vetro, aloni e sfondo animato sono decorazione: se tolgono leggibilità, vince il testo. Ogni colore è misurato, non scelto a occhio.
Senza JavaScript, senza font e senza consenso ai cookie il sito resta leggibile e navigabile.
Niente script caricati «per sicurezza»: ogni pezzo pesante si scarica al primo clic.
Verde: passa AA. Rosso: mai per il testo. I contrasti sono misurati su fondo #ECEAE4.
--accent sta a 2,38:1: bordi, aloni e sfondi, mai testo. Per il testo di accento c'è --accent-2.
Quattro caratteri, quattro mestieri.
Titoli e interfaccia
Pesi: 500, 600, 700
Corpo del testo
Pesi: 400, 500, 600, 700, 800
Logotipo
Pesi: 400
Dati, etichette, codice
Pesi: 400, 700
h1 per pagina.em nei titoli prende il gradiente --grad-num: una parola, non due.clamp(), tutto è in rem.| Token | Dimensione | Uso |
|---|---|---|
--fs-3xs | 12px | Etichette minime |
--fs-2xs | 13px | Note, didascalie |
--fs-xs | 14px | Meta, chip |
--fs-sm | 15px | Interfaccia secondaria |
--fs-base | 17px | Corpo del testo |
--fs-md | 19px | Lead |
--fs-lg | 20 → 23px | Titoli h4 |
--fs-xl | 23 → 28px | Titoli h3 |
--fs-2xl | 28 → 40px | Titoli h2 |
--fs-3xl | 36 → 60px | Titolo h1 |
Scala da 4 pixel. Se un margine non è nella scala, è sbagliato.
Ogni angolo del sito usa uno di questi valori. Se un raggio non è in scala, è un errore da correggere.
Le ombre non si scrivono a mano. Riposo = livello 3 per le superfici in vetro, hover = livello 4.
.surfaceTutte le card ereditano da qui: vetro, bordo, ombra, sollevamento di 4 px in hover, durata --dur-2. Non si ridefinisce per pagina.
Vetro standard.
Sale di --lift, bordo lilla.
chip badge
Tre forme, tre versioni di colore. Scegli in base al fondo.
La versione principale. Usala ovunque ci sia spazio: intestazioni, documenti, firme, presentazioni. (5246 × 1037)
Quando il nome è già scritto altrove, o quando lo spazio è quadrato: avatar, favicon, icona dell'app, adesivi. (961 × 1037)
Solo la parola. Serve raramente: quando il pittogramma compare già da un'altra parte nella stessa composizione. (3907 × 569)
Contenitore, bande, testata, navigazione, piè di pagina: lo scheletro è sempre lo stesso.
Tutto il contenuto sta dentro un .container: larghezza massima 1160 px, margini automatici, 24 px di respiro ai lati che diventano il margine di sicurezza sui telefoni.
vive in tutte le 43 pagine
Una pagina è una sequenza di .section.
Occhiello, titolo, sottotitolo. Sempre in quest'ordine e sempre con le stesse tre classi: chi arriva alla pagina a metà capisce dove si trova dal solo occhiello.
vive in 15 pagine
Cinque lezioni per percorso: clicca i numeri e scorri il programma.
Tre larghezze: due, tre o quattro colonne.
.hero è la testata della home: più alta, con il titolo che arriva a 54 px. .phero è quella delle pagine interne: stessa struttura, un terzo in meno di altezza.
Capsula di vetro sospesa, incollata in alto quando si scorre.
La barra vera è quella in cima a questa pagina: restringi la finestra sotto i 1100 px e guardala collassare.
Quattro colonne che diventano due sotto gli 800 px, più la riga legale.
Gli elementi minimi. Un solo pulsante primario per schermata.
Un solo pulsante primario per schermata: se tutto è primario, niente lo è.
La freccia dice che si va da qualche parte senza aggiungere una parola.
vive in 26 pagine
.chip per i fatti brevi, .pill per marcare una scheda, .badge per la categoria di un articolo.
Dove sono e come torno indietro. Sono sottolineate, non solo colorate: chi non distingue i colori deve poterle riconoscere lo stesso (WCAG 1.4.1).
vive in 22 pagine
Superfici in vetro con bordo che si illumina. Stessa struttura per servizi, casi, articoli e prezzi.
Quattro varianti sulla stessa superficie di vetro. .crd è quella generica; .svc porta numero e occhiello per gli elenchi di offerta; .stat è il riquadro con la cifra grande; .pcard quella dei percorsi Academy, con badge e icona.
Superficie in vetro. Diventa opaca se il sistema chiede meno trasparenza.
Variante con numero, per gli elenchi di offerta.
EsploraTre schede numerate con occhiello, titolo, promessa e link con freccia.
vive in 7 pagine
Brand, contenuti, campagne.
EsploraSiti, web app, automazioni.
EsploraAcademy e percorsi interni.
EsploraLa card del blog: badge di categoria, titolo, una riga di sintesi, data e tempo di lettura. Va dentro .arts, filtrabile con .filters.
vive in /media e nelle sei rubriche
Tutto quello che sta dentro un articolo del blog: sommario, paragrafi, elenchi puntati, citazione in rilievo.
vive in 20 articoli
Ogni mese il commercialista ti manda un conto economico. C'è una voce che non compare mai.
Costi del personale, materie prime, affitti, utenze: tutto lì, riga per riga.
L'invisibilità non manda una fattura. Manda un conto economico più basso di quello che avrebbe potuto essere.
Le frasi che ruotano una alla volta, con i pallini di posizione.
vive in home
Se nessuno ti conosce, non è un problema di prodotto. È un problema di comunicazione.
È IL COSTO DELL'INVISIBILITÀ
.casequote per le parole del cliente, .pull per quelle di chi scrive.
"Rendere attraente un settore ingessato si può. Serve un brand, un punto di vista e la costanza di pubblicare ogni giorno."
Una tabella scorrevole per i listini, una fisarmonica .expand per le regole che valgono su ogni progetto.
vive in /prezzi
| Cosa | Da | Note |
|---|---|---|
| Restyling del logo | 2.000 € | Una tantum |
| Identità visiva completa | 8.000 € | Una tantum |
| Articoli SEO e GEO | 100 € | Ad articolo |
Intestazioni con scope, didascalia per lo screen reader, e un contenitore che scorre quando la tabella non ci sta.
| Cosa | Da | Note |
|---|---|---|
| Landing page | 1.500 € | Pagina singola |
| Sito multipagina | 3.000 € | Dominio, struttura, impostazione |
I dati si scrivono grandi, senza riquadro, con il gradiente dei numeri.
.statstrip sotto la testata della home, .kstrip nei casi studio, .bignum quando il numero è il messaggio.
I numeri che contano, in scorrimento continuo sotto la testata.
vive in 6 pagine servizio
Per i numeri che si confrontano fra loro.
Cosa succede dopo aver premuto invio. Numerati, brevi, al presente.
Tutto raggiungibile da tastiera, tutto fermo con prefers-reduced-motion.
Tessere che scorrono all'infinito, rallentano al passaggio del mouse e aprono la versione grande.
vive in 4 pagine
Un pannello per volta, con icona nella linguetta.
vive in 5 pagine
Chi sei, per chi, con quali prove.
Con i file sorgente, non solo i PDF.
Pubblicazione continua, non campagne isolate.
Per gli elenchi lunghi in cui chi legge cerca una voce sola. .faqbox è la stessa fisarmonica marcata come FAQPage nei dati strutturati, così le domande possono comparire direttamente nei risultati di ricerca.
Un restyling del logo parte da 4.000 euro, un'identità visiva completa da 8.000.
Da due a tre mesi per un'identità completa.
Pulsanti veri, non finti pulsanti. Quello attivo porta .on e aria-pressed: lo stato non è affidato al solo colore di sfondo.
Focus intrappolato finché è aperta, Esc per chiudere, focus che torna al pulsante di partenza.
Etichette vere, errori scritti, un solo modulo di contatto in tutto il sito.
L'etichetta sta sopra il campo e resta visibile mentre si scrive.
Usato nel pannello dei cookie. Lo stato è leggibile anche da chi non distingue i colori, perché la pallina si sposta.
Errore e conferma non si distinguono solo per il colore: hanno un'icona, un bordo laterale spesso e un testo esplicito.
La banda di chiusura: occhiello, titolo, una riga e i due pulsanti. Il primo apre la modale del modulo.
vive in tutte le pagine principali
Una prima chiacchierata di 30 minuti, ti diciamo se possiamo aiutarti.
Accetta e rifiuta hanno lo stesso peso visivo e la stessa distanza dal dito.
Lo strato decorativo: sfondo ambientale, icone, mascotte Fulvio e le due animazioni ammesse.
Due strati fissi dietro tutto: .liquid, quattro macchie di colore che non si muovono, e .orbz, quattro sfere che derivano lentamente passando per un filtro di rifrazione SVG.
vive in tutte le 43 pagine
<body>, prima di qualsiasi contenuto, e non intercettano il puntatore.La griglia di schede in vetro con marchio a icona, etichetta in monospazio, nome e una riga di spiegazione.
vive in /studio (ecosistema partner)
Una riga sola che dice cosa fa, senza aggettivi.
Stessa lunghezza delle altre: la griglia resta allineata.
La piastrella in vetro che contiene un'icona e si accende di accento al passaggio del mouse: fondo lilla in gradiente, icona bianca, micro-rotazione.
vive in /studio (ecosistema partner), poi ovunque richiamato
Fulvio dice una cosa sola, di lato, e non interrompe la lettura.
vive in 20 articoli
.reveal su un blocco lo fa salire di 18 px quando entra in vista. .reveal-words su un titolo lo compone una parola alla volta e accende quelle elencate in data-highlight.
vive in 36 pagine
WCAG 2.2 AA, verificato con axe-core su tutte le pagine.
--accent non passa: è decorativo.prefers-reduced-motion si ferma tutto il movimento.Token, palette e loghi. Il kit completo contiene tutto.
Questi materiali sono di Confumedia S.R.L. e servono a chi lavora su progetti ConfuMedia. Per altri usi scrivi a dimmi@confumedia.com.
