One Irozon identity, two themes — never a generic inversion.
White, Ink and Green are brand primitives — fixed values that never change between themes. Everything else a component reads (background, border, text color) is a semantic token that resolves differently in light and dark. Try the switch in the header: nothing on this page reloads, and every pattern below — swatches, buttons, cards, badges — retheme instantly because they're all built on the same token layer.
Brand primitives — constant in both themes
Semantic tokens
| Token | Role | Light | Dark |
|---|---|---|---|
--color-canvas |
Page background | #FFFFFF | #071A21 |
--color-surface |
Standard card/panel | #FFFFFF | #0E2731 |
--color-surface-elevated |
Raised/modal surface | #FFFFFF† | #15323D |
--color-surface-subtle |
Section fill behind cards | #F7F8F7 | #0A2028 |
--color-border |
Default hairline | #E5E8E7 | #1E3E49 |
--color-border-strong |
Emphasized border, input focus rest | #D3D8D6 | #2A4E59 |
--color-text-primary |
Headings, primary copy | #1D2226 | #F3F6F5‡ |
--color-text-secondary |
Body copy | #33383F | #C4CDD1 |
--color-text-muted |
Captions, helper text | #6F777D | #8FA0A6 |
--color-action-primary |
Primary button/link fill | #02C685 | #02C685 |
--color-action-primary-hover |
Primary hover | #02A873 | #1FDC9C |
--color-action-primary-active |
Primary pressed | #029362 | #00B378 |
--color-on-action-primary |
Text/icon on a Green fill | #082A38 (Ink) | #082A38 (Ink) |
--color-focus |
Focus-visible ring | #02C685 | #02C685 |
--color-success |
Success state | #02C685 | #02C685 |
--color-warning |
Warning state | #E2A63B | #FFC670 |
--color-error |
Error/destructive state | #FF6B4A | #FF8562 |
† Light theme has no separate elevated tone yet — elevation reads through
shadow, not a lighter fill, since white has nowhere lighter to
go. ‡ Dark-theme "white" text is a soft off-white, not pure #FFFFFF — a
small softening that keeps large text blocks from glaring against the dark surfaces.
The dark surface ladder
Four steps derived from Irozon Ink, not four unrelated grays. Canvas sits a shade darker than Ink itself; Surface, Subtle and Elevated step up in small, deliberate increments — enough to separate a card from the page without ever looking like flat black or a random slate gray.
Accent usage in dark mode
-
Green stays the single primary action color — it does not get
brighter, more saturated or glow-treated for dark backgrounds. The same
#02C685that works on white works on Ink-derived surfaces. - Lime stays rare — a gradient stop or a small highlight, never a dark-mode substitute for Green as a UI fill.
- No neon overload. A dark theme with saturated green everywhere reads as a hacker-terminal cliché, not Irozon. Restraint is the same rule as light mode — Canvas/Surface dominate, Green is selective.
- No glow/gradient inflation. Shadows on dark surfaces use soft black, not colored glow; the brand gradient keeps the same sparing usage as in light mode.
Dark theme — Do / Don't
Build hierarchy from the Ink-derived ladder — Canvas, Surface, Elevated each read as a distinct, related step.
Reusing raw #082A38 for the page, every card and every border at once —
nothing separates from anything else.
One confident, correctly-toned Green accent per view — same hex as light mode.
Pure-black canvas plus boosted, glowing Green/Lime — a generic neon dashboard, not Irozon.