Color Theming

All colors are defined as OKLCH custom properties in globals.css and mapped to Tailwind utilities via @theme inline. Toggle dark mode to see both palettes live.

Color Tokens

Semantic tokens that flow through every component. HEX and RGB values below are live, they reflect whichever theme is currently active.

OKLCH values shown are the light mode source. Click any value to copy it.

Backgroundbg-background

Page / app background

CSS--background
HEX#F8F7F4
RGB,
Foregroundtext-foreground

Default body text

CSS--foreground
HEX#0C0A09
RGB,
Brandbg-brandtext-brandborder-brand

Sapphire accent, active states, highlights, focus rings, decorative emphasis

CSS--brand
HEX#72B0AB
RGB,
Primarybg-primarytext-primaryborder-primary

Primary CTA button surface

CSS--primary
HEX#1D1816
RGB,
Primary Foregroundtext-primary-foreground

Text rendered on top of primary backgrounds

CSS--primary-foreground
HEX#FBFAF9
RGB,
Secondarybg-secondarytext-secondary

Secondary surfaces and buttons

CSS--secondary
HEX#F4F2EF
RGB,
Secondary Foregroundtext-secondary-foreground

Text on secondary backgrounds

CSS--secondary-foreground
HEX#1D1816
RGB,
Mutedbg-muted

Subdued backgrounds, code blocks, tags, skeletons

CSS--muted
HEX#F4F2EF
RGB,
Muted Foregroundtext-muted-foreground

Subdued text, captions, placeholders

CSS--muted-foreground
HEX#544F4D
RGB,
Accentbg-accenttext-accent

Hover and interactive highlight backgrounds

CSS--accent
HEX#F4F2EF
RGB,
Accent Foregroundtext-accent-foreground

Text on accent backgrounds

CSS--accent-foreground
HEX#1D1816
RGB,
Destructivebg-destructivetext-destructiveborder-destructive

Error states, delete / irreversible actions

CSS--destructive
HEX#DC2626
RGB,
Cardbg-card

Card and panel surface

CSS--card
HEX#FFFEFD
RGB,
Card Foregroundtext-card-foreground

Text inside card surfaces

CSS--card-foreground
HEX#0C0A09
RGB,
Popoverbg-popover

Dropdown, tooltip, and popover surface

CSS--popover
HEX#FFFEFD
RGB,
Popover Foregroundtext-popover-foreground

Text inside popovers and dropdowns

CSS--popover-foreground
HEX#0C0A09
RGB,
Borderborder-borderdivide-border

Component borders and dividers

CSS--border
HEX#E5E3DF
RGB,
Inputborder-input

Input field border color

CSS--input
HEX#E5E3DF
RGB,
Ringring-ringoutline-ring

Keyboard focus ring, matches Sapphire brand, rendered at 50% opacity via outline-ring/50

CSS--ring
HEX#72B0AB
RGB,

Chart Palette

Five tokens scaled across the active theme's palette. Reference them as var(--chart-1) … var(--chart-5) inside a ChartContainer. Swatches below reflect the currently active theme.

Chart 1

Darkest

CSS--chart-1
HEX#544F4D
RGB,
Chart 2

Step 2

CSS--chart-2
HEX#676361
RGB,
Chart 3

Step 3

CSS--chart-3
HEX#7B7776
RGB,
Chart 4

Step 4

CSS--chart-4
HEX#938F8D
RGB,
Chart 5

Lightest

CSS--chart-5
HEX#ABA7A6
RGB,