Color Tokens

OKLCH color scales and semantic color tokens

Seed Hues

Override these variables to regenerate entire color palettes:

:root {
  --shift-hue-primary: 250;    /* Blue (default) */
  --shift-hue-secondary: 180;  /* Cyan */
  --shift-hue-accent: 30;      /* Orange */
  --shift-hue-success: 145;    /* Green */
  --shift-hue-warning: 45;     /* Amber */
  --shift-hue-danger: 25;      /* Red */
  --shift-hue-neutral: 250;    /* Blue-tinted grays */
}

Tip: Use the floating Theme Customizer (bottom-right corner) to adjust hue values and see changes live across all components.

Color Scales

Each color has an 11-step scale (50-950). The scales are generated from seed hues with perceptually uniform lightness steps.

Primary Scale

Primary color scale

50 100 200 300 400 500 600 700 800 900 950

Neutral Scale

Neutral color scale (brand-tinted grays)

50 100 200 300 400 500 600 700 800 900 950

Status Colors

Success, warning, and danger scales

Success
Warning
Danger

Scale Reference

Token Lightness Usage
--s-{color}-50 0.978 Lightest backgrounds
--s-{color}-100 0.936 Hover backgrounds
--s-{color}-200 0.881 Subtle borders
--s-{color}-300 0.827 Disabled states
--s-{color}-400 0.742 Secondary elements
--s-{color}-500 0.648 Primary interactive
--s-{color}-600 0.573 Hover states
--s-{color}-700 0.469 Active states
--s-{color}-800 0.394 High contrast
--s-{color}-900 0.320 Near black
--s-{color}-950 0.238 Darkest

Using Color Tokens

.my-element {
  background: var(--s-primary-100);
  color: var(--s-primary-900);
  border-color: var(--s-primary-300);
}
<div style="background: var(--s-accent-500);">
  Accent background
</div>

Semantic Color Tokens

Semantic tokens map to raw colors and adapt to light/dark mode:

Surface Colors

Token Light Mode Dark Mode Usage
--s-surface-base neutral-50 neutral-950 Default backgrounds
--s-surface-raised neutral-100 neutral-900 Cards, modals
--s-surface-sunken neutral-200 neutral-800 Inputs, wells

Text Colors

Token Light Mode Dark Mode Usage
--s-text-primary neutral-900 neutral-50 Main text
--s-text-secondary neutral-600 neutral-400 Muted text
--s-text-disabled neutral-400 neutral-600 Disabled text

Border Colors

Token Light Mode Dark Mode Usage
--s-border-default neutral-200 neutral-800 Default borders
--s-border-strong neutral-400 neutral-600 Emphasized borders
--s-focus-ring primary-500 primary-400 Focus rings

Interactive Colors

Token Light Mode Dark Mode Usage
--s-interactive-primary primary-600 primary-400 Buttons, links
--s-interactive-hover primary-700 primary-300 Hover states
--s-interactive-active primary-800 primary-200 Active states

Brand-Tinted Neutrals

The --shift-hue-neutral variable adds a subtle tint to all gray colors:

/* Default: Blue-tinted grays */
--shift-hue-neutral: 250;

/* Warm grays */
--shift-hue-neutral: 30;

/* Cool grays */
--shift-hue-neutral: 210;

/* Match your primary color */
--shift-hue-neutral: var(--shift-hue-primary);

Customizing Colors

Change Brand Colors

:root {
  --shift-hue-primary: 280;    /* Purple */
  --shift-hue-neutral: 280;    /* Purple-tinted grays */
}

Override Specific Steps

:root {
  /* Make primary-500 more saturated */
  --s-primary-500: oklch(0.65 0.2 var(--shift-hue-primary));
}

Custom Semantic Mappings

:root {
  --s-interactive-primary: var(--s-primary-700);
  --s-surface-base: var(--s-neutral-100);
}

OKLCH Color Format

All colors use the OKLCH color space:

oklch(L C H)
/* L = Lightness (0-1) */
/* C = Chroma (0-0.4) */
/* H = Hue (0-360) */

This ensures perceptually uniform colors across all hues.

Search