Color Palette

Defined semantic colors for light and dark modes.

Rule: Do not use fixed colors (e.g. #fff, red-500). Only use configured semantic colors below.

Base

Background

bg-background

Foreground

bg-foreground

Primary

Primary

bg-primary

Primary Foreground

bg-primary-foreground

Secondary

Secondary

bg-secondary

Secondary Foreground

bg-secondary-foreground

Muted

Muted

bg-muted

Muted Foreground

bg-muted-foreground

Accent

Accent

bg-accent

Accent Foreground

bg-accent-foreground

Destructive

Destructive

bg-destructive

Destructive Foreground

bg-destructive-foreground

UI Elements

Card

bg-card

Card Foreground

bg-card-foreground

Popover

bg-popover

Popover Foreground

bg-popover-foreground

Border

bg-border

Input

bg-input

Ring

bg-ring

Charts

Chart 1

bg-chart-1

Chart 2

bg-chart-2

Chart 3

bg-chart-3

Chart 4

bg-chart-4

Chart 5

bg-chart-5

Custom Accents

Accent Blue

bg-accent-blue

Accent Green

bg-accent-green

Accent Pink

bg-accent-pink