# Verdigris & Ember color system

Revision 2.0 supersedes the prior Earthy Oasis / Nocturnal Oasis mappings.
Reference mood: deep ink-teal foundations, oxidized verdigris interaction,
metered brass warmth, kiln-ember danger, and cool porcelain neutrals.

This is a purely chromatic migration. Layout, spacing, typography, structure,
copy, imagery, motion, interaction patterns, dimensions, breakpoints, and
stacking order remain unchanged.

## 1. Primitive palette

The complete 9-step scales live in `src/index.css`. Existing compatibility
aliases are retained so component APIs and utility names do not change.

| Family | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Deep Ink | `#060a0c` | `#0c1518` | `#142126` | `#1e3036` | `#2b434b` | `#47646b` | `#6f8a8e` | `#9db4b4` | `#cfdedd` |
| Verdigris | `#05130e` | `#0c2a20` | `#124433` | `#1a5f47` | `#257d68` | `#3f9c84` | `#6fbca4` | `#a2d8c5` | `#d4efe4` |
| Molten Brass | `#171104` | `#322609` | `#523f10` | `#745a19` | `#a8842c` | `#c2a04a` | `#d8bc72` | `#ecd8a4` | `#f8eecb` |
| Porcelain | `#1e231e` | `#3d463d` | `#616c61` | `#8a968a` | `#b4bfae` | `#c9d2c3` | `#dde3d8` | `#ecf0e8` | `#f6f8f2` |
| Kiln Ember | `#200e07` | `#421d0f` | `#662e18` | `#8b4123` | `#b25731` | `#cb7550` | `#dd9a78` | `#ecc2ab` | `#f8e5d9` |

## 2. Semantic aliases

| Token | Source | Usage |
| --- | --- | --- |
| `--bg-canvas` / `--nt-bg-root` | Deep Ink 200 `#0c1518` | Page canvas |
| `--bg-surface` / `--nt-bg-surface` | Deep Ink 300 `#142126` | Cards and panels |
| `--bg-sunken` / `--nt-bg-sunken` | Deep Ink 200 `#0c1518` | Inputs and nested surfaces |
| `--bg-deep` / `--nt-bg-app` | Deep Ink 100 `#060a0c` | Headers, footers, modal chrome |
| `--text-primary` / `--nt-text-primary` | Porcelain 800 `#ecf0e8` | Headings |
| `--text-secondary` / `--nt-text-body` | Porcelain 600 `#c9d2c3` | Body text |
| `--text-muted` / `--nt-text-muted` | Porcelain 400 `#8a968a` | Captions and placeholders |
| `--accent-primary` / `--nt-accent` | Verdigris 500 `#257d68` | Buttons, links, active states |
| `--accent-hover` / `--nt-accent-hover` | Verdigris 600 `#3f9c84` | Hover states |
| `--accent-warm` | Molten Brass 500 `#a8842c` | Warm CTA, warning, labels |
| `--border-default` / `--nt-border-default` | Deep Ink 600 `#47646b` | Standard borders |
| `--border-focus` / `--nt-focus-ring` | Verdigris 500 `#257d68` | Focus and selection |
| `--shadow-color` / `--nt-shadow-color` | `rgba(6,10,12,.50)` | Elevation shadows |

## 3. Component application matrix

| Component | Surface | Text / icons | States |
| --- | --- | --- | --- |
| Header / top bar | Deep Ink 100–200 | Porcelain 500 / 400 | Verdigris active, Ember alert |
| Navigation | Deep Ink 100–200 | Porcelain 500 / 400 | Verdigris hover and active |
| Page lead-ins | Deep Ink 200 → 100 | Porcelain 800 / 600 | Verdigris and Brass accents |
| Primary buttons | Verdigris 500 | Porcelain 900 | Verdigris 600 hover, 400 active |
| Secondary buttons | Deep Ink 400 | Porcelain 600 | Deep Ink 300 hover |
| Inputs / forms | Deep Ink 200 | Porcelain 800 / 600 | Verdigris focus, Ember error |
| Cards / panels | Deep Ink 300 | Porcelain 800 / 600 | Verdigris highlights, Ink borders |
| Tables | Deep Ink 300–400 | Porcelain 800 / 600 | Verdigris selection, Ink dividers |
| Tabs | Transparent / Deep Ink | Porcelain 400 / Verdigris active | Verdigris indicator |
| Badges | Ink / Verdigris low tints | Porcelain / Verdigris 700 | Brass warning, Ember danger |
| Alerts / toasts | Ink / warm tint | Porcelain / Porcelain 600 | Teal info/success, Brass warning, Ember error |
| Modals / drawers | Deep Ink 100–200 | Porcelain 800 / 600 | Ink overlay, Verdigris actions |
| Charts | Deep Ink surfaces | Verdigris, Brass, Ember | Same palette in legends/tooltips |
| Scrollbar | Deep Ink 200 track | Deep Ink 600 thumb | Ink 700 hover, Verdigris active |
| Footer | Not present in the app | — | — |

