MCM-55 — Design System Documentation & Living Catalog

← Back to MCM Design System overview

As a Frontend Engineer,
I want a browsable, always-up-to-date catalog of the shared tokens, components, and icons with usage guidance,
so that I can find and use the right existing piece before building something new, without asking the Design Lead every time.

Acceptance Criteria

• A documentation site lists every token (colour, spacing, type, radius), every shared component with interactive examples of its variants and states, and every icon in the curated set.
• Each component's entry shows its accepted customization options and at least one "don't do this / do this instead" guidance note, in the same spirit as the conventions already established informally for the product console.
• The catalog reflects the actual currently-published version of the shared package — not a hand-maintained document that can fall out of sync with what's really shipped, the way one surface's token values already fell out of sync once before.
• An engineer can copy a usable code snippet directly from a component's catalog entry.
• The catalog is reachable by anyone building on any of the three surfaces, without needing access specific to only one of them.

---

Technical Design

The catalog renders directly from the shared token/component/icon package built in MCM-52 through MCM-54, so an entry is only ever as stale as the last published package version, not a separately hand-maintained document. Each entry favours a real, interactive example and a short usage note over a long written specification.

---

UI / Frontend Changes

• New documentation site (or section within existing engineering documentation) with a searchable index of tokens, components, and icons.
• Each entry renders a live, interactive example rather than a static screenshot, so behaviour (hover, focus, disabled, loading states) is visible in place.
• A copy-to-clipboard code snippet on every component entry.