All design guides
Design guide

SaaS dashboard design

Information per pixel. Power users want density, speed, and one quiet accent.

Typography
Typeface ·
Humanist screen-sans built for small sizes (Inter)
Hero ·
28–36px
Body ·
14px (13px in dense tables)
Numerals ·
Tabular in every table; weight (not size) carries hierarchy
Corner personality

Sharp–medium (4–8px) — precise, dense

Pick one and apply it to every card, button, input, and modal. Mixing sharp and round corners is the #1 tell of un-designed UI.

Color

Disciplined grayscale, one accent for primary action + selected state. Charts use a small fixed scale.

Density

High. Tables, filters, multi-KPI rows. Density is a feature — keep rhythm.

Typography

Balanced numbers + labels, tabular-nums, tight line-height, quiet headings.

Motion

Snap (instant, Linear-style). Layout/FLIP for reorder, near-zero entrance.

Patterns

Chart card with period toggle, dense KPI grid, filterable table, segmented control.

Avoid in saas & b2b dashboards

  • decorative motion
  • oversized hero numbers wasting space
  • 6-color chart legends
  • modal-heavy flows

Build it with StyleSeed

StyleSeed bakes this judgment into 74 rules your AI reads automatically. For saas & b2b dashboards, start from the Linear / Vercel skin and the snap motion seed.

Make your AI design saas & b2b dashboards right
Open source design engine for Claude Code, Codex & Cursor. MIT.
Star on GitHub

Other design guides