MysticX Color Palette
Complete design token reference — Brand colors, semantic roles, and category colors
Primary — Gold
Aa
gold
#D4A843
CTAs, active tabs, credit badges
Aa
goldLight
#E8C97A
Gradient mid, dark-theme tint
Aa
goldPale
#F0D8A6
Gradient end
Aa
goldBorder
#F0D6A1
Gradient border start
Aa
goldGlow
#FFD685
Glow/aura effects
Aa
goldShadow
#C4A87C
Card shadows
Warm Neutrals
Aa
brown
#8B7355
Secondary text, borders
Aa
brownDark
#5C4A3D
Headers on warm bg
Aa
bronze
#BB8850
Accent text
Aa
cream
#FFF8EE
Modal/card backgrounds
Aa
beige
#F5EDE3
Card back gradient
Aa
beigeMid
#E8DFD3
Borders, separators
Aa
beigeBorder
#E8D5B8
Modal borders
Dark Sanctuary
Aa
obsidian
#0D0B14
Deep dark base
Aa
midnightPurple
#20163B
Dark purple accent
Aa
cardBack
#1F1637
Card back color
Aa
deepNavy
#0F1729
Dark gradient end
Secondary — Amethyst
Spirituality, intuition — eyebrow labels, selection rings, secondary actions, Healing category
Aa
amethystDark
#7B52B0
Light theme text/icons
Aa
amethyst
#9B72CF
Dark theme text/icons
Aa
amethystLight
#B68FE0
Highlights, glows
Aa
amethyst subtle
12% opacity
Pill bg, card tint
Tertiary — Dusty Rose
Love, healing, warmth — Love category, notifications, soft emphasis
Aa
dustyRose
#C8809E
Primary rose
Aa
dustyRoseLight
#D4829F
Dark theme variant
Aa
roseQuartz (existing)
#E8A0BF
Lightest rose
Aa
rose subtle
12% opacity
Pill bg, card tint
Functional — Teal
Cool contrast — success states, info badges, Career/Study categories
Aa
teal
#4A8B8D
Primary teal
Aa
tealLight
#5FA8AA
Dark theme variant
Aa
tealDark
#3A7072
Light theme text
Aa
teal subtle
12% opacity
Pill bg, card tint
Other Accents
Aa
mysticBlue
#4A6FA5
Study category
Aa
emerald
#5B9E7C
Wealth category, success
Color Role Summary
| Role |
Color |
Hex |
Use Cases |
| Primary |
Gold |
#D4A843 |
Main CTAs, active tabs, credit badges, Decisions category |
| Secondary |
Amethyst |
#9B72CF |
Eyebrow labels, selection rings, secondary actions, Healing category |
| Tertiary |
Dusty Rose |
#C8809E |
Love category, notifications, soft emphasis |
| Functional |
Teal |
#4A8B8D |
Career category, info badges, cool-topic accents |
| Accent |
Mystic Blue |
#4A6FA5 |
Study category |
| Accent |
Emerald |
#5B9E7C |
Wealth category, success states |
| Error |
Red |
#EF4444 |
Error states, destructive actions |
Question Category Color Mapping
| Category |
Color |
Dark Theme |
Light Theme |
Subtle BG (12%) |
| Love |
Dusty Rose |
#D4829F |
#C8809E |
rgba(200,128,158,0.12) |
| Career |
Teal |
#5FA8AA |
#3A7072 |
rgba(74,139,141,0.12) |
| Healing |
Amethyst |
#9B72CF |
#7B52B0 |
rgba(155,114,207,0.12) |
| Decisions |
Gold |
#E8C97A |
#8B6914 |
rgba(212,168,67,0.12) |
| Study |
Mystic Blue |
#6B8FC0 |
#4A6FA5 |
rgba(74,111,165,0.12) |
| Wealth |
Emerald |
#5B9E7C |
#3D8B5F |
rgba(91,158,124,0.12) |
Light Theme Preview
How colors appear on the warm cream background
Category Pills — Semantic Colors
Love
Career
Healing
Decisions
Study
Wealth
Category Pills — All Gold (current)
Love
Career
Healing
Decisions
Study
Wealth
MysticX Design System — Generated 2026-04-14 — constants/theme.ts Brand object