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:

```rust
// 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.*