DesignRef Logo
DesignRef
Design SystemsCompareQuick Ref
SearchK
Apple
Apple Human Interface Guidelines

Spacing & Layout

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

160 spacing73 radii40 shadows99 motion
Scale stats
160
Spacing
73
Radius
40
Shadows
99
Motion
Spacing scale
All Design Systems

Apple Human Interface Guidelines

OverviewColorsTypographySpacingShapeMotionElevationLayoutCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
OverviewColorsTypographySpacingShapeMotionElevationLayoutCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
Spacing Scale

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

0
0px0px

No spacing, flush elements

1
1px1px

Hairline borders, subtle dividers

2
2px2px

Micro spacing, tight icon gaps

4
4px4px

Minimal spacing, icon padding, inline elements

6
6px6px

Compact spacing, badge padding

8
8px8px

Small spacing, button icon gap, list item padding

10
10px10px

Compact content spacing

12
12px12px

Standard small spacing, chip padding

16
16px16px

Standard spacing, content padding, card margins

20
20px20px

Medium spacing, section margins

24
24px24px

Large spacing, modal padding

32
32px32px

Extra large spacing, major sections

40
40px40px

Hero spacing, page sections

48
48px48px

Maximum standard spacing

56
56px56px

Extended spacing, feature sections

64
64px64px

Major page divisions

80
80px80px

Large section breaks

96
96px96px

Hero section spacing

128
128px128px

Maximum page section spacing

iOS Safe Area Top
59px59px

iPhone with Dynamic Island top safe area

iOS Safe Area Top (Notch)
47px47px

iPhone with notch top safe area

iOS Safe Area Top (Legacy)
20px20px

iPhone without notch top safe area

iOS Safe Area Bottom
34px34px

iPhone with home indicator bottom safe area

iOS Safe Area Bottom (Legacy)
0px0px

iPhone with home button bottom safe area

iOS Content Margin
16px16px

Standard horizontal content margin (iPhone)

iOS Content Margin (Large)
20px20px

Horizontal margin on larger iPhones

iOS Readable Content Width
672px672px

Maximum readable content width

iPad Content Margin
20px20px

Standard horizontal content margin (iPad)

iPad Content Margin (Regular)
24px24px

Regular width class content margin

iPad Sidebar Width
320px320px

Standard sidebar width

iPad Sidebar Width (Compact)
260px260px

Compact sidebar width

iPad Split View Primary
320px320px

Split view primary pane minimum

iPad Split View Secondary
504px504px

Split view secondary pane minimum

macOS Window Padding
20px20px

Standard window content padding

macOS Sidebar Width
240px240px

Standard sidebar width

macOS Sidebar Width (Min)
180px180px

Minimum sidebar width

macOS Sidebar Width (Max)
320px320px

Maximum sidebar width

macOS Toolbar Height
38px38px

Standard toolbar height

macOS Title Bar Height
28px28px

Window title bar height

macOS Inspector Width
260px260px

Inspector panel width

watchOS Content Margin
8.5px8.5px

Watch content horizontal margin

watchOS List Row Height
44px44px

Standard list row height

watchOS Complication Padding
4px4px

Complication internal padding

tvOS Safe Area
60px60px

TV overscan safe area

tvOS Content Margin
90px90px

Standard horizontal content margin

tvOS Focus Spacing
40px40px

Spacing between focusable items

tvOS Shelf Height
350px350px

Standard content shelf height

tvOS Card Width
308px308px

Standard card width

visionOS Window Padding
24px24px

Spatial window content padding

visionOS Window Margin
40px40px

Space between windows

visionOS Ornament Offset
16px16px

Ornament distance from window edge

visionOS Tab Bar Height
62px62px

Spatial tab bar height

Navigation Bar Height
44px44px

iOS navigation bar height

Navigation Bar Height (Large)
96px96px

iOS large title navigation bar

Tab Bar Height
49px49px

iOS tab bar height

Tab Bar Height (iPad)
50px50px

iPad tab bar height

Toolbar Height
44px44px

iOS toolbar height

Search Bar Height
36px36px

Search bar height

Touch Target Minimum
44px44px

Minimum tappable area (44x44pt)

Touch Target Comfortable
48px48px

Comfortable tappable area

Touch Target Large
56px56px

Large touch target for accessibility

Pointer Target Minimum
24px24px

Minimum clickable area (macOS)

Button Padding Horizontal
16px16px

Standard button horizontal padding

Button Padding Vertical
10px10px

Standard button vertical padding

Button Padding Compact
8px8px

Compact button padding

Button Icon Gap
6px6px

Gap between button icon and label

Button Group Gap
8px8px

Gap between grouped buttons

Button Height Standard
44px44px

Standard button height

Button Height Small
32px32px

Small button height

Button Height Large
50px50px

Large button height

List Row Height
44px44px

Standard list row height

List Row Height (Subtitle)
58px58px

List row with subtitle

