DesignRef Logo
DesignRef
Design SystemsCompareQuick Ref
SearchK
Google
Material Design 3

Spacing & Layout

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

11 spacing7 radii5 shadows5 motion
Scale stats
11
Spacing
7
Radius
5
Shadows
5
Motion
Spacing scale
All Design Systems

Material Design 3

OverviewColorsTypographySpacingShapeMotionStatesElevationBreakpointsTokensCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
OverviewColorsTypographySpacingShapeMotionStatesElevationBreakpointsTokensCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
Spacing Scale

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

0
0px0px

No spacing

4
4px4px

Minimal spacing

8
8px8px

Compact spacing

12
12px12px

Small spacing

16
16px16px

Standard spacing, padding

24
24px24px

Medium spacing

32
32px32px

Large spacing

40
40px40px

Extra large spacing

48
48px48px

Section spacing

56
56px56px

App bar height

64
64px64px

Extended app bar