Tokens and theming

shadcn-compatible tokens, dark mode, your own spectrum, utilities and reduced motion.

Token names

Motion uses the shadcn token names, so free items take on any shadcn theme you already have: background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input and ring, each with its -foreground pair. VibeBox adds a few of its own:

Token	What it is
`--subtle-foreground`	The quietest readable text: captions, meta lines
`--border-strong`	A border that holds its own on busy backgrounds
`--spectrum-1` to `--spectrum-7`	The gradient ramp every piece paints with
`--vb-*`	Motion values: durations, eases and the light and dark source colours

Dark mode

Dark mode is the .dark class, the shadcn convention. Put it on <html> (or on any section you want dark). The tone-inverse and tone-accent classes flip a single section to the opposite tone or to the accent.

Your own spectrum

Set the seven spectrum stops and every piece follows them. Gradients sample your ramp directly; fixed accents (a highlight, a glow) move to the matching place on your ramp and keep their lightness, so contrast holds.

:root,
.dark {
  --spectrum-1: #0f766e;
  --spectrum-2: #14b8a6;
  --spectrum-3: #65a30d;
  --spectrum-4: #eab308;
  --spectrum-5: #f59e0b;
  --spectrum-6: #ea580c;
  --spectrum-7: #dc2626;
}

The 3D sculptures read the ramp when they load, and their rim lights take the first, fourth and seventh stops. On the VibeBox defaults they keep their exact VibeBox colours. The liquid orb's painted fallback follows the ramp today; its liquid keeps the VibeBox spectrum until a later drop.

Utilities

bg-spectrum and text-spectrum: the ramp as a background or as gradient text.
reveal-on-view: a scroll-driven fade and rise, with no JavaScript, switched off under reduced motion.

Type and radius

Items use font-sans, font-display and font-mono, so they take your fonts. Corners follow a mature scale: 6, 8, 10 and 12 px, with full rounding only for pills and badges.

Reduced motion

Every item honours prefers-reduced-motion on its own: loops stop, 3D pieces settle into a composed still frame, and nothing you need is hidden behind motion. You do not have to wire anything.