Colors

Warm stone neutrals, a brand-lime accent for actions and selected fills with a darker green for accent text and focus rings, a blue accent for info, and five identity hues — every value exposed as a CSS variable.

Surfaces

Background

var(--background)

Card

var(--card)

Popover

var(--popover)

Paper

var(--paper)

Secondary

var(--secondary)

Muted

var(--muted)

Accent

var(--accent)

Inverse

var(--inverse)

Text & lines

Foreground

var(--foreground)

Muted foreground

var(--muted-foreground)

Border

var(--border)

Input

var(--input)

Ring

var(--ring)

Brand

Lime for CTA surfaces. --selected fills interactive/checked states and takes --selected-foreground as its ink; --selected is the darker tone for anything thin or textual, where the fill is too light to read.

Primary

var(--primary)

Primary foreground

var(--primary-foreground)

Selected

var(--selected)

Selected ink

var(--selected)

Selected foreground

var(--selected-foreground)

Semantic

Fixed, conventional hues — independent of whatever the brand is.

Info

var(--info)

Success

var(--success)

Warning

var(--warning)

Destructive

var(--destructive)

Charts

Chart 1 · violet

var(--chart-1)

Chart 2 · pink

var(--chart-2)

Chart 3 · orange

var(--chart-3)

Chart 4 · blue

var(--chart-4)

Chart 5 · teal

var(--chart-5)

Cover gradients

Soft mesh gradients built from stacked radial gradients — used on agent card covers.

Sky

.gradient-sky

Sunrise

.gradient-sunrise

Blossom

.gradient-blossom

Meadow

.gradient-meadow

Usage

Reference tokens through Tailwind utilities — never hard-code a hex.

tsx

1<div className="bg-card text-foreground ring-1 ring-border">…</div>
2<Badge variant="info">Beta</Badge>   {/* uses --info */}

PreviousInstallation Next Typography

Pesto UI · 117 documented components