MiniDash Design System

MiniDash Design System mockup preview
Click to expand

MiniDash is a widget-like, compact design system engineered for mobile dashboard and widget-style apps. It packs maximum information into minimal space using tight grids, small-but-readable type, and color-coded metric widgets. The indigo-teal-amber palette provides distinct channels for different data categories. Every component is optimized for dense data display on constrained mobile viewports, making complex dashboards feel organized and scannable at a glance.

Primary#6366F1
Secondary#14B8A6
Tertiary#F59E0B
Background#F3F4F6
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayInter · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headlineInter · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

subheadInter · 17px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body_largeDM Sans · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyDM Sans · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body_smallDM Sans · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

captionDM Sans · 11px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

overlineDM Sans · 10px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

codeIBM Plex Mono · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

MiniDash is a widget-like, compact design system engineered for mobile dashboard and widget-style apps. It packs maximum information into minimal space using tight grids, small-but-readable type, and color-coded metric widgets. The indigo-teal-amber palette provides distinct channels for different data categories. Every component is optimized for dense data display on constrained mobile viewports, making complex dashboards feel organized and scannable at a glance.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus

Elevation & Depth

Subtle
Medium
Large
Overlay

Do's & Don'ts

Do

use the 2-column widget grid as the primary layout pattern for dashboard screens
display metric values in large, bold type with contextual trend indicators (arrows, sparklines)
color-code metrics consistently: indigo for primary KPIs, teal for positive trends, amber for warnings
allow users to reorder and customize their widget layout via drag-and-drop
provide an expanded view for each widget that shows full data details on tap
use semantic colors for threshold indicators so users can instantly spot values that need attention

Don't

exceed 8 widgets on a single screen -- scroll for additional data to avoid overwhelming users
use text smaller than 10px even in compact mode -- readability must not be sacrificed for density
animate data updates aggressively -- use subtle fade transitions (150ms) for changing values
use heavy shadows on widgets in the grid -- keep them light so the layout reads as flat and organized
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.2 KB
Downloads 0
clean dashboard minimal mobile-app saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/minidash and implement it in my code

Don't have the MCP? Install it here