Tokens

Semantic colors and radii come from the active file in tokens/themes/ (per data-theme). Structure (typography roles, motion, spacing, elevation) lives in tokens/design/.

Colors

Semantic colors for the active theme. Use the toolbar toggle for light vs dark mode.

background

--background

foreground

--foreground

card

--card

card-foreground

--card-foreground

popover

--popover

popover-foreground

--popover-foreground

primary

--primary

primary-foreground

--primary-foreground

secondary

--secondary

secondary-foreground

--secondary-foreground

muted

--muted

muted-foreground

--muted-foreground

accent

--accent

accent-foreground

--accent-foreground

destructive

--destructive

destructive-foreground

--destructive-foreground

success

--success

success-foreground

--success-foreground

warning

--warning

warning-foreground

--warning-foreground

info

--info

info-foreground

--info-foreground

border

--border

input

--input

ring

--ring

chrome-nav

--chrome-nav

chrome-panel

--chrome-panel

chrome-contrast

--chrome-contrast

chrome-contrast-foreground

--chrome-contrast-foreground

chrome-contrast-muted-foreground

--chrome-contrast-muted-foreground

chrome-contrast-border

--chrome-contrast-border

chrome-contrast-interactive

--chrome-contrast-interactive

chrome-footer

--chrome-footer

chrome-border

--chrome-border

chrome-foreground

--chrome-foreground

chrome-muted-foreground

--chrome-muted-foreground

chrome-interactive

--chrome-interactive

chrome-footer-foreground

--chrome-footer-foreground

chrome-footer-muted-foreground

--chrome-footer-muted-foreground

chrome-footer-border

--chrome-footer-border

Charts

Emphasis ramp for data visualizations (1 = lightest, 5 = strongest).

chart-1

--chart-1

chart-2

--chart-2

chart-3

--chart-3

chart-4

--chart-4

chart-5

--chart-5

Sidebar

Surfaces specific to the sidebar primitive.

sidebar

--sidebar

sidebar-foreground

--sidebar-foreground

sidebar-primary

--sidebar-primary

sidebar-primary-foreground

--sidebar-primary-foreground

sidebar-accent

--sidebar-accent

sidebar-accent-foreground

--sidebar-accent-foreground

sidebar-border

--sidebar-border

sidebar-ring

--sidebar-ring

Radii

Derived from --radius. Use Tailwind rounded-* utilities.

rounded-sm

--radius-sm

rounded-md

--radius-md

rounded-lg

--radius-lg

rounded-xl

--radius-xl

rounded-2xl

--radius-2xl

rounded-3xl

--radius-3xl

rounded-4xl

--radius-4xl

Semantic spacing

Intent-named tokens in tokens/design/spacing.css. Shifts with data-density and data-gutter.

--space-px

1px; use in CSS. Default Tailwind p-px applies the theme scale.

var(--space-px)

--space-gutter

Horizontal page inset (data-gutter).

px-gutter

--space-inset-tight

Control and dense surface padding (data-density).

p-inset-tight

--space-inset

Default padded surfaces such as cards (data-density).

p-inset

--space-inset-loose

Roomier than inset; 1.2× card padding.

p-inset-loose

--space-cluster

Tight rows: chips, icon + label (data-density).

gap-cluster

--space-stack

Default vertical or horizontal gap between siblings.

gap-stack

--space-section

Major block separation; section vertical rhythm.

mt-section

Spacing

Tailwind numeric step scale (rem multiples of 0.25). Prefer semantic spacing when the intent is fixed (gutter, section, card inset).

1

0.25rem

2

0.50rem

3

0.75rem

4

1.00rem

6

1.50rem

8

2.00rem

12

3.00rem

16

4.00rem

20

5.00rem

24

6.00rem

32

8.00rem

Elevation

Shadow ladder and stacking layers in tokens/design/elevation.css. Shadow steps shift with data-elevation in the theme editor; use --app-shadow-* in Tailwind (not @theme shadow keys).

Shadows

--shadow-1

--app-shadow-sm · 1 / sm

Resting surfaces - cards, inputs, subtle lift.

shadow-[var(--app-shadow-sm)]

--shadow-2

--app-shadow-md · 2 / md

Raised panels and hover depth.

shadow-[var(--app-shadow-md)]

--shadow-3

--app-shadow-lg · 3 / lg

Popovers, menus, prominent cards.

shadow-[var(--app-shadow-lg)]

--shadow-4

--app-shadow-xl · 4 / xl

Modals and floating chrome.

shadow-[var(--app-shadow-xl)]

Stacking (z-index)

--z-base (base)

