adam/proposal-system
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/proposal-system.git synced 2026-09-30 03:03:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
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

2.4 KiB
Raw Permalink Blame History

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.