A
Airy

Colors

Semantic token guide

A reference list of Airy semantic color tokens and primitive ramps. Prefer semantic tokens for UI usage, and use raw primitive values only for one-off, highly specific color needs.

Core interface tokens
Default app surfaces, text, actions, and focus primitives.
Token + definition
Light mode (app)
Dark mode (app)
background

Main application canvas.

var(--color-white)
var(--color-terra-900)
foreground

Default text and icon color.

var(--color-neutral-900)
var(--color-neutral-100)
card

Elevated container surfaces.

var(--color-white)
var(--color-terra-800)
card-foreground

Text and icon color on card surfaces.

var(--color-neutral-900)
var(--color-neutral-100)
popover

Popover, menu, and dropdown surfaces.

var(--color-white)
var(--color-terra-800)
popover-foreground

Text and icon color on popover surfaces.

var(--color-neutral-900)
var(--color-neutral-100)
primary

Primary actions and emphasis.

var(--color-green-900)
var(--color-terra-50)
primary-foreground

Text and icon color on primary surfaces.

var(--color-white)
var(--color-neutral-950)
secondary

Lower-emphasis actions and supportive surfaces.

oklch(var(--primitive-neutral-900) / 10%)
var(--color-terra-700)
secondary-foreground

Text and icon color on secondary surfaces.

var(--color-neutral-900)
var(--color-neutral-100)
muted

Subdued backgrounds for low-priority content.

var(--color-neutral-100)
var(--color-terra-700)
muted-foreground

Text and icon color on muted surfaces.

var(--color-neutral-500)
var(--color-neutral-400)
accent

Interactive hover/active emphasis surfaces.

oklch(var(--primitive-neutral-900) / 10%)
var(--color-terra-700)
accent-foreground

Text and icon color on accent surfaces.

var(--color-neutral-900)
var(--color-neutral-100)
destructive

Error and dangerous actions.

var(--color-red-700)
var(--color-red-400)
destructive-foreground

Text and icon color on destructive surfaces.

var(--color-white)
var(--color-white)
border

Default dividers and component outlines.

oklch(var(--primitive-black) / 10%)
oklch(var(--primitive-white) / 10%)
input

Input and control chrome.

var(--color-neutral-200)
oklch(var(--primitive-white) / 15%)
ring

Focus ring and active outline color.

var(--color-neutral-400)
var(--color-terra-400)
sidebar

Sidebar base surface.

var(--color-mud-50)
var(--color-terra-950)
sidebar-foreground

Text and icon color on sidebar surfaces.

var(--color-neutral-900)
var(--color-neutral-300)
sidebar-primary

Sidebar-specific semantic color token.

var(--color-neutral-900)
var(--color-terra-50)
sidebar-primary-foreground

Text and icon color on sidebar primary surfaces.

var(--color-neutral-900)
var(--color-neutral-950)
sidebar-accent

Sidebar-specific semantic color token.

oklch(var(--primitive-neutral-500) / 10%)
var(--color-terra-800)
sidebar-accent-foreground

Text and icon color on sidebar accent surfaces.

var(--color-neutral-900)
var(--color-neutral-50)
sidebar-border

Border color for sidebar UI.

oklch(var(--primitive-black) / 10%)
oklch(var(--primitive-white) / 10%)
sidebar-ring

Sidebar-specific semantic color token.

var(--color-green-800)
var(--color-terra-400)
Feedback tokens
Status and notification colors for success, info, warning, error, and banners.
Token + definition
Light mode (app)
Dark mode (app)
success-background

Background surface color for success UI.

var(--color-success-50)
var(--color-success-700)
success-foreground

Text and icon color on success surfaces.

var(--color-success-700)
var(--color-success-200)
success-border

Border color for success UI.

oklch(var(--primitive-black) / 2%)
oklch(var(--primitive-white) / 10%)
info-background

Background surface color for info UI.

var(--color-info-100)
var(--color-info-800)
info-foreground

Text and icon color on info surfaces.

var(--color-info-700)
var(--color-info-300)
info-border

Border color for info UI.

oklch(var(--primitive-black) / 2%)
oklch(var(--primitive-white) / 10%)
warning-background

Background surface color for warning UI.

