Colors

Semantic color roles, and when to use each.

Appica UI's palette is organized by role, not by hue. Instead of blue-500, you use primary or info-emphasis. This keeps components meaningful and lets a single token override retheme the whole system. Every color is defined in oklch and is overridable — see Theming.

Each color is exposed as a Tailwind utility (bg-*, text-*, border-*) and as a raw CSS variable named after the role — var(--primary), var(--foreground), and so on. See Theming.

Base colors

The grayscale foundation of every layout: backgrounds, text, and borders. Each family is a scale from subtle to intense.

Foreground (text & icons)

Token	Use for
`foreground`	Default body text
`foreground-muted`	Secondary text, descriptions
`foreground-subtle`	Placeholders, disabled labels, markers
`foreground-strong`	Emphasized text
`foreground-emphasis`	Stronger emphasis
`foreground-intense`	Headings, highest-contrast text
`foreground-inverse`	Text on an inverted surface

Background (surfaces)

Token	Use for
`background`	The base page surface
`background-subtle`	Slightly raised areas, cards
`background-muted`	Hover fills, inset panels
`background-strong`	More prominent fills
`background-inverse`	Inverted surfaces (e.g. tooltips)

Border

Token	Use for
`border`	Default borders and dividers
`border-muted`	Faint separators
`border-strong`	Higher-contrast borders
`border-emphasis`	Emphasized outlines
`border-intense`	Strongest outlines
`border-inverse`	Borders on inverted surfaces

Accent palettes

Six semantic accents share an identical scale, so they're interchangeable by intent. primary and secondary carry your brand; error, success, warning, and info carry status.

Step	Role
`*-subtle`	Translucent tint — soft background wash
`*-soft`	Slightly stronger translucent fill
`*-muted`	Muted solid
`*` (base)	The default accent fill
`*-strong`	Stronger, for hover/active
`*-emphasis`	The vivid, on-brand value
`*-intense`	The boldest value
`*-foreground`	Text/icon color that sits legibly on the accent

For example, an info alert pairs bg-info-subtle (surface), bg-info-soft (border), with text-info-foreground; a solid primary button pairs bg-primary with text-primary-foreground.

Focus rings

Focus styling has its own token set so the ring can differ from borders. Each maps to a matching role, and components apply them automatically on :focus-visible — see Accessibility.

Token	Use for
`ring`	Default focus ring, neutral controls
`ring-input`	Inputs and form fields
`ring-primary`	Primary controls
`ring-secondary`	Secondary controls
`ring-error`	Error / invalid controls
`ring-success`	Success controls
`ring-warning`	Warning controls
`ring-info`	Info controls
`ring-light`	Controls on inverted / dark surfaces

Overriding the palette

Any token can be redefined after the stylesheet import, separately per theme:

:root {
  --secondary: oklch(0.827 0.119 306.383);
}
.dark {
  --secondary: oklch(0.714 0.203 305.504);
}

Head to Theming for the raw-vs-theme token model and the non-color tokens (radius, shadows, typography).

Getting Started

For AI Agents

Guides

Utilities