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

background tones. This family represents the brand's primary action accents.

Teal

Green

Yellow

Orange

Red

Pink

Slate / Gray

Semantic tokens

Semantic tokens refer to a function, not a specific hex value. In component code, use bg-primary instead of writing bg-blue-600 directly — this allows for theme changes across the entire palette without having to rewrite components. Below are the --primary --danger --success --info --warning default values