Color system
Semantic pigments, gradients, and glass tones.
The reference direction is translated here into reusable engineering tokens. Colors are grouped by job to keep implementation predictable: gradients for emphasis, glass fills for surfaces, text tones for hierarchy, and accents for status or motion.
Primary mode
Dark cosmic
Accent families
Magenta, cyan, gold, green
Usage rule
Semantic over decorative
Color strategy
Premium spectrum, anchored by darkness.
Most surfaces start from deep-space navy and transparent midnight tones. The system then introduces magenta, cyan, blue, gold, and green as controlled luminous accents. This keeps the interface vivid without flattening contrast.
Primary use
Hero buttons, premium stats, selected pills.
Secondary use
Charts, cool panels, and analytical surfaces.
Gradient tokens
Primary and secondary gradient system
Each gradient is a reusable token with a clear job. Use these instead of inventing custom spectrum blends component by component.
Aurora Primary
Hero CTAs, key stats, selected states, and highlight cards.
Prism Secondary
Charts, secondary cards, motion trails, and cool-toned highlights.
Neon Beam
Button fills, active pills, swap review actions, and segmented controls.
Token family
Glass Surface Colors
Every value below includes usage guidance so engineers can map a semantic token to the right layer of the system.
Surface
--vibe-colors-glass-surface
rgba(11, 16, 33, 0.46)
Base card fill for standard panels and widgets.
Elevated
--vibe-colors-glass-elevated
rgba(14, 20, 40, 0.58)
High-priority surfaces like modals, hero cards, and popovers.
Overlay
--vibe-colors-glass-overlay
rgba(146, 123, 255, 0.08)
Tint layer for colorful wash overlays without killing contrast.
Border
--vibe-colors-glass-border
rgba(205, 225, 255, 0.16)
Primary glass stroke for perimeter separation.
Token family
Text / Icon Colors
Every value below includes usage guidance so engineers can map a semantic token to the right layer of the system.
Text Primary
--vibe-colors-text-primary
#f7f8ff
Headings, stat values, and hero labels.
Text Secondary
--vibe-colors-text-secondary
#d2dcff
Body copy inside glass surfaces.
Text Tertiary
--vibe-colors-text-tertiary
#9db1e5
Metadata, annotations, and supporting context.
Icon
--vibe-colors-text-icon
#e5ecff
Iconography and subtle strokes on dark surfaces.
Token family
Status Colors
Every value below includes usage guidance so engineers can map a semantic token to the right layer of the system.
Success
--vibe-colors-status-success
#20d68f
Confirmed states, gains, healthy system checks.
Warning
--vibe-colors-status-warning
#ffba57
Pending review, caution chips, and soft alerts.
Danger
--vibe-colors-status-danger
#ff657e
Critical warnings, risk badges, destructive actions.
Info
--vibe-colors-status-info
#53b7ff
Informational callouts, neutral system highlights.
Token family
Accent Colors
Every value below includes usage guidance so engineers can map a semantic token to the right layer of the system.
Magenta
--vibe-colors-accent-magenta
#ff4fd8
Selection halos, hot-path actions, and bloom accents.
Purple
--vibe-colors-accent-purple
#9a68ff
Ambient glow wash, charts, and internal gradients.
Cyan
--vibe-colors-accent-cyan
#3fe8ff
Cold-edge glow, focus rings, and chart inflection points.
Gold
--vibe-colors-accent-gold
#ffd166
Premium value callouts and warm spectrum contrast.