Colors

ready

A Desert-Inspired Palette

Our color system draws inspiration from the subtle hues of desert landscapes, featuring warm sand tones and cool stone grays. Contrast is computed per-pair in the spec (see the accessibility spoke); not all combinations are interchangeable. Key caveat: magenta-600 on dark surfaces is 3.1:1 — large/display text only; use magenta-400 for small text on dark.

Semantic Colors

These are the app's shadcn semantic tokens, not the brand tokens. The brand primary is magenta-600; accent is sand-300 (see DESIGN.md).

Background

var(--background)
Light: stone-025
Dark: stone-975

Foreground

var(--foreground)
Light: stone-975
Dark: stone-025

Primary

var(--primary)
Light: stone-900
Dark: stone-025

Secondary

var(--secondary)
Light: stone-050
Dark: stone-900

Muted

var(--muted)
Light: stone-050
Dark: stone-850

Accent

var(--accent)
Light: stone-050
Dark: stone-900

Success

var(--success)
Light: teal-050
Dark: teal-900

Warning

var(--warning)
Light: sand-050
Dark: sand-900

Error

var(--error)
Light: red-050
Dark: red-900

Creative

var(--creative)
Light: violet-050
Dark: violet-900

Destructive

var(--destructive)
Light: stone-975
Dark: stone-025

Border

var(--border)
Light: stone-150
Dark: stone-700

Input

var(--input)
Light: stone-150
Dark: stone-700

Ring

var(--ring)
Light: stone-150
Dark: stone-800

Color Scales

stone

025

var(--stone-025)

050

var(--stone-050)

100

var(--stone-100)

150

var(--stone-150)

200

var(--stone-200)

300

var(--stone-300)

400

var(--stone-400)

500

var(--stone-500)

600

var(--stone-600)

700

var(--stone-700)

800

var(--stone-800)

850

var(--stone-850)

900

var(--stone-900)

950

var(--stone-950)

975

var(--stone-975)

sand

025

var(--sand-025)

050

var(--sand-050)

100

var(--sand-100)

150

var(--sand-150)

200

var(--sand-200)

300

var(--sand-300)

400

var(--sand-400)

500

var(--sand-500)

600

var(--sand-600)

700

var(--sand-700)

800

var(--sand-800)

850

var(--sand-850)

900

var(--sand-900)

950

var(--sand-950)

975

var(--sand-975)

red

025

var(--red-025)

050

var(--red-050)

100

var(--red-100)

150

var(--red-150)

200

var(--red-200)

300

var(--red-300)

400

var(--red-400)

500

var(--red-500)

600

var(--red-600)

700

var(--red-700)

800

var(--red-800)

850

var(--red-850)

900

var(--red-900)

950

var(--red-950)

975

var(--red-975)

magenta

025

var(--magenta-025)

050

var(--magenta-050)

100

var(--magenta-100)

150

var(--magenta-150)

200

var(--magenta-200)

300

var(--magenta-300)

400

var(--magenta-400)

500

var(--magenta-500)

600

var(--magenta-600)

700

var(--magenta-700)

800

var(--magenta-800)

850

var(--magenta-850)

900

var(--magenta-900)

950

var(--magenta-950)

975

var(--magenta-975)

violet

025

var(--violet-025)

050

var(--violet-050)

100

var(--violet-100)

150

var(--violet-150)

200

var(--violet-200)

300

var(--violet-300)

400

var(--violet-400)

500

var(--violet-500)

600

var(--violet-600)

700

var(--violet-700)

800

var(--violet-800)

850

var(--violet-850)

900

var(--violet-900)

950

var(--violet-950)

975

var(--violet-975)

teal

025

var(--teal-025)

050

var(--teal-050)

100

var(--teal-100)

150

var(--teal-150)

200

var(--teal-200)

300

var(--teal-300)

400

var(--teal-400)

500

var(--teal-500)

600

var(--teal-600)

700

var(--teal-700)

800

var(--teal-800)

850

var(--teal-850)

900

var(--teal-900)

950

var(--teal-950)

975

var(--teal-975)

blue

025

var(--blue-025)

050

var(--blue-050)

100

var(--blue-100)

150

var(--blue-150)

200

var(--blue-200)

300

var(--blue-300)

400

var(--blue-400)

500

var(--blue-500)

600

var(--blue-600)

700

var(--blue-700)

800

var(--blue-800)

850

var(--blue-850)

900

var(--blue-900)

950

var(--blue-950)

975

var(--blue-975)

Foundations

Components

Patterns

Guidelines

Assets

Tools