Signal Blue
#0071e3Blue action color for filled buttons, selected navigation states, and focused conversion moments.
Apple (España)
apple.comWebsite preview
The design language
Apple's product page language is a luminous white gallery: every pixel of chrome is stripped away so the photographed product and one bold typographic statement own the screen. Headlines in SF Pro Display at 64–96px do nearly all of the work, set in near-black (#1d1d1f) with selectively tinted words — a green verb for one emotion, a blue verb for another — that turn the headline itself into a micro-product story. Surfaces are paper-flat: no shadows, no gradients, no decorative borders, only hairline rules and generous whitespace. Interaction is reduced to two button archetypes — a blue pill (#0071e3) for the purchase moment and a subtle neutral pill (#e2e2e5) for everything else — surrounded by a sea of 28px-rounded cards that float on a #f5f5f7 canvas. The whole system is engineered to feel weightless, confident, and barely-designed: the brand is the product, and the design system is the silence around it.
Color palette
brand
accent
Deep Link Blue
#0066ccInline link text and link underlines throughout body copy — the only chromatic text color permitted in paragraph flow
Pulse Green
#03aa49Accent word within hero headlines (e.g. the first verb of a product tagline) — used to color-code an emotional concept inside otherwise monochrome type
Deep Green
#03873aDarker green variant for text-level green accents and underlined links in sustainability/spec contexts
Ultraviolet
#8668ffViolet outline accent for tags, dividers, and focused UI edges.
Ember Orange
#ed6300Orange outline accent for tags, dividers, and focused UI edges.
Lagoon Teal
#00a1b3Teal outline accent for tags, dividers, and focused UI edges.
neutral
Pure Canvas
#f5f5f7Page background, section bands, card surfaces — a near-white that separates structural surfaces from pure white product highlights without introducing tint
Paper White
#ffffffElevated card surfaces, icon fills, and inverted text on dark/colored backgrounds
Obsidian
#1d1d1fPrimary text, headlines, card borders, nav rules — the singular dark anchor; not pure black, a graphite that softens contrast on white
Iron Gray
#707070Secondary nav borders, list dividers, subdued UI metadata
Slate
#474747Nav borders, link underlines, secondary text in dense lists
Charcoal
#333336Nav text, button labels on neutral surfaces — slightly cool graphite for UI controls
Mist
#e2e2e5Neutral pill button fill, secondary surface tier for compact controls and list rows
Fog
#d6d6d6List row backgrounds, hairline separators in data-dense sections
Void
#000000Icon fills on light surfaces, nav logo — reserved for the most absolute contrast moments
Typography
Type scale
Minor Third (1.2) · 20px basedisplay
96px · 600 · 1.04 · -1.824px trackingThe quick brown fox jumps
text-80
80px · 600 · 1.04The quick brown fox jumps
text-76
76px · 600 · 1.04The quick brown fox jumps
heading-lg
64px · 600 · 1.06 · -0.96px trackingThe quick brown fox jumps
text-44
44px · 400 · 1The quick brown fox jumps
heading
39px · 600 · 1.07 · -0.351px trackingThe quick brown fox jumps
heading-sm
28px · 600 · 1.14 · -0.252px trackingThe quick brown fox jumps
text-24
24px · 600 · 1.33The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
SF Pro Display
- Weights
- 600
- Sizes
- 21px, 24px, 28px, 39px, 64px, 76px, 80px, 96px
- Line height
- 1.04–1.17 for display sizes; 1.33 for sub-heading sizes
- Letter spacing
- -0.0190em at 96px, -0.0150em at 64px, -0.0090em at 39px, 0.0110em at 21px (positive tracking for small display sizes)
- Fallback
- Inter, Helvetica Neue, system-ui
- Features
- "numr" on
Hero headlines, section headings, and the page-level brand statement. Set in semibold at very large sizes (64–96px) with aggressive negative tracking (-0.019em to -0.005em) that tightens the headline into a single confident block. Smaller sizes (21–28px) carry section headings and card titles. The signature choice: weight 600 is the heaviest weight on the entire site — Apple trusts display weight 600 over 700+ to command the page
Additional typeface
SF Pro Text
- Weights
- 400, 600
- Sizes
- 12px, 14px, 17px, 20px, 44px
- Line height
- 1.18–1.47 for body; 1.00 for the 44px nav utility size
- Letter spacing
- -0.0220em at 44px, -0.0190em at 20px, -0.0160em at 17px, -0.0100em at 14px, -0.0030em at 12px
- Fallback
- Inter, Helvetica Neue, system-ui
- Features
- "numr" on
Body copy, nav labels, button text, spec text, and large display numerals (44px). Weight 400 is the paragraph default; weight 600 marks links, button labels, and emphasis within body text. The 44px instance is a display-numeral role used for prices or large data — it borrows SF Pro Text rather than Display because the data needs to feel tabular, not editorial
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1440px
- Section gap
- 80-120px
- Card padding
- 28px
- Element gap
- 8-12px
Border radius
nav
980pxcards
28pxlinks
10pxbuttons
980pxbuttons-large
36pxSpacing scale
2px3px4px5px6px7px8px9px10px11px12px13px14px15px16px17px18px19px20px21px22px24px25px27px28px30px32px34px37px40px44px48px52px54px56px57px58px60px76px80px84px88px89px90px100px104px119px120px160px201px208px216pxGuidelines
Do
- Use SF Pro Display weight 600 for any display-size headline; never go heavier than 600 — the restraint is the authority
- Tint single words in headlines using #03aa49, #0066cc, #8668ff, #ed6300, or #00a1b3; keep the rest of the line #1d1d1f
- Use #0071e3 fill on a 980px pill as the sole primary action — never apply this blue to text, borders, or non-button surfaces
- Set headlines left-aligned within a left-aligned content column; do not center display type
- Use 28px border-radius for cards and 980px (full pill) for buttons — these two radii carry the entire shape language
- Pair every chromatic button with a #1d1d1f text label nearby (price, kicker) so the blue pill remains the singular attention point
- Let product photography fill the card; place caption text at the card's edge in a narrow column rather than overlaying the image
Don’t
- Do not introduce box-shadows, glows, or drop-shadows — elevation comes from surface contrast and 1px hairlines only
- Do not use the chromatic accent colors (green, violet, orange, teal) for backgrounds, buttons, or large fills — they are word-tints only
- Do not use #0000ee or any unstyled browser-default link color — always #0066cc with a 1px underline
- Do not set body copy above 20px or below 14px; 17px is the singular paragraph size
- Do not use a border-radius value other than 10px, 28px, 32px, 36px, or 980px — these are the only radii in the system
- Do not center the hero headline or the price+CTA cluster — left-alignment is structural, not stylistic
- Do not apply gradients to text, buttons, or cards; gradients are reserved for potential future decorative use and are not a current pattern on the product surface
Components
Primary Action Button
The purchase or key conversion moment — Apple's only filled chromatic buttonPill shape at 980px radius, filled with #0071e3, white text in SF Pro Text 17px / weight 600. Padding 11px vertical, 20px horizontal. Letter-spacing -0.022em. No border, no shadow. This is the only button on the page permitted to be blue.
Neutral Pill Button
Secondary action — 'Learn more', 'See all', disclosure expandersPill shape at 980px radius, filled with #e2e2e5, text in #333336 SF Pro Text 17px / weight 600. Same 11px/20px padding as the primary. The visual quiet cousin of the primary: identical geometry, desaturated fill.
Pill Disclosure Item
Expandable spec detail rows in the 'Más de cerca' (closer look) sectionPill shape at 980px radius, transparent fill with 1px border in #d6d6d6. Left side holds a small '+' icon, right side holds the spec label in SF Pro Text 14px / weight 400 / #1d1d1f. No background fill until expanded.
Product Hero Block
Full-bleed product showcase above the foldWhite canvas (#ffffff). Centered composition: the photographed product floats without frame, followed below by the brand kicker (Apple logo glyph + 'WATCH SE 3' in SF Pro Text 12px / weight 600 / uppercase / letter-spacing tight), then the display headline (SF Pro Display 64-96px / weight 600) where one or two verbs are tinted in #03aa49, #0066cc, or #8668ff. Headlines are set left-aligned, not centered.
Headline with Tinted Accent Words
Signature typographic pattern — the colored-word-in-headline techniqueSF Pro Display 64px / weight 600 / #1d1d1f, with a single verb or noun in #03aa49 (green for energy), #0066cc (blue for intelligence), #8668ff (violet for software), #ed6300 (orange for fitness), or #00a1b3 (teal for health). The tint lives on the word, not a highlight, and the rest of the line stays Obsidian.
Feature Card
Large rectangular card for product close-up photography with captionBorder-radius 28px. Background #ffffff. 1px hairline border in #1d1d1f (very subtle, often absent — the card sits on #f5f5f7 canvas with no border). The image occupies the full card width; caption text in SF Pro Text 17px / weight 400 / #1d1d1f sits at the right edge of the card, left-aligned within its own column.
Sticky Top Navigation
Global product line nav with pill background utility areaWhite fill, 1px bottom border in #d6d6d6. Nav labels in SF Pro Text 12px / weight 400 / #1d1d1f. Apple logo at left in #000000. Right-side utility items (search, bag) at 980px pill radius with #f5f5f7 background. The pill radius is used to round the search and bag containers, not the nav bar itself.
Utility Bar
Slim promotional band above the main navFull-width band in #f5f5f7. Single line of SF Pro Text 12px / weight 400 / #1d1d1f text, centered. Inline 'Comprar >' link in #0066cc. No border, no padding emphasis — sits flush above the nav.
Band Section
Alternating full-width content bands — the page's primary structural unitEach band is a full-bleed horizontal block, either #ffffff or #f5f5f7. Section heading sits in the top-left corner in SF Pro Display 39-64px / weight 600 / #1d1d1f. Content within the band uses the standard max-width container with generous internal padding (~80px top/bottom). Bands alternate between text-left/image-right and image-left/text-right compositions.
Price + Action Stack
The buy moment cluster directly under the hero headlineTwo elements on one row: 'Desde 269 €' price in SF Pro Text 14px / weight 400 / #1d1d1f, followed by the Primary Action Button (#0071e3 pill, white text). The price label has no border, no background — it is pure text, letting the blue pill do the visual work.
Link Inline (Body Flow)
In-paragraph link textColor #0066cc, 1px underline in #0066cc. SF Pro Text 17px / weight 400 (inherits paragraph weight). No special padding or background.
Surfaces & elevation
Level 0
Canvas
#f5f5f7Page-level background, the base on which all sections sit
Level 1
Card
#ffffffProduct cards, feature callout blocks, and any content container that needs to lift off the canvas
Level 2
Control
#e2e2e5Neutral pill buttons, secondary list rows, compact UI surfaces
Level 3
Divider
#d6d6d6Hairline separators and subtle row backgrounds in data-dense bands
Apple's product pages do not use box-shadow. Elevation is achieved entirely through surface contrast — #ffffff cards on a #f5f5f7 canvas, with 1px hairlines in #d6d6d6 or #1d1d1f providing the only structural division. The system intentionally avoids drop shadows, glows, or depth cues; everything sits on the same optical plane, which keeps the product photography visually unchallenged.
Layout & imagery
Layout
Full-bleed bands stacked vertically, each band a horizontal slice of #ffffff or #f5f5f7. Page max-width is 1440px but content containers sit narrower (~980px) and are left-aligned, never centered. The hero band is a tall product showcase: product image at top half, then below it the left-aligned kicker, display headline, and price+CTA cluster. Subsequent bands alternate between image-left/text-right and text-left/image-right compositions at roughly 50/50 width splits. The 'Lo principal' (highlights) section uses large feature cards with full-bleed photography and a narrow text column anchored to the right edge of each card. The 'Más de cerca' section uses a centered composition: small pill disclosure list on the left, large product image on the right. Section gaps are generous (80-120px). The overall rhythm is slow, photographic, and editorial — bands breathe.
Imagery
Photography dominates. The site is a hardware showcase — every section is built around large, high-resolution product photography rendered on pure white with no lifestyle context, no props, no environment. The watch is photographed at three-quarter angles showing the face, band, and case simultaneously; the band colors (neon yellow, orange, slate) are used as compositional color blocks against the white. There is zero illustration, zero iconographic decoration, and zero 3D rendering — everything is optical product photography. The only non-photographic visual is the Apple logo and the occasional small SF Symbol-style icon (search, bag, plus). Imagery density is very low relative to text: one or two large photographs per band, surrounded by vast white margins. The visual hierarchy is photograph > headline > body > UI chrome.
Design notes
Agent Guide
## Quick Color Reference - text (primary): #1d1d1f - background: #ffffff (cards) / #f5f5f7 (canvas) - border / hairline: #1d1d1f or #d6d6d6 - link inline: #0066cc with 1px underline - accent word in headline: #03aa49 (green), #0066cc (blue), #8668ff (violet), #ed6300 (orange), #00a1b3 (teal) - primary action: #0071e3 (filled action) - neutral action: #e2e2e5 fill, #333336 text ## Example Component Prompts 1. **Hero Headline with Tinted Verb**: Build a hero block on #ffffff. Product image (centered, full width up to 1200px). Below: kicker 'APPLE WATCH SE 3' in SF Pro Text 12px / weight 600 / uppercase / #1d1d1f. Display headline at 64px SF Pro Display / weight 600 / letter-spacing -0.015em, where the first word is #03aa49 and the remaining words are #1d1d1f. Set left-aligned within a 980px content column. 2. **Primary Action Button**: Pill at 980px radius. Fill #0071e3. Text 'Comprar' in SF Pro Text 17px / weight 600 / #ffffff, letter-spacing -0.022em. Padding 11px vertical, 20px horizontal. No border, no shadow. 3. **Feature Band Section**: Full-bleed band on #f5f5f7. Section heading 'Lo principal.' in SF Pro Display 64px / weight 600 / #1d1d1f, left-aligned in a 980px column. Below: a 28px-radius white card containing a full-bleed product photograph on the left two-thirds, and body caption text in SF Pro Text 17px / weight 400 / #1d1d1f in the right one-third column. Top padding 80px, bottom padding 120px. 4. **Neutral Pill Disclosure**: Pill at 980px radius, transparent fill, 1px border #d6d6d6. '+' icon at left in #1d1d1f. Label text in SF Pro Text 14px / weight 400 / #1d1d1f. 11px vertical padding, 16px horizontal. 5. **Price + Action Stack**: Inline row on a single baseline. Left: 'Desde 269 €' in SF Pro Text 14px / weight 400 / #1d1d1f. Right: the Primary Action Button (#0071e3 pill, 'Comprar', 11px/20px padding). 8px gap between the two elements.
Similar brands
Apple (global product pages)
Identical design system — the same SF Pro Display headlines with tinted accent words, 980px pill buttons in #0071e3, #f5f5f7 canvas, and zero-shadow layout. This is the source of truth.
Bose
Same white-gallery product photography approach with left-aligned product hero and one-color CTA pill (Bose red); same comfortable spacing and absence of shadows
Dyson
Same product-as-hero composition on pure white with display-weight headlines and a single chromatic action color (Dyson yellow); same hairline-divided section bands
Sonos
Same large product photography, generous vertical band spacing, and one bold monochromatic + neutral button system; identical avoidance of decorative gradients or shadows
Teenage Engineering
Same commitment to large display-weight headlines and product photography on white, with the same restrained two-button system (one chromatic, one neutral) and tight 28px card radii
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
