# Apple — Design Reference

> Products on stage, one blue pill to buy them

**Theme:** light · **Measured from:** apple.com (English, 1440 px)

Apple's home page is a stack of stages. Each product gets an edge-to-edge tile — black (`#000000`) for pro and dramatic products, pale gray (`#f5f5f7`) for the rest — separated by thin white gutters. Every tile follows the same script: a centered product name in SF Pro Display semibold, one short tagline, a fine-print availability line, two blue pill buttons, then a huge product photo that fills the remaining space. There are no cards, borders, icons or illustrations; the photography is the only decoration. Blue is the only interactive color, and it shifts shade with the background (`#0066cc` on light, `#2997ff` on black). The page is quiet, centered and symmetrical.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Action Blue | `#0071e3` | Fill of the primary "Learn more" pill; focus ring |
| Link Blue | `#0066cc` | Outline pills and links on light tiles |
| Bright Blue | `#2997ff` | Outline pills and links on black tiles |
| Ink | `#1d1d1f` | Headlines and body on light — never pure black |
| Secondary Gray | `#6e6e73` | Taglines, availability lines, footnotes (rgba(0,0,0,0.56) on the site) |
| Tertiary Gray | `#86868b` | Muted lines on black, fine print |
| Pale Gray | `#f5f5f7` | Light tile background; headline color on black tiles |
| Black | `#000000` | Dark tile background |
| White | `#ffffff` | Canvas, gutters between tiles, button text |
| Divider | `#d2d2d7` | Footer hairlines |
| Nav Dark | `#161617` | Dark global nav and banner chrome |

Product subheads sometimes borrow colors from the product itself (the gold-to-blue "PROLED XDR Display" line). Treat that as product art, not a palette color.

## Typography

**SF Pro Display** for 19px and up, **SF Pro Text** below 20px. Substitute both with **Inter** from Google Fonts (400/600/700).

- Product names and section titles are **600**, never 700 except inside logotype-style lockups.
- Taglines and subheads are **400** at 21–28px, with slightly positive tracking (`+0.23px` at 21px).
- Small text tracks negative (`-0.374px` at 17px, `-0.12px` at 12px).
- Everything in a tile is center-aligned.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 56px | 600 | 1.07 | -0.28px |
| Heading | 40px | 600 | 1.1 | 0 |
| Subheading | 28px | 400 | 1.14 | 0.196px |
| Tagline | 21px | 400 | 1.19 | 0.231px |
| Body | 17px | 400 | 1.18 | -0.374px |
| Button | 17px | 400 | 1.18 | -0.374px |
| Body small | 14px | 400 | 1.29 | -0.224px |
| Caption | 12px | 400 | 1.33 | -0.12px |

## Shape and spacing

- **Buttons:** full pill (`980px`). Always.
- **Tiles:** square corners (0px), edge to edge, 12px white gutters between them.
- **Select fields / small UI:** 8–11px radius.
- **Base unit:** 4px. Tile padding is 53px top; buttons are 44px tall.
- **Text column:** about 1024px, centered. Tiles themselves span the full viewport (full-width hero tiles, then a 2-up grid of ~702px tiles).
- **Section gap:** 12px — tiles touch except for the white gutter; rhythm comes from alternating black and gray.

## Components

### Primary button
Action Blue `#0071e3` fill, white text, `980px` radius, padding `11px 21px`, 44px tall, SF Pro Text 400 at 17px. No border, no shadow, no icon. Label: "Learn more".

### Outline button
Transparent fill, 1px border and text in the same blue: `#0066cc` on light tiles, `#2997ff` on black tiles. Same size and radius as the primary. Labels: "Buy", "Pre-order", "Shop", "Apply now". Always sits right of the primary, about 16px apart.

### Navigation
A thin global nav (in the capture, a dark `#161617` band) with the Apple logo, product categories and search/bag icons in 12px SF Pro Text. Dense, quiet and secondary to the tiles.

### Product tile
Full-bleed or half-width block, black or pale gray, square corners. Centered stack: product name (56px hero / 40px grid), 21–28px tagline, 12–14px gray availability line, button pair, then the product photo filling the bottom. Headline is Ink on gray, Pale Gray on black.

### Media carousel
"Endless entertainment." headline over a horizontal carousel of wide, rounded show posters with a white pill "Stream now" button and a short caption in the lower left. Smaller app tiles (Music, Fitness+, Arcade) follow in a second row. Paging dots beneath.

### Footnotes
Long block of 12px Secondary Gray legal text on Pale Gray with numbered notes and blue inline links, above a multi-column footer link list.

## Do

- Give each product its own full tile and let the photo dominate.
- Center everything inside a tile.
- Alternate black and pale-gray tiles to create rhythm.
- Pair a filled blue pill with an outline blue pill.
- Switch the blue shade to `#2997ff` on black backgrounds.
- Keep copy to a name and one short line.

## Don't

- Don't round tiles or put them in cards with shadows.
- Don't use any button shape other than the pill.
- Don't introduce a second action color.
- Don't left-align tile content.
- Don't add icons, illustrations or decorative gradients around the product.
- Don't use pure black text on light backgrounds; use Ink `#1d1d1f`.

