Tokens

10 tokens, grouped by category. Click a token to copy its CSS variable.

color

color.accent

#E8462C

Primary accent color. Use sparingly for focal points, CTAs, focus rings, and selection.

text-accent / bg-accent

var(--color-accent)

color.bone

#F5F1EC

Body text on dark. Background in light theme.

text-bone / bg-bone

var(--color-bone)

color.elevated

#1A1210

Elevated surfaces — cards, tabs, modals.

text-elevated / bg-elevated

var(--color-elevated)

color.ink

#0A0606

Background / foreground in dark theme. The deep neutral.

text-ink / bg-ink

var(--color-ink)

space

space.1

0.25rem

Smallest spacing unit.

var(--space-1)

space.4

1rem

Default body-copy spacing.

var(--space-4)

space.8

2rem

Section-gap spacing.

var(--space-8)

radius

radius.md

8px

Default border-radius.

var(--radius-md)

motion

motion.duration-base

300ms

Base animation duration.

var(--motion-duration-base)

motion.ease-out-quart

cubic-bezier(0.165, 0.84, 0.44, 1)

Default easing for outgoing motion.

var(--motion-ease-out-quart)