#Small details that add up

None of these details matter alone. A nested border radius that's too round for its container. An icon that's technically centered but looks off. A focus ring that doesn't match the button shape. Each in isolation is invisible. As a collection, they mark the difference between a thoughtful interface and a sloppy one.

Nobody judges an interface by checking every detail. Instead, a person intuitively knows whether an interface is well-polished or lacks it. This comes through the many choices people often overlook, which together produce an overall aesthetic. What stands out when a detail is missing isn't criticism -  — it's the quiet sense that if this got missed, others probably did too.

The details presented here aren't facts to learn. They're illustrations of a certain level of attention to detail in design, asking what can possibly go wrong regarding spacing and default behavior, among other considerations. It's this kind of attention to detail that once developed will cause you to see these same problems everywhere else.

#Geometry that looks right

The design guidelines for rounded corners, borders, padding and alignment are not always clear, but you will know them when you see them being done incorrectly.

Nested border radii. When one rounded object sits inside another, the radius of the inner object needs to be smaller than that of the outer object. Here's a good guideline for choosing the radius of the inner object: inner radius = outer radius -  — gap between objects.

If the gap is larger than the radius of the outer object, you don't need any rounding at all. When the two radii are identical, the object will appear too round to be nested inside.

If you need a more detailed formula for the edge cases, there is a very nice explanation written by Steve Ruiz, the creator of tldraw.

#Optical alignment vs. mathematical alignment.

Centering a play icon or checkmark inside a button with equal padding may look misaligned due to the lack of visual symmetry among icons. The play icon will look best slightly moved to the right, while the checkmark will need a tiny move down.

#Type that behaves

Text is by far the most common element in every user interface and breaks down in numerous ways.

Numbers in tables should be represented using monospace or tabular figures. When such numbers are not used, digits shift depending on their value because digits such as 1 and 4 take up different amounts of space. So, a change from $1.00 to $4.00 in price would move the entire column.

Text wrapping. Text wrapping is automatic, but how well depends on what we do to it. Setting text-wrap: pretty ensures that no single word can end up alone at the end of a paragraph. text-wrap: balance does an even better job, distributing lines evenly -  — useful when centering headings.

However, using the text-wrap: balance rule could create a column with even lines. In such a case, it's better to use the max-width rule. This will result in text that is wrapped normally, not creating columns but maintaining its paragraph-like appearance.

Truncation. Three types of truncation can be implemented when the text doesn't fit: wrapping, end truncation or middle truncation. Default behavior (wrapping) is safe to use for any content. End truncation suits labels and descriptions where the beginning is crucial. Middle truncation is used for filenames and URLs, where the ending is more valuable -  — e.g., every screenshot starts with the same words, so Screenshot 2026-… looks identical for all of them, while Screensho…at 14.32.08.png still tells you which one it is.

Icon to text. In case there's an icon next to a text that splits into two or three lines, using align-items: center will make the icon sit in the middle of that block, which looks unnatural. It's recommended to set a wrapper with height: 1lh for the icon and position it inside the wrapper to ensure it stays in the top part of the icon, as your eyes are supposed to see it there.

#Numbers and units

Numbers need precision. Mistakes in that field are both misleading and unattractive.

Formatting. It's recommended to use separators when formatting large numbers: 1000000 is less clear than 1,000,000. Decide on whether your website will use comma separators, space separators or some other approach (based on the current locale) and follow it consistently.

Rounding. It is unnecessary to display additional digits if they don't add any value. E.g., in a general dashboard, showing 52.3847% is pointless and misleading -  — 52.4% or 52% would be enough. However, showing 10.30 in a billing screen is precise enough, while 10.3 would be misleading.

Glued terms. Never separate glued terms consisting of values and their unit. 10MB cannot split into 10 at the end of one line and MB at the beginning of the following line. Glued terms include keyboard shortcut combinations ⌘KCtrl+K, compound nouns (e.g., United States) and version numbers.

#Hit areas and touch targets

A button that's fine for a mouse can be too small to hit reliably on a touchscreen.

There are recommendations about making your target elements 44×44px tall and wide. But the user-visible element doesn't need to take up the full space -  — padding or even additional UI elements may increase the actual tappable area.

But you should be wary of the proximity of targets. When two clickable elements are close to each other, users can unintentionally click them because they didn't touch the desired one. So leaving a small gap, like 4–8 pixels, between elements, makes misclicks less frequent.

Clickable labels. When a checkbox has a descriptive label, the label should be a part of the clickable area as well. If there's a gap between the checkbox and the label, that gap should also be clickable -  — dead zones between related elements feel broken and people click the gap constantly.

#Invisible defaults

However, there are also restrictions that are about what is not visible to the user.

• user-select: none for icons, SVGs, decorative graphics and other purely visual elements. Without it, accidentally selecting them creates visual noise -  — especially during drag interactions or rapid clicking.

• Input type. A phone number should open the numeric keyboard, not the full QWERTY layout. Email address input field will display @ key, a URL will display the .com entry field. It is easy to implement with type="tel", type="email" or inputmode="numeric" attributes and allows avoiding conflicts with the user.

• No zooming on mobile input fields. If a font size in the input fields on iOS Safari is smaller than 16px, focusing on an input triggers a zoom-in action that can not be turned off. Set min font-size to 16px on all input elements and the problem goes away. Some suggestions recommend setting maximum-scale=1 to solve the issue, but it will disable zoom for users who need it.

Mobile auto play of videos. In the case of using Safari browser in an iPhone device, if you have a video with autoplay, it would automatically appear in fullscreen mode. However, when you use playsinline, the video remains in the page.

#Scroll and overflow hints

Scrolling capabilities should be communicated through the interface design by removing the use of scrollbar elements.

Items only partially shown. Scrollable lists or menus should have their containing element sized in such a way that the last visible item is cut off. It serves as an indicator that there is still more to see. If the list height perfectly coincides with the end of the item, scrolling will cease.

Background continuity. On the iOS platform, in case of an overscroll on any particular page, you can notice the color of the background of the content. However, in case this color does not align with the page's background, there is a noticeable band of stripes on the top/bottom of the page.

Overflow gradients. An easy gradient at the end of the scroll zone means that additional content exists. It performs well in horizontal scroll zones (tabs, sliders and tables), as the scrollbar is usually invisible in those cases.

#Micro consistency

They are not rules that are separate, but rather guidelines that ensure the consistency of the entire product.

Vertical rhythm for sidebars: All icons, labels and controls within the sidebar must align vertically to the same vertical baseline. If icons in one section have a font size of 12px and in another, 16px, then the text aligning to them would shift accordingly.

Submenu alignment. When the menu item triggers the drop-down, the very first item in the submenu should align at the exact same height as the trigger itself. No higher, no lower. It is a minor detail indeed, yet it prevents the user's eye from being distracted. Even a shift of several pixels would make switching between the levels awkward.

Consistent patterns mean consistent behavior. If some dropdown menu appears below in one location, it should be the same way in all other locations. If some input field validates on blur event in one place, all other input fields should follow the same pattern as well. Inconsistent interaction among similar product elements makes users feel like using multiple products.

#The compound effect

There is no single design detail on the entire page which would ruin the product's performance. There is nothing wrong with leaving the non-breaking space or rounding a border slightly wrong. However, a user might decide not to use the product if it feels unpleasant in general.

What is crucial in this context is that minor details do not attract users' attention. They accumulate either positively or negatively, making the product feel right or wrong, without users knowing why. It is a simple matter of getting the details right or having them missed.

The products users consider to be done well usually have something more than a solution implemented for the core feature. The difference is not in fixing a particular issue but in a continuous quest for additional fixes.