Default document stacking.

z-[var(--z-base)]

--z-raised (raised)

Slightly above siblings (sticky rows, active cards).

z-[var(--z-raised)]

--z-sticky (sticky)

Sticky headers and category bars.

z-[var(--z-sticky)]

--z-overlay (overlay)

Scrims behind dialogs and sheets.

z-[var(--z-overlay)]

--z-dropdown (dropdown)

Menus, selects, popovers.

z-[var(--z-dropdown)]

--z-modal (modal)

Dialog and sheet panels.

z-[var(--z-modal)]

--z-tooltip (tooltip)

Tooltips above most chrome.

z-[var(--z-tooltip)]

--z-toast (toast)

Toasts and global notifications.

z-[var(--z-toast)]

Motion

Durations, easings, composed transitions, geometry, placeholders, and app `animation` shorthands. Keyframes for `--app-*` come from `tw-animate-css` (enter, exit, accordion-*, caret-blink). Primitives also use `animate-in`, `zoom-in-95`, etc. Clamped by `prefers-reduced-motion` in `tokens/motion-reduced.css`.

Durations (tiers)

--duration-instant

0ms; instant or disabled feel.

duration-(--duration-instant)

--duration-fast

Short feedback windows.

duration-(--duration-fast)

--duration-base

Default micro-interaction length.

duration-(--duration-base)

--duration-moderate

Sheets, medium surfaces.

duration-(--duration-moderate)

--duration-slow

Large or ambient transitions.

duration-(--duration-slow)

--duration-slower

Long tier before crawl.

duration-(--duration-slower)

--duration-ambient

Slowest tier (~10s) — decorative loops, text gradients, shader drift.

duration-(--duration-ambient)

Delays

--delay-none

No delay before transition or keyframe start.

var(--delay-none)

--delay-short

Stagger or short wait before a motion step.

var(--delay-short)

Semantic durations

--duration-shader-loop

Alias for ambient loops — text gradients, WebGPU shaders, hero drift.

animation-duration: var(--duration-shader-loop)

--duration-overlay

Scrim / backdrop open and close.

duration-(--duration-overlay)

--duration-popover

Dropdowns, tooltips, popovers.

duration-(--duration-popover)

--duration-hover

Paired with color transitions.

duration-(--duration-hover)

--duration-sidebar

Sidebar show/hide or rail.

duration-(--duration-sidebar)

--duration-dialog

Dialog content motion.

duration-(--duration-dialog)

--duration-page

View or route cross-fade (when used).

duration-(--duration-page)

Easings

--ease-linear

Stepped or non-smooth use.

var(--ease-linear)

--ease-in

Accelerate in.

var(--ease-in)

--ease-out

Decelerate out; common for enter.

var(--ease-out)

--ease-in-out

Symmetrical in/out.

var(--ease-in-out)

--ease-standard

Default product easing (overridden per theme in some files).

var(--ease-standard)

--ease-emphasized

stronger deceleration (e.g. dialog).

var(--ease-emphasized)

Composed transitions

--transition-colors

Themed text and border color changes.

transition: var(--transition-colors)

--transition-opacity

Opacity fades.

transition: var(--transition-opacity)

--transition-transform

Transform moves (enter/exit).

transition: var(--transition-transform)

--transition-shadow

Elevation and shadow changes.

transition: var(--transition-shadow)

--transition-filter

Filter and backdrop-filter (blur).

transition: var(--transition-filter)

Geometry

--motion-slide-sm

Slide offset; same order of magnitude as tw-animate slide-*-2.

translate-y-[var(--motion-slide-sm)]

--motion-slide-md

Larger travel for drawers or sheets.

translate-y-[var(--motion-slide-md)]

--motion-scale-from

Enter zoom baseline (0.95 ≈ zoom-in-95).

scale-[var(--motion-scale-from)]

--motion-scale-to

Exit zoom baseline.

scale-[var(--motion-scale-to)]

Scroll / path placeholders

--animation-timeline-default

No scroll timeline. Safe default.

animation-timeline: var(--animation-timeline-default)

--animation-timeline-none

alias for no named timeline (discoverable name).

animation-timeline: var(--animation-timeline-none)

--animation-timeline-scroll-y

Illustrative scroll() root; use when scroll-driven support is available.

animation-timeline: var(--animation-timeline-scroll-y)

--motion-path-offset-0

Motion path start.

offset-distance: var(--motion-path-offset-0)

--motion-path-offset-100

Motion path end.

offset-distance: var(--motion-path-offset-100)

App animation (tw-animate keyframes)

--app-animation-in

