Skip to content
design
Foundations

Radius

Corner roundness for rows, controls, pills and frames, from a few fixed steps.

On this page

Conning

Row · 8
/Key · 4
GPS 3DPill · round
1Badge · round
ALARMAnchor drag · 38 m outside swing circle · since 21:02ACK
The site's patterns at their steps: a navigation row at 8px, a key at 4px, a status pill fully round. The table below gives the kit's components.
01A few fixed stepsEvery corner uses a step from the scale. The same kind of element has the same corner on every page.
02Shape supports meaningSwitches, setting chips, progress bars, radio buttons, dots and avatars are fully round. Interactive circular controls keep their own labels, semantics and focus treatment.
03Smaller insideAn element inside a rounded frame gets a smaller radius, so the gap between the two corners stays even.

Scale

TokenValueremPreview
--radius-sm4px0.25rem
--radius-md6px0.375rem
--radius-lg8px0.5rem
--radius-xl12px0.75rem

Where each step is used

RadiusElements
4px · --radius-smKeyboard keys, badges, due chips, the status strip's chips, chips, the alert zone's ACK
6px · --radius-mdButtons, inputs and select triggers, the alert zone's row, popovers, tooltips, the vessel mark
8px · --radius-lgNavigation rows, the telemetry strip, an open list, segmented controls
12px · --radius-xlDialogs, alert cards, the chat input, metric cards, chart panels
Fully roundSwitches, setting chips, progress bars, radio buttons, dots and avatars

Nested surfaces and clipping

Choose a radius for a component family and keep it stable across themes and interaction states. A larger screen can show more content without making every corner rounder. For nested panels, consider both the outer radius and the inset: the inner corner should follow the outer contour without pinching the gap.

A rounded outline does not clip its children automatically. Clip images or fills at their own boundary when needed; do not clip a control's focus ring or a portaled menu just to preserve the parent shape. Inspect the smallest supported container with long labels and browser zoom.

Documents and diagrams

Report panels use the shared component corners. Mermaid rounds nodes and groups with --radius-lg; its SVG scales that geometry with the complete drawing. Authored node positions remain drawing data. Keep a recognizable system boundary and readable labels before adjusting corners to resemble an illustration.

Roundness alone does not establish whether something is interactive. Pills, slider thumbs and other circular controls need their actual semantics, label and focus behavior. Use the supported component API rather than reshaping a button in page CSS.

Using radius

Do
Give a nested element a smaller radius than its frame. The gap between the corners stays even all the way round.
Don't
Don't repeat the frame's radius inside it. The inner corners bulge toward the frame and the gap pinches at every corner.
Do
GPS 3DRisk low ▼
Use the status component’s pill shape consistently; its label explains the state.
Don't

Start anchor watch

Keep an ordinary action in the button component’s defined shape; do not restyle it to imitate a status chip.