Theme explorer for Docs & SaaS based on the UI Kit.
A playground for exploring a theme builder for Docs and Platform — light or dark, live. The goal is to explore options before we solidify — a sandbox to react to, not a final spec.
Derived from the Moderne design kit (the six M-FISH strands), plus a few extra SaaS-only tokens for denser data-viz — those extra hues are derived from the M-FISH approach too.
The system in four layers
It is built exactly like the website's "library" so the front-end team already understands it: a strict, token-driven CSS cascade plus Handlebars partials. A designer can add a whole component — tokens, CSS, markup — with zero changes to the TypeScript layer.
ds-tokens.css — every color a named var(--ds-*).
Dark is the default :root (a dormant light block remains). Never a raw hex in a component.
ds-base.css — reset, type primitives, and the gallery shell
(top bar, side nav).
ds-components.css — the SaaS library: buttons, inputs,
tables, dialogs… each class noting the moderne-ui component it maps to.
Canonical markup in web/partials/ — the 1:1 reference the
front-end team ports into React/MUI.
Where to look
| Page | Covers | Status |
|---|---|---|
| Foundations | Primary (Teal default), status, the 6 brand strands + SaaS data-viz extras, type, spacing, elevation | Draft |
| Accessibility | WCAG AA contrast audit, 0 failures | Draft |
| Data visualization | Chart vocabulary — colour roles, chart types, the green target line, draw-on | Draft |
| Forms & buttons | Buttons, inputs, select, checkbox, radio, switch, field states | Draft |
| Navigation | Tabs, breadcrumbs, menu, side nav, app bar, pagination | Draft |
| Data display | Table, card, badge, chip, tag, avatar, status | Draft |
| Feedback & overlay | Dialog, drawer, tooltip, popover, toast, alert, progress, empty | Draft |
| Example screens | Platform screens (DevCenter, Activity, Changelog) + Docs screens (Home, Platform, Article) — all themed live by the builder | Demo |
Deferred to later passes (data/domain-heavy): data-grid behaviors, tree view,
date pickers, command palette, code/diff viewers, charts, Moddy chat, builder, results. See design-system-src/COMPONENTS.md.