Colors v2

A tiered color system for meaning and tone.

Revel's design system uses a two-tier color architecture. Primitive colors hold the raw hex values for each scale, and semantic tokens map those primitives to roles like surface, text, border, and icon. Components consume only the semantic tokens, so swapping a theme or rebalancing a palette never requires touching component code.

Principles

Intentional

Employ color carefully and strategically to convey important information and focus the eye. By using color judiciously, we create a system that can be used for long periods of time without causing visual exhaustion.

Color roles

Revel's palette is split into six roles — surface, text, primary, status, borders, and icons. Each role exposes a small set of variants (base, hover, muted, inverse, etc.) so the system stays predictable across components.

Derivative

Semantic tokens reference primitives instead of holding raw hex values. This keeps related shades in sync — changing one primitive re-paints every surface that derives from it without hunting for hard-coded values.

Accessible

Status and text combinations are tuned to meet WCAG 2.1 AA (4.5:1 for body text, 3:1 for large text). The dark theme rebinds the lightness end of each scale so contrast stays consistent in both modes.

The two tiers

The dark theme rebinds every semantic token to a different primitive — components never need to know which mode they're in.

Primitives

The raw color scales semantic tokens draw from. The slate-tinted neutral ramp powers every background, surface, text, border, and icon token — extra 150 / 250 / 350 / 650 / 750 / 850 steps give the dark end enough granularity for layered dark-mode surfaces. Primary is the brand ramp (500 anchors the light theme, 400 anchors the dark theme). The four status ramps map to success (green), warning (amber), danger (red), and info (sky). Hover any chip to reveal its token name and hex.

Color system

Surface

Surfaces are the primary UI elements employed in applications: pages, modals, tables, headers, and cards. They sit above the background and host content. Background tokens are documented alongside surface tokens because they share the same layering vocabulary.

Text

Text tokens cover typography. Each variant is contrast-tested against the surface tokens it's expected to sit on.

Primary

Primary tokens anchor interactive elements: buttons, key icons, active navigation, and selected states.

Status

Each status family (success, warning, danger, info) ships with matched variants across surface, text, icon, and border, so a status concept can be expressed as a filled surface, a muted backdrop, body text, or a border without breaking visual relationships.

Success

Confirmations, completed actions, and healthy state.

Warning

Caution, attention required, and pending state.

Danger

Errors, destructive actions, and blocked state.

Info

Neutral notifications, tips, and informational state.

Borders

Borders outline component boundaries, divide regions of a layout, or signal a form control's interactive surface. The neutral family runs from muted (a soft divider) to stronger (the highest-contrast outline used by radios and checkboxes).

Status borders (--r-border-success, --r-border-warning, --r-border-danger, --r-border-info) are documented in Status.

Icons

Icons inherit color from a small set of tokens that mirror the text family. When an icon sits on top of a colored fill — a primary button or a status badge — use --r-icon-on-color instead of the default.

Status icons (--r-icon-success, --r-icon-warning, --r-icon-danger, --r-icon-info) are documented in Status.

Focus and overlay

Two additional semantic tokens sit outside the role families:

• --r-focus — primary-400 — outline ring for :focus-visible states.
• --r-overlay — neutral-900 at 50% (#02061780) — modal and dialog scrim.