Radii & Shadows

Border radius and elevation values sampled from buttons, cards, tiles and overlays across the site.

Radii

Buttons, inputs, primary CTAs (dominant pattern site-wide)

Tags, chips

Small cards

Product tiles, panels

Size-selector chips (30ml / 60ml)

Large promo badges

Avatars, dots, circular icon buttons

Shadows

Hover cards, dropdowns

Modals, flyouts

Cart drawer, overlays

Do's and Don'ts

Default to --radius-none unless you can point to the real pattern that justifies something rounder — the live site is sharp-cornered far more often than not.

·Default new buttons, inputs and primary CTAs to sharp corners (--radius-none) — it's the dominant pattern site-wide.
·Reserve --radius-pill for chip/selector-style controls (like a size picker), not general buttons.
·Use --shadow-sm/md/lg for elevation only on things that actually float above the page — dropdowns, modals, drawers.

Don't

·Don't add a shadow to something meant to sit flush with the page, like an inline badge or a section background.
·Don't invent a new radius value inline; if none of the tokens fit, that's a signal to propose a new token, not a one-off className.
·Don't round a primary button 'because it looks friendlier' — that contradicts what was actually observed on the live site.