PUBLIC REFERENCE
Apple
Gallery wall at natural light — enormous type casts shadows on a white surface, color enters only as product.
Colors
#1d1d1f Primary text, headings, nav labels, icon fills — near-black with just enough warmth to avoid harshness on white
#707070 Secondary body copy, captions, footnotes, muted nav items
#474747 Tertiary body text, supporting link text, secondary nav
#333333 Icon strokes, mid-weight body text, button labels in ghost state
#f5f5f7 Page canvas background, section divider bands, badge fills
#ffffff Card surfaces, nav background, elevated container fills
#000000 Dark card variant, hero icon fills, maximum-contrast black card
#e8e8ed Frosted pill button background (country selector), input backgrounds
#0071e3 Primary CTA button fill, active nav 'Buy' button — the sole permission-to-act color on the entire page
#0066cc Inline text links, navigation anchor colors — slightly darker than Azure to distinguish interactive text from interactive buttons
#dddc8c MacBook Neo Citrus finish showcase backdrop — dark-to-citrus theatrical product gradient
#2535e2 MacBook Neo Indigo finish showcase backdrop — dark-to-deep-blue theatrical product gradient
#cc29bc MacBook Neo Blush finish showcase backdrop — dark-to-magenta-violet theatrical product gradient
#dddc8c Product color swatch — Citrus finish selector chip
#e8d0d0 Product color swatch — Blush finish selector chip
#596680 Product color swatch — Indigo finish selector chip
#b64400 Badge warning text, price asterisk callouts — deep amber-orange for inline semantic alerts
Do
- Use 28px border-radius for all feature cards (#ffffff and #f5f5f7 backgrounds) — this exact value is the page's geometric signature.
- Reserve #0071e3 exclusively for the primary 'Buy' CTA button. No other UI element uses this blue — its scarcity makes it the only color that reads as an imperative.
- Apply negative letter-spacing scaled to font size: -2.11px at 96px display, -0.9px at 56px heading-lg, -0.1px at 17px body. Positive or zero tracking at display sizes breaks the chiseled headline aesthetic.
- Use #f5f5f7 as page canvas and #ffffff as card surface. Never reverse this — cards must always be lighter than their parent background.
- Set SF Pro Display weight 700 for all primary product headlines at 56px and above. Weight 600 is for supporting headers (24-40px), never for hero text.
- Use rgba(210,210,215,0.64) with backdrop-filter blur(20px) for any temporary overlay controls (country selectors, segmented pickers) — this is the frosted-glass layer distinct from all opaque surfaces.
- Product finish gradients (Citrus, Indigo, Blush) are used only as full-bleed section backdrops for that finish's showcase. Never use them as UI chrome, card backgrounds, or button fills.
Don't
- Do not add box-shadow to any card or container. The entire elevation system is color-value-only — shadows break the flat-lit gallery effect.
- Do not use #0066cc (Cobalt Link) for button backgrounds. It is an inline text link color only — using it on filled buttons conflicts with the #0071e3 CTA hierarchy.
- Do not use font weight 300 for headlines below 40px — below that threshold, weight 300 loses definition against the white/fog background.
- Do not place two rounded-pill buttons side by side in the same visual zone. The 999px radius is rationed to one CTA per section to prevent diffusion of focus.
- Do not use the product finish colors (#dddc8c Citrus, #e8d0d0 Blush, #596680 Indigo) as semantic or UI accent colors — they exist only as product identity swatches and gradient source colors.
- Do not use positive letter-spacing on SF Pro Display at sizes above 28px. The +0.007em–+0.011em values from the data appear only at small display sizes (21px); at headline scale positive tracking is tonally inconsistent.
- Do not center-align body paragraphs longer than 2 lines. Apple's body copy left-aligns in two-column feature layouts; centered text is reserved for single-line hero subheadings and price callouts.