| # 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. |
|
|
