Overview Colors Typography Spacing Components Symbols Patterns Inputs App Icons Materials System Localization Accessibility Platforms

Spacing & Layout

160 spacing • 73 radii • 99 motion • Apple Human Interface Guidelines

Spacing Scale

Consistent spacing tokens for padding, margins, and gaps.

0px0px

No spacing, flush elements

1px1px

Hairline borders, subtle dividers

2px2px

Micro spacing, tight icon gaps

4px4px

Minimal spacing, icon padding, inline elements

6px6px

Compact spacing, badge padding

8px8px

Small spacing, button icon gap, list item padding

10px10px

Compact content spacing

12px12px

Standard small spacing, chip padding

16px16px

Standard spacing, content padding, card margins

20px20px

Medium spacing, section margins

24px24px

Large spacing, modal padding

32px32px

Extra large spacing, major sections

40px40px

Hero spacing, page sections

48px48px

Maximum standard spacing

56px56px

Extended spacing, feature sections

64px64px

Major page divisions

80px80px

Large section breaks

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