Metric Flow
Metric Flow is a design system built for analytics dashboards and KPI tracking platforms where every pixel serves a purpose. The philosophy is maximum data visibility with minimal chrome — dense layouts, tight spacing, and a restrained color palette that reserves vibrancy for meaningful data points. The mood is clinical precision: a surgeon's tray of perfectly aligned instruments. Designed for power users who live in dashboards eight hours a day.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Corner Radius
Spacing
Base: 4pxMetric Flow is a design system built for analytics dashboards and KPI tracking platforms where every pixel serves a purpose. The philosophy is maximum data visibility with minimal chrome — dense layouts, tight spacing, and a restrained color palette that reserves vibrancy for meaningful data points. The mood is clinical precision: a surgeon's tray of perfectly aligned instruments. Designed for power users who live in dashboards eight hours a day.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
Filter Chip
Status Chip (Success)
Status Chip (Warning)
Status Chip (Error)
Lists
Default List Item
Checkboxes
Checkbox
Radio Buttons
Radio Button
Tooltips
Tooltip
Elevation & Depth
Use with MCP
Don't have the MCP? Install it here