BridgeComfortable

Previews use

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

Brand

Density

Spacing

A 4 px base scale: step n is n × 4 px, with half steps where controls need them. Tight inside groups, generous between them. Fewer choices means more consistent screens.

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

In a layout

A review card built from the real components. Tinted areas are spacing: card padding, the gap between blocks and the gap inside a row of controls. They come from density tokens, so the compact density in the top bar tightens them.

Soften the page backgroundIn review

A proposed change to color.bg.default. Check the contrast pairs before you approve it.

  • Card padding layout.inset
  • Between blocks layout.gap
  • Title to badge, between buttons control.gap

Scale

space 16 tokens

Inside a control: space 2 to 4. Between related items: space 1 to 3. Inside a card or panel: space 4 to 5. Between sections: space 8 and up.