Skip to content

v1.1.0 — 2026-04-28

Design system + form patterns. Closes #1.

Added

Design system

  • wiki/design-system/ — palette, typography, spacing & shape, components, icons, voice & tone, deferred decisions, plus an overview index with a theme summary.
  • Proximity-tier spacing rule (4 / 8 / 16 / 24 px for cluster / control / sibling / block) documented in spacing.md and applied throughout the showcase.
  • Wiki index updated with a Design system entry.

Frontend theme (frontend/src/theme.ts)

  • Cool-gray molybdenum-inspired palette: #EEF0F2 page, #FFFFFF surface, #F6F7F9 surface-alt, #D8DCE0 hairline border, #1A1D21 ink, muted secondary tones.
  • Teal #0F6E6E accent as palette.primary. Muted semantic colors for success / warning / error / info.
  • Inter font family, 14px base size, sentence-case buttons.
  • MUI overrides: flat Paper / Card / AppBar (elevation=0, hairline border), small-by-default Table / TextField, uppercase eyebrow h6, 6px global radius (4px on chips).

Frontend components (frontend/src/components/)

  • FormCard — narrow single-purpose form container. Title, optional subtitle, error slot, fields (children), dedicated submit slot (full-width, +8px breathing room above the block-tier 24px gap), footer slot rendered below the card. Used by SignInPage, SignUpPage, VerifyPage.
  • FormSection — layout primitive for sections inside larger forms. h5 title + optional muted description (cluster tier) + fields stack (block tier below the title block).

Frontend showcase pages

  • /design — palette swatches, typography scale, buttons & inputs, status & feedback, surface hierarchy, paginated roster table (filter, pagination, status chips, empty state, edit icon), FormCard example, link to the patient form, voice & tone examples.
  • /design/patient — multi-section entity-edit pattern: page header, single card with tabs (General / Medical history / Appointments / Documents), four FormSections separated by hairline dividers (Identification, Contact with repeatable phones, Addresses with repeatable inset-paper groups, Notes), and a right-aligned action bar at the bottom of the card.

Dependencies

  • @mui/icons-material@^7.3.10 — Material Icons paired with MUI. Per-icon imports for tree-shaking; outlined variants preferred.

i18n

  • Added verify.errorTitle so the verify error state has its own title instead of reusing the success copy.

Changed

  • frontend/src/main.tsx — uses molibTheme instead of the bare createTheme() default.
  • frontend/src/pages/SignInPage.tsx, SignUpPage.tsx, VerifyPage.tsx — refactored onto FormCard; submit button moved into the dedicated submit slot.

Notes

No backend changes. No model or schema changes. No test changes.