Design tokens

x00.ai uses semantic design tokens defined in app/globals.css. Prefer semantic token classes over hardcoded color values.

How to use semantic tokens

Use semantic utility classes such as bg-background, text-foreground, and border-border so components follow light/dark theme values automatically.

<div className="bg-background text-foreground border border-border">
  Token-aware surface
</div>

Base semantic color tokens

Core UI surface, content, action, and state colors. Light and dark values are both defined in app/globals.css.

background
foreground
card
card-foreground
popover
popover-foreground
primary
primary-foreground
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
destructive
border
input
ring

Chart tokens

Reserved palette slots for chart/category visuals.

chart-1
chart-2
chart-3
chart-4
chart-5

Sidebar tokens

Semantic tokens for sidebar surfaces and emphasis states.

sidebar
sidebar-foreground
sidebar-primary
sidebar-primary-foreground
sidebar-accent
sidebar-accent-foreground
sidebar-border
sidebar-ring

Radius tokens

Shared corner radius scale derived from the base radius token.

radius-sm
radius-md
radius-lg
radius-xl
radius-2xl
radius-3xl
radius-4xl

Typography tokens

Deterministic system font stacks for sans and mono usage.

font-system-sans
font-system-mono