Radius + Elevation

This UI system keeps radius and elevation simple on purpose. The goal is consistency across surfaces (cards, menus, inputs) so the UI feels cohesive as it grows.

Radius

Radius helps define the “shape language” of the UI. Most components should use a small set of consistent radii instead of one-off values.

Practical rules

• Use one default radius for most components.
• Increase radius only when a surface is visually “larger” (cards, dialogs).
• Keep small controls (chips, pills) intentional.

Common use cases

• Inputs / buttons: default radius
• Cards / panels: slightly larger radius
• Menus / popovers: match cards
• Pills / badges: fully rounded (when used)

Token example

These values don’t need to be complex. What matters is consistency.

--radius: 0.75rem;
--radius-lg: 1rem;
--radius-pill: 9999px;

Elevation

Elevation is used sparingly. Most surfaces rely on borders. Shadows are reserved for layered UI where depth helps clarity.

Practical rules

• Use borders by default for structure.
• Use shadows only when a surface floats (popover, menu, dialog).
• Keep shadows subtle and consistent across light and dark mode.

Where elevation applies

• Popovers / menus: shadow + border
• Dialogs / modals: shadow (and often a backdrop)
• Sticky UI: usually border, sometimes a light shadow if needed

Shadow example

--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 8px 24px rgb(0 0 0 / 0.12);

Notes

Radius and elevation are easy places for a system to drift.

This page exists so UI surfaces don’t slowly accumulate mismatched rounding and “random shadows” over time.