BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Radius and borders

Radius tells you what kind of object you are looking at: small parts inside controls get the smallest, controls a little more, containers and overlays more again, pills are round. Design with the roles; brands set their values.

Updated Oct 16, 2026

Edit in Studio

Select a token to see where it is used and its history. Click a name to copy it.

Copy names as

Radius roles

radius 5 tokens

Each role on the components that use it, in the brand the top bar previews. Nested corners stay concentric: outer = inner + padding.

TagK
radius.inset
radius.control
Card
radius.container
Dialog
radius.overlay
Passed
radius.pill

Radius scale

radius 9 tokens

The raw values the roles point to. Reach for a role first; use the scale when you propose a new one.

Border widths

border-width 6 tokens

1 px for edges, 2 px for emphasis, selected states and active indicators.

Focus ring

focus.ring 2 tokens

Every focusable component draws the same ring, so keyboard users always know where they are. Its color is on the Color page.