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 */
}

Color Scales

Each color has an 11-step scale (50-950):

Primary Colors

Token	Lightness	Usage
--s-primary-50	0.978	Lightest backgrounds
--s-primary-100	0.936	Hover backgrounds
--s-primary-200	0.881	Subtle borders
--s-primary-300	0.827	Disabled states
--s-primary-400	0.742	Secondary elements
--s-primary-500	0.648	Primary interactive
--s-primary-600	0.573	Hover states
--s-primary-700	0.469	Active states
--s-primary-800	0.394	High contrast
--s-primary-900	0.320	Near black
--s-primary-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

Status Colors

Success

--s-success-500: oklch(0.648 0.147 145);

Warning

--s-warning-500: oklch(0.648 0.147 45);

Danger

--s-danger-500: oklch(0.648 0.147 25);

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.