Colors

Semantic color tokens and accent colors for consistent theming.

Semantic Tokens

These tokens adapt automatically to dark/light mode.

Foreground

foreground

Background

background

Muted

muted

Card

card

Border

border

Accent Colors

Use sparingly for status and emphasis.

Emerald

Success, connected, active

text-emerald-500

Amber

Warning, pending, soon

text-amber-500

Red

Error, destructive, danger

text-red-500

Blue

Info, links (rare)

text-blue-500

Opacity Patterns

Use opacity modifiers for subtle variations.

PatternUsageOpacity

border-borderFull opacity100%

border-border/50Soft (common)50%

border-border/40Subtle40%

bg-mutedFull muted100%

bg-muted/50Hover states50%

bg-muted/30Very subtle30%

Usage Example

tsx

// Semantic tokens (theme-aware)
className="bg-background text-foreground"
className="border-border bg-card"
className="text-muted-foreground"

// Accent colors
className="text-emerald-500 bg-emerald-500/10"
className="text-amber-500"
className="text-red-500"

// Opacity modifiers
className="border-border/50"
className="bg-muted/30"

⚠️

Avoid Raw Colors

Never use raw values like bg-white or text-black. Always use semantic tokens so colors adapt to theme changes.