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.