storybook/design/color-palette.md

Storybook Editor Color Palette

Aubergine sophistication meets gold energy

Primary Colors (Aubergine Foundation)

████ aubergine-900  #1a0f1e  RGB(26,  15,  30)   Background (darkest)
████ aubergine-800  #2b1a33  RGB(43,  26,  51)   Surface (panels, cards)
████ aubergine-750  #382444  RGB(56,  36,  68)   Alternate row color
████ aubergine-700  #3d2447  RGB(61,  36,  71)   Surface hover
████ aubergine-600  #4f2e5b  RGB(79,  46,  91)   Borders, dividers
████ aubergine-500  #61386f  RGB(97,  56, 111)   Subtle highlights
████ aubergine-400  #805793  RGB(128, 87, 147)   Active elements
████ aubergine-300  #9f76a7  RGB(159,118,167)   Muted text, info

Accent Colors (Gold/Orange)

████ gold-600       #e89350  RGB(232,147, 80)   Deeper accent (optional)
████ gold-500       #f4a261  RGB(244,162, 97)   PRIMARY ACCENT ⭐
████ gold-400       #f6b47a  RGB(246,180,122)   Hover state
████ gold-300       #f8c594  RGB(248,197,148)   Pressed/active state
████ gold-200       #fad6ad  RGB(250,214,173)   Very subtle highlight

Neutral Colors

████ cream          #fdf8f3  RGB(253,248,243)   Primary text, high contrast
████ warm-gray-100  #e8e3dd  RGB(232,227,221)   Secondary text
████ warm-gray-200  #d1cbc3  RGB(209,203,195)   Tertiary text
████ warm-gray-400  #8b8680  RGB(139,134,128)   Muted text, placeholders
████ warm-gray-700  #4a4845  RGB(74,  72,  69)   Disabled elements
████ charcoal       #1f1f1f  RGB(31,  31,  31)   Pure dark (code bg)

Semantic Colors

████ success-light  #8ab864  RGB(138,184,100)   Success hover
████ success        #6a994e  RGB(106,153, 78)   Validation passed, success ✓
████ success-dark   #558039  RGB(85, 128, 57)   Success pressed

████ warning-light  #f6b47a  RGB(246,180,122)   Warning hover (reuse gold-400)
████ warning        #f4a261  RGB(244,162, 97)   Warning, attention ⚠
████ warning-dark   #e89350  RGB(232,147, 80)   Warning pressed

████ error-light    #e54545  RGB(229, 69, 69)   Error hover
████ error          #d62828  RGB(214, 40, 40)   Parse errors, failures ✗
████ error-dark     #b81e1e  RGB(184, 30, 30)   Error pressed

████ info           #9f76a7  RGB(159,118,167)   Info, hints ℹ (reuse aubergine-300)

Color Combinations (Contrast Ratios)

Text on Backgrounds

Foreground	Background	Ratio	Grade	Use
cream	aubergine-900	15.2:1	AAA	Primary text
warm-gray-100	aubergine-900	11.8:1	AAA	Secondary text
warm-gray-400	aubergine-900	4.9:1	AA	Muted text
gold-500	aubergine-900	7.1:1	AA Large	Accent text
aubergine-900	gold-500	7.1:1	AA Large	Gold buttons

Interactive Elements

Element	Default	Hover	Active	Focus
Primary Button	gold-500 bg	gold-400 bg	gold-300 bg	gold-500 + glow
Secondary Button	transparent	aubergine-700	aubergine-600	gold-500 border
Input Field	aubergine-800	-	-	gold-500 border
List Item	transparent	aubergine-700	aubergine-600	gold-500 left border

Usage Guidelines

Do's ✓

• Use aubergine-900 for main background
• Use aubergine-800 for panels and cards
• Use cream for all primary text
• Use gold-500 sparingly for accents (buttons, highlights, selected states)
• Use semantic colors (success, error, warning) only for their purpose
• Maintain visual hierarchy with size + weight + color

Don'ts ✗

• Don't use gold for large backgrounds (overwhelming)
• Don't use more than 2-3 colors in a single component
• Don't rely on color alone for information (use icons + text)
• Don't use pure black (#000) or pure white (#fff)
• Don't mix warm and cool grays

Code Syntax Highlighting

Muted versions of semantic colors on dark background:

// Example syntax theme
Keywords:     #f4a261  (gold-500)      - fn, let, pub, impl
Types:        #9f76a7  (aubergine-300) - String, Vec, Option
Functions:    #fad6ad  (gold-200)      - function_name()
Strings:      #8ab864  (success-light) - "hello"
Numbers:      #f6b47a  (gold-400)      - 42, 3.14
Comments:     #8b8680  (warm-gray-400) - // comment
Operators:    #e8e3dd  (warm-gray-100) - +, =, ->
Punctuation:  #d1cbc3  (warm-gray-200) - {}, (), ;

Gradients (Optional, Use Sparingly)

Gold Shimmer (for loading states):
linear-gradient(90deg,
  gold-500 0%,
  gold-400 50%,
  gold-500 100%)

Aubergine Depth (for hero sections):
linear-gradient(180deg,
  aubergine-800 0%,
  aubergine-900 100%)

Opacity Scale

For overlays and transparency:

10%: rgba(color, 0.1)   - Very subtle tint
20%: rgba(color, 0.2)   - Subtle overlay
40%: rgba(color, 0.4)   - Muted element
60%: rgba(color, 0.6)   - Semi-transparent
80%: rgba(color, 0.8)   - Mostly opaque

Color Psychology

Color	Emotion	Usage
Aubergine	Sophisticated, creative, mysterious	Base, establishes tone
Gold	Energetic, optimistic, valuable	Accents, calls-to-action
Cream	Calm, clean, readable	Text, content
Green	Success, growth, go	Validation, success states
Red	Error, stop, urgent	Errors, destructive actions

Accessibility Notes

• All text meets WCAG AAA for contrast
• Gold accent meets WCAG AA for large text
• Focus indicators are clearly visible (gold-500 + glow)
• Never use color as the only indicator (pair with icons/text)
• Test with colorblind simulators (deuteranopia, protanopia)

---

Pair this palette with Geist (UI) and Monaspace Neon (code) for optimal effect.