SupplyGrid Design System

SupplyGrid Design System mockup preview
Click to expand

SupplyGrid is an operational, logistics-focused design system tailored for supply chain management and logistics dashboards. It prioritizes data density and scannability over decorative elements. The compact spacing and flat aesthetic keep complex shipment tables, route maps, and inventory grids readable under pressure.

Primary#475569
Secondary#2563EB
Tertiary#D97706
Background#F8FAFC
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Roboto Slab · 28px · bold

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

h2Roboto Slab · 22px · semibold

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

h3Roboto Slab · 18px · semibold

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

h4Roboto Slab · 15px · semibold

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

bodyRoboto · 13px · regular

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

smallRoboto · 11px · regular

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

monoIBM 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

SupplyGrid is an operational, logistics-focused design system tailored for supply chain management and logistics dashboards. It prioritizes data density and scannability over decorative elements. The compact spacing and flat aesthetic keep complex shipment tables, route maps, and inventory grids readable under pressure.

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 deliveredStatus in transitStatus delayedStatus lost

List Item

Standard

Hover

Selected

Checkbox

Unchecked

Checked

Indeterminate

Disabled

RadioButton

Uncheck

Checked

Disabled

Tooltip

Regular

Elevation & Depth

sm
md
lg
focus

Do's & Don'ts

Do

Use monospace font for all tracking numbers, SKUs, and shipment IDs.
Keep tables compact — favor `small` and `body` type sizes for data rows.
Color-code shipment statuses consistently using the semantic palette.
Design for data density; operators scan dozens of rows at a time.
Provide inline filters and sort controls above every data table.
Always show timestamps in UTC or with explicit timezone labels.

Don't

Add unnecessary shadows — use borders as the primary elevation method.
Use large border-radius values — the 4px subtle radius maintains a professional, operational tone.
Hide critical route or inventory information behind hover tooltips alone.
Use tertiary amber as a background fill — reserve it for warning badges only.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.3 KB
Downloads 0
admin clean dashboard enterprise professional

Use with MCP

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

Don't have the MCP? Install it here