Skip to content

UI tips

Small UI fixes, one change at a time, shown moving. Apply them yourself or hand them to your agent.

Hierarchy

Make the important thing obvious without making everything louder.

Secondary text color: 100% to 55%. Name weight: 400 to 600. Amount size: 15 to 20.

Quiet it with color before you shrink it#

Hierarchy

Make secondary text lighter, make the main thing heavier, and change size last.

Small text gets hard to read fast. A softer color pushes secondary text back and keeps it readable. A heavier weight pulls the main item forward without taking more room. Save the size bump for the one number people came to see.

Save draft button: solid to outline. Delete button: solid to link.

One loud button per screen#

Hierarchy

Give the main action the solid style. Make the others outlines or plain links, even the dangerous ones.

Three solid buttons ask for the same attention, so people stop and read all three. Keep one solid for the action you want, use an outline for the safe alternative, and turn the destructive one into a red link. It is still easy to find, just not tempting to click.

Layout & type

Space and text that read in the right order.

Label to input: 16 to 6. Between groups: 16 to 40. Panel padding: 16 to 28.

Tight inside a group, loose between groups#

Layout & type

A label belongs to its input, so keep them close. Save the big gaps for the space between groups.

When every gap is the same, people can’t tell which label goes with which field or where one group ends. Pull each label close to its input, push the groups apart, and give the whole panel enough padding that nothing touches the edge.

Line length: 85ch to 60ch. Line height: 1.25 to 1.65.

Keep lines short enough to read#

Layout & type

Aim for 45 to 75 characters a line, and give longer text more line height.

On a wide screen, text stretches to fill the card and the eye loses its place jumping back to the start of the next line. Cap the width of the text, not the card, and open up the line height so each line has room.

Color & depth

Color and shadow that hold up on any background.

Secondary text: grey to tinted. Divider: grey to tinted.

Don't put grey text on color#

Color & depth

On a colored background, use a lighter shade of that color for secondary text and lines, not grey.

Grey on a strong color looks dirty and reads as disabled. Pick a light tint of the background instead (or white at lower opacity), so the text recedes while staying part of the same surface. Do the same for dividers.

Shadow offset: 0 to 10. Shadow blur: 0 to 28. Border: 100% to 35%.

Let the shadow do the lifting#

Color & depth

Anything that floats over the page needs a shadow that falls downward. Once it has one, the border can fade.

A menu with only a border looks printed on the page, so it is hard to tell it sits on top. Push the shadow down a little, as if the light comes from above, and soften it with blur. With the shadow showing the depth, the border can drop to a faint edge.