Shape

Roadie uses Tailwind's built-in border-radius scale to create a consistent, rounded visual language that progresses from inline elements to full containers. Soft corners signal approachability.

Radius scale

The scale runs 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, and rounded-7xl) for large promotional layouts. Never use arbitrary values like rounded-[2.5rem]. Stick to the named utilities so the scale stays consistent.

On the docs site, each step of the scale is a tile with its class and value.

Component usage

Which components use which tier. These are the defaults. Override with className when a specific context requires it.

Guidelines

• Prefer the standard tier for each element type. Override it with className only when a specific context demands it.
• When in doubt, round up to the next tier for a softer feel. The brand leans soft.
• Keep rounded-2xl for top-layer UI, such as modals and dialogs, and the Navigator's panes. Don't use it on inline components.
• Never mix custom pixel values with the Tailwind scale. Stick to the utility classes.
• Focus rings follow the radius by themselves. Roadie's is-interactive and is-interactive-field utilities handle focus ring radius, so no separate token is needed.