DesignRef Logo
DesignRef
Design SystemsCompareQuick Ref
SearchK
Microsoft
Fluent Design System

Spacing & Layout

Complete scale system for spacing, border radius, shadows, and motion timing.

11 spacing6 radii6 shadows6 motion
Scale stats
11
Spacing
6
Radius
6
Shadows
6
Motion
Spacing scale
All Design Systems

Fluent Design System

OverviewColorsTypographySpacingComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
OverviewColorsTypographySpacingComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
Spacing Scale

Consistent spacing tokens for padding, margins, and gaps across all components.

None
0px0px

No spacing

XXS
2px2px

Minimal spacing

XS
4px4px

Tight spacing, icon gaps

S Nudge
6px6px

Fine adjustments

S
8px8px

Small component spacing

M Nudge
10px10px

Fine adjustments

M
12px12px

Standard spacing

L
16px16px

Container padding

XL
20px20px

Section spacing

XXL
24px24px

Large spacing

XXXL
32px32px

Page sections