Generic `enter` keyframe from tw-animate-css.

animation: var(--app-animation-in)

--app-animation-out

Generic `exit` keyframe from tw-animate-css.

animation: var(--app-animation-out)

--app-animation-overlay-in

Scrim enter.

animation: var(--app-animation-overlay-in)

--app-animation-overlay-out

Scrim exit.

animation: var(--app-animation-overlay-out)

--app-animation-popover

Aligned with duration-popover + enter.

animation: var(--app-animation-popover)

--app-animation-dialog

Dialog enter emphasis.

animation: var(--app-animation-dialog)

--app-animation-accordion-down

Radix / accordion content expand.

animation: var(--app-animation-accordion-down)

--app-animation-accordion-up

Radix / accordion content collapse.

animation: var(--app-animation-accordion-up)

--app-animation-caret

OTP / caret blink; disabled in prefers-reduced-motion (see token file).

animation: var(--app-animation-caret)

Text gradients

Headline emphasis only — one phrase per title. Utilities clip gradient fills to glyphs and loop slowly via `text-gradient-shift`; static fallback when `background-clip: text` is unsupported or `prefers-reduced-motion` is on. `bg-gradient-*` reuses the same stops for spotlight card surfaces. Four roles: primary, accent, harmony-1, harmony-2 — knobs in `tokens/themes/gradient-harmony.css`. Formulas: `tokens/design/text-gradients.css`.

Primary (slow)

Design systems that scale

Accent (slow)

Design systems that scale

Harmony 1 (slow)

Design systems that scale

Harmony 2 (slow)

Design systems that scale

Stops

--text-gradient-angle

Shared angle for text and surface gradient utilities.

145deg

Harmony

--text-gradient-harmony-accent-h

Hue offset (degrees) from --primary for accent stops. Default complement: 180.

tokens/themes/gradient-harmony.css

--text-gradient-harmony-1-h

Hue offset (degrees) from --primary for harmony-1 stops. Default: 120.

tokens/themes/gradient-harmony.css

--text-gradient-harmony-2-h

Hue offset (degrees) from --primary for harmony-2 stops. Default: 60.

tokens/themes/gradient-harmony.css

Motion

--text-gradient-duration-slow

Slow headline loop — maps to `--duration-ambient` (~10s).

className="text-gradient-primary text-gradient-slow"

--text-gradient-duration

Loop duration for animated headline gradients (`text-gradient-*`).

animation: text-gradient-shift var(--text-gradient-duration)

--text-gradient-size

Background width for the shifting gradient (200% = pan room).

background-size: var(--text-gradient-size) auto

Stops

--text-gradient-primary-from

Primary headline gradient — light stop (from --primary).

className="text-gradient-primary"

--text-gradient-primary-to

Primary headline gradient — deep stop.

paired with --text-gradient-primary-from

--text-gradient-accent-from

Accent stop (primary hue + --text-gradient-harmony-accent-h, default 180°).

className="text-gradient-accent"

--text-gradient-accent-to

Accent gradient deep stop (same hue as accent-from).

paired with --text-gradient-accent-from

--text-gradient-harmony-1-from

Harmony-1 stop (primary hue + --text-gradient-harmony-1-h, default 120°).

className="text-gradient-harmony-1"

--text-gradient-harmony-1-to

Harmony-1 gradient deep stop (same hue as harmony-1-from).

paired with --text-gradient-harmony-1-from

--text-gradient-harmony-2-from

Harmony-2 stop (primary hue + --text-gradient-harmony-2-h, default 60°).

className="text-gradient-harmony-2"

--text-gradient-harmony-2-to

Harmony-2 gradient deep stop (same hue as harmony-2-from).

paired with --text-gradient-harmony-2-from

Surface fill

Wash/mesh/shimmer fill strength and tint for .marketing-surface.

--surface-fill-opacity

Surface fill opacity

Strength of wash, mesh, or shimmer layers on `.marketing-surface`.

color-mix(... calc(var(--surface-fill-opacity) * 100%), ...)

--surface-fill-from

Surface fill from

Primary-tinted stop for marketing fill gradients.

data-surface-fill=wash on preview root + .marketing-surface

Font roles

Semantic font assignments. Edit roles in tokens/design/typography.css.

Display

font-display

Hero headline

Heading

font-heading

Section title

Body

font-body

Paragraph copy that flows for a while.

font-ui

Buttons, nav, dense interfaces

Caption

font-caption

Helper, footnote, meta

Accent

font-accent italic

Editorial emphasis

Eyebrow

font-eyebrow uppercase tracking-wider text-xs

Kicker