White, Ink and Green carry the system. Lime is a rare accent.
Click any swatch to copy its hex value.
Irozon has four brand primitives. Semantic colors extend those primitives into usable interfaces without expanding the brand palette.
Brand primitives
The only four core Irozon colors. Every semantic token below resolves back to one of these — nothing else is a brand color.
Light semantic system
Interface roles — surface, border, text, action — built on the primitives above. These are the values currently on screen if this page is in light mode.
Dark Ink family
Four steps derived from Irozon Ink, not four unrelated grays — #082A38
stays the canonical Ink primitive/brand anchor rather than being forced onto every dark
surface directly. Full detail, do/don't and accent rules on
Dark Theme.
Status colors
Three states, both themes. No bright Blue "info" color exists — a neutral/info state uses the Ink/neutral system above until a real product needs something more specific.
Success is identical in both themes; Warning and Error stay theme-tuned — the lighter dark-mode values would fail contrast used as text on a near-white light background, so each theme keeps the value that's actually legible on its own surfaces.
Brand gradient
Lime → Green, 135°
linear-gradient(135deg, #9BE15D 0%, #02C685 100%)
Suitable for selected identity/illustrative moments — a logo mark, an accent chip, a CTA edge. Not for standard buttons, cards, dashboards, table rows or generic backgrounds. No other gradient exists in the system; don't invent one for a one-off case. See Do / Don't.
Color philosophy
- White, Ink and Irozon Green are the dominant system — they should carry almost every screen.
- Green remains functional and selective — focus, active indicators, meaningful state, success. Large Green fields are exceptional, not the default. Primary action color is theme-aware, not fixed: Ink anchors light interfaces (Green reads as generic/SaaS-like there); Green activates dark interfaces, where Ink no longer has enough presence. See Buttons.
- Lime is a rare accent: gradient stops, selected brand-expression moments, never a large flat fill, a body text color, or a standard secondary button/status color.
- The old bright-blue CTA color is retired. It is not a token and should not appear as a primary action color anywhere new. See Do / Don't.
- Premium comes from restraint — most surfaces should be white or Subtle Background with a single confident accent, not several competing colors.
- Product-specific palettes (charts, data visualization, categories) don't exist yet and, when they do, must not become additional core brand colors.
Usage ratios on a typical page
- Canvas / Subtle Background dominate — roughly two-thirds to three-quarters of any page's surface area. This is where "premium through reduction" actually lives.
- Ink is the second-most-used color — section backgrounds (hero, footer, the Signature CTA's rest state), primary text. Not decorative, structural.
- Green is selective, not ambient — the dark-surface primary action, key stats/highlights, success states. (On light surfaces, Primary is Ink instead — see Buttons.) If more than one element on a screen competes for Green, that's a signal the hierarchy is unclear, not that the page needs more color.
- Lime is a rare accent — gradient stops and small highlights only, well under 5% of any composition. It should never be the largest color region on a screen.
- Functional colors (Error) exist only for status — form validation, destructive actions. Never used decoratively.
Correct use vs. overused color
One confident accent. The card is Canvas + Ink + a sliver of Green implied by the single CTA — everything else is neutral.
Green as a card background plus Lime for the CTA leaves no accent left to draw the eye — everything shouts, so nothing stands out.
A few rules worth repeating.
Let Ink and White carry the layout. Bring Green in once, with intent — usually on the single most important action.
The old bright-blue CTA is retired. It doesn't belong to the current palette and shouldn't be reused for buttons, links or accents.
The brand gradient is a highlight, not a background pattern.
Large gradient fills read as decorative and generic — the opposite of "premium through reduction."