Sizing
Fixed and responsive sizing tokens for icons, controls, avatars and content containers.
Component sizes
Every interactive control picks one of three sizes. The 4px base + 8px step keeps vertical rhythm consistent across the storefront.
Visual reference
Each card renders a faux button at the actual height, padding, font-size and icon-size for the named size.
sm · 44px
- height
- 44px
- padding-x
- 12px
- font
- 13.5px
- icon
- 14px
md · 44px
- height
- 44px
- padding-x
- 16px
- font
- 14.5px
- icon
- 16px
lg · 48px
- height
- 48px
- padding-x
- 20px
- font
- 16px
- icon
- 20px
Icon size scales with font size. Never use a larger icon than its accompanying text.
Touch target minimums
Interactive elements must be at least 44x44 CSS pixels (WCAG 2.5.5 / Apple HIG) or 48x48 dp (Material Design). Enforce with min-h-[var(--ep-tap-min)] on every bespoke control.
Icon sizing rule
Icon size scales with font size. Never use a larger icon than its accompanying text — the icon dominates and looks unbalanced.
Source: original sizing.html (component-dimensions table) + design-system tap-target guideline.
Need layout whitespace instead of component dimensions? See the Spacing foundation for the numeric scale (ep-1 → ep-24).