List Row Height (Large)
72px72px

Large list row with image

List Row Padding
16px16px

List row horizontal padding

List Row Content Gap
12px12px

Gap between list row elements

List Section Header Height
28px28px

Section header height

List Section Footer Height
32px32px

Section footer height

List Inset
16px16px

Inset grouped list margin

List Separator Inset
16px16px

Separator leading inset

List Separator Inset (Icon)
60px60px

Separator inset with icon

Card Padding
16px16px

Standard card internal padding

Card Padding Large
20px20px

Large card internal padding

Card Gap
16px16px

Gap between cards in a grid

Card Gap Compact
8px8px

Compact gap between cards

Card Header Spacing
12px12px

Space below card header

Card Content Spacing
8px8px

Space between card content items

Form Field Height
44px44px

Standard text field height

Form Field Padding
12px12px

Text field horizontal padding

Form Label Gap
8px8px

Gap between label and field

Form Field Gap
16px16px

Gap between form fields

Form Section Gap
32px32px

Gap between form sections

Form Helper Text Gap
4px4px

Gap between field and helper text

Alert Width
270px270px

Standard alert width (iPhone)

Alert Padding
20px20px

Alert internal padding

Alert Button Height
44px44px

Alert button height

Action Sheet Button Height
57px57px

Action sheet button height

Modal Width (Small)
340px340px

Small modal width

Modal Width (Medium)
540px540px

Medium modal width (iPad)

Modal Width (Large)
680px680px

Large modal width

Sheet Detent Small
250px250px

Small sheet height

Sheet Detent Medium
50%0px

Half-height sheet

Sheet Detent Large
90%0px

Full-height sheet (with margin)

Popover Arrow Size
13px13px

Popover arrow dimensions

Popover Padding
16px16px

Popover internal padding

Popover Min Width
200px200px

Minimum popover width

Popover Max Width
400px400px

Maximum popover width

Tooltip Padding
8px8px

Tooltip internal padding

Segment Height
32px32px

Segmented control height

Segment Padding
8px8px

Segment horizontal padding

Segment Min Width
40px40px

Minimum segment width

Picker Row Height
32px32px

Picker wheel row height

Date Picker Width
320px320px

Inline date picker width

Color Picker Size
280px280px

Color picker dimensions

Progress Bar Height
4px4px

Standard progress bar height

Progress Bar Height (Thick)
8px8px

Thick progress bar

Activity Indicator Small
20px20px

Small activity indicator

Activity Indicator Medium
37px37px

Medium activity indicator

Activity Indicator Large
50px50px

Large activity indicator

Badge Size Min
18px18px

Minimum badge size

Badge Padding
5px5px

Badge horizontal padding

Pill Padding Horizontal
12px12px

Pill/tag horizontal padding

Pill Padding Vertical
6px6px

Pill/tag vertical padding

Slider Track Height
4px4px

Slider track thickness

Slider Thumb Size
28px28px

Slider thumb diameter

Switch Width
51px51px

Toggle switch width

Switch Height
31px31px

Toggle switch height

Checkbox Size
22px22px

Checkbox dimensions

Radio Size
22px22px

Radio button dimensions

Icon XS
12px12px

Extra small icon size

Icon SM
16px16px

Small icon size

Icon MD
20px20px

Medium icon size

Icon LG
24px24px

Large icon size

Icon XL
28px28px

Extra large icon size

Icon 2XL
32px32px

Double extra large icon

Tab Bar Icon
25px25px

Tab bar icon size

Navigation Icon
22px22px

Navigation bar icon size

Toolbar Icon
22px22px

Toolbar icon size

App Icon Small
29px29px

Settings app icon

App Icon Medium
40px40px

Spotlight app icon

App Icon Large
60px60px

Home screen app icon (@2x: 120px)

Avatar XS
24px24px

Extra small avatar

Avatar SM
32px32px

Small avatar

Avatar MD
40px40px

Medium avatar

Avatar LG
56px56px

Large avatar

Avatar XL
72px72px

Extra large avatar

Avatar 2XL
96px96px

Profile avatar

Thumbnail Small
60px60px

Small thumbnail

Thumbnail Medium
80px80px

Medium thumbnail

Thumbnail Large
120px120px

Large thumbnail

Grid Column Gap
16px16px

Gap between grid columns

Grid Row Gap
16px16px

Gap between grid rows

Grid Gutter
20px20px

Standard grid gutter

Stack Spacing XS
4px4px

Tight vertical stack spacing

Stack Spacing SM
8px8px

Small vertical stack spacing

Stack Spacing MD
16px16px

Medium vertical stack spacing

Stack Spacing LG
24px24px

Large vertical stack spacing

Paragraph Spacing
16px16px

Space between paragraphs

Text Block Margin
20px20px

Margin around text blocks

Inline Element Gap
4px4px

Gap between inline elements

Label Value Gap
8px8px

Gap between label and value