interface-polishlisted

# Interface Polish Practical rules for making interfaces clearer, easier to use, and more polished. Apply these by default when writing or reviewing frontend code. Each rule is short; when one applies, just do it rather than asking. Adapted and condensed from the [interfaces.dev cheat sheet](https://interfaces.dev/cheat-sheet) by [Jakub Krehel](https://x.com/jakubkrehel), published here with his permission. For deeper typography, color, or motion work, pair this with the better-typography, better-colors, apple-design, and emil-design-eng skills if available. ## Visual details **Concentric radii on nested elements.** Inner radius = outer radius minus the gap between them. A card with `16px` radius and `8px` padding gives its inner element `8px` radius. Never give a nested element the same radius as its parent. **Optical over geometric alignment.** Center things by eye, not just by math. Play icons, arrows, and asymmetric glyphs usually need a 1–2px nudge to look centered. **Asymmetric button padding with icons.** When a button has an icon plus text, reduce the padding on the icon side slightly (the icon carries visual weight that text doesn't). **Layered shadows over borders for depth.** Stack 2–3 `box-shadow` layers (a tight low-opacity ring plus softer larger shadows) instead of a flat `1px` border when you want elevation. **Hairline outlines on images.** Give images a subtle inset ring so light images don't bleed into light backgrounds: `outline: 1px solid rgb(0 0 0