Color System

This document describes our framework's color token system. All colors are drawn from a single shared palette and applied via bg-* className values. Each color scale spans 9 weights from 100 to 900, and semantic tokens (primary, danger, success, etc.) represent the product's behavior-driven colors on top of that palette.

Usage

There are two naming conventions in play:

• Weight 500 — referenced directly by color name: bg-red, bg-blue, bg-purple
• Every other weight — color name + weight: bg-blue-100, bg-teal-700
• Semantic tokens — named by function: bg-primary, bg-danger, bg-success

Core Palette

Each color family forms a full 9-step scale. 100 is the lightest, 900 is the darkest. Weight 500 represents the base (brand) tone and gets the shorthand className.

Blue

Purple

Indigo — Brand & Action Accents

The Indigo scale starts at weight 50 — an extra step for the lightest background tones. This family represents the brand's primary action accents.

Teal

Green

Yellow

Orange

Red

Pink

Slate / Gray

Semantic Tokens

Semantic tokens reference function, not a specific hex value. Instead of writing bg-blue-600 directly in component code, use bg-primary — this allows theme changes across the whole palette without rewriting components.

Neutral & Base Tokens

These tokens sit outside the hue scales but form the foundation of the system's background and text values.