Design tokens

Themes & modes

Five built-in themes — Indigo (default), Coastal, Forest, Red, and Orange — each with light and dark palettes (dark follows the system by default, or set explicitly). Switch live with the controls in the header, or programmatically:

Curbcut.setTheme("orange"); // "indigo" | "coastal" | "forest" | "red" | "orange"
Curbcut.setMode("dark");     // "auto" | "light" | "dark"

In dark mode, --cc-brand flips to a light tint for text use; solid fills always pair --cc-brand-deep with --cc-on-deep, which holds ≥7:1 in every theme and mode.

Color

• --cc-ink

  Primary text on paper and cards

• --cc-ink-soft

  Secondary text, with full contrast

• --cc-brand

  Links and interactive emphasis

• --cc-brand-deep

  Filled surfaces, paired with on-deep

• --cc-accent

  Gold details; pair with on-accent for text

• --cc-panel

  Tinted surface

• --cc-danger

  Errors · ≥7:1 on its wash

• --cc-success

  Success · ≥7:1 on its wash

• --cc-control-border

  Visible control boundaries · ≥3:1

Interaction

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

Type & space

Archivo (--cc-font) is the self-hosted variable typeface, with a system-stack fallback. Headings use a 750 weight and tight tracking. Body text is 18px with a 1.65 line height; small text and controls are at least 16px at the default browser size. Use --cc-mono for code. Sizes run --cc-text-sm through --cc-text-3xl; spacing runs from --cc-space-1 to --cc-space-8.

<p class="cc-heading cc-heading--xl">A place to belong.</p>
<p class="cc-heading cc-heading--lg">Your town, connected.</p>
<p class="cc-heading cc-heading--md">The everyday, made easier.</p>
<p class="cc-paragraph">Clear information and thoughtful details help everyone find their next step.</p>

Surface & shape

Use borders to group content and elevation to separate layers. Gold is reserved for a deliberate accent, rather than repeated on every surface.

• --cc-radius-sm: 6px — inputs and small controls.
• --cc-radius-md: 10px — buttons, cards, and panels.
• --cc-radius-lg: 16px — dialogs and larger composed surfaces.
• --cc-shadow-sm — lightly raised cards.
• --cc-shadow-lg — dialogs and floating menus.
• --cc-line groups content; --cc-control-border defines interactive boundaries.