Design system

Layout

Breakpoints, columns, spacing, corner radii and elevation. Hairlines do most of the work; shadows are rare.

Breakpoints

apple.com's breakpoints, as Tailwind's md:, lg: and xl:.

md:

45.9375rem

735px

lg:

66.8125rem

1069px

xl:

90.0625rem

1441px

Columns

Content sits in a centered column with a 22px gutter on each side.

max-w-content

61.25rem

980px. The default column (container-apple).

max-w-medium

75rem

1200px. Blocks that should stand out from the 980px column.

max-w-wide

90rem

1440px. Full-bleed grids and galleries.

Named spacing

On top of Tailwind's 4px scale.

*-gutter

1.375rem

22px side gutter of every container.

*-section

5rem

80px vertical section rhythm on small screens.

*-section-md

6.25rem

100px from md.

*-section-lg

7.5rem

120px from lg.

*-header-offset

5.5rem

Announcement bar + floating header. Anchor targets scroll below it.

*-icon-inline

0.85em

Icon set next to text, sized to the font (e.g. the chevron of a text link).

*-docs-header

3.5rem

Height of the /design header. The sidebar and anchor targets sit below it.

Corner radius

rounded-sm

0.5rem

8px. Small chips.

rounded-md

0.625rem

10px. Logo tiles, small icon frames.

rounded-lg

0.75rem

12px. Inputs, small cards, the header CTA.

rounded-xl

1.125rem

18px. Cards and tiles.

rounded-2xl

1.375rem

22px.

rounded-3xl

1.75rem

28px. Large media frames and feature tiles.

rounded-4xl

2.25rem

36px.

rounded-pill

980px

Buttons and chips.

rounded-xl-inner

calc(1.125rem - 1px - var(--spacing) * 0.5)

Media in a rounded-xl frame with a 1px border and p-0.5.

rounded-xl-card-inner

calc(1.125rem - 1px - var(--spacing) * 1)

Media in a rounded-xl card with a 1px border and p-1.

rounded-xl-segment

calc(1.125rem - var(--spacing) * 1)

Selected segment in a rounded-xl segmented control with p-1.

rounded-3xl-inner

calc(1.75rem - 1px - var(--spacing) * 1.5)

Media in a rounded-3xl frame with a 1px border and p-1.5.

rounded-xl-clip

calc(1.125rem - 1px)

A rounded-xl card's corner inside its 1px border, for clip paths.

Elevation

shadow-card

2px 4px 12px rgb(0 0 0 / 0.08)

Raised segments, stacked images, inline tiles.

shadow-card-hover

2px 4px 16px rgb(0 0 0 / 0.16)

Cards being dragged or hovered.

shadow-elevated

0 12px 40px rgb(0 0 0 / 0.12)

Floating panels and tooltips.