proposal-system/docs/adr/0003-shoc-design-system-adoption.md
Adam Moussa a4b09eb0ad
docs: SHOC-alignment Phase 1 — ADRs, governance files, doc corrections (#220)
- Add ADR 0002 (SHOC merge boundary: separate backend services, shared
  conventions) and ADR 0003 (adopt SHOC design system + UI/UX layout)
- Add CODEOWNERS (internal-dev) and PR template (Summary/Test plan/Jira/
  docs-current checklist + contract-table convention)
- Fix stale facts in README/CLAUDE.md: MUI v7→v9, RN 0.85→0.86,
  OpenSearch Serverless/oss-index-creator → Aurora pgvector/
  aurora-pgvector-init (ADR 0001), test counts 149→186 (123 xUnit /
  26 vitest / 37 pytest), deploy triggers are workflow_dispatch-only,
  reusable workflow refs float on @main, aws-cdk-lib version claim
  replaced with Dependabot-maintained note
2026-07-13 17:00:45 -04:00

49 lines
2.4 KiB
Markdown

# ADR 0003 — Adopt the SHOC design system and UI/UX layout
- **Status:** Accepted (2026-07-13)
- **Decision owner:** Adam Moussa
- **Scope:** `web/` theming, layout shell, and all future proposal-system UI work
## Context
Three design-token sets existed across Sea Haven web apps as of 2026-07-13:
1. **Old canon** — Nunito, primary `#0c4f6f`, 220px sidebar, `#f4f6f7` background
(what SHOC's stale `docs/DESIGN_SYSTEM.md` still describes).
2. **SHOC dev's new system** (shoc-frontend-new PR #17) — Montserrat (display) /
DM Sans (body) / JetBrains Mono, primary `#1c75bc`, navy `#262262`, page background
`#f9fafb`, 244px sidebar (76px collapsed), 64px gradient topbar
(`#1b1f52 → #1c4f8f → #1c75bc`), defined in a single CSS-variable token file
(`src/styles/theme.css`) consumed by both MUI (`getCssVar` → `createTheme`) and
Tailwind v4.
3. **proposal-system's "Sea Haven Ops" theme** — Inter, accent `#2563EB`,
navy-900 AppBar, 216px drawer (`web/src/theme.ts`).
## Decision
**SHOC dev's new design system and UI/UX layout (set 2) is the canonical Sea Haven
standard.** proposal-system adopts it fully:
- **Tokens:** mirror shoc-frontend-new dev's `theme.css` values and structure
(fonts, palette, radii, spacing, shadows).
- **Mechanism:** single CSS-variable token file is the one source of truth;
`web/src/theme.ts` becomes a thin `getCssVar` → MUI `createTheme` adapter matching
SHOC's `mui-theme.ts`. Token changes are values-only edits, never theme rewrites.
- **Layout shell:** SHOC's admin shell dimensions and treatment — 244px/76px-collapse
sidebar, 64px gradient topbar, avatar initials.
- **Component library:** MUI only. Tailwind (SHOC runs a MUI + Tailwind v4 hybrid off
the same CSS variables) is **not** adopted here pre-consolidation; the shared
CSS-variable source keeps that door open.
The reference is shoc-frontend-new's **`dev` branch** at adoption time; subsequent
SHOC token changes should be ported as values-only updates.
## Consequences
- The "Sea Haven Ops" theme (Inter/#2563EB) is retired; alignment plan Phase 2
implements the port.
- Visual verification for Phase 2 compares proposal-system screens side-by-side with
SHOC dev screens, not with the old canon.
- The superseded Nunito/`#0c4f6f` tokens must not be reintroduced anywhere.
- At monorepo consolidation, both frontends already share token structure, so a
single `theme.css` can serve both.