Design tokens

Tokens are the theming contract. A town gets its own colors by overriding the brand tokens — but every override must hold the AAA contrast contract, and the docs build will fail if it doesn't.

Color

• --cc-ink

  Body text · ≈16:1 on paper

• --cc-ink-soft

  Secondary text · ≈9.6:1

• --cc-brand

  Links & accent text · ≈8.4:1

• --cc-brand-deep

  Surfaces · white on it ≈10.4:1

• --cc-accent

  Decorative only — never carries text

• --cc-panel

  Tinted surface

• --cc-danger

  Errors · ≥7:1 on its wash

• --cc-success

  Success · ≥7:1 on its wash

Interaction

• --cc-target: 2.75rem — 44px minimum target (WCAG 2.5.5).
• --cc-focus-ring: 3px solid — the always-visible focus indicator.

Type & space

A serif reading face (--cc-font-serif) for content, a sans UI face (--cc-font-sans) for controls and labels. Sizes run --cc-text-sm through --cc-text-3xl; spacing runs a 4px scale from --cc-space-1 to --cc-space-7.