Radii
The corner-radius scale, shadow pairings, and containment semantics.
The corner radius scale
The corner radius scale runs from sharp (0) to fully round (9999px).
The radius scale
--ep-radius-none0remSharp edges — data tables, full-bleed images.
--ep-radius-sm4pxChips, badges, inline tags, small inputs.
--ep-radius-md8pxButtons, text inputs, small cards.
--ep-radius-lg12pxCards, modals, drawers, panels.
--ep-radius-xl16pxFeature surfaces, large cards.
--ep-radius-2xl24pxHero panels, marketing sections.
--ep-radius-full9999pxPills, avatars, circular buttons.
Pairing radius with shadow
The radius and shadow ladders are intentionally aligned:
- radius-sm + shadow-sm: chips, badges, inline elements.
- radius-md + shadow-md: buttons, inputs, small cards.
- radius-lg + shadow-lg: cards, panels, raised surfaces.
- radius-xl + shadow-xl: dropdowns, popovers, feature cards.
- radius-2xl + shadow-overlay: modals, drawers, hero panels.
What to avoid
- Mixing radius scales within the same component.
- Applying radius-full to non-circular elements.
- Forgetting that radius-none is a valid, intentional choice.
- Using raw Tailwind defaults (rounded-lg, rounded-xl) instead of ep- tokens — these bypass the design system.
Where used
Components and surfaces mapped to their radius token:
- radius-none: data tables, full-bleed images, code blocks.
- radius-sm: Badge, Chip, Tag, small Input.
- radius-md: Button, Textarea, Select, small Card.
- radius-lg: Card, Modal, Drawer, Panel, Popover.
- radius-xl: FeatureCard, Dropdown content.
- radius-2xl: Hero panel, marketing section, Toast.
- radius-full: Avatar, IconButton (circular), Pill.
How to use
In components, use the Tailwind utility classes (rounded-ep-sm, rounded-ep-md, rounded-ep-lg, etc.). In custom CSS, reference the CSS variable directly (var(--ep-radius-sm), var(--ep-radius-md), etc.). Both resolve to the same token so changing a value in globals.css updates everywhere. Radii are theme-agnostic — the same radius applies in both light and dark mode.