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 colorssrc/App.tsx— semantic toast colorssrc/components/AnimatedLogo.tsx— SVG gradientssrc/components/GeometricBackground.tsx— grid and mask colorssrc/components/GlassCard.tsx,Sidebar.tsx,StatCard.tsx,StatusBadge.tsx,TopBar.tsx— surfaces, borders, states, shadowssrc/pages/Analytics.tsx,CampaignDetail.tsx,Campaigns.tsx,Dashboard.tsx,Leads.tsx— charts, gradients, controls, glowsCOLOR-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.