Bianco dominante
Default per pagine e lavoro operativo.
Qoovex visual foundation
Chiarezza, luce e profondità controllata.
Questa è la fondazione visuale Stable v0.1. Il blur mette a fuoco una decisione, non decora l’interfaccia. Palette, componenti e intensità condivise sono il contratto runtime approvato.
Foglio cliente B
“Ricalcolare 24 porzioni”
“Ricalcolare 24 porzioni”
Messaggio brigata
“Quale versione preparo?”
“Quale versione preparo?”
Risotto al limone e timo
- Riso Carnaroli1,92 kg
- Brodo vegetale5,4 l
- Limoni non trattati8 pz
01 · Fondazioni
Carta, ossidiana e segnali rari.
Il bianco sostiene il lavoro, il nero organizza la gerarchia e il colore appare come orientamento o trasformazione. Gli stati funzionali non diventano decorazione.
Scala monocromatica
Dieci passaggi per canvas, testo, bordi e profondità.
Paper 0#FFFFFF
Paper 25#FCFCFB
Paper 50#F7F7F5
Stone 100#EEEEEB
Stone 200#DEDEDA
Stone 400#A4A49E
Stone 600#666662
Ink 800#2A2A28
Ink 900#151514
Ink 950#090909
Accenti sepolti
Ciano e cobalto orientano; albicocca segnala l’output; violetto rifrange senza dominare.
Signal cyan#28C7D9
Signal cobalt#3568E8
Signal apricot#F2A56F
Signal violet#8C6DE8
Stati funzionali
Ogni stato richiede testo o struttura oltre al colore. Il verde non dichiara mai sicurezza alimentare assoluta.
Success#187A4B
Warning#D99A00
Danger#B4232D
Info#2459B3
Focus#315FD6
Dati nitidi
Form, liste e informazioni professionali.
Focus isolato
Una superficie dominante, non una griglia intera.
Contrasto locale
CTA e passaggi intensi, mai dark mode diffuso.
02 · Blur system
Un blur, una funzione.
Ogni preset dichiara cosa mette a fuoco, separa o attenua. Su mobile l’opacità cresce e l’intensità cala; il contenuto resta leggibile anche senza backdrop-filter.
Depth
Subtle
Separazione locale, empty state e highlight quieto.
- Usare: Separazione locale, empty state e highlight quieto.
- Evitare: Non per testo su immagini o liste ripetute.
Depth
Soft
Toolbar, preview singole e superfici leggere.
- Usare: Toolbar, preview singole e superfici leggere.
- Evitare: Non trasforma ogni card in vetro.
Lens
Medium
Pannello focale o onboarding isolato.
- Usare: Pannello focale o onboarding isolato.
- Evitare: Non per dati ad alta densità.
Lens
Strong
Preview isolata e momento hero controllato.
- Usare: Preview isolata e momento hero controllato.
- Evitare: Non per componenti ripetuti.
Narrative depth
Deep
Solo marketing e fondali narrativi.
- Usare: Solo marketing e fondali narrativi.
- Evitare: Vietato nel workspace operativo.
Modal
Glass modal
Overlay quasi opaco; gli input interni restano paper.
- Contratto: nitidezza interna e fallback opaco equivalente.
Focus
Glass focus
Selezione critica; non sostituisce il focus ring.
- Contratto: nitidezza interna e fallback opaco equivalente.
Visual direction lab
Quale vetro deve diventare Qoovex?
Cinque prove non contrattuali sullo stesso contenuto e sullo stesso fondale. Scegli un numero: nessuna di queste varianti entra nella libreria prima della review.
Crystal optical
Centro bianco leggibile e cornice trasparente: nessuna linea separa i due materiali concentrici.
Menu degustazionePronto
Soft frost
Più lattiginoso e calmo. Colore diffuso, contrasto interno stabile e ombra corta.
Menu degustazionePronto
Optical edge
Bordo ottico bianco, highlight interno e profondità più precisa senza diventare lucido.
Menu degustazionePronto
Thick lens
Una lente più fisica e autorevole. La cornice spessa separa il vetro dal canvas.
Menu degustazionePronto
Chromatic rim
Il colore vive nel bordo e sotto il vetro, mentre il centro resta neutro e leggibile.
Menu degustazionePronto
03 · Tipografia
Editoriale quando racconta, precisa quando lavora.
Cabinet Grotesk e Synonym sono ruoli candidati, non font caricati. Questa pagina usa fallback di sistema per validare scala, ritmo, cifre, unità e contenuti italiani prima del self-hosting.
Display / fallback candidate
Una ricetta, più output.
Section heading
Trasforma dati professionali in lavoro pronto.
Body / UI
Aggiorna la ricetta una volta. Menu, allergeni e lista partono dalla stessa base, con stati leggibili e controllo umano.
Dati e unità
1,92 kg · 24 porzioni · 185 °C · 01:35 h · € 12,50
Diacritici e affidabilità
È già pronta? Caffè, crème brûlée, piñoli. Allergeni: rilevato, da verificare, confermato.
04 · Primitive
Cinque responsabilità, nessun riempitivo.
Le varianti rappresentano differenze semantiche. Focus, disabled, error e success sono parte del contratto; hover non contiene informazioni esclusive.
Button
Azioni con gerarchia chiara e target minimo di 44 px.
Badge
Il testo mantiene il significato anche senza colore.
neutralaccentsuccessDa verificaredangerinfo
Input
Label persistente, superficie paper e messaggi specifici.
Nome visibile nel tuo archivio.
Inserisci un numero maggiore di zero.
Codice disponibile.
Card default
Struttura stabile per contenuto nitido e leggibile.
Card elevated
Struttura stabile per contenuto nitido e leggibile.
Card glass
Vetro e blur rivelano la luce sottostante solo su contenuti focali.
Card glass-strong
Vetro e blur rivelano la luce sottostante solo su contenuti focali.
Card inverse
Struttura stabile per contenuto nitido e leggibile.
05 · Composizione pilota
Dal frammento all’output controllabile.
La lente operativa attenua file e messaggi dispersi, mantiene la ricetta nitida e mostra un menu come conseguenza concreta. Non è una schermata prodotto né una promessa di feature aggiuntive.
Foglio cliente A
18 porzioni
18 porzioni
PDF menu
Versione finale 3
Versione finale 3
Messaggio
“Manca il sedano?”
“Manca il sedano?”
Ricetta sorgenteAllergeni da verificare
Risotto al limone e timo
La zona nitida contiene il dato controllabile. Gli input interni restano paper e non ereditano blur.
Menu degustazione
Cliente B · Estate
PortataPrimo
AllergeniDa verificare
06 · Gate approvato
Il contratto visuale è stabile.
La review sui quattro viewport ha approvato fondazioni, gerarchia, stati e responsive behavior. Le correzioni richieste sono parte della Stable v0.1.
10/10 criteri approvati
Font esterni e componenti avanzati restano fuori dal contratto.
- 01Il bianco resta davvero dominante?
- 02Il nero struttura senza trasformarsi in dark mode?
- 03Il colore è raro e legato a orientamento o output?
- 04Le intensità glass sono distinguibili ma controllate?
- 05Testo, quantità e stati restano leggibili sul caso peggiore?
- 06Il fallback opaco conserva la stessa gerarchia?
- 07Focus, disabled, error e success sono comprensibili?
- 08Mobile riduce gli effetti senza perdere significato?
- 09Marketing e workspace condividono il linguaggio senza avere la stessa intensità?
- 10C’è qualcosa che non serve a una decisione o a un flusso?