{"id":"c9cabb96-32fa-4896-837a-f2497ce1c856","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Apple","summary":"Gallery wall at natural light — enormous type casts shadows on a white surface, color enters only as product.","description":"Apple's MacBook Neo product page radiates cool luminosity — a gallery-white canvas where enormous weight-700 headlines at 80-96px dominate above feather-light body copy, creating a tension between mass and air. The page background stays #f5f5f7, one step off pure white, giving cards and content wells a surface-lift effect without any shadows. Negative letter-spacing tightens progressively with size — display headlines track at -0.022em while body text breathes at -0.003em, a signature move that makes large type feel chiseled rather than loose. The single interactive accent (#0071e3 CTA blue) appears only on the 'Buy' pill button and nav links, rationed so every appearance reads as an instruction to act. Product gradients — dark-to-citrus-green, dark-to-blue, dark-to-violet — serve as full-bleed theatrical backdrops for each color finish showcase, never decorating UI chrome.","industry":"ecommerce","colorScheme":"light","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"},{"name":"Graphite","hex":"#707070","role":"Secondary body copy, captions, footnotes, muted nav items","group":"neutral"},{"name":"Slate","hex":"#474747","role":"Tertiary body text, supporting link text, secondary nav","group":"neutral"},{"name":"Ash","hex":"#333333","role":"Icon strokes, mid-weight body text, button labels in ghost state","group":"neutral"},{"name":"Fog","hex":"#f5f5f7","role":"Page canvas background, section divider bands, badge fills","group":"neutral"},{"name":"Snow","hex":"#ffffff","role":"Card surfaces, nav background, elevated container fills","group":"neutral"},{"name":"Obsidian","hex":"#000000","role":"Dark card variant, hero icon fills, maximum-contrast black card","group":"neutral"},{"name":"Silver Mist","hex":"#e8e8ed","role":"Frosted pill button background (country selector), input backgrounds","group":"neutral"},{"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"},{"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"},{"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%)"},{"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%)"},{"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%)"},{"name":"Citrus Finish","hex":"#dddc8c","role":"Product color swatch — Citrus finish selector chip","group":"accent"},{"name":"Blush Finish","hex":"#e8d0d0","role":"Product color swatch — Blush finish selector chip","group":"accent"},{"name":"Indigo Finish","hex":"#596680","role":"Product color swatch — Indigo finish selector chip","group":"accent"},{"name":"Caution","hex":"#b64400","role":"Badge warning text, price asterisk callouts — deep amber-orange for inline semantic alerts","group":"semantic"}],"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\""}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.33,"letterSpacing":-0.26},{"role":"body-sm","size":14,"lineHeight":1.43,"letterSpacing":-0.04},{"role":"body","size":17,"lineHeight":1.47,"letterSpacing":-0.1},{"role":"subheading","size":20,"lineHeight":1.4,"letterSpacing":-0.2},{"role":"heading-sm","size":24,"lineHeight":1.29,"letterSpacing":-0.36},{"role":"heading","size":40,"lineHeight":1.17,"letterSpacing":-0.6},{"role":"heading-lg","size":56,"lineHeight":1.07,"letterSpacing":-0.9},{"role":"display","size":96,"lineHeight":1.04,"letterSpacing":-2.11}],"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."]},"components":[{"name":"Primary Buy Button","role":"Sole conversion CTA across page and sticky nav"},{"name":"Ghost Text Button","role":"Section 'Learn more' links styled as buttons"},{"name":"Rounded Ghost Button","role":"Feature navigation tabs (Calls and Texts, Handoff, iPhone Mirroring, AirDrop)"},{"name":"Frosted Pill Selector","role":"Country/region selector and segmented control overlays"},{"name":"Dark Pill Button","role":"Hero section 'Buy' CTA on dark product backdrops"},{"name":"White Feature Card","role":"Primary content card for feature showcases"},{"name":"Fog Feature Card","role":"Alternate feature card on white backgrounds"},{"name":"Dark Feature Card","role":"High-contrast product detail card"},{"name":"Global Navigation Bar","role":"Persistent top nav with product categories"},{"name":"Sticky Product Sub-Nav","role":"Page-section navigator (Overview, Tech Specs, Compare, Switch from PC to Mac)"},{"name":"Product Color Swatch Chip","role":"Finish selector for Silver, Blush, Citrus, Indigo"},{"name":"New Badge","role":"Product 'New' label in nav and product cards"},{"name":"Carousel Pagination Dot","role":"Slide indicator in feature carousels"}],"customSections":[{"title":"Agent Prompt Guide","content":"QUICK COLOR REFERENCE:\n• Page background: #f5f5f7\n• Card surface: #ffffff\n• Primary text / headlines: #1d1d1f\n• Secondary text: #707070\n• CTA button fill: #0071e3\n• Inline links: #0066cc\n• Border / divider: #e8e8ed\n\nEXAMPLE COMPONENT PROMPTS:\n\n1. Hero section: Full-width, background #f5f5f7. Center-stack layout. Eyebrow at SF Pro Text 24px weight 600, color #1d1d1f, letter-spacing -0.36px. Headline at SF Pro Display 96px weight 700, color #1d1d1f, letter-spacing -2.11px, lineHeight 1.04. Price subtext at SF Pro Text 17px weight 400, color #1d1d1f. Single Buy pill button: backgroundColor #000000, color #ffffff, borderRadius 999px, paddingLeft 16px, paddingRight 16px, paddingTop 8px, paddingBottom 8px. Product photo centered below text at full viewport width.\n\n2. Sticky product sub-nav: backgroundColor #ffffff, borderBottom 1px solid #e8e8ed, height 52px. Nav links: SF Pro Text 14px weight 400, color #1d1d1f, spaced 24px apart. Active link has 3px solid #1d1d1f underline. Far-right Buy button: backgroundColor #0071e3, color #ffffff, borderRadius 999px, paddingLeft 16px, paddingRight 16px, paddingTop 8px, paddingBottom 8px, SF Pro Text 17px weight 400.\n\n3. Feature card grid (2-column): Parent band background alternates #ffffff / #f5f5f7. Cards: backgroundColor opposite of parent (#f5f5f7 on white, #ffffff on fog), borderRadius 28px, boxShadow none, padding 28px. Headline inside card: SF Pro Display 28px weight 600, color #1d1d1f, letter-spacing -0.07em. Body: SF Pro Text 17px weight 400, color #707070. Secondary link: color #0066cc, no underline default.\n\n4. Product color gradient showcase: Full-bleed section, height 100vh. Background: linear-gradient(184deg, #1d1d1f 20%, [finish peak color] 43%, [finish mid] 70%, [finish end] 95%). Centered headline: SF Pro Display 56px weight 700, color #ffffff, letter-spacing -0.9px. Product image centered and overlapping gradient. Color swatch chips below: borderRadius 999px, 28px diameter each, separated 8px, selected state has 3px solid #ffffff ring.\n\n5. Section header (left-aligned): Background #f5f5f7 or #ffffff band, padding 40px 40px 20px. Headline: SF Pro Display 40px weight 700, color #1d1d1f, letter-spacing -0.6px, lineHeight 1.17. Supporting paragraph: SF Pro Text 20px weight 300, color #1d1d1f, letter-spacing -0.2px, lineHeight 1.40, max-width 560px."},{"title":"Motion System","content":"Primary duration: 0.344s (page transitions, card reveals). Quick feedback: 0.1s (hover states, button presses). Scroll-driven animations: 0.32s ease. Default easing: ease (CSS keyword) for 97% of transitions. background-color and color transitions are the most common animated properties — hover states shift between neutral values. opacity transitions power section entrance reveals. transform transitions handle product image parallax and carousel movement. The overall motion personality is 'expressive' but anchored by slow-ease timing that feels gravity-weighted rather than springy."},{"title":"Product Finish Color System","content":"Four hardware finishes map to CSS tokens and gradient backdrops:\n• Silver: swatch #e3e4e5 (--finish-silver), no gradient showcase\n• Blush: swatch #e8d0d0 (--finish-blush), gradient from #1d1d1f → #f3c4f6 → #f500b4 → #cc29bc\n• Citrus: swatch #dddc8c (--finish-citrus), gradient from #1d1d1f → #dfe74f → #5e9c2a → #0a8619\n• Indigo: swatch #596680 (--finish-indigo), gradient from #1d1d1f → #a8d3fb → #0012f9 → #2535e2\nEach swatch chip: 28px diameter, borderRadius 999px. Selected state: 3px solid border in #1d1d1f (on light) or #ffffff (on dark). Gradient showcases are full-bleed 184° linear gradients used exclusively as section backdrops, never UI fills."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776184254716-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776184254716-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c9cabb96-32fa-4896-837a-f2497ce1c856-1777582724518-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c9cabb96-32fa-4896-837a-f2497ce1c856-1777582724518-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c9cabb96-32fa-4896-837a-f2497ce1c856-1777582724518-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c9cabb96-32fa-4896-837a-f2497ce1c856-1777582724518-preview-detail-poster.jpg"},"similarStyleIds":["764b6a64-c233-4e0f-b8e1-bc01e2f8aa16","a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","742b500d-3e10-4daa-bb89-d0d26272e5f6","a4f123f2-cd4b-4d26-998f-a3d3ee158024","5f39e778-d204-42a9-8b8b-a1519dbd3971","3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","f11750fc-d7c0-4d26-b32a-3b1d2098ae34","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","e869e214-f672-4ac3-bfc2-bd25de7b003b","5bfe6c1d-1b15-4f8d-b0c9-677a33291c5d","4e3b4717-84c8-4599-baaf-a343c3d619b6","96845df2-7ddb-420a-814e-c339f95a6554","c60a19c1-259a-4001-95d9-6a3826f5c06e","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","90ce5883-bb24-4466-93f7-801cd617b0d1","36752f78-1c43-471b-b125-e82152ad23dd","6b2a0513-df80-4140-87a8-38b1fef34313","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","80085ab0-3123-4bf3-85e0-ea9a1438c2ab","a76ec6ba-20b3-495c-9d89-1e58281e79e7"],"exports":{"designMdUrl":"/references/refero/c9cabb96-32fa-4896-837a-f2497ce1c856/design.md","tokensJsonUrl":"/references/refero/c9cabb96-32fa-4896-837a-f2497ce1c856/tokens.json","tailwindV4Url":"/references/refero/c9cabb96-32fa-4896-837a-f2497ce1c856/tailwind-v4.css","cssVariablesUrl":"/references/refero/c9cabb96-32fa-4896-837a-f2497ce1c856/tailwind-v4.css"}}