These are practical, not dogmatic. Use what helps; skip the rest. For a deeper, interactive take on the same ideas, Jakub Krehel’s version is worth your time.
Type that reads evenly
For headings, text-wrap: balance in CSS can spread lines so no single line feels heavier than the rest. For body copy, text-wrap: pretty nudges away awkward one-word rags at the end of paragraphs. Both are small and optional, but the difference in polish shows up in side-by-side review.
Nesting and radius
When one rounded box sits inside another, the inner radius should relate to the outer and the padding. A simple rule: outer radius ≈ inner radius + padding on that side. Mismatched corners are one of those things people do not name out loud, but they feel “off” instantly.
Motion with intent
Contextual icons (copy, save, play) read clearer when the change is a short fade or scale, not a hard swap. You can do a lot with opacity and a light blur on the incoming state.
<button class="action">
{state === "done" ? <Check /> : <Copy />}
</button>Interruptible transitions (CSS transitions for interactive states, as opposed to long keyframed one-shots) usually feel better for anything the user can toggle or undo mid-animation.
Crisp type on the web
On many displays, a bit of font smoothing on the root layout thins out text in a way that matches how systems look in native tools:
<html lang="en" class="antialiased">
<!-- or -->
* { -webkit-font-smoothing: antialiased; }
</html>Apply once at the root so you are not fighting one-off fixes later.
More
Tabular figures for anything that animates, subtle shadows instead of hard borders in light UIs, and a faint outline on photos so edges do not melt into the background—the list keeps growing. The pattern is: notice friction, then fix the smallest real cause.