Stroke

Border and divider widths. Switch platform in the bar below for the matching identifier and units.

Hairline borders and dividers use the smallest step; heavier strokes mark focus and selected states. Keep strokes on this scale so edges read consistently across the system.

Stroke

Use border and divider thicknesses to separate content with the right amount of emphasis.

strokeXs
0.5pt
→ scale.positive.15
strokeSm
0.7pt
→ scale.positive.20
strokeMd
1pt
→ scale.positive.25
strokeLg
1.5pt
→ scale.positive.35
strokeXl
2pt
→ scale.positive.50