Apple
Product theater: a full-bleed hero, centered type, and blue pill buttons.
When captured, Apple's homepage opened on a black hero for iPhone 18 Pro followed by a light grey tile, so its colors change with each launch. The system underneath holds steady: centered SF Pro headlines at 56px, a smaller subline, and a pair of pill buttons, one filled #0071e3 blue and one outlined in blue. Navigation is a slim dark bar with 12px labels.
- Center the headline, subline and buttons over a full-bleed product image.
- Pair buttons as one filled and one outlined, in the same blue.
- Alternate dark and light grey sections down the page.
- Add a third button or a paragraph to the hero.
- Use square buttons.
- Embed SF Pro on a site.
Color roles
#000000The page ground
#ffffffRaised panels, bands and cards
#f5f5f7Primary ink, 19.3:1 on the background
#ccccccSupporting copy, 13.1:1 on the background
#0071e3Primary actions
#2997ffHairlines and dividers
Type
Use system-ui on Apple devices, Inter elsewhere. SF Pro is licensed for Apple platforms only, so don't embed it on a website.
Use system-ui on Apple devices, Inter elsewhere. SF Pro Text is the text-size cut of SF Pro, licensed for Apple platforms only.
Sizes in use: 56px / 40px / 34px / 28px / 26px / 21px / 19px / 17px / 14px
Spacing
No single base unit: these are the values the page repeats.
Corners and depth
Buttons and cards
Rebuilt here from the measured values, not copied from the site's code.
Hand this to your AI coding tool
Drop it in your repo as DESIGN.md and point Claude Code, Cursor or Codex at it before you ask for a page.
# Apple design system
> Captured from https://www.apple.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/apple/). An independent analysis for reference: Apple and its marks belong to their owner. Learn from the system; don't copy the brand.
## Overview
When captured, Apple's homepage opened on a black hero for iPhone 18 Pro followed by a light grey tile, so its colors change with each launch. The system underneath holds steady: centered SF Pro headlines at 56px, a smaller subline, and a pair of pill buttons, one filled #0071e3 blue and one outlined in blue. Navigation is a slim dark bar with 12px labels.
- Theme: dark
- Mood: dark, cinematic, product
- Category: Consumer hardware
## Colors
| Role | Hex | Use |
|---|---|---|
| Background | `#000000` | The page ground |
| Surface | `#ffffff` | Raised panels, bands and cards |
| Text | `#f5f5f7` | Primary ink, 19.3:1 on the background |
| Muted text | `#cccccc` | Supporting copy, 13.1:1 on the background |
| Accent | `#0071e3` | Primary actions |
| Border | `#2997ff` | Hairlines and dividers |
Full palette, most used first: `#f5f5f7`, `#000000`, `#ffffff`, `#cccccc`, `#1d1d1f`, `#6e6e73`, `#0071e3`, `#0066cc`, `#2997ff`.
## Typography
- **SF Pro Display**: display and body, 57.5% of the text. Use system-ui on Apple devices, Inter elsewhere. SF Pro is licensed for Apple platforms only, so don't embed it on a website.
- **SF Pro Text**: display, 42.5% of the text. Use system-ui on Apple devices, Inter elsewhere. SF Pro Text is the text-size cut of SF Pro, licensed for Apple platforms only.
| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | SF Pro Display | 56px | 600 | 1.07 | -0.005em |
| Heading | SF Pro Display | 40px | 600 | 1.1 | 0 |
| Subheading | SF Pro Display | 28px | 400 | 1.14 | 0.007em |
| Body | SF Pro Display | 19px | 400 | 1.21 | 0.012em |
| Small | SF Pro Text | 12px | 400 | 1 | -0.01em |
Sizes in use, largest first: 56px, 40px, 34px, 28px, 26px, 21px, 19px, 17px, 14px.
## Spacing
No single base unit: the values below are what the page repeats.
Values in use: 8px, 11px, 15px, 17px, 21px, 56px, 63px.
## Shape
Corner radii, smallest first: pill (9999px).
No shadows: depth comes from color and borders.
## Components
### Primary button ("Learn more")
- Fill: #0071e3
- Text: #ffffff, 17px at weight 400
- Border: none
- Corner: pill (9999px)
- Height: 44px, padding 11px 21px
### Secondary button ("Buy")
- Fill: transparent
- Text: #2997ff, 17px at weight 400
- Border: 1px solid #2997ff
- Corner: pill (9999px)
- Height: 44px, padding 11px 21px
## Do
- Center the headline, subline and buttons over a full-bleed product image.
- Pair buttons as one filled and one outlined, in the same blue.
- Alternate dark and light grey sections down the page.
## Don't
- Add a third button or a paragraph to the hero.
- Use square buttons.
- Embed SF Pro on a site.
## CSS variables
```css
:root {
--color-background: #000000;
--color-surface: #ffffff;
--color-text: #f5f5f7;
--color-text-muted: #cccccc;
--color-accent: #0071e3;
--color-border: #2997ff;
--font-display: "SF Pro Display", "Inter", system-ui, sans-serif;
--text-display: 56px;
--weight-display: 600;
--font-heading: "SF Pro Display", "Inter", system-ui, sans-serif;
--text-heading: 40px;
--weight-heading: 600;
--font-subheading: "SF Pro Display", "Inter", system-ui, sans-serif;
--text-subheading: 28px;
--weight-subheading: 400;
--font-body: "SF Pro Display", "Inter", system-ui, sans-serif;
--text-body: 19px;
--weight-body: 400;
--font-small: "SF Pro Text", "Inter", system-ui, sans-serif;
--text-small: 12px;
--weight-small: 400;
--space-1: 8px;
--space-2: 11px;
--space-3: 15px;
--space-4: 17px;
--space-5: 21px;
--space-6: 56px;
--space-7: 63px;
--radius-1: 9999px;
}
```
## Notes for AI coding tools
- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.
Apple and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-05. We're not affiliated with or endorsed by Apple.