Design tokens, components, and patterns for dashboards.
OKLCH for all custom colors. Hex only for Chart.js data series (Canvas API). Click any swatch to copy.
Inter for all text, JetBrains Mono for data values and code. Fluid sizing via clamp().
--text-3xl
--text-2xl
--text-xl
--text-lg
--text-base
--text-sm
--text-xs
Fluid spacing tokens scale between viewport breakpoints. Bars shown at actual computed size.
Interactive elements with ripple clicks, stretch toggles, underline focus, and toast notifications.
Outline is the preferred selection state. All buttons get ripple on click and lift on hover.
Bottom border only. Accent underline grows from center on focus.
Toasts slide from the right. Text colored by type — especially red for danger.
Shimmer animation using surface tokens. Use for any loading state.
KPIs, charts, and tables. No card wrappers — data lives directly on the surface.
Left-border accent markers — no card wrappers. Each KPI gets a different accent color via nth-child.
Chart.js 4.4.7. All colors via tok() — hex data series tokens for Canvas compatibility.
| Region | Revenue | Growth | Status |
|---|---|---|---|
| Northeast | $842,500 | +12.3% | Growing |
| Southeast | $621,300 | +8.1% | Growing |
| Midwest | $534,700 | +2.4% | Stable |
| West Coast | $412,800 | -3.7% | Declining |
| Mountain | $289,100 | +15.2% | Emerging |
Bare table — no card wrapper. Hover highlights rows. Monospace numbers via font-variant-numeric.
Lift over scale. Move your mouse over each demo to see the effect.
Click any card to preview the animation. All use ease-out timing.
Frosted glass, neumorphic inset, and three-level shadow elevation.
Three elevation levels. Use sparingly — shadows convey hierarchy, not decoration.
What not to do — and what to do instead.
var(--color-bg) + noise grain overlay
border-radius — puffy, rounded shapes look unprofessional
border-radius: 0 everywhere
transform: scale() on hover — janky, displaces layout
translateY(-2px) lift + shadow increase
var(--color-text) or var(--color-accent)
oklch(0.74 0.18 30) secondary
var(--color-bg) — content is the decoration
Triumph projects swap the accent palette to green/blue. Everything else uses the master system unchanged.
Composite patterns for data-dense surfaces. Delta chips, stat bands, dense tables with totals, progress, tabs, segmented toggles, drawers, stale timestamps. All ship in components.css; link the sheet and the class names are ready.
Monospace, tabular numerals, arrow glyph. .plain removes the border for inline use next to a value.
Horizontal strip of KPIs with eyebrow, value, optional delta, and context line. For dashboard headers.
| Match | Sold | Revenue | Fill |
|---|---|---|---|
| Stone Stadium · 4/26 | 3,142 | $42,580 | 88% |
| Clemson · 5/09 | 2,988 | $38,210 | 84% |
| Stone Stadium · 5/17 | 2,210 | $28,440 | 62% |
| GE Vernova · 6/03 | 1,870 | $23,110 | 52% |
| Total | 10,210 | $132,340 | 72% |
Add .dense for tighter rows. Wrap a totals row in tr.total. td.pos / td.neg for colored numerics.
Leading dot communicates status at a glance. .live pulses.
Underline on active. Horizontal scroll on overflow.
Time-range or mode switcher. Active fill uses the accent.
Filters left, actions right. Stale indicator pairs with the actions group.
Fixed 80×24 slot, pairs with a stat value for trend-at-a-glance. Use .sparkline.lg for 120×36.
Right-side slide-in with scrim. For row drill-downs without leaving the page.
Fresh, aging, dead. Colored dot signals freshness without reading the number.
Shimmer placeholder sized like the table that replaces it.