luce & materia
cd-glow-4 è la sorgente: una sola per pagina. Due fuochi alla stessa intensità e non c'è più una luce, c'è un'illuminazione.
tipografia
Lead di apertura, 19px.
Corpo del testo a peso 300, interlinea 1.65: il chiaro su scuro si dilata e si alleggerisce di un gradino.
Small · nota di supporto.
mono · etichetta · datoazioni & form
Messaggio di errore.
indicatori & stato
Completato
Nota del passo.
In corso
Prossimo
contenitori
Passa il mouse
Sale verso la luce e l'alone segue il puntatore.
Padding ridotto
La stessa card con --tight: per griglie dense e pannelli.
Card con media
210 m² · 5 locali
€ 1.450.000La testimonianza porta il segno dell'accent e apre con le virgolette luminose.
- Piano pricing
- Il glow indica la scelta
Empty state
Uno schermo vuoto è un invito ad agire.
overlay
Aprine uno e porta il cursore sulla parte sfocata: compare un pallino che si dilata e sale sopra la mano diventando il pulsante CLOSE. È un elemento solo — il pallino è la pillola prima di crescere — e chiude come la × in alto. Vale anche per il menu a pillola. Solo con un puntatore vero, e mai sotto un dito.
Dalla 12.0 sta nel livello alto del browser: dentro un contenitore con overflow:hidden non sparisce più, e ai bordi rientra.
consenso
Il banner di questa pagina non è un disegno: ricorda la scelta per 180 giorni, la lega alla versione dell'informativa e blocca davvero — finché non acconsenti, la facciata video in commercio & media resta un segnaposto e nessuna richiesta parte. Da qui lo puoi far tornare quante volte vuoi.
Compare in basso, ancorata al viewport: è lì che sta su un sito vero, e mostrarne una copia qui dentro vorrebbe dire mostrare una cosa che non funziona. Il tasto dimentica la scelta e la richiede da capo.
«Accetta tutto» e «Rifiuta tutto» portano la stessa classe e lo stesso peso, per costruzione: rifiutare non deve costare più che accettare.
Letto da Candela.consentState() e ridisegnato dall'evento cd-consent-change. Accetta o rifiuta e guarda qui: è la stessa memoria che comanda la facciata video.
Il record ha quattro stati, e tre di questi rimettono il banner senza che nessuno lo chieda.
L'ultimo è il motivo per cui il banner porta data-cd-policy: cambiare l'informativa senza richiedere il consenso è raccoglierlo per un testo che nessuno ha letto.
icone
Un attributo solo — <a data-cd-social="instagram"> — e il nome sceglie da sé la tabella: i quindici marchi per i social, i quattro segni di contatto per quello che un marchio non ce l'ha. Il framework disegna l'SVG e, se il collegamento non ha testo, gli mette anche il nome accessibile.
Fino alla 11.0 anche i social erano segni di sistema: dodici tracciati a linea, riquadro 24 e tratto 1.6. Coerenti col resto della famiglia, e sbagliati come marchi — un'Instagram ridisegnata resta un'approssimazione di Instagram. La 11.1 non li ridisegna: li sostituisce con i loghi veri.
Fino alla 11.3 il sistema non ne aveva nessuno: la freccia del select era un bordo CSS ruotato, la × un carattere di testo. Nel markup basta <button data-cd-ico="cestino" aria-label="Elimina">. La freccia si orienta col CSS, non con quattro tracciati.
Questi restano segni disegnati: un indirizzo, un numero e una mappa non hanno un logo da rispettare. Ma hanno una convenzione — arancio la posta, verde il telefono, rosso la mappa, blu il sito — e a colori accesi il disco la indossa. I valori stanno in Candela.iconColors, accanto a quelli dei marchi.
Con i colori accesi il badge è il bottone: il vetro sotto un disco pieno sarebbe un cerchio dentro un cerchio.
marchi e contatti insiemeLe due a destra non hanno un marchio, ma hanno un colore proprio: la fila si accende tutta, senza metà badge pieni e metà cerchi di vetro. Stesso asse a 45 gradi dei quindici, così sembrano parenti invece che due mondi.
accanto al testoL'icona prende la misura dal font-size del collegamento, quindi cresce col testo. Nelle due modalità il glifo resta della stessa misura ottica: accendere i colori non fa saltare la riga.
Il default è mono, e non per prudenza: quindici dischi saturi su un fondo scuro sono quindici buchi di luce che si contendono l'attenzione col contenuto. A colori hanno senso dove sono il contenuto — una pagina contatti, un elenco di profili.
<html data-cd-marchi="colore">
Candela.marchiStile('colore')
Candela.marchiStile() // → 'mono'
L'attributo vale su qualunque antenato, non solo su <html>: metterlo su una sezione accende i colori solo lì.
aggiungerne uno proprioCandela.marchi.spotify = {
g: '<path d="…"/>',
d: ['#1ed760', '#1db954'],
n: 'Spotify' };
Candela.icons.pec = '<path d="…"/>';
Candela.iconNames.pec = 'PEC';
Candela.iconColors.pec = ['#3aa0ff','#0b62c8'];
Il glifo di un marchio va sulla griglia 24 col disco a filo — tools/marchi.mjs ce lo porta da solo. A parità di nome vince il marchio. Un contatto senza iconColors ripiega sull'accent del sito.
forme · testo · documento
I tre pezzi che mancavano perché il sistema reggesse un sito qualunque: un campo che filtra, i controlli nativi di data e ora che parlano la lingua del sistema, e la tipografia per il testo che arriva da un CMS. Più una superficie chiara, per quello che nasce per essere stampato.
Sotto c'è un <input> vero: la tastiera del telefono, il riempimento automatico e l'invio del modulo funzionano. Il valore scelto finisce in un campo nascosto, quindi il modulo si invia da sé. Frecce, Home/End, Invio, Esc, e il conteggio annunciato.
Era l'ultimo controllo nativo che rompeva la lingua, come il campo file prima della 11.0. color-scheme:dark ridisegna anche il calendario a comparsa, che nessun CSS può raggiungere.
segmentatoRadio veri sotto: frecce, gruppo e lettura arrivano dal browser. Il cursore è un solo pseudo-elemento che scorre, non un fondo per ogni voce.
Preventivo 2026/114
Via al Mare 12, Sanremo
| Opere murarie | 12.400 |
| Impianti | 8.900 |
CANDELA è scuro per costruzione, e dalla 12.0 sta scritto fra le regole invece di essere una sorpresa. Resta però il documento: una fattura, un preventivo, una scheda tecnica. .cd-chiaro capovolge i token su un ramo — stessi nomi, altri valori — e toglie il vetro, che senza una sorgente dietro sarebbe latte.
Una sorgente di luce dietro il vetro
Ogni sito ha una pagina che il sistema non copriva: il chi siamo, un articolo, le note legali.
Quel testo esce dal CMS come <h2><p><ul> nudi, e il framework aveva
stili solo per le classi — quindi o si annotava ogni tag a mano, o la pagina più testuale del sito
era l'unica senza tipografia.
- Misura di lettura a 66 caratteri.
- Il distacco sopra un titolo è maggiore di quello sotto.
È l'unico punto del sistema che stila i tag invece delle classi, ed è voluto.
liste, intervalli, selezione
Fino alla 10.10 chip, paginazione e tabella erano gusci: si vedevano e non facevano niente. Qui filtrano, impaginano e ordinano davvero — prova.
Nessun elemento con questi filtri.
Due input veri sovrapposti: ognuno con la sua etichetta e le sue frecce, e non si scavalcano.
fileIl bottone e' quello nativo, stilato con ::file-selector-button: nessun input nascosto sotto un finto bottone. Si puo' anche trascinarci un file.
Clicca un'intestazione per ordinare, spunta delle righe per far comparire la barra.
| Cliente | Stato | Budget | |
|---|---|---|---|
| Elena V. | nuova | € 1.400.000 | |
| Marco B. | in visita | € 780.000 | |
| Sofia R. | richiamata | € 310.000 |
I numeri all'italiana si ordinano da numeri, non da stringhe: 310.000 viene prima di 1.400.000.
dati
| Cliente | Immobile | Stato | Budget |
|---|---|---|---|
| Elena V. | Attico Duomo | nuova | € 1.400.000 |
| Marco B. | Villa Iris | in visita | € 850.000 |
| Sofia R. | Bilocale Porto | persa | € 310.000 |
commercio & media
Con fagiolini e patate.
'%20opacity='.5'/%3E%3C/svg%3E)
prima
dopo
'%20opacity='.45'/%3E%3C/svg%3E)
'%20opacity='.45'/%3E%3C/svg%3E)
'%20opacity='.45'/%3E%3C/svg%3E)
pattern
Il footer qui sotto, la nav in alto, la pageline, lo skip link, il torna-su, il reveal e lo stagger di queste sezioni: tutto è il sistema al lavoro.
impaginazione & utilità
Una sola classe: le colonne si contano da sole. La misura minima si detta con --cd-col.
Restringi la finestra: le colonne calano senza breakpoint scritti a mano.
Le quattro intensità di alone — cd-glow-1..4 — stanno in luce & materia, dove la luce è l'argomento.
Due classi che per definizione non si vedono, e che non si possono mostrare: si dichiarano.
Toglie dallo schermo ma non dagli screen reader. Serve per dire a parole ciò che il colore dice a colpo d'occhio.
Qui accanto ce n'è una: questo testo esiste solo per gli screen reader← uno screen reader la legge, tu no.
Toglie a entrambi. Per lo stato, non per il layout.
Le impaginazioni che prendono la pagina intera
Quattro elementi del sistema non compaiono in questo specimen, e non per dimenticanza: occupano il documento e non si lasciano rimpicciolire senza smettere di essere sé stessi. Mostrarli in miniatura vorrebbe dire mostrare qualcosa che non esiste. Stanno vivi altrove.
| Elemento | Cos'è | Dove vederlo dal vivo |
|---|---|---|
| .cd-app | Guscio applicativo: sidebar più colonna con topbar e .cd-main. Alto quanto la finestra. | template-dashboard.html |
| .cd-hero | Apertura con la sorgente dietro il vetro: --cd-glow-4, una sola per pagina. | starter.html |
| .cd-cookie--fix | Banner ancorato in basso a sinistra: qui coprirebbe lo specimen. | starter.html |
| .cd-hide | Toglie l'elemento a chi guarda e a chi ascolta. Per definizione invisibile. | nessun luogo: è l'assenza |