{"id":"c9cabb96-32fa-4896-837a-f2497ce1c856","name":"Apple","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/c9cabb96-32fa-4896-837a-f2497ce1c856","originalSiteUrl":"https://www.apple.com/macbook-neo","capturedAt":"2026-04-14T16:33:10.799Z","colors":[{"name":"Ink","hex":"#1d1d1f","role":"Primary text, headings, nav labels, icon fills — near-black with just enough warmth to avoid harshness on white","group":"neutral","cssVariable":"--color-ink"},{"name":"Graphite","hex":"#707070","role":"Secondary body copy, captions, footnotes, muted nav items","group":"neutral","cssVariable":"--color-graphite"},{"name":"Slate","hex":"#474747","role":"Tertiary body text, supporting link text, secondary nav","group":"neutral","cssVariable":"--color-slate"},{"name":"Ash","hex":"#333333","role":"Icon strokes, mid-weight body text, button labels in ghost state","group":"neutral","cssVariable":"--color-ash"},{"name":"Fog","hex":"#f5f5f7","role":"Page canvas background, section divider bands, badge fills","group":"neutral","cssVariable":"--color-fog"},{"name":"Snow","hex":"#ffffff","role":"Card surfaces, nav background, elevated container fills","group":"neutral","cssVariable":"--color-snow"},{"name":"Obsidian","hex":"#000000","role":"Dark card variant, hero icon fills, maximum-contrast black card","group":"neutral","cssVariable":"--color-obsidian"},{"name":"Silver Mist","hex":"#e8e8ed","role":"Frosted pill button background (country selector), input backgrounds","group":"neutral","cssVariable":"--color-silver-mist"},{"name":"Azure","hex":"#0071e3","role":"Primary CTA button fill, active nav 'Buy' button — the sole permission-to-act color on the entire page","group":"brand","cssVariable":"--color-azure"},{"name":"Cobalt Link","hex":"#0066cc","role":"Inline text links, navigation anchor colors — slightly darker than Azure to distinguish interactive text from interactive buttons","group":"brand","cssVariable":"--color-cobalt-link"},{"name":"Citrus Gradient","hex":"#dddc8c","role":"MacBook Neo Citrus finish showcase backdrop — dark-to-citrus theatrical product gradient","group":"accent","gradient":"linear-gradient(184deg, rgb(29, 29, 31) 0%, rgb(223, 231, 79) 33%, rgb(94, 156, 42) 66%, rgb(10, 134, 26) 95%)","cssVariable":"--color-citrus-gradient"},{"name":"Indigo Gradient","hex":"#2535e2","role":"MacBook Neo Indigo finish showcase backdrop — dark-to-deep-blue theatrical product gradient","group":"accent","gradient":"linear-gradient(184deg, rgb(29, 29, 31) 20%, rgb(168, 211, 251) 43%, rgb(0, 18, 249) 76%, rgb(37, 53, 224) 95%)","cssVariable":"--color-indigo-gradient"},{"name":"Blush Gradient","hex":"#cc29bc","role":"MacBook Neo Blush finish showcase backdrop — dark-to-magenta-violet theatrical product gradient","group":"accent","gradient":"linear-gradient(184deg, rgb(29, 29, 31) 20%, rgb(243, 196, 246) 43%, rgb(245, 0, 180) 76%, rgb(204, 41, 188) 95%)","cssVariable":"--color-blush-gradient"},{"name":"Citrus Finish","hex":"#dddc8c","role":"Product color swatch — Citrus finish selector chip","group":"accent","cssVariable":"--color-citrus-finish"},{"name":"Blush Finish","hex":"#e8d0d0","role":"Product color swatch — Blush finish selector chip","group":"accent","cssVariable":"--color-blush-finish"},{"name":"Indigo Finish","hex":"#596680","role":"Product color swatch — Indigo finish selector chip","group":"accent","cssVariable":"--color-indigo-finish"},{"name":"Caution","hex":"#b64400","role":"Badge warning text, price asterisk callouts — deep amber-orange for inline semantic alerts","group":"semantic","cssVariable":"--color-caution"}],"typography":[{"role":"All marketing headlines, product name lockups, section titles. Weight 700 at 80-96px is the page's defining visual move — these headlines are 2-4 words at near-poster scale, taking up half the viewport before any product image appears. Negative tracking at display sizes (-0.022em at largest) tightens letterforms into a single typographic mass.","sizes":"21px, 24px, 28px, 32px, 40px, 56px, 80px, 96px","family":"SF Pro Display","weight":"600, 700","lineHeight":"1.04–1.20","substitute":"Inter, system-ui","letterSpacing":"-0.022em at 96px, -0.019em at 80px, -0.016em at 56px, -0.015em at 40px, -0.005em at 28px, +0.004em at 21px","fontFeatureSettings":"\"numr\""},{"role":"Body copy, nav labels, captions, button labels, footnotes. Weight 400 at 17px is the default body size. Weight 300 appears at larger marketing sizes (20-24px) for subheadings that should feel lighter than headlines. Weight 600 for emphasis labels. The -0.003em tracking at body sizes is subtle but keeps dense paragraphs from sprawling.","sizes":"12px, 14px, 17px, 18px, 20px, 24px, 44px","family":"SF Pro Text","weight":"300, 400, 500, 600","lineHeight":"1.24–1.50","substitute":"Inter, system-ui","letterSpacing":"-0.022em at 44px, -0.010em at 20px, -0.006em at 17px, -0.003em at 14px, -0.003em at 12px","fontFeatureSettings":"\"numr\""}],"spacing":{"radius":{"cards":"28px","buttons":"999px","navItems":"980px","pillButtons":"999px","featureLinks":"28px","smallButtons":"10px","roundedButtons":"36px"},"elementGap":"10px","sectionGap":"80-120px","cardPadding":"28px","pageMaxWidth":"1200px"},"radius":{"cards":"28px","buttons":"999px","navItems":"980px","pillButtons":"999px","featureLinks":"28px","smallButtons":"10px","roundedButtons":"36px"},"shadows":{"philosophy":"Zero box-shadows across all 73 card instances. Elevation is expressed entirely through background-color differential: #ffffff cards float above #f5f5f7 canvas by value contrast alone. This forces the eye to read depth through color rather than cast shadow — a choice that keeps the page feeling like a flat lit surface rather than a stacked document. The only visual separation is the 28px border-radius rounding the card edges, making containment geometric rather than dimensional.","surfaces":[{"hex":"#f5f5f7","name":"Canvas","level":0,"purpose":"Page body background — one step off white, creates implicit depth against pure-white cards"},{"hex":"#ffffff","name":"Card","level":1,"purpose":"Feature cards, info panels, modal containers — lifts off canvas without shadow, pure separation by value"},{"hex":"#f5f5f7","name":"Recessed","level":2,"purpose":"Inset content areas within white cards — same as canvas, creates nested depth by repetition"},{"hex":"#d2d2d7","name":"Frosted Control","level":3,"purpose":"Pill selector backgrounds (country dropdown, segmented controls) — rgba(210,210,215,0.64) with backdrop blur"},{"hex":"#000000","name":"Dark Stage","level":4,"purpose":"Full-bleed dark card variant for maximum-contrast product showcases; used sparingly as a dramatic section divider"}]},"guidelines":{"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."],"dont":["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."]}}