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. This palette ensures excellent contrast and accessibility while maintaining visual harmony across light and dark themes.

Colors

Our color system is designed to be accessible, consistent, and adaptable across different themes and contexts.

Semantic Colors

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-850

Input

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

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

Guidelines

Assets

Colors

A Desert-Inspired Palette

Colors

Semantic Colors

Color Scales

stone

sand

red

magenta

violet

teal

blue