Typography
scale ratio 1.278- SF Pro Textbody400 60058%
- SF Pro Displaydisplay400 60042%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | SF Pro Display | 56px | 600 | 1.071 | -0.005em |
| title | SF Pro Display | 40px | 600 | 1.1 | 0em |
| body | SF Pro Display | 21px | 400 | 1.19 | 0.011em |
| body-sm | SF Pro Text | 12px | 400 | 1.333 | -0.01em |
Type scale
Aa12Aa14Aa17Aa21Aa28Aa34Aa40Aa56
- Body size
- 21px / 1.19
- Display size
- 56px
- Display tracking
- -0.005em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.46:1
- Muted on bg
- 4.83:1
- Accent on bg
- 4.31:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 5
- 6
- 8
- 9
- 9.5
- 11
- 12
- 14
- 15
- 17
- 19
- 20
- 21
- 22
Corner radii
811pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 68px
Components
exact computed valuesbutton-primary
Shop gifts
- backgroundColor
- #0071E3
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 11px 21px
- height
- 44px
- fontFamily
- SF Pro Text
- fontSize
- 17px
- fontWeight
- 400
button-secondary
Continue
- backgroundColor
- #F5F5F7
- textColor
- #000000
- rounded
- 8px
- padding
- 8px 15px
- height
- 36px
- fontFamily
- SF Pro Text
- fontSize
- 14px
- fontWeight
- 400
Layout & motion
- Container
- 980px
- Grid columns
- 2
- Hero
- centered-over-media+media-below
- Navigation
- top-fixed+blur
- Page height
- 5,955px
- Easing
- cubic-bezier(0.4, 0, 0.6, 1)
- Durations
- 250ms 320ms 400ms 1000ms
- Transitions
- 37
- Keyframes
- 0
- Stack
- n/a
Page sections (8)
section labels are heuristic
01heroGifts they’ll love.
02feature detail?iPhone Duo
03features?MacBook Pro
04logos?Apple Upgrade
05logosEndless entertainment.
06features?
07footerAbout Apple
08footer
How Apple compares
- Body text
- 21px: larger than 96% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.28×: flatter than 52% of indexed sites (median 1.28×).
- Container
- 980px: narrower than 84% of indexed sites (median 1242px).
- Text contrast
- 15.5:1: lower than 71% of indexed sites (median 17.6:1).
- Page length
- 5,955px: shorter than 73% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- SF Pro Text
- The only site in the index that loads SF Pro Text.
- SF Pro Display
- The only site in the index that loads SF Pro Display.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Apple use?
Apple uses SF Pro Text for body text. SF Pro Display is used for headings.
What are Apple's brand colors?
Apple's website uses a light scheme: background #F5F5F7, surface #FFFFFF, text #1D1D1F, muted text #0000008F.
How is Apple's website laid out?
The most common corner radius is fully rounded (pill), body text is 21px with 1.19 line height, and the page container is 980px wide.
