Density reads as competence. 13px text, 32px rows, letter spacing pulled in by 1%. The same viewport shows 14 issues instead of 8, with no scroll.
Depth comes from value, not blur. Kill the shadows and stack three background values (base, surface, raised surface) separated by a 1px border at 8% white. Hover changes the surface value, not the elevation. Flat surfaces look engineered, shadows look decorated.
One color, used twice. Indigo on the selected row and the primary button, nowhere else. Status is a grey icon, not a colored pill. Seven colors collapse to one and the UI instantly looks deliberate.
Every action shows its shortcut. C creates, Cmd K searches. Hover feedback lands in about 80ms and transitions stay under 150ms, with no bounce or overshoot. The UI answers before you finish the gesture.
A 4px grid does the rest. 16px icons centered on the text line, labels left, numbers and dates right, nothing centered. Alignment is invisible when right and loud when wrong.
Do / Don't
Do: Build depth from three stacked background values plus a hairline border (rgba white at 8%), and change the surface value on hover.
Do: Print the keyboard shortcut next to every action, and keep hover feedback near 80ms with transitions under 150ms.
Do: Left-align labels and ids, right-align numbers and dates, and center icons on the text line using a 4px grid.
Don't: Use drop shadows to separate rows, panels, or the sidebar.
Don't: Encode status or priority with colored pills when a grey icon says the same thing.
Don't: Let transitions bounce, overshoot, or drag past 150ms.
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
