Styling

CSS variables for color, radius and motion, exposed as Tailwind utilities. Neutral by default, so your brand sets the color.

Overview

Tokens follow the shadcn convention: a surface variable and a matching -foreground, defined on :root for light and .dark for dark, then mapped to Tailwind in @theme inline. The palette is pure grayscale, with color reserved for status.

Colors

light

Surface

background

card

popover

muted

accent

secondary

Content

foreground

muted-foreground

primary

border

input

ring

Signal

success

warning

info

destructive

dark

Surface

background

card

popover

muted

accent

secondary

Content

foreground

muted-foreground

primary

border

input

ring

Signal

success

warning

info

destructive

Primary color

Neutral is the default: no brand color, and agent activity reads through motion and contrast. To add one, pick a preset. It only sets --primary, --primary-foreground and --ring, so buttons, focus rings and the Voice Orb follow it. Try them in Customize, the color dot in the header.

pnpm dlx shadcn@latest add @jds/color-blue

Presets: color-blue, color-violet, color-rose, color-emerald, color-amber. For any other color, set the three variables yourself in both themes.

Base color

Tints the whole gray scale while keeping every lightness step, so contrast doesn't change. Stone is warm, Zinc is cool, Slate leans blue. Install a base before a primary color preset, so the preset's --primary wins.

pnpm dlx shadcn@latest add @jds/base-stone

Status

success, warning, info and destructive each have a -foreground variant tuned for text on the page background.

Dark mode

Dark is the default and uses the .dark class on html. Borders and inputs are translucent foreground (9% and 13%) so they stay visible on any surface. A .light class scopes the light theme inside a dark page, which is how the palettes above render side by side.

app/globals.css

:root,
.light {
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.145 0 0);
  --ring: oklch(0.6 0 0);
  /* … */
}

.dark {
  --background: oklch(0.185 0 0);
  --foreground: oklch(0.94 0 0);
  --border: oklch(1 0 0 / 9%);
  --ring: oklch(0.55 0 0);
  /* … */
}