Colors

SolarUI uses Radix UI Colors as its color foundation. Every color is a 12-step scale carefully designed for accessible contrast, predictable usage, and automatic dark mode — no dark: overrides needed in your components.

The 12-step scale

Each color family has 12 steps with precise semantic roles:

Step	Role	Typical use
1	App background	`body`, page root
2	Subtle background	Cards, panels, sidebars
3	UI component background	Default state of inputs, popovers
4	Hovered component background	Hover on interactive items
5	Active / selected background	Selected list item, pressed state
6	Subtle border	Separators, card borders
7	Component border	Form inputs, default focus ring
8	Hovered border	Strong border, hover on border
9	Solid background	Solid buttons, badges
10	Hovered solid background	Hover on solid buttons
11	Low-contrast text	Secondary labels (accessible on light background)
12	High-contrast text	Body text, headings

SolarUI tokens

SolarUI maps 6 semantic groups to Radix color families. These generate 72 Tailwind utilities (bg-default-1 … text-info-12):

Token group	Radix family	Role
`default`	gray	Surfaces, borders, body text
`brand`	orange	Primary actions, highlights
`error`	red	Destructive, invalid states
`success`	green	Confirmation, positive feedback
`warning`	amber	Warnings, caution states
`info`	sky	Informational, neutral highlights

default(gray)

brand(orange)

error(red)

success(green)

warning(amber)

info(sky)


// Surfaces and text
<p className="text-default-12">Main text</p>
<p className="text-default-11">Secondary / muted text</p>
<div className="bg-default-2 border border-default-6">Card</div>
 
// Brand — primary actions
<button className="bg-brand-9 text-brand-1 hover:bg-brand-10">Save</button>
 
// Error state
<div className="bg-error-3 text-error-11 border border-error-7">
  Invalid field
</div>
 
// Success, warning, info follow the same pattern
<Badge className="bg-success-9 text-success-1">Active</Badge>
<Badge className="bg-warning-9 text-warning-1">Pending</Badge>
<Badge className="bg-info-9 text-info-1">Beta</Badge>

Dark mode is handled automatically by Radix UI Colors. Importing *-dark.css files sets the same CSS variables under .dark, so all bg-default-*, text-brand-* etc. classes switch seamlessly — no dark: prefix required in your components.

Full Radix UI palette

All 33 Radix color families, grouped by hue. Hover any swatch to see its step number and hex value.

Grays

Gray

Mauve

Slate

Sage

Olive

Sand

Reds & Pinks

Tomato

Red

Ruby

Crimson

Pink

Purples & Blues

Plum

Purple

Violet

Iris

Indigo

Blue

Greens

Cyan

Teal

Jade

Green

Grass

Mint

Sky

Warm

Lime

Yellow

Amber

Orange

Metals

Brown

Bronze

Gold

The palette above shows light-mode values. Radix provides a matched dark scale for every color. See Composing Palettes to learn how to choose colors that harmonize across light and dark.