Design guide

Developer tool UI design

Dark-first, dense, precise. Devs distrust slow or flashy UI.

Typography

Typeface ·: Grotesque + matched mono superfamily (Geist Sans/Mono, IBM Plex)
Hero ·: 32–48px
Body ·: 14–16px (code 13–14px mono)
Numerals ·: Tabular / monospace for IDs, logs, tokens

Corner personality

Sharp (4px) — technical, exact

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

Dark-first, restrained, one accent. Syntax colors are their own controlled scale.

Density

High — devs read dense screens fine. Monospace for code/IDs/logs.

Typography

Mono for code/identifiers, tight tabular numbers, quiet UI text.

Motion

Snap (instant). Minimal, functional only — flashy reads as unserious.

Patterns

Code blocks with copy, logs/terminal, status badges, command palette, key-value config.

Avoid in developer tools

flashy motion
light-only themes
decorative gradients
hiding the CLI/copy affordance

Build it with StyleSeed

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

See the issues build See the settings build

Make your AI design developer 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 →Productivity app design →Health & fitness app design →