## Layout

Two full-width hero tiles on black, then a full-width pale-gray tile, then a 2-up grid of tiles alternating light and dark (iMac / iPhone Pro, iPad / Watch, Upgrade / Card), then the entertainment carousel on white, footnotes and footer. Every tile is a self-contained, centered composition; there is no left-aligned prose block on the page.

## Agent prompt guide

- Text: `#1d1d1f` · Secondary: `#6e6e73` · On black: `#f5f5f7`
- Tiles: `#f5f5f7` and `#000000` · Canvas and gutters: `#ffffff`
- Action: `#0071e3` · Outline on light: `#0066cc` · Outline on dark: `#2997ff`

Example prompts:

1. "Primary button: background #0071e3, white text, 980px radius, padding 11px 21px, height 44px, Inter 400 17px, letter-spacing -0.374px, no border, no shadow."
2. "Product tile: full-width black block, square corners, padding-top 53px; centered 56px Inter 600 product name in #f5f5f7 (letter-spacing -0.28px), a 21px 400 tagline, then a 'Learn more' #0071e3 pill and a 'Buy' outline pill with 1px #2997ff border and #2997ff text; large product photo below."
3. "Two-up tile grid: two 50% tiles with a 12px white gutter, one #f5f5f7 with #1d1d1f 40px 600 heading, one #000000 with #f5f5f7 heading; each centered with a blue pill pair."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-action-blue: #0071e3;
  --color-link-blue: #0066cc;
  --color-bright-blue: #2997ff;
  --color-ink: #1d1d1f;
  --color-secondary-gray: #6e6e73;
  --color-tertiary-gray: #86868b;
  --color-pale-gray: #f5f5f7;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-divider: #d2d2d7;
  --color-nav-dark: #161617;

  /* Fonts */
  --font-display: 'SF Pro Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'SF Pro Text', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 56px;
  --text-display--line-height: 1.07;
  --text-display--letter-spacing: -0.28px;
  --text-display--font-weight: 600;
  --text-heading: 40px;
  --text-heading--line-height: 1.1;
  --text-heading--font-weight: 600;
  --text-subheading: 28px;
  --text-subheading--line-height: 1.14;
  --text-subheading--letter-spacing: 0.196px;
  --text-subheading--font-weight: 400;
  --text-tagline: 21px;
  --text-tagline--line-height: 1.19;
  --text-tagline--letter-spacing: 0.231px;
  --text-tagline--font-weight: 400;
  --text-body: 17px;
  --text-body--line-height: 1.18;
  --text-body--letter-spacing: -0.374px;
  --text-body--font-weight: 400;
  --text-button: 17px;
  --text-button--line-height: 1.18;
  --text-button--letter-spacing: -0.374px;
  --text-button--font-weight: 400;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.29;
  --text-body-sm--letter-spacing: -0.224px;
  --text-body-sm--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: -0.12px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 980px;
  --radius-inputs: 11px;
  --radius-cards: 0px;
  --radius-tags: 980px;

  /* Spacing */
  --spacing: 4px;

  /* Shadows */
  --shadow-media: 3px 5px 30px rgba(0, 0, 0, 0.22);

  /* Layout */
  --container-page: 1024px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-action-blue: #0071e3;
  --color-link-blue: #0066cc;
  --color-bright-blue: #2997ff;
  --color-ink: #1d1d1f;
  --color-secondary-gray: #6e6e73;
  --color-tertiary-gray: #86868b;
  --color-pale-gray: #f5f5f7;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-divider: #d2d2d7;
  --color-nav-dark: #161617;

  /* Fonts */
  --font-display: 'SF Pro Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'SF Pro Text', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 56px;
  --text-display--line-height: 1.07;
  --text-display--letter-spacing: -0.28px;
  --text-display--font-weight: 600;
  --text-heading: 40px;
  --text-heading--line-height: 1.1;
  --text-heading--font-weight: 600;
  --text-subheading: 28px;
  --text-subheading--line-height: 1.14;
  --text-subheading--letter-spacing: 0.196px;
  --text-subheading--font-weight: 400;
  --text-tagline: 21px;
  --text-tagline--line-height: 1.19;
  --text-tagline--letter-spacing: 0.231px;
  --text-tagline--font-weight: 400;
  --text-body: 17px;
  --text-body--line-height: 1.18;
  --text-body--letter-spacing: -0.374px;
  --text-body--font-weight: 400;
  --text-button: 17px;
  --text-button--line-height: 1.18;
  --text-button--letter-spacing: -0.374px;
  --text-button--font-weight: 400;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.29;
  --text-body-sm--letter-spacing: -0.224px;
  --text-body-sm--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: -0.12px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 980px;
  --radius-inputs: 11px;
  --radius-cards: 0px;
  --radius-tags: 980px;

  /* Spacing */
  --spacing: 4px;

  /* Shadows */
  --shadow-media: 3px 5px 30px rgba(0, 0, 0, 0.22);

  /* Layout */
  --container-page: 1024px;
}
```

---

*Measured from https://www.apple.com/ on 2026-10-28 by Faundr. Inspired by Apple; not its official design system and not affiliated with Apple.*