Moodboard





Variel lives in the world of tools that think — precise instruments with a material reality, not chrome interfaces floating in void. The visual register is dense and direct: saturated fields, humanist type at working weight, compositions that carry tension. It is the anti-decoration position made concrete: brand infrastructure that looks like it was made by someone with strong opinions, not assembled from a theme marketplace.
organic-irregulardensehumanistasymmetric-dynamicsaturatedtactile-rawlively
This world is NOT…
- Purple-to-indigo gradient hero sections with glowing blob backgrounds
- Magic-wand and sparkle iconography signalling AI magic
- Untouched shadcn defaults: unstyled cards, default button radii, system font stack
- Airy layouts with large empty margins that signal 'premium' via absence
- Dark-mode-as-default with low-saturation desaturated palettes
Color
bg
#0a1628
bgSubtle
#0f1f38
surface
#162444
surfaceRaised
#1d2f52
ink
#e8f0ff
inkMuted
#8da4cc
inkSubtle
#7a92c4
border
#1f3058
borderStrong
#2d4474
accent
#2563eb
accentInk
#ffffff
accentHover
#1d4ed8
success
#22c55e
warning
#f59e0b
danger
#ef4444
dangerInk
#ffffff
focusRing
#2563eb80
Typography
16px
The quick brown fox — 0123456789
24px
The quick brown fox — 0123456789
32px
The quick brown fox — 0123456789
42px
The quick brown fox — 0123456789
16px
The quick brown fox — 0123456789
24px
The quick brown fox — 0123456789
32px
The quick brown fox — 0123456789
42px
The quick brown fox — 0123456789
Concept
Route 3: explorer archetype with saturated color strategy. Refined: "Warmer"
Archetypeexplorer
Form languageorganic-irregular
Type voicehumanist-sans
Spatial densitydense
Compositional logicasymmetric-dynamic
Color strategysaturated
Finishtactile-raw
Motion characterlively
Voice
Personality
Tone rules
- No exclamation marks
- Short sentences
Do
- State what the system is doing
Don't
- Don't hedge
Powered by Variel
Make your own brand
Generate a living design system — tokens, voice, components, and moodboard — in minutes. Share it publicly. Enforce it automatically on every pull request.
Generate your brand