laws_of_ux_in_css

Users often perceive aesthetically pleasing design as design that's more usable.

Use design tokens (CSS custom properties) for color, type scale, and spacing so the UI feels consistent and polished. Consistency reads as quality.

Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.

Keep transition and animation duration under ~300–400ms for hover, focus, and toggle feedback so the system feels responsive.

The time to acquire a target is a function of the distance to and size of the target.

Use min-height/min-width (e.g. 44px for touch), padding to grow hit area without changing visual size, and gap to separate targets.

The time it takes to make a decision increases with the number and complexity of choices.

Progressive disclosure: use <details>/<summary> or show/hide with CSS to reduce visible options. Fewer choices at once.

Users spend most of their time on other sites and prefer your site to work the same way.

Respect platform: -webkit-tap-highlight-color, :focus-visible for focus rings, and familiar spacing so interactions feel familiar.

Objects that are near each other tend to be perceived as grouped.

Use gap in flex/grid and margin to group related elements and separate groups. Spacing encodes hierarchy.

Elements sharing a clearly defined boundary tend to be perceived as one group.

Use background, border, border-radius, or box-shadow to create regions (cards, sections, modals) so grouping is obvious.

Similar elements are perceived as a complete picture or group.

Reuse the same classes and design tokens so similar function looks similar; reserve contrast for the primary action.

The average person can only keep 7 (±2) items in working memory.

Chunk with layout: use grid/flex + gap and borders or backgrounds to create 5–9 clear chunks (e.g. form sections, list groups).

People judge an experience by how they felt at its peak and at its end.

Add a short transition on exit (e.g. transition on state change) so the end of an interaction feels intentional, not abrupt.

Users best remember the first and last items in a series.

Use :first-child / :last-child or :nth-child(n of S) to emphasize start and end (e.g. stepper, list, breadcrumb).

When multiple similar objects are present, the one that differs is most likely to be remembered.

Style the primary CTA with contrast (color, font-weight, size, box-shadow); keep secondary actions visually similar.

People remember uncompleted or interrupted tasks better than completed ones.

Use progress indicators and clear incomplete-state styling (e.g. outline, accent border) so in-progress items are visible.