File size: 7,714 Bytes
da02324 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | # 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.
|