Dark mode for Docs & SaaS, on one brand spine.
A playground for exploring a dark mode for our Docs and Platform, built on the Moderne brand. It carries two surface profiles over one shared spine: a SaaS / Platform theme (teal action colour, Inter, cool flat ground) and a Docs theme (Digital Green, Poppins / IBM Plex Mono, the kit's warm ground + a soft glow). Use the Theme builder (top bar) to switch surface, colours and fonts — everything re-themes live. The goal is to explore options before we solidify: this is a sandbox to react to, not a final spec. The spine — canvas, ink, spacing, and the 6-strand spectrum — is consumed from the design kit; SaaS adds extra hues for data-viz.
Two surfaces, one brand spine
The brand spine is defined once and shared; each surface is a thin override on top. Pick "About the … theme" under SaaS or Docs in the left nav for the full rationale (and the brand-rollout epic items each addresses). You can't cross-theme — inside SaaS sections the Docs toggle is disabled, and vice-versa.
The product app surface. Teal action colour (distinct from brand-green), Inter for UI + data, a cool, flat ground, and the full categorical palette for dense data-viz. The component library lives here.
Public-facing, so it reads as the brand. Digital Green accent, Poppins + IBM Plex Mono, the kit's warm ground with a soft glow, and a restrained palette — the 6 brand strands only.
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 · SaaS / Green · Docs), 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 | SaaS screens (DevCenter, Activity, Changelog) + Docs screens (Home, Platform, Article) — each opens in its own surface theme | 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.