Small Details That Add Up to Great Interfaces

Great interfaces are rarely the result of one brilliant decision. According to Jakub, they emerge from a collection of small, often invisible refinements that compound into a polished experience. The article walks through roughly a dozen concrete CSS and animation techniques, each targeting a specific rough edge that most apps leave unaddressed.

Typography and Color

text-wrap: balance is a quick win: it distributes text evenly across lines to prevent orphaned single words at the end of a block. A faster alternative, text-wrap: pretty, exists but uses a heavier algorithm. On macOS, setting -webkit-font-smoothing: antialiased (or just antialiased in Tailwind) makes text render thinner and crisper by switching from subpixel to grayscale antialiasing — best applied to the entire layout so every text element benefits. For any UI that shows updating numbers, font-variant-numeric: tabular-nums locks digit widths so counters and prices don't cause layout shift, though it does visually alter numerals in fonts like Inter.

Geometry and Depth

Concentric border radius is described as one of the more important and frequently missed concepts: the outer radius should equal the inner radius plus the padding, keeping nested elements visually harmonious rather than mismatched. For borders, the author prefers a layered box-shadow over a flat border — a three-shadow stack using low-opacity black values creates depth and adapts to any background color because it relies on transparency rather than a solid tone. A complementary trick is adding a 1px outline at 10% opacity directly on images (outline-offset: -1px), creating a consistent sense of depth, especially useful inside design systems where other elements already carry borders.

Animation Principles

"If animations aren't interruptible, it can make the interface feel broken." CSS transitions and keyframe animations behave differently when a user changes intent mid-way: transitions naturally retarget toward the new state, while keyframe animations run to completion on a fixed timeline. The author recommends transitions for interactions and keyframes for staged sequences that run once. For icon state changes (copy to check, for example), animating opacity, scale, and blur together makes the swap feel responsive rather than abrupt.

Enter and Exit Animations

Enter animations benefit from breaking a component into smaller chunks and staggering them individually rather than fading in one large block. The article demonstrates three levels: animating a single container, animating title, description, and buttons with a 100ms stagger between each, and splitting a headline into individual word spans with an 80ms per-word delay. The CSS uses a --stagger custom property to drive animation-delay off a single keyframe definition. Exit animations, by contrast, should be noticeably subtler — the entering element uses translateY(8px) and a blur(5px), while the exit uses only -12px of movement so it "doesn't demand the same amount of attention."

Optical Alignment

Geometric alignment is not always the same as visual alignment. When a button contains both text and an icon, the side nearest the icon benefits from slightly reduced padding so the content reads as optically centered. The same principle applies to icon shapes within their bounding boxes — triangles, arrows, and play buttons often sit visually off-center even when mathematically centered, and the best fix is adjusting the SVG viewBox itself rather than adding compensating margin.