Mantissa Design System — CSS tokens, Tailwind config, component patterns, dashboard creation rules. Load when creating or editing HTML/UI.
Every HTML file, dashboard, artifact, or UI output MUST use the Mantissa Design System.
tools/ui/ — shared CSS, JS, and dashboard HTML filestools/ui/base.css — CSS variables (light/dark) + custom components (source of truth)tools/ui/theme.js — shared Tailwind theme configurationtools/ui/skeleton.html — clean starting point for new dashboardstools/ui/observatory.html — full prototype with all componentswork/topics/2026-03-08_design-system/DESIGN_SYSTEM.md — tokens, components, patternswork/topics/2026-03-08_design-system/STRATEGY.md — technical decisionsfont-serif for all <h1>–<h3>, font-sans for body.bg-page (#FCFCF4 light / #141413 dark). Never pure white.text-ink, text-muted, text-faint).--c-page, --c-ink, etc.) switch via .dark class on <html>. HTML stays the same.text-coal (hardcoded #191918) on light teal cells, text-white on dark teal. Never text-ink on colored backgrounds.bg-card rounded-card only. Separators are border-subtle hairlines.tools/ui/skeleton.html as starting point<head>: <link rel="stylesheet" href="base.css">, <script src="https://cdn.tailwindcss.com?plugins=typography"></script>, <script src="theme.js"></script><script src="nav.js"></script> before </body>base.css + theme.jstools/ui/