Skip to content

docs: extract Calm Clinical design system into DESIGN.md #286

Description

@blakenan-bellese

Problem

`frontend/src/index.css` ships a sophisticated design system — OKLCH color tokens with semantic state vars (`--ok`, `--warn`, `--err`, `--accent` + matching washes), Inter Tight + JetBrains Mono typography, 4/8/12px radius scale, light/dark themes. But there's no DESIGN.md. Contributors guessing at conventions will drift; OSS contributors looking at #280/#281/#282 will cargo-cult unless told 'these tokens, in this combination.'

Proposal

After #12 ships, run `/design-consultation` (gstack skill) to extract the de facto system. DESIGN.md should cover:

  • Calm Clinical design direction + rationale
  • OKLCH color philosophy + when to use which token
  • Typography scale (Inter Tight for UI, JetBrains Mono for code/URLs)
  • Component patterns (chip, card, modal, kebab menu, toast, error banner)
  • Light/dark theming approach
  • Spacing + radius scale
  • Accessibility floor (WCAG AA contrast, 44px touch targets, keyboard semantics)

Why defer

Doc work shouldn't block the connectathon. Best done once #12's design decisions (chip 4-state, fieldsSpec a11y contract, responsive collapse-at-mobile) are codified — captures the latest patterns, not stale ones.

Estimated effort

~2 hours with `/design-consultation` + manual editing.

Surfaced by

`/plan-design-review` on #12 (2026-05-06).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions