Skip to content
veraq

FOUNDATIONS · 04

Four surfaces, one set of aliases.

Components never read a raw core token. They read semantic aliases — --vq-surface, --vq-text, --vq-border, --vq-focus — and a single data-veraq-surface attribute reskins the whole subtree beneath it. Deep and paper are canonical; light (accessibility & print) and console (developer tooling) are the new grounds. Every pairing is authored to clear WCAG 2.2 AA.

01

The aliases

  • --vq-surface / -elevated / -card / -hoverThe ground and its raised steps
  • --vq-text / -muted / -faintText in three weights of presence
  • --vq-border / -strongHairline and emphasised dividers
  • --vq-focusFocus ring — gold on dark, gold-deep on light, mint on console
  • --vq-linkInline link colour for the ground
  • --vq-success / -warning / -danger / -info / -pendingState foregrounds, resolved per ground
02

Live surfaces

Deepdeep

Marketing — observatory sky

Text primary · muted · faint

A link on this surface →

SettledPendingNoticeClosingMismatch
Focus ring
Paperpaper

Product — archival cream

Text primary · muted · faint

A link on this surface →

SettledPendingNoticeClosingMismatch
Focus ring
Lightlight

Accessibility & print

Text primary · muted · faint

A link on this surface →

SettledPendingNoticeClosingMismatch
Focus ring
Consoleconsole

Developer tooling

Text primary · muted · faint

A link on this surface →

SettledPendingNoticeClosingMismatch
Focus ring
03

Console code tokens

// commit before the wave opens; reveal at draws_at
const commitment = commitRevealV1.commit(seed, params);
const outcome = commitRevealV1.select(seed, params, list); // provable after
recipient: "p_8f2a", index: 42
04

Radii

  • sm4px

    inputs, badges, table cells, code chips

  • md10px

    cards, menus, toasts, modals (mobile)

  • lg18px

    feature cards, lit modules, modals (desktop), sheets

  • pill999px

    buttons, filter chips, avatars, status dots

05

Elevation

Dark surfaces never drop grey shadows. Elevation steps the background ramp; separation uses hairlines and one restrained gold glow on the single focal element. Paper uses one soft, near-neutral shadow. Each step shown on both grounds:

Deepramp + hairline + glow
e1 · panel
e2 · card
e3 · overlay
Papersoft shadow
e1 · panel
e2 · card
e3 · overlay
  • e1 · paneldeep · --vq-bg-elevated + --vq-line-faintpaper · --vq-bg-elevated, no shadow
  • e2 · carddeep · --vq-bg-card + --vq-linepaper · --vq-bg-card + --vq-shadow-paper
  • e3 · overlaydeep · --vq-bg-card + --vq-line-brightpaper · --vq-bg-card + --vq-shadow-paper