Boldscreens · Violet System
Il viola
è la voce.
Un sistema completo costruito attorno a #6B2EE8. Nove shade di viola, nove neutri freddi, gradienti, stati semantici. Bianco gallery, neri profondi, viola elettrico.
01 · Brand
Violet ramp
Il viola del brand al centro (★ shade 500). Verso il chiaro per backgrounds e badges, verso lo scuro per testi e dark mode.
50#FAF6FF
100#EBE2FA
200#D9C9F5
300#BBA0EE
400#9670EB
500#6B2EE8
600#5520C5
700#3E1A8A
800#2B0E63
900#180538
02 · Struttura
Cool neutrals
Neutri freddi con vibrazione viola sottile, mai grigi puri. Vanno dal bianco pieno a un nero profondo bluastro per coerenza con l'accent.
page#FFFFFF
50#FAFAFB
100#F4F4F6
200#E5E5E8
300#CFCED4
400#A8A6B0
500#8E8C9A
600#6B6970
700#3D3B40
900#0A0A0F
03 · Gradients
Sfumature controllate
Tre gradienti pronti — per hero alternativi, sezioni d'impatto, illustrazioni. Tutti basati sulla ramp viola, niente colori esterni.
Brand · Diagonale
#6B2EE8 → #9670EB
Deep · Verticale
#6B2EE8 → #2B0E63
Pastel · Soft
#FAF6FF → #D9C9F5
04 · Secondo accento
Inkblack — il contrappeso
Un nero non-pure, leggermente bluastro, che fa da gravity al viola. Usato per testi principali, CTA secondari, sezioni dark.
50#F4F4F8
100#CFCED8
200#8E8C9A
400#3D3B45
600#1F1E25
800#0A0A0F
900#04040A
05 · Accoppiamenti
Tre registri visivi
Le tre combinazioni principali del sistema. Ognuna risponde a un contesto preciso d'uso.
A — Bianco + Viola + Nero
Default
Landing
#FFFFFF / #6B2EE8 / #0A0A0F
B — Viola pieno
Hero
Campaign
#6B2EE8 / #FFFFFF
C — Nero + Viola elettrico
Dark
Footer · Video
#0A0A0F / #6B2EE8
06 · Semantici
Stati di sistema
Quattro colori scelti per coesistere col viola senza creare conflitti cromatici. Tutti leggermente desaturati per non competere con l'accent.
Success
#1FA168
Verde smeraldo desaturato. Consegne, approvazioni.
Danger
#D63A4A
Rosso ramato. Errori, annullamenti.
Warning
#E8851A
Arancio caldo. SLA in scadenza.
Info
#6B2EE8
Viola brand. Note, link, suggerimenti.
07 · Token semantici
Mappatura completa
15 token semantici pronti per Figma Variables o CSS Custom Properties. Coprono tutto il sistema senza ambiguità.
bg/page
#FFFFFF
Sfondo pagina default
bg/surface
#FAFAFB
Card, sezioni alternate
bg/muted
#F4F4F6
Aree disabilitate
bg/inverse
#0A0A0F
Footer, dark sections
accent/primary
#6B2EE8
CTA, link attivi, focus
accent/hover
#5520C5
Hover bottone viola
accent/subtle
#FAF6FF
Badge sfondo, highlight
accent/muted
#EBE2FA
Selezione, hover discreto
text/primary
#0A0A0F
Titoli, body, UI
text/secondary
#6B6970
Sottotitoli, label
text/tertiary
#A8A6B0
Caption, placeholder
text/accent
#6B2EE8
Link, parole evidenziate
border/default
#E5E5E8
Card, input, divisori
border/subtle
#F4F4F6
Separatori sottili
border/focus
#6B2EE8
Focus ring input/button
08 · In contesto
Sistema al lavoro
Quattro composizioni che mostrano il sistema applicato in registri diversi.
Landing — registro principale
Design UX/UI
consegnato
ogni 72 ore.
Un designer dedicato. Una richiesta attiva alla volta.
Hero campagna — viola pieno
1.700 €
al mese.
Stop.
Niente upsell. Niente sorprese. Pausa quando vuoi.
Dark — footer / video
Designer dedicato.
Mai un'agenzia.
Tutto il lavoro, sempre nelle mani della stessa persona.
Scopri come funziona →
Stati di sistema · piattaforma
#142 · Hero section In lavorazione
#141 · Pricing page Completata
#140 · Email template SLA in scadenza
#139 · Brand audit In valutazione
In una riga
Viola come voce. Bianco come spazio.
Nero come gravità. Stop.
Niente colori secondari. Niente arcobaleni. Niente "tema scuro alternativo". Un sistema disciplinato che funziona ovunque.