A small, opinionated set of design tokens + utility classes for data dashboards — the kind of UIs that show metrics, tables, charts, filter bars, and status badges.
Two files. No build step. Drop them in and use.
tokens.css— colors, type scale, 4px spacing, radius, shadow, motioncomponents.css—.card/.metric-card/.chart-card/.data-table/.btn-*/.badge-*/.filter-bar/.alert-error/ form / link
Light + dark mode via [data-theme="dark"]. prefers-reduced-motion respected.
| Light | Dark |
|---|---|
 |
 |
Open showcase/index.html in a browser to interact (theme toggle in the top-right).
Most "design systems" are either enormous (Material, Fluent) or app-specific. This one is the smallest set of tokens + utilities a dashboard actually needs — metric cards, status badges, dense data tables, filter chips. ~250 lines of CSS total, no JS, no framework dependency. Tailwind-compatible if you want it.
The token values are inspired by the dashboard system that emerged inside Microsoft's internal dev-agility repo. Color picks are stock Tailwind palette anchors (Slate / Sky / Emerald / Rose / Amber), so they look at home next to anything Tailwind-based.
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components.css"><div class="metric-card">
<div class="metric-card-label">PR merged · 7d</div>
<div class="metric-card-value">142</div>
</div>@import url("./tokens.css");
@import url("./components.css");tokens.css is just CSS custom properties on :root. Drop it into your globals.css after @import "tailwindcss"; and reference tokens directly in utilities or @apply:
@import "tailwindcss";
@import url("./tokens.css");
.my-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
}If you want Tailwind classes that resolve to these tokens, extend the theme in your tailwind.config or use Tailwind v4's @theme block.
Toggle by setting data-theme="dark" anywhere up the tree (commonly <html>):
document.documentElement.dataset.theme = 'dark';All token values are remapped at that selector — no component CSS needs to change. Never fall back through var(--host-*, …) or rely on color: inherit for portal/shadow content; if you build a portal component, copy the tokens you need into its own block. (Painful lesson — see MEMORY.md notes elsewhere.)
- 4px grid for everything.
--sp-1…--sp-16. No magic px values in components. - Status = semantic, not literal. Red is "failing/error", not "delete". Don't repurpose.
- Charts use a 5-color categorical ramp.
--chart-1blue is the primary; reach for it first. - Hover/focus is part of the component. Don't redefine
:hoveron.btn-primaryin a consumer stylesheet. - No nested CSS beyond
.parent .child. Keep it scannable.
dashboard-design-system/
├── README.md
├── LICENSE MIT
├── tokens.css design tokens (~140 lines)
├── components.css utility classes (~280 lines)
├── showcase/
│ └── index.html live preview, all components, theme toggle
└── docs/
├── tokens.md quick token reference
├── components.md component cheatsheet with snippets
└── usage.md integration recipes (vanilla / Tailwind / React)
- Tailwind v4
@themeblock as a separate optional entry file - React-component examples (Recharts-styled, sortable table)
- Density variant (compact / comfortable)
-
prefers-color-scheme: darkauto-detect (currentlydata-themeonly)
Distilled from work on the Microsoft dev-agility internal dashboard. Token aesthetic owes a debt to Tailwind, shadcn/ui, and the Vercel dashboard.
MIT — see LICENSE.