Tokens

The complete vocabulary. If a value has no token, it does not exist.

Spacing - 6 levels

`--space-xs`	0.25rem / 4px
`--space-sm`	0.5rem / 8px
`--space-md`	1rem / 16px
`--space-lg`	1.5rem / 24px
`--space-xl`	2.5rem / 40px
`--space-2xl`	4rem / 64px

Type scale - 7 levels

`--text-xs`	0.75rem / 12px
`--text-sm`	0.875rem / 14px
`--text-md`	1rem / 16px - body
`--text-lg`	1.125rem / 18px
`--text-xl`	1.5rem / 24px
`--text-2xl`	2rem / 32px
`--text-3xl`	3rem / 48px

Headings h1–h6 map onto the scale automatically (h1 = 3xl … h6 = sm). Never restyle them.

Color - semantic

`--color-brand`	Primary actions, links
`--color-brand-subtle`	Brand tints, focus rings
`--color-accent`	Single sharp accent
`--color-surface`	Page background
`--color-surface-raised`	Cards, panels, sidebars
`--color-surface-sunken`	Wells, footers
`--color-content`	Body text
`--color-content-subtle`	Secondary text
`--color-border`	Default borders
`--color-border-strong`	Inputs, emphasis borders
`--color-success`	Status - has a -subtle tint
`--color-warning`	Status - has a -subtle tint
`--color-error`	Status - has a -subtle tint
`--color-info`	Status - has a -subtle tint

Radius, shadow, typography, motion

Radius	`--radius-{sm\|md\|lg\|full}`
Shadow	`--shadow-{sm\|md\|lg}`
Fonts	`--font-{sans\|display\|mono}`
Weight	`--weight-{normal\|medium\|bold}`
Leading	`--leading-{tight\|normal\|loose}`
Motion	`--ease-default`, `--duration-{fast\|normal\|slow}`

Dark mode

<html data-theme="dark">

Light is Canon's default. Dark mode is always explicit - one attribute, and surfaces, content, borders and subtle tints all remap. No automatic theme switching: one right way.

Theming

:root {
  --color-brand: #0ea5e9;   /* the only sanctioned override point */
}