## 4. Old → new mapping

| Previous role | Verdigris & Ember token | Value |
| --- | --- | --- |
| Nocturnal page canvas | `--nt-bg-root` | `#0c1518` |
| Nocturnal app shell | `--nt-bg-app` | `#060a0c` |
| Nocturnal panel surface | `--nt-bg-surface` | `#142126` |
| Nocturnal raised surface | `--nt-bg-surface-raised` | `#1e3036` |
| Nocturnal primary text | `--nt-text-primary` | `#ecf0e8` |
| Nocturnal body text | `--nt-text-body` | `#c9d2c3` |
| Nocturnal muted text | `--nt-text-muted` | `#8a968a` |
| Nocturnal teal links | `--nt-text-link` | `#3f9c84` |
| Nocturnal teal primary action | `--nt-btn-primary-bg` | `#257d68` |
| Nocturnal success | `--nt-success` | `#3f9c84` |
| Nocturnal warning | `--nt-warning` | `#c2a04a` |
| Nocturnal danger | `--nt-danger` | `#cb7550` |
| Nocturnal shadows | `--nt-shadow-color` | `#060a0c` |
| Chart accent | chart tokens | Verdigris / Brass / Ember |
| Pure black | Deep Ink 100 | `#060a0c` |
| Pure white | Porcelain 900 | `#f6f8f2` |

Warning and error remain distinct: warning uses Molten Brass; danger/error uses
Kiln Ember. No red, purple, or leftover blue hues remain.

## 5. Contrast adjustments

The specified pairs were checked against actual luminance values:

- Porcelain 600 on Deep Ink 200: **11.92:1** (AAA body text).
- Porcelain 800 on Deep Ink 200: **16.1:1** (AAA headings).
- Verdigris 600 on Deep Ink 200: **5.57:1** (AA links/status text).
- Porcelain 400 on Deep Ink 300: **5.34:1** (AA muted text).
- Porcelain 900 on Verdigris 500: **4.66:1** (AA button labels).
- Deep Ink 100 on Molten Brass 500: **5.68:1** (AA warm button labels).
- Ember 600 on Deep Ink 200: **5.48:1** (AA error text).
- Brass 600 on Deep Ink 200: **7.45:1** (AAA labels/overlines).

Muted and body text use the supplied lighter Porcelain stops rather than the
darker neutral stops where required for AA. Link text uses Verdigris 600;
Verdigris 500 remains the interactive fill and focus color.

## 6. Files touched and known leftovers

Color-bearing files:

- `src/index.css` — primitive scales, semantic aliases, utility remapping,
  focus, selection, caret, disabled states, and scrollbar colors
- `src/App.tsx` — semantic toast colors
- `src/components/AnimatedLogo.tsx` — SVG gradients
- `src/components/GeometricBackground.tsx` — grid and mask colors
- `src/components/GlassCard.tsx`, `Sidebar.tsx`, `StatCard.tsx`,
  `StatusBadge.tsx`, `TopBar.tsx` — surfaces, borders, states, shadows
- `src/pages/Analytics.tsx`, `CampaignDetail.tsx`, `Campaigns.tsx`,
  `Dashboard.tsx`, `Leads.tsx` — charts, gradients, controls, glows
- `COLOR-SYSTEM.md` — this mapping record

No raster assets, separate design-token file, Tailwind config, SCSS theme, or
light-mode theme is present. Existing utility names remain in place and are
remapped through `@theme`. The unused `GlassCard` file retains its pre-existing
missing non-color `../lib/utils` import and was not changed under this protocol.

## 7. Maintainer rules

- Add future colors only through `--nt-*` or the protocol aliases.
- Use only the five supplied Verdigris & Ember families and listed stops.
- Preserve existing opacity, blur, spread, radius, spacing, and dimensions.
- Check WCAG contrast before adding text/background or UI-border pairs.
- Keep success/info = Verdigris, warning = Molten Brass, danger/error = Kiln Ember.
- Shadows use Deep Ink 100 as their base; warm glows use Brass only where specified.
- Do not add light/dark switching unless it already exists.

## Explicit scope confirmation

Only color values and color-bearing token references were changed. Layout,
spacing, typography, copy, imagery, structure, API behavior, interaction
patterns, animation timing, and motion remain unchanged.