01
Nested corners
A rounded box inside a rounded box only looks right when the inner radius is the outer radius minus the padding.
inner16px
Experiments
Small things I build to check a hunch. Each one is the real thing, so go ahead and use it.
02
Smart guides
Drag the button. It snaps to the frame’s center and to the logo, and shows the gap. Arrow keys nudge by 1, Shift by 10.
03
Hold to confirm
For actions you can’t undo. Holding is a decision; a dialog is a reflex. Let go early and nothing happens.
Press and hold, or hold Space.
04
The lightest gray that passes
Designers love pale gray text. Slide until it fails, then come back one step.
Your appointment is confirmed for Thursday at 2:30 pm. We’ll text you the morning before.
5.04: 1 on this page · #6D6D69
- Body text 4.5:1 · passes
- Large text 3:1 · passes
- Enhanced 7:1 · fails
05
Feel the curve
The same 600 ms feels quick or sluggish depending on where the time is spent. Run it a few times.
cubic-bezier(0.2, 0.8, 0.2, 1)06
Optical center
A triangle centered by its box looks shifted left; its weight sits near the flat side. Nudge it by eye, not by math.
07
Balanced headlines
Narrow the column. Normal wrapping leaves a word stranded on the last line; balance shares the words out.
The agent should have a cursor, not a chat window