A
Airy

Colors

Semantic tokens for UI, status colors, sidebar, chart, and the full primitive palette that powers them.

Semantic tokens

Core UI tokens previewed across app/marketing and light/dark modes.

backgroundvar(--background)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

foregroundvar(--foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

primaryvar(--primary)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

primary-foregroundvar(--primary-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

secondaryvar(--secondary)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

secondary-foregroundvar(--secondary-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

mutedvar(--muted)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

muted-foregroundvar(--muted-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

accentvar(--accent)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

accent-foregroundvar(--accent-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

destructivevar(--destructive)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

destructive-foregroundvar(--destructive-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

bordervar(--border)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

inputvar(--input)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

ringvar(--ring)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

cardvar(--card)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

card-foregroundvar(--card-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

popovervar(--popover)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

popover-foregroundvar(--popover-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Sidebar tokens

Tokens scoped to the sidebar component.

sidebarvar(--sidebar)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

sidebar-foregroundvar(--sidebar-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

sidebar-primaryvar(--sidebar-primary)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

sidebar-primary-foregroundvar(--sidebar-primary-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

sidebar-accentvar(--sidebar-accent)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

sidebar-accent-foregroundvar(--sidebar-accent-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

sidebar-bordervar(--sidebar-border)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

sidebar-ringvar(--sidebar-ring)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Status tokens

Foreground, background, and border tokens for feedback states.

Info

info-foregroundvar(--info-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

info-backgroundvar(--info-background)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

info-bordervar(--info-border)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Success

success-foregroundvar(--success-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

success-backgroundvar(--success-background)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

success-bordervar(--success-border)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Warning

warning-foregroundvar(--warning-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

warning-backgroundvar(--warning-background)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

warning-bordervar(--warning-border)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Error

error-foregroundvar(--error-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

error-backgroundvar(--error-background)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

error-bordervar(--error-border)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Levender

levender-foregroundvar(--levender-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

levender-backgroundvar(--levender-background)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

levender-bordervar(--levender-border)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Banner

banner-default-foregroundvar(--banner-default-foreground)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

banner-default-backgroundvar(--banner-default-background)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

banner-default-bordervar(--banner-default-border)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Chart tokens

Five sequential tokens for data visualization.

chart-1var(--chart-1)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

chart-2var(--chart-2)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

chart-3var(--chart-3)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

chart-4var(--chart-4)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

chart-5var(--chart-5)

App / Light

App / Dark

Marketing / Light

Marketing / Dark

Custom palettes

Airy's proprietary color ramps used for brand and UI surfaces.

Neutral

neutral-*
950
900
800
700
600
500
400
300
200
100
50

Abyss

abyss-*
950
900
800
700
600
500
400
300
200
100
50

Terra

terra-*
950
900
800
700
600
500
400
300
200
100
50

Green

green-*
950
900
800
700
600
500
400
300
200
100
50

Mud

mud-*
950
900
800
700
600
500
400
300
200
100
50

Levender

levender-*
950
900
800
700
600
500
400
300
200
100
50

Status palettes

Full ramps for info, success, warning, and error. These shift between light and dark mode.

Info

info-*
950
900
800
700
600
500
400
300
200
100
50

Success

success-*
950
900
800
700
600
500
400
300
200
100
50

Warning

warning-*
950
900
800
700
600
500
400
300
200
100
50

Error

error-*
950
900
800
700
600
500
400
300
200
100
50

Standard palettes

Extended color ramps available as Tailwind utilities (e.g. bg-blue-500, text-rose-700).

Red

red-*
950
900
800
700
600
500
400
300
200
100
50

Orange

orange-*
950
900
800
700
600
500
400
300
200
100
50

Amber

amber-*
950
900
800
700
600
500
400
300
200
100
50

Yellow

yellow-*
950
900
800
700
600
500
400
300
200
100
50

Lime

lime-*
950
900
800
700
600
500
400
300
200
100
50

Emerald

emerald-*
950
900
800
700
600
500
400
300
200
100
50

Cyan

cyan-*
950
900
800
700
600
500
400
300
200
100
50

Sky

sky-*
950
900
800
700
600
500
400
300
200
100
50

Blue

blue-*
950
900
800
700
600
500
400
300
200
100
50

Indigo

indigo-*
950
900
800
700
600
500
400
300
200
100
50

Violet

violet-*
950
900
800
700
600
500
400
300
200
100
50

Purple

purple-*
950
900
800
700
600
500
400
300
200
100
50

Fuchsia

fuchsia-*
950
900
800
700
600
500
400
300
200
100
50

Pink

pink-*
950
900
800
700
600
500
400
300
200
100
50

Rose

rose-*
950
900
800
700
600
500
400
300
200
100
50