Interface
Visual details that make components feel precise — radii, alignment, depth, and icons.
Small visual details decide whether an interface feels precise or slightly off. These are defaults, not a checklist; see the Guidelines overview for how to apply them.
Shape and alignment
- Nest elements with concentric border radii: the outer radius equals the inner radius plus the padding between the elements.
- Prioritise optical alignment over strict geometric alignment.
- Give a button with text and an icon slightly smaller padding on the icon side.
Do
A 16px card with 8px padding holds an inner element with an 8px
radius, so the two curves stay parallel.
Don't
Reuse the same radius on the card and the element inside it. The inner corner looks too round and the gap between the curves looks uneven.
Depth and images
- Create depth with a layered
box-shadowinstead of borders. - Give images a
1pxoutline offset by-1px: black at8%opacity in light mode, white at8%in dark mode.
Scrolling
- Never show a scrollbar. A container that scrolls still scrolls by wheel, touch, and keyboard; only the bar is hidden.
- Fade the edge where more content is hidden, and only that edge. At the top of a list only the bottom fades; once scrolled, both do.
- Put the fade on the element that scrolls, inside any surface that carries a shadow or ring, so the mask doesn't clip them.
- In BDS, pair
useScrollFadewithscrollFadeStylesfrom@base-org/bds-web/hooks/use-scroll-fade. Dialog, Menu, and Select already do this.
Do
Let a long menu fade out at its bottom edge, then fade at the top too once the reader scrolls.
Don't
Show a native or custom scrollbar, or fade an edge that has nothing past it.
Icons
- Match icon stroke width to the adjacent text.