Spacing & Layout — HIG System

The 8pt Grid

Apple's interfaces are built on a base unit of 8pt (4pt for micro adjustments). Every dimension — padding, margin, element size — is a multiple of 4 or 8. This creates invisible but perceptible rhythm: layouts feel cohesive without the user knowing why.

💡

Why 8pt? On modern displays (1x, 2x, 3x density), 8px divides evenly at every scale factor — meaning your layout never renders blurry sub-pixel lines. 4pt is the smallest safe unit for micro-gaps and icon padding.

96×48

160×32

272×64 — everything snaps to 8pt

Every element above is sized and positioned on exact 8pt increments. The faint grid overlay makes the underlying rhythm visible.

4pt

Base micro unit

Icon padding, hairline gaps, badge insets. The smallest meaningful increment.

8pt

Standard unit

The primary grid unit. Component gaps, list item spacing, most internal padding.

44pt

Minimum touch target

Apple's HIG minimum for any tappable element. Prevents mis-taps on small controls.

20pt

Safe area margin

Horizontal margins for content from screen edges on iPhone, keeping text readable.

Spacing Scale

Twelve named steps form the spacing vocabulary. Reference them by token name — never hardcode arbitrary pixel values. The scale grows non-linearly, following natural visual rhythm: small increments at the bottom for fine-grained control, larger leaps at the top for section separation.

--space-1

4px Icon padding, tight gaps, badge insets

--space-2

8px Inline element gaps, icon-to-label spacing

--space-3

12px List item padding, tag spacing

--space-4

16px Standard horizontal margins, input padding

--space-5

20px Screen-edge safe margins, sidebar padding

--space-6

24px Card internal padding, group spacing

--space-8

32px Section gaps, modal padding, grid gutters

--space-10

40px Page content padding, hero inner spacing

--space-12

48px Large section dividers, hero padding

--space-16

64px Between major page sections

--space-20

80px Hero top/bottom padding, landing sections

--space-24

96px Page-level hero padding, marketing sections

Border Radius Scale

Corner radius is one of Apple's most recognizable design signatures. Radii follow a deliberate scale — small components use tighter radii, larger containers use more generous curves, and pill shapes are reserved for buttons and tags where the shape itself communicates interactivity.

--radius-xs 4px Focus rings, small tags

--radius-sm 8px Buttons, inputs, chips

--radius-md 12px Small cards, tooltips

--radius-lg 16px Cards, panels, drawers

--radius-xl 20px Large cards, modals

--radius-2xl 28px App icons, hero sections

--radius-full 9999px Pills, badges, toggles

Superellipse vs. circular corners: Apple uses a special "squircle" corner algorithm for app icons (continuous curvature), not a standard CSS border-radius. For everything else, standard border-radius is correct and expected.

Elevation & Shadows

Shadows communicate z-axis position. In Apple's design language, shadows are subtle — never dramatic. Use the lowest effective elevation level that communicates hierarchy. Stack two shadows (ambient + direct) to make depth feel natural.

Level 0

Flat

Inline content, table rows

none

Level 1

Lifted

Cards on white bg

0 1px 2px rgba(0,0,0,.05)

Level 2

Raised

Dropdowns, popovers

0 2px 8px rgba(0,0,0,.08)

Level 3

Floating

Drawers, sidesheets

0 4px 16px rgba(0,0,0,.10)

Level 4

Overlay

Modals, dialogs

0 8px 32px rgba(0,0,0,.12)

Dark mode note: In dark mode, increase shadow opacity significantly (0.2–0.5 range) since dark surfaces absorb more light. Alternatively, use a subtle background color lift instead of a shadow.

--shadow-xs

Hairline lift

0 1px 2px rgba(0, 0, 0, 0.04)

--shadow-sm

Cards

0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)

--shadow-md

Dropdowns

0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04)

--shadow-lg

Modals

0 8px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06)

--shadow-xl

Top overlays

0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08)

Breathing Room

Whitespace is not empty space — it's a design tool that directs attention, implies relationships, and signals quality. Compare the same card at two different padding densities and the effect becomes immediately clear.

Cramped — 8px padding

Notification Title

2 min ago

Your file has been shared with three team members. Click here to view it now.

Elements are jammed together. The eye doesn't know where to rest. The card feels cheap and hard to parse.

Spacious — 20px padding

Notification Title

2 min ago

Your file has been shared with three team members. Click here to view it now.

Content breathes. Hierarchy is clear. The icon, title, body, and actions each have distinct visual weight and separation.

Layout Zones

