Key insights
- 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.
