Skip to content

Design system

Molib's visual language is restrained and operational. Flat surfaces, cool grays inspired by molybdenum, a single teal accent for action. Data carries the screen; chrome stays out of the way.

The live, editable source of truth is the MUI theme at frontend/src/theme.ts. A showcase page renders every decision on the sub-pages below at /design (no auth required) — if a token changes, that's where to verify the visual impact.

Theme summary

  • Page background #EEF0F2 (cool gray, faint blue cast) · surface #FFFFFF · border #D8DCE0 hairline.
  • Ink #1A1D21 near-black (never pure black) · muted #5A6068 for secondary copy.
  • Accent #0F6E6E teal — the only chromatic action color. Semantic colors (success/warning/error/info) are muted to coexist with it.
  • Type Inter, 14px base, weight 600 for headings, sentence-case buttons.
  • Surfaces are flat: elevation=0 on Paper/Card/AppBar; separation is conveyed by the hairline border and a single alt-surface fill (#F6F7F9) for table headers and inset panels.
  • Density first: tables default to size="small"; base type and spacing are tuned for screens that show many rows at once.
  • Borders, not shadows. borderRadius = 6 globally; chips override to 4 to read as labels rather than pills.

Sub-pages

  • Principles — the five rules every other decision flows from.
  • Palette — surfaces, ink, accent, and semantic tokens with hex values.
  • Typography — family, scale, and weight conventions.
  • Spacing & shape — the 8px grid and radius decisions.
  • Components — committed MUI overrides and the paginated-table pattern.
  • Icons — Material Icons; usage and import style.
  • Voice & tone — what end-user copy should sound like.
  • Deferred — what we explicitly haven't decided yet.

Changing the design system

Treat theme.ts and the files in this folder as paired: a token change in one must land in the other in the same commit. The /design page is the test harness — verify there before merging.

Significant deviations (new accent, new component override pattern, picking a charting library) earn an ADR. Refinements (a hex tweak, a spacing nudge) just update both files.