Color System
Three-layer token architecture: primitive hex → foundation semantic → component-scoped. Updated d096ab4 — 9 brand ramps, extended tint/shade scales, neon theme, new semantic tokens.
Brand Core
Primary, secondary, and theme anchors. Light: electric blue
#352eff. Dark: lime #a1ff5b. Neon: deep navy + lime.Primary·L#352eff
Tertiary 2#030192
Tertiary 1#7c9dff
Secondary#0053ff
Primary·D#a1ff5b
Neon Bg#05005d
Neon T1#4af482
Neon T2#00ffff
Brand Ramps — New in d096ab4
Nine named brand families added in the latest commit. Each has an 800 → 100 dark-to-light ramp for illustrative elements, data viz, and feature differentiation.
poliPurple
800
700
600
500
400
300
200
100
orangeSunshine
800
700
600
500
400
300
200
100
pinkPong
800
700
600
500
400
300
200
100
manna
800
700
600
500
400
300
200
100
neoPaccha
800
700
600
500
400
300
200
100
yoyo
800
700
600
500
400
300
200
100
parkGreen
800
700
600
500
400
300
200
100
yellowNeon
Single-value accent —
#e3d506. Use for data highlight only, not as primary action.Tint & Shade Scales — Primary
Nine tint steps (T100 lightest → T900 near-primary) and nine shade steps (S100 slightly darker → S900 near-black). Light & dark mode variants.
Tints
T100
T200
T300
T400
T500
T600
T700
T800
T900
Shades
S100
S200
S300
S400
S500
S600
S700
S800
S900
Tint & Shade Scales — Secondary
Secondary blue (#0053ff) tints. Dark-mode tints resolve to the lime family (#f6fff1 → #a3ff68).
T100
T200
T300
T400
T500
T600
T700
T800
T900
Mono Scale
9-step neutral from #e5e5e5 (100) to #191919 (900). Dark mode inverts: Mono/100 = #242424, Mono/900 = #e5e5e5.
Mono100
Mono200
Mono300
Mono400
Mono500
Mono600
Mono700
Mono800
Mono900
System Colors
Status feedback. Each has a 500 base, a -soft (10% alpha) fill, and scale steps for illustration use.
Danger
#ff0000
Success
#629c28
Warning
#ff8400
Info
#144cc7
New Semantic Tokens — d096ab4
Bubble, coachmark, gain/loss, menu, and extended badge tokens added in this commit.
| Token | Light | Dark | Usage |
|---|---|---|---|
bubble/bg-incoming | #efefef | #ffffff | Incoming chat bubble fill |
bubble/bg-outcoming | #352eff19 | #ffffff | Outgoing chat bubble fill |
bubble/name-incoming | #352eff | #ffffff | Sender name in chat |
gain&loss/success/bg-box | #629c281a | Positive delta pill bg | |
gain&loss/danger/bg-box | #ff00001a | Negative delta pill bg | |
coachmark/dots | #352eff | #ffffff | Step indicator dots |
badge & chip/white/bg-box | #e5e5e5 | #242424 | Neutral badge (new variant) |
badge & chip/waring/bg-box | #ff84001a (invariant) | Warning badge (sic: "waring") | |
nav bar/bg-card | #efefef | #ffffff | Nav floating card bg (new) |
toggle/disabled/bg-box-disabled 2 | #e4ebff (invariant) | Alt disabled toggle bg | |
btn/sliding/* | Sliding button variant: default/hover/clicked/disabled states — maps to same primary scale as btn/primary. | ||
btn/swipeup/* | Swipe-up button variant: Bg-2 = #e6edff (light) / #f6fff1 (dark). | ||
Live Token Preview
Switch themes at the top to see all CSS variable tokens update in real time.
--mav-primary
Brand action color
--mav-bg-secondary
Sidebar / tray
--mav-tertiary-1
Hover state
--mav-tertiary-2
Clicked / nav bg
--mav-danger
Error / loss
--mav-success
Success / gain
--mav-warning
Warning state
--mav-border
Divider lines