var(--color-warning-100)
var(--color-warning-900)
warning-foreground

Text and icon color on warning surfaces.

var(--color-warning-700)
var(--color-warning-300)
warning-border

Border color for warning UI.

oklch(var(--primitive-black) / 2%)
oklch(var(--primitive-white) / 10%)
error-background

Background surface color for error UI.

var(--color-error-100)
var(--color-error-700)
error-foreground

Text and icon color on error surfaces.

var(--color-error-700)
var(--color-error-300)
error-border

Border color for error UI.

oklch(var(--primitive-black) / 2%)
oklch(var(--primitive-white) / 10%)
levender-background

Background surface color for levender UI.

var(--color-levender-50)
var(--color-levender-800)
levender-foreground

Text and icon color on levender surfaces.

var(--color-levender-800)
var(--color-levender-400)
levender-border

Border color for levender UI.

oklch(var(--primitive-black) / 5%)
oklch(var(--primitive-white) / 15%)
banner-default-background

Background surface color for banner default UI.

var(--color-mud-50)
var(--color-terra-800)
banner-default-foreground

Text and icon color on banner default surfaces.

var(--color-mud-950)
var(--color-neutral-400)
banner-default-border

Border color for banner default UI.

oklch(var(--primitive-black) / 2%)
oklch(var(--primitive-white) / 10%)
Data + navigation tokens
Chart series semantic colors for data visualization.
Token + definition
Light mode (app)
Dark mode (app)
chart-1

Data visualization series color.

var(--color-purple-300)
var(--color-violet-500)
chart-2

Data visualization series color.

var(--color-blue-400)
var(--color-blue-400)
chart-3

Data visualization series color.

var(--color-green-300)
var(--color-orange-300)
chart-4

Data visualization series color.

var(--color-red-400)
var(--color-green-300)
chart-5

Data visualization series color.

var(--color-yellow-200)
var(--color-fuchsia-200)
Additional semantic tokens
Tokens detected in the theme file that do not match the default docs groups.
Token + definition
Light mode (app)
Dark mode (app)
shadow-2xl

Semantic color token.

0 25px 50px -12px rgb(0 0 0 / 0.25)
—
shadow-2xs

Semantic color token.

0 1px rgb(0 0 0 / 0.03)
—
shadow-lg

Semantic color token.

0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
—
shadow-md

Semantic color token.

0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
—
shadow-sm

Semantic color token.

0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
—
shadow-xl

Semantic color token.

0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
—
shadow-xs

Semantic color token.

0 1px 2px 0 rgb(0 0 0 / 0.03)
—

Primitive ramps (reference)

Full ramps for building and evolving semantic tokens.

Airy custom palettes

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

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 utility palettes

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
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
Blue
blue-*
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
Rose
rose-*
950
900
800
700
600
500
400
300
200
100
50

Typography

Type scale and font styles used across the design system.

Heading 1

Heading 1text-4xl font-semibold tracking-tight lg:text-5xl

Heading 2

Heading 2text-3xl font-semibold tracking-tight

Heading 3

Heading 3text-2xl font-semibold tracking-tight

Heading 4

Heading 4text-xl font-semibold tracking-tight

Body text. The king thought long and hard, and finally came up with a brilliant plan: he would host a royal banquet.

Bodyleading-7

Muted text for secondary information.

Mutedtext-sm text-muted-foreground

Small text with medium weight.

Smalltext-sm font-medium

Spacing

Spacing scale tokens used across the design system.

space-0
0
space-1
0.25rem
space-2
0.5rem
space-3
0.75rem
space-4
1rem
space-5
1.25rem
space-6
1.5rem
space-8
2rem
space-10
2.5rem
space-12
3rem
space-16
4rem
space-20
5rem
space-24
6rem

Icons

1671 icons

Airy uses Lucide for all iconography. Click any icon to copy its import statement.

Usage

Import icons individually from lucide-react:

import { ChevronRight, Search, Settings } from "lucide-react"

<Search className="size-4" />
<Settings className="size-5 text-muted-foreground" />

For icon props in component interfaces, use the LucideIcon type:

import { type LucideIcon } from "lucide-react"

interface NavItem {
  title: string
  icon: LucideIcon
}