{"id":"a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","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/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","originalSiteUrl":"https://www.apple.com/ipad-air","capturedAt":"2026-04-14T15:02:31.159Z","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":"Precise Canvas, Vivid Product. A stark white presentation surface designed to make premium product imagery pop with singular focus.","description":"This design system feels like meticulously crafted white space surrounding vibrant, singular product showcases. It projects an aura of premium precision through a mostly monochrome palette and minimal, crisp UI elements. The interplay of subtly differentiated neutral surfaces creates depth without relying on heavy shadows, reserving saturated color almost exclusively for product imagery or primary calls to action. Large, high-impact typography anchors sections, often accompanied by a delicate sans-serif for body text, creating a strong editorial feel.","industry":"ecommerce","colorScheme":"light","colors":[{"name":"Midnight Graphite","hex":"#1d1d1f","role":"Primary heading and body text, button text, icon default.","group":"neutral"},{"name":"Cloud Mist","hex":"#6b6c6c","role":"Secondary body text, supporting links, muted icons, footer text.","group":"neutral"},{"name":"Pure White","hex":"#ffffff","role":"Primary page background, elevated card surfaces, clean sections.","group":"neutral"},{"name":"Frost Gray","hex":"#f3f6f6","role":"Subtle background for navigation, subtle section dividers, tertiary surface.","group":"neutral"},{"name":"Steel Accent","hex":"#cccfcf","role":"Delicate border colors, subtle outlines for form elements.","group":"neutral"},{"name":"Dark Charcoal","hex":"#313131","role":"Tertiary text, certain icon elements, dark button text.","group":"neutral"},{"name":"Slate Echo","hex":"#444545","role":"Navigation links, secondary link states, sometimes icon fills.","group":"neutral"},{"name":"Alabaster","hex":"#e8e8ed","role":"Button backgrounds in certain states, subtle background tint.","group":"neutral"},{"name":"Pure Black","hex":"#000000","role":"High-contrast text, specific icons, input text.","group":"neutral"},{"name":"Light Pearl","hex":"#dedfe2","role":"Call-to-action button backgrounds when muted, form outlines.","group":"neutral"},{"name":"Ocean Blue","hex":"#0066cc","role":"Interactive links, primary action buttons, focused states. This is the dominant interactive brand color.","group":"brand"},{"name":"Sky Teal","hex":"#00a1b3","role":"Accent color for specific headings, product feature highlights.","group":"accent"},{"name":"Royal Violet","hex":"#8668ff","role":"Accent color for specific headings, highlighting unique selling points.","group":"accent"},{"name":"Sunset Orange","hex":"#ed6300","role":"Accent color for specific headings, drawing attention to new features.","group":"accent"},{"name":"Flame Orange","hex":"#b64400","role":"Badge backgrounds for 'New' indicators or special offers.","group":"accent"},{"name":"Vivid Blue","hex":"#0071e3","role":"Primary call to action background, navigation highlights, focus outlines.","group":"brand"},{"name":"Deep Sea Gradient","hex":"#004c94","role":"Decorative background or hero element for product presentation.","group":"accent","gradient":"linear-gradient(rgb(0, 76, 148) 45%, rgb(41, 123, 196) 90%)"},{"name":"Spectrum Gradient","hex":"#0090f7","role":"High-impact visual elements, product imagery backgrounds, vivid showcases.","group":"accent","gradient":"linear-gradient(90deg, rgb(0, 144, 247) 8%, rgb(186, 98, 252), rgb(242, 65, 107), rgb(245, 86, 0))"}],"typography":[{"role":"Primary family for all body text, navigation items, buttons, and most UI elements. Its neutrality and subtly varied weights maintain a consistent, readable tone across the interface. Heavy use of precise letter-spacing adjustments for optical balance at different sizes.","sizes":"8px, 12px, 14px, 17px, 18px, 20px, 24px, 34px, 44px","family":"SF Pro Text","weight":"300, 400, 600","weights":[300,400,600],"lineHeight":"1.00, 1.18, 1.24, 1.29, 1.33, 1.43, 1.47, 1.50, 1.83, 2.12, 2.41","substitute":"system-ui, sans-serif","letterSpacing":"-0.031, -0.027, -0.022, -0.02, -0.019, -0.016, -0.011, -0.01, -0.003","fontFeatureSettings":"\"numr\""},{"role":"Used for large, impactful headlines and display text. Its slightly wider, more open forms are optimized for larger sizes, ensuring legibility and presence in hero sections and key marketing messages. Features tight negative letter-spacing for visual density.","sizes":"21px, 28px, 40px, 48px, 56px, 80px, 160px","family":"SF Pro Display","weight":"400, 600","weights":[400,600],"lineHeight":"0.88, 1.05, 1.07, 1.08, 1.10, 1.14, 1.19, 1.38","substitute":"system-ui, sans-serif","letterSpacing":"-0.04, -0.015, -0.005, -0.003, 0.007, 0.011","fontFeatureSettings":"\"numr\""},{"role":"Fallback for input fields, ensuring broad system compatibility.","sizes":"13px","family":"Arial","weight":"400","weights":[400],"lineHeight":"1.20","substitute":"sans-serif","letterSpacing":"0"}],"typeScale":[{"role":"body","size":14,"lineHeight":1.29,"letterSpacing":-0.168},{"role":"subheading","size":18,"lineHeight":1.24,"letterSpacing":-0.342},{"role":"heading-sm","size":20,"lineHeight":1.2,"letterSpacing":-0.4},{"role":"heading","size":24,"lineHeight":1.18,"letterSpacing":-0.288},{"role":"heading-lg","size":44,"lineHeight":1.14,"letterSpacing":-0.484},{"role":"display","size":80,"lineHeight":1.07,"letterSpacing":-0.8},{"role":"display-xl","size":160,"lineHeight":0.88,"letterSpacing":-0.8}],"spacing":{"radius":{"cards":"28px","buttons":"28px","default":"12px","navigation":"980px"},"elementGap":"10px","sectionGap":"70px","cardPadding":"14px"},"radius":{"cards":"28px","buttons":"28px","default":"12px","navigation":"980px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Pure White","level":0,"purpose":"Primary base background for the majority of page content and cards."},{"hex":"#f3f6f6","name":"Frost Gray","level":1,"purpose":"Used for subtle background differentiation in sections or navigation bars, providing a hint of separation from the main content canvas."},{"hex":"#e8e8ed","name":"Alabaster","level":2,"purpose":"Even subtler background for specific button states or very light contextual blocks."}]},"guidelines":{"do":["Prioritize SF Pro Text for all body copy and UI elements at weights 300, 400, and 600, applying precise letter-spacing adjustments as defined in the type scale.","Use SF Pro Display for headlines and display text (40px and above), leveraging its tighter letter-spacing for visual impact.","Employ Pure White (#ffffff) for primary content backgrounds and Frost Gray (#f3f6f6) for subtly differentiated sections or navigation.","Reserve Ocean Blue (#0066cc) or Vivid Blue (#0071e3) for all primary interactive elements like buttons and links.","Apply a 28px border radius for all cards and primary buttons to maintain a consistent soft edge.","Maintain comfortable density spacing: 10px `elementGap` between small UI elements and a `sectionGap` of 70px to create ample breathing room between content blocks.","Use Midnight Graphite (#1d1d1f) for primary text and Cloud Mist (#6b6c6c) for secondary/supporting text to create subtle typographic hierarchy."],"dont":["Do not introduce new saturated colors outside of the defined accent palette; rely on product imagery for additional color.","Avoid heavy drop shadows or glows; use subtle surface differentiation (like Pure White on Frost Gray) for depth instead.","Do not use generic system fonts when SF Pro Text or SF Pro Display are available; they are key to brand identity.","Do not use border radii smaller than 12px or larger than 980px, except for defined components. Stick to 28px for cards and buttons.","Avoid arbitrary custom padding values; adhere to the established `elementGap` of 10px, `cardPadding` of 14px, and section spacing of 70px.","Do not use highly decorative or script fonts; maintain a clean, sans-serif aesthetic throughout.","Never use dark mode toggles or styles; the aesthetic is strictly light-themed."]},"components":[{"name":"Text Link","role":"Inline navigation and information access."},{"name":"Primary CTA Button (Filled)","role":"Main call to action for key user journeys."},{"name":"Tertiary CTA Button (Ghost)","role":"Secondary actions or navigation that requires less visual hierarchy."},{"name":"Icon Button (Round)","role":"Small, interactive elements to trigger actions or navigation, focusing on visual iconography."},{"name":"Product Feature Card","role":"Highlights key features with text and imagery."},{"name":"Global Navigation Link","role":"Top-level navigation items."},{"name":"Highlight Badge","role":"Indicates new products or special status."},{"name":"Language Selector Input","role":"Allows users to choose their region/language."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\n- Primary Text: #1d1d1f (Midnight Graphite)\n- Background: #ffffff (Pure White)\n- Accent/CTA: #0071e3 (Vivid Blue)\n- Secondary Text: #6b6c6c (Cloud Mist)\n- Section Background: #f3f6f6 (Frost Gray)\n\nExample Component Prompts:\n1. Create a Primary CTA Button: Background Vivid Blue (#0071e3), text Pure White (#ffffff), SF Pro Text Medium (400), 17px, line-height 1.18, letter-spacing -0.16px, border radius 28px, 11px vertical padding, 9px horizontal padding.\n2. Design a Product Feature Card: Background Pure White (#ffffff), border radius 28px, 14px padding. Headline SF Pro Display Regular (400), 40px, line-height 1.05, letter-spacing -0.4px, color Midnight Graphite (#1d1d1f). Body text SF Pro Text Regular (400), 17px, line-height 1.29, letter-spacing -0.42px, color Midnight Graphite (#1d1d1f).\n3. Create a Global Navigation Link: Text Midnight Graphite (#1d1d1f), SF Pro Text Regular (400), 14px, line-height 1.29, letter-spacing -0.14px. No background, no border. Padding 0px vertical, 10px horizontal.\n4. Generate a Hero Headline: 'iPad Air' in SF Pro Display Bold (600), 80px, line-height 1.07, letter-spacing -0.8px, color Midnight Graphite (#1d1d1f). Sub-headline 'Whoosh.' in SF Pro Display Regular (400), 160px, line-height 0.88, letter-spacing -0.8px, in Ocean Blue (#0066cc) or a decorative gradient. Ensure ample vertical sectionGap (70px) and a Pure White background.\n5. Implement a Badge: 'New' text, Flame Orange (#b64400), SF Pro Text Regular (400), 12px. No background, transparent padding, 0px border radius."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776178921675-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776178921675-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b-1777560879986-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b-1777560879986-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b-1777560879986-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b-1777560879986-preview-detail-poster.jpg"},"similarStyleIds":["a4f123f2-cd4b-4d26-998f-a3d3ee158024","764b6a64-c233-4e0f-b8e1-bc01e2f8aa16","c9cabb96-32fa-4896-837a-f2497ce1c856","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","f11750fc-d7c0-4d26-b32a-3b1d2098ae34","186775da-7568-49e5-8110-4fd0bbc7bbe3","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","f1a690c7-234d-4ee9-9806-5790934e7043","80085ab0-3123-4bf3-85e0-ea9a1438c2ab","36752f78-1c43-471b-b125-e82152ad23dd","46f01790-e488-4aba-9236-02466b0fb3cd","96845df2-7ddb-420a-814e-c339f95a6554","62b22816-2d98-4e98-9c17-bf600ddb2fc8","742b500d-3e10-4daa-bb89-d0d26272e5f6","4caadb3c-3865-4a4d-9e1a-46478ac71078","8618f649-6d1c-45ca-aff8-e7f04928d8dd","11cfc460-807b-42c5-b10a-7b042c60f3e8","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","d3289fe7-a85e-42d8-96b7-eb7faa62a104","47c9e353-bed3-4d6c-8316-63a2db5cc377"],"exports":{"designMdUrl":"/references/refero/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b/design.md","tokensJsonUrl":"/references/refero/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b/tokens.json","tailwindV4Url":"/references/refero/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b/tailwind-v4.css","cssVariablesUrl":"/references/refero/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b/tailwind-v4.css"}}