All design guides
Design guide

Productivity app design

Calm chrome so the user's work is the focus; keyboard-first, fast.

Typography
Typeface ·
Humanist / neo-grotesque screen sans (Inter, Geist)
Hero ·
24–32px
Body ·
14–15px
Numerals ·
Tabular where numbers align (counts, dates)
Corner personality

Sharp–medium (4–8px) — crisp, efficient

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

Quiet grayscale, one accent for primary action + active item.

Density

High but organized — sidebars, panels, keyboard shortcuts.

Typography

Compact, tabular where needed, clear active/hover states.

Motion

Snap (instant, precise). Layout transitions for reorder; no latency on frequent actions.

Patterns

Sidebar + content + inspector, command palette, list/board toggle, inline edit.

Avoid in productivity & tools

  • slow motion on frequent actions
  • modal overload
  • decorative color
  • over-hiding power features

Build it with StyleSeed

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

See the notes build See the issues build
Make your AI design productivity & tools right
Open source design engine for Claude Code, Codex & Cursor. MIT.
Star on GitHub

Other design guides

Fintech app design →SaaS dashboard design →E-commerce UI design →Social app design →Content & blog UI design →Health & fitness app design →Developer tool UI design →