The rules

Things entering the screen should ease out: a fast start and a gentle stop.

Ease-in starts slowly, right when the user is watching, so the same 200ms feels sluggish. Ease-out responds at once and settles.

Keep interface animations under 300ms.

Menus open dozens of times a day. At half a second every open becomes a wait; 150 to 250ms reads as instant and still shows where the menu came from.

Popovers should grow from their trigger.

Setting the transform origin at the button makes the menu look like it came out of it. Scaling from the center makes it appear from nowhere.

Never grow from nothing. Start near 95% size and fade in.

Nothing in the real world appears from zero size. A slight scale with a fade feels like the dialog arrives; growing from zero feels like it inflates.

Stagger list items by 30 to 80ms.

A small offset lets the eye follow the list from top to bottom. Everything at once is a flash; the stagger gives it direction.

A stagger should finish fast. Nobody waits for row five.

At 220ms per row the last item lands almost a second late. Keep the offset small so the whole list settles in well under half a second.

Buttons should respond to the press, not just the release.

Scaling to about 97% on press confirms the tap instantly, before any network work finishes. Without it the button feels dead.

Exit the way you entered.

A toast that rises from the bottom should leave through the bottom. Symmetric paths tell people where it went.

Keep spring bounce barely visible in product UI.

A heavy wobble is fun once and tiring by the tenth time. A bounce around 0.1 to 0.3 keeps the physical feel without the jelly.

Keep body text to 45 to 75 characters per line.

On long lines the eye loses its place on the way back to the start of the next one. Around 65 characters is the sweet spot.

Give body text a line height around 1.5.

Tight leading blurs lines of text into a block. Headlines can go tight; paragraphs need air.

Build hierarchy with size, weight and color.

When everything is the same size, people read every line to find what matters. One large number and a muted caption do the sorting for them.

Use tabular figures, right-aligned, for numbers people compare.

Tabular figures give every digit the same width, so the decimal points line up and you can compare amounts down the column.

Don’t set paragraphs in all caps.

Capitals remove the ascenders and descenders that give words their shape, so reading slows down. Save caps for short labels.

Use one type family, two at most, and vary the weight.

Every extra typeface adds another voice. Size and weight within one family give a card all the contrast it needs.

Balance headlines so no word is stranded on its own line.

A lone word on the last line looks like a mistake and breaks the rhythm. In CSS, text-wrap: balance fixes it.

Body text needs at least 4.5:1 contrast.

Light grey looks elegant on a bright monitor and vanishes on a phone in sunlight. WCAG sets 4.5:1 as the minimum for normal text.

Pick one accent color for everything interactive.

When every toggle and button has its own hue, color stops meaning “you can click this”. One accent teaches the pattern once.

Make destructive actions red, and only those.

Red signals danger before anyone reads the label. Painting Cancel red and Delete in the brand color invites the wrong click.

In dark mode, avoid pure black and pure white.

Pure white on pure black glows and smears for many readers. A near-black background and off-white text keep contrast without the glare.

Check text contrast on colored buttons, too.

White on yellow is about 1.5:1, far below the 4.5:1 minimum. Bright fills need dark text.

Never rely on color alone to carry meaning.

About 1 in 12 men has some color blindness, and red and green dots look alike to many of them. An icon and a word work for everyone.

Tint shadows to the background and keep them soft.

A hard black shadow on a warm page looks pasted on. A soft shadow tinted with the background hue reads as real light.

Keep labels close to their fields and farther from the next one.

Spacing is grouping. When the gap above a label is bigger than the gap below it, each label clearly belongs to its field.

Give each view one primary action.

Three solid buttons compete for attention. A filled primary, an outlined secondary and a quiet Cancel make the path obvious.

Nested corners should be concentric: inner radius equals outer radius minus padding.

When the inner radius matches the outer one, the gap between them looks thicker at the corners. Subtracting the padding keeps the curves parallel.

Make touch targets at least 44 by 44 points.

Fingers are imprecise. Small, tightly packed icons cause mis-taps; wide 44-point targets are comfortable even one-handed.

Align to one edge. Every element should line up with something.

Mixing centered, left and right alignment creates ragged edges the eye keeps tripping over. A single left edge reads as intentional.

Give content room to breathe inside its container.

Text touching the border feels cramped and cheap. Consistent padding, around 16 to 24px on cards, frames the content.

Group related items under clear headings.

Six identical rows force people to read every one. Three labelled groups let them jump straight to the section they want.

Label buttons with the action they perform.

“Submit” describes the form, not the outcome. “Save changes” says exactly what happens when you click.

Errors should say what happened and what to do next.

An error code means nothing to most people. Name the problem in plain words, then give the next step.

Confirmations should name the thing and the action.

“Are you sure?” with Yes and No makes people reread the question. “Delete file” and “Keep file” make sense from the buttons alone.

Empty states should explain and offer a next step.

“No data” is a dead end. Say what’s missing, why it matters, and give one button to fix it.

Keep snackbars short. Two or three words is plenty.

Snackbars disappear in seconds. “Link copied” is read at a glance; a sentence of filler isn’t.

Loading states should be specific: what, how many, how long.

“Please wait” gives no sense of progress. “3 of 12 files, about a minute left” lets people decide whether to wait.

Don’t use placeholders as labels.

A placeholder vanishes as soon as you type and takes the label with it. Visible labels stay put, and the placeholder can show an example instead.