A standard HIG-inspired web layout uses named zones with specific size constraints. Understanding these zones prevents layouts that are too wide (uncomfortable on large monitors) or too narrow (failing to use available space effectively).

Main content — margin-left: sidebar-width, padding: 40px 48px

Content Area

max-width: 900px (standard) / 1100px (wide)

Centered within main when viewport is very wide

Sidebar width 240–280px. Use CSS variable --sidebar-width: 260px

Content max-width 900px for text-heavy pages, 1100px for wide tables and demos

Section padding 40px top/bottom, 48–64px left/right — collapses to 24px on mobile

Section gap 64–72px between major content sections (--space-16)

Nav bar height 52–56px, position: sticky, top: 0, z-index above content

Component Spacing Reference

Standard dimensions for common components. Following these sizes ensures your UI passes Apple's own ergonomic guidelines — especially the 44px minimum touch target rule.

Component	Padding	Min Height	Gap	Notes
Button SM	6px 12px	32px	—	Destructive or inline actions
Button MD	10px 20px	40px	—	Default action button
Button LG	14px 28px	48px	—	Primary hero CTAs
Card	24px	auto	—	radius-lg (16px) recommended
List Item	12px 16px	44px	—	44px minimum touch target (HIG requirement)
Input / Text Field	10px 16px	40px	—	Label gap: 8px above
Modal / Dialog	32px	auto	20px	Max-width: 560px on desktop
Navigation Bar	0 16px	52px	—	Large title variant: 96px
Tab Bar (iOS)	—	49px	—	iOS standard + safe area bottom
Toolbar (macOS)	0 16px	52px	8px	Item gap: 8px between controls
Tooltip	6px 10px	28px	—	radius-sm, max-width: 240px
Badge / Tag	2px 8px	20px	—	radius-full for pill badges

CSS Variables

All spacing tokens defined as CSS custom properties. Paste this into your :root block to start using the system immediately.

CSS

:root {
  /* ── Spacing Scale (8pt grid) ── */
  --space-1:  4px;   /* micro: icon padding, tight gaps       */
  --space-2:  8px;   /* base unit: inline gaps, icon-to-label */
  --space-3:  12px;  /* list item padding, tag spacing        */
  --space-4:  16px;  /* standard margins, input padding       */
  --space-5:  20px;  /* screen-edge safe margins              */
  --space-6:  24px;  /* card padding, group spacing           */
  --space-8:  32px;  /* section gaps, modal padding           */
  --space-10: 40px;  /* page content padding                  */
  --space-12: 48px;  /* large section dividers                */
  --space-16: 64px;  /* between major page sections           */
  --space-20: 80px;  /* hero padding, landing sections        */
  --space-24: 96px;  /* page-level hero, marketing            */

  /* ── Border Radius ── */
  --radius-xs:   4px;    /* focus rings, small tags           */
  --radius-sm:   8px;    /* buttons, inputs, chips            */
  --radius-md:   12px;   /* small cards, tooltips             */
  --radius-lg:   16px;   /* cards, panels, drawers            */
  --radius-xl:   20px;   /* large cards, modals               */
  --radius-2xl:  28px;   /* app icons, hero sections          */
  --radius-full: 9999px; /* pills, badges, toggles            */

  /* ── Elevation / Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06),
               0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08),
               0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10),
               0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12),
               0 8px 16px rgba(0, 0, 0, 0.08);

  /* ── Layout Zones ── */
  --sidebar-width:       260px;
  --content-max:         900px;
  --content-max-wide:    1100px;
  --nav-height:          52px;
  --page-padding-x:      48px;
  --page-padding-y:      40px;
  --section-gap:         64px;
}

CSS — Usage Examples

/* Card component using spacing tokens */
.card {
  padding: var(--space-6);           /* 24px all sides        */
  border-radius: var(--radius-lg);   /* 16px corners          */
  box-shadow: var(--shadow-sm);      /* level 1 elevation     */
  background: var(--color-bg-primary);
}

/* Button with correct touch target */
.btn-md {
  padding: var(--space-2) var(--space-5);  /* 10px 20px       */
  min-height: 40px;                        /* comfortable tap  */
  border-radius: var(--radius-sm);         /* 8px              */
}

/* List item meeting the 44px requirement */
.list-item {
  padding: var(--space-3) var(--space-4);  /* 12px 16px       */
  min-height: 44px;                        /* HIG touch target */
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Page layout scaffold */
.content-area {
  padding: var(--page-padding-y) var(--page-padding-x);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Section breathing room */
.section-block {
  margin-bottom: var(--section-gap);   /* 64px between sections */
}