Documentation

Colors

A two-layer color system designed for AI-assisted development.

How It Works

Colors are defined in two layers. Color scales (50-900) contain the raw OKLCH values — these are easy for AI to generate and update. Semantic tokens map scales to meanings like primary and destructive.

AI updates scales → semantic tokens stay stable → components just work.

Core Colors

Brand and neutral colors with full 50-900 scales.

Primary

Main brand color. Buttons, links, focus rings.

50
100
200
300
400
500
600
700
800
900

Secondary

Supporting color. Secondary buttons, accents.

50
100
200
300
400
500
600
700
800
900

Tertiary

Accent color. Highlights, gradients, loud elements.

50
100
200
300
400
500
600
700
800
900

Gray

Neutral scale. Backgrounds, borders, text.

50
100
200
300
400
500
600
700
800
900

Status Colors

Feedback colors for actions and states. Key steps shown (full scales in CSS).

Destructive

Dangerous actions, errors, delete buttons.

100
300
500
700
900

Success

Positive feedback, confirmations.

100
300
500
700
900

Warning

Caution states, pending actions.

100
300
500
700
900

Info

Informational messages, tips.

100
300
500
700
900

Usage

Common Scale Usage

Each step in a scale has typical use cases. This helps AI pick consistent shades across components.

  • 50-100 — Light backgrounds, hover fills
  • 200-300 — Borders, dividers
  • 500 — Default / base color
  • 600 — Hover state on solid buttons
  • 700 — Active / pressed state
  • 800-900 — Text, high contrast

AI-Friendly Naming

We use token names that appear frequently in AI training data. When an AI sees "delete button," it naturally reaches for destructive because that's what shadcn uses.

Examples:

  • destructive — not "error" or "danger"
  • primary — not "brand" or "main"
  • muted — not "subtle" or "disabled"
  • foreground — not "text" or "content"

Implementation

Resources

Color Scale Tools