Product-ready pieces, built on the same tokens as everything else.
Component families are added deliberately, one at a time. The v1 set — Buttons, Links, Loader, Form Controls, Switch, Theme Toggle, Badges & Status, Cards & Surfaces, Tables, Dialog & Sheet, Tabs, Process / Steps and Progress — is now complete. Start with Buttons.
Buttons
Primary, Secondary, Tertiary, Destructive and icon-only — action hierarchy, sizes, states, loading, and the Signature CTA exception.
Links
Ordinary inline/editorial navigation — Ink text, a precise Green underline, and a directional modifier for "Learn more →" style links.
Navigation
A vertical nav rail for application shells — expanded and collapsed/icon-only states, active/hover/focus, brand logos without distortion.
Loaders
The Irozon Orbit — a monochrome ring and orbit point that powers Button's loading state, plus the one Brand variant for deliberate brand moments.
Forms
Field, Input, Textarea and Select — top labels, native semantics, Green focus, and error states that never rely on color alone.
Switch
A binary setting on a native checkbox — neutral off, Green track + Ink thumb on. Not a replacement for an icon-only theme toggle.
Theme Toggle
Compact Light/Dark chrome — a centered dot at rest, revealing a small vertical track on hover/focus. Not a replacement for Switch's explicit settings row.
Badges & Status
Compact metadata vs. meaningful operational state — four semantic roles, a precise indicator dot, and a restrained live/processing option.
Toast
A brief, auto-dismissing confirmation — the same four semantic roles as Badge and Status, announced via a live region, never blocking input.
Cards & Surfaces
Every card earns its border or background — plain whitespace, a quiet Surface, or a Card, only when enclosure genuinely adds meaning.
Tables
Native <table>, editorial density — aligned numerals, Status
cells, selected rows, and honest horizontal overflow.
Dialog & Sheet
Native <dialog> — focus trapping and Escape for free, a
restrained entrance, and a directional Sheet variant.
Tabs
The WAI-ARIA Tabs pattern, styled from aria-selected — a small Green
marker, never a filled pill.
Process / Steps
A compact, ordered sequence of stages — "how this flow works" — not a live progress bar with a percentage. See Progress for that.
Progress
A determinate, 0–100 linear progress bar for a single ongoing task — distinct from Process's ordered stage sequence.
Four states, never competing with Green.
Success reuses Irozon Green — a passing state is a good outcome, and Green already means "go." Warning, Error and Info are separate tokens so they read distinctly from both Green and each other, on either theme.
Rules
-
Success = Irozon Green (
--color-success). No separate success hue — reusing Green keeps "this worked" visually tied to the brand's primary action color instead of introducing a competing green. -
Warning is amber (
--color-warning), never confused with Green or Lime — used sparingly, for states that need attention but aren't destructive. -
Error stays the existing coral (
--color-error) — pair with an icon or bold weight rather than relying on color alone, same rule as the Accessibility section. - Never let a status color outcompete the primary action. A page with one Green button and a Warning badge should still read Green as "the important thing" — status colors are informational, not calls to action.
- Status colors carry the same weight in both themes; only their exact hex shifts slightly (see Tokens) to keep contrast correct against the darker surfaces.