[Web][W1.1] Establish visual constitution, tokens, themes, and component gallery

Objective

Create the visual and test foundation that makes subsequent TinyChain UI work implementable and visually reviewable by Tembo.

Scope

• Versioned color, typography, spacing, radius, elevation, breakpoint and motion tokens.
• Light, dark and high-contrast themes using semantic token names.
• A browser component gallery built with the existing React Native Web stack.
• Deterministic Playwright screenshot harness and documented baseline-update procedure.
• Visual constitution covering hierarchy, density, focus, motion, responsive behavior and prohibited one-off styling.

Acceptance criteria

• Tokens have typed exports and no component consumes raw palette values directly.
• Theme switching does not remount application state.
• Gallery renders in SSR and hydrates without warnings or visual shift beyond the documented threshold.
• Screenshot artifacts are stable across two clean runs in the pinned environment.
• Accessibility minimums and reduced-motion behavior are documented.
• Human reviewer approves the initial visual baseline.

Parent: #7

Required visual evidence

The draft PR must provide a runnable component-gallery route plus before/after screenshots at 390×844, 768×1024, and 1440×900. Cover light, dark, high-contrast, default, hover, focus-visible, disabled, loading, empty, error, and overflow states applicable to the component. Playwright must exercise keyboard interaction and capture deterministic screenshots. A reviewer other than the implementing agent must approve intentional baseline changes; screenshot generation or a passing pixel threshold is not visual approval.

Tembo execution contract

automation:
  eligible: true
  executor_profile: tembo
  readiness: ready
  primary_repository: TinyChain-Inc/client
  base_branch: main
  writable_scope:
    - web/src/ui/tokens/**
    - web/src/ui/gallery/**
    - web/tests/visual/**
    - web/playwright.config.mjs
    - web/package.json
    - web/package-lock.json
    - web/README.md
  prerequisites:
    []
  concurrency_group: ui-foundation
  required_commands:
    - "cd web && npm ci"
    - "cd web && npm run test:all"
  external_actions: none
  draft_pr_only: true
  completion_authority: human
  visual_validation:
    required: true
    browsers: [chromium]
    viewports: [mobile, tablet, desktop]
    evidence: [component-gallery-url, screenshot-bundle, playwright-report]
    baseline_update_requires: human-visual-approval
    failure_policy: never-auto-accept-diff
  budget:
    size: large
    max_revisions: 3
    max_wall_minutes: 120

Start by reading web/src/ui/tokens/, web/src/ui/gallery/, web/tests/visual/, web/playwright.config.mjs, and web/README.md, then run cd web && npm ci and npm run test:all. Done means a runnable SSR gallery, typed themed tokens, deterministic Chromium screenshots at the required viewports and states, documented accessibility and baseline procedures, and human approval of visual changes.