Skip to content

Design system: DESIGN.md tokens + dark/light palette-only theming + rebuilt UI primitives #291

Description

@ajianaz

Requires uteke: v0.16.0+ (no API change) · Epic: #289

What

  • DESIGN.md + src/app.css: token set in OKLCH — color (bg/surface/border/text 3 levels, primary teal, amber semantic-only, success/danger), 3-step radius (12/16/8 card/CTA/pill; sm 4-6), spacing scale, elevation, motion (150ms ease-out, press scale 0.98), type scale (sans UI + mono for IDs/numbers/dates, tabular figures for dynamic numbers).
  • Theme = palette-only switch (decision 2026-09-06): dark default = editor-grade (Linear/Raycast school), light = warm paper palette from variant B (same type/spacing). No per-theme typography.
  • Rebuild src/lib/ui/* (Button, Input, Select, Card, Badge, Modal, Toast, EmptyState, Skeleton, Kbd, Tooltip, ConfirmDialog) consuming tokens only; color lock: teal = brand action, amber = semantic score/warning.
  • Theme store (localStorage + prefers-color-scheme default) + ThemeToggle (rail + Settings→Appearance).

Why

Vision audit found contrast failures (WCAG AA) and ad-hoc styling; uteke-mobile already proved the 3-token radius + color-lock discipline. Palette-only keeps one identity across themes.

Testing

  • Contrast script: all text-role token pairs ≥ WCAG AA in both themes.
  • grep gate: no raw hex/oklch literals outside tokens file in components.
  • Vitest: theme store toggle + persistence; bun run test + build green.
  • Visual: journey screenshots dark+light reviewed by vision model (0 HIGH).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions