Shape
Soft corners signal approachability. Roadie uses Tailwind's built-in border-radius scale to create a consistent, rounded visual language that progresses from inline elements to full containers.
Radius scale
Nine tiers, from inline marks to edge-to-edge hero surfaces. Roadie uses Tailwind's built-in radius utilities up to rounded-4xl and adds three extended tiers (rounded-5xl, rounded-6xl, rounded-7xl) for large promotional layouts. Avoid arbitrary values like rounded-[2.5rem] — stick to the named utilities so the scale stays consistent.
| Tier | Class | Value | Use for | Preview |
|---|---|---|---|---|
| Inline | rounded-sm | 2px | Marks, highlights | |
| Small | rounded-md | 6px | Inline code, code blocks, prose images | |
| Field | rounded-lg | 8px | Inputs, textareas, select triggers, radio items | |
| Container | rounded-xl | 12px | Cards, select popups, radio cards, popovers | |
| Large | rounded-2xl | 16px | Modals, dialogs, drawers | |
| Hero | rounded-5xl | 40px | Hero cards, collection headers, bottom sheets | |
| Feature | rounded-6xl | 48px | Feature banners, spotlight surfaces | |
| Oversize | rounded-7xl | 56px | Edge-to-edge promotional layouts | |
| Full | rounded-full | 9999px | Buttons, badges, avatars, pills |
Visual examples
Each tier applied to a surface. The progression from subtle to dramatic rounding creates a natural visual hierarchy.
rounded-sm
2px
Inline
rounded-md
6px
Small
rounded-lg
8px
Field
rounded-xl
12px
Container
rounded-2xl
16px
Large
rounded-5xl
40px
Hero
rounded-6xl
48px
Feature
rounded-7xl
56px
Oversize
rounded-full
9999px
Full
Component usage
Which components use which tier. These are the defaults — override with className when a specific context requires it.
| Component | Tier | Class |
|---|---|---|
| Button | Full | rounded-full |
| Badge | Full | rounded-full |
| Card | Container | rounded-xl |
| Select trigger | Field | rounded-lg |
| Select popup | Container | rounded-xl |
| Input | Field | rounded-lg |
| Textarea | Field | rounded-lg |
| RadioGroup (default) | Field | rounded-lg |
| RadioGroup (card) | Container | rounded-xl |
| Code | Small | rounded-md |
| Mark / Highlight | Inline | rounded-sm |
| Prose (code blocks, images) | Small / Field | rounded-md / rounded-lg |
Guidelines
Match radius to hierarchy
Larger radii for higher-level containers, smaller radii for inline or nested elements. This creates a natural visual hierarchy.
Card — rounded-xl
Input — rounded-lg
Do
Use larger radii for containers (cards, dialogs) and smaller radii for inline elements (code, marks).
Card — rounded-md
Input — rounded-md
Don’t
Apply the same radius everywhere. A card and an inline code span should not share the same corner treatment.
Keep pills for actions
Reserve rounded-full for interactive pill shapes and circular elements.
Do
Use rounded-full for buttons, badges, tags, and avatars.
A card with rounded-full
Don’t
Use rounded-full on cards or containers. Full rounding distorts rectangular layouts.
Nest with decreasing radius
When elements are nested, the inner element should use an equal or smaller radius than the outer. This avoids visual tension at corners.
Parent rounded-xl, child rounded-lg
Do
Inner elements use equal or smaller radius than their parent.
Parent rounded-lg, child rounded-2xl
Don’t
Use a larger radius on a child than its parent — the child's corners will clip awkwardly against the parent's straighter edges.
Best practices
Prefer the standard tier for each element type. Override with
classNameonly when a specific context demands it.When in doubt, round up to the next tier for a softer feel. The brand leans soft.
rounded-2xlis reserved for top-layer UI (modals, dialogs, drawers). Do not use it on inline components.Never mix custom pixel values with the Tailwind scale. Stick to the utility classes.
Focus rings follow automatically. Roadie's
is-interactiveandis-interactive-fieldutilities handle focus ring radius — no separate token needed.