Foundations

Corner Radius

Nine named steps from sharp to full-pill. Use the token rather than a raw pixel value so components automatically track any future scale changes.

Scale

--radius-none0px

Hard edges — data tables, code blocks, dividers

--radius-sm4px

Buttons, chips, tags, badges

--radius8px

Inputs, selects, dropdowns — Shadcn default

--radius-md8px

Alias of --radius. Cards, popovers, tooltips

--radius-lg12px

Modals, sheets, nav drawers

--radius-xl16px

Large cards, panels, featured tiles

--radius-2xl24px

Hero image, category cards, gallery thumbnails

--radius-3xl40px

Oversized decorative containers

--radius-full9999px

Pills, avatars, circular icons

Component Usage

Which token is applied to each component. Never hardcode a pixel value — always reference the token.

ComponentTokenValue
Nav CTA button--radius-sm4px
Input / Select--radius8px
Card--radius-md8px
Modal / Dialog--radius-lg12px
Gallery thumbnail--radius-2xl24px
Hero image--radius-2xl24px
Category strip card--radius-2xl24px
Avatar--radius-full9999px

Convention

  • —

    Interactive elements (buttons, badges) use --radius-sm (4px) — intentionally low to feel precise.

  • —

    Form controls (inputs, selects) use --radius / --radius-md (8px) — the Shadcn default.

  • —

    Containers and cards step up to --radius-lg or --radius-xl based on visual weight.

  • —

    Large imagery (hero, gallery thumbnails) uses --radius-2xl (24px) for a contemporary feel.

  • —

    Never use --radius-full on rectangular layout containers — reserve it for circular / pill shapes.