Interfaces Cheat Sheet
Short visual rules for interface polish, each with a before and after demo
The Interfaces Cheat Sheet is a page on interfaces.dev with practical rules for interface details. Examples include concentric border radii for nested elements, optical alignment, smaller padding on the icon side of a button, and layered shadows instead of borders. Each rule shows a not recommended and a recommended version, with a toggle that reveals the values.
Use it as a review checklist before you ship a component. The rules are short and visual, so an agent can apply them as concrete style fixes.
Why it is here. It turns design-engineering taste into small, checkable rules.
- Before and after demos
- Concentric radius rule
- Optical alignment rule
Verified 2026-10-09. HTTP 200. https://interfaces.dev/cheat-sheet (HTTP 200, page fetched 2026-10-09), depo.zip listing https://www.depo.zip/tools/j5705tratnjgrbkke56s9axmc58dbx4k
