<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Clay Design System: Color Palette & Roles

## Primary

- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`
- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text
- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas

## Swatch Palette — Named Colors

| Name | Hex | CSS Variable | Role |
|------|-----|-------------|------|
| **Matcha 300** | `#84e7a5` | `--_swatches---color--matcha-300` | Light green accent |
| **Matcha 600** | `#078a52` | `--_swatches---color--matcha-600` | Mid green |
| **Matcha 800** | `#02492a` | `--_swatches---color--matcha-800` | Deep green for dark sections |
| **Slushie 500** | `#3bd3fd` | `--_swatches---color--slushie-500` | Bright cyan accent |
| **Slushie 800** | `#0089ad` | `--_swatches---color--slushie-800` | Deep teal |
| **Lemon 400** | `#f8cc65` | `--_swatches---color--lemon-400` | Warm pale gold |
| **Lemon 500** | `#fbbd41` | `--_swatches---color--lemon-500` | Primary gold |
| **Lemon 700** | `#d08a11` | `--_swatches---color--lemon-700` | Deep amber |
| **Lemon 800** | `#9d6a09` | `--_swatches---color--lemon-800` | Dark amber |
| **Ube 300** | `#c1b0ff` | `--_swatches---color--ube-300` | Soft lavender |
| **Ube 800** | `#43089f` | `--_swatches---color--ube-800` | Deep purple |
| **Ube 900** | `#32037d` | `--_swatches---color--ube-900` | Darkest purple |
| **Pomegranate 400** | `#fc7981` | `--_swatches---color--pomegranate-400` | Warm coral-pink |
| **Blueberry 800** | `#01418d` | `--_swatches---color--blueberry-800` | Deep navy |

## Neutral Scale (Warm)

- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links
- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links
- **Dark Charcoal** (`#333333`): Link text on light backgrounds

## Surface & Border

- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines
- **Oat Light** (`#eee9df`): Secondary lighter border
- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections
- **Dark Border** (`#525a69`): Border on dark sections
- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)

## Badges

- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface
- **Badge Blue Text** (`#3859f9`): Vivid blue badge text
- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator

## Shadows

- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature
- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow
