Apple
apple.comProduct-first marketing with huge photography, SF Pro headlines and near-silent UI chrome.
An independent summary of Apple's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Apple. Color values are approximate.
Overview
Apple lets the product image carry the page. Type is large and calm, layouts are centered, and interface elements shrink to thin links and pill buttons so nothing competes with the hero.
Color
| Role | Value | Use |
|---|---|---|
| Near-black (text) | #1D1D1F | Headings and body |
| Link blue | #0071E3 | Links and primary buttons |
| Light gray | #F5F5F7 | Section backgrounds |
| Mid gray | #86868B | Secondary text |
Typography
SF Pro Display for headlines (semibold, tight tracking) and SF Pro Text for body. Headline sizes jump dramatically between breakpoints; body stays around 17px.
Spacing and layout
Very generous vertical rhythm: each section is roughly a screen tall. Content is centered with narrow measure for text.
Components
- Pill buttons in link blue, plus text links with a chevron.
- Full-bleed product tiles alternating light and dark backgrounds.
- Sticky local nav with a single buy button.
- Scroll-driven image sequences for feature stories.
Do
- Give imagery the most space on the page.
- Use short, declarative headlines.
Don't
- Don't clutter heroes with multiple CTAs.
- Don't use borders where background contrast is enough.
Prompt for your agent
Style this interface in the spirit of Apple's design language, without copying its logo or brand assets.
Product-first marketing with huge photography, SF Pro headlines and near-silent UI chrome.
Follow the color roles, type and component notes in this DESIGN.md.