{"id":"a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","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/a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","originalSiteUrl":"https://www.apple.com/ipad-air","capturedAt":"2026-04-14T15:02:31.159Z","colors":[{"name":"Midnight Graphite","hex":"#1d1d1f","role":"Primary heading and body text, button text, icon default.","group":"neutral","cssVariable":"--color-midnight-graphite"},{"name":"Cloud Mist","hex":"#6b6c6c","role":"Secondary body text, supporting links, muted icons, footer text.","group":"neutral","cssVariable":"--color-cloud-mist"},{"name":"Pure White","hex":"#ffffff","role":"Primary page background, elevated card surfaces, clean sections.","group":"neutral","cssVariable":"--color-pure-white"},{"name":"Frost Gray","hex":"#f3f6f6","role":"Subtle background for navigation, subtle section dividers, tertiary surface.","group":"neutral","cssVariable":"--color-frost-gray"},{"name":"Steel Accent","hex":"#cccfcf","role":"Delicate border colors, subtle outlines for form elements.","group":"neutral","cssVariable":"--color-steel-accent"},{"name":"Dark Charcoal","hex":"#313131","role":"Tertiary text, certain icon elements, dark button text.","group":"neutral","cssVariable":"--color-dark-charcoal"},{"name":"Slate Echo","hex":"#444545","role":"Navigation links, secondary link states, sometimes icon fills.","group":"neutral","cssVariable":"--color-slate-echo"},{"name":"Alabaster","hex":"#e8e8ed","role":"Button backgrounds in certain states, subtle background tint.","group":"neutral","cssVariable":"--color-alabaster"},{"name":"Pure Black","hex":"#000000","role":"High-contrast text, specific icons, input text.","group":"neutral","cssVariable":"--color-pure-black"},{"name":"Light Pearl","hex":"#dedfe2","role":"Call-to-action button backgrounds when muted, form outlines.","group":"neutral","cssVariable":"--color-light-pearl"},{"name":"Ocean Blue","hex":"#0066cc","role":"Interactive links, primary action buttons, focused states. This is the dominant interactive brand color.","group":"brand","cssVariable":"--color-ocean-blue"},{"name":"Sky Teal","hex":"#00a1b3","role":"Accent color for specific headings, product feature highlights.","group":"accent","cssVariable":"--color-sky-teal"},{"name":"Royal Violet","hex":"#8668ff","role":"Accent color for specific headings, highlighting unique selling points.","group":"accent","cssVariable":"--color-royal-violet"},{"name":"Sunset Orange","hex":"#ed6300","role":"Accent color for specific headings, drawing attention to new features.","group":"accent","cssVariable":"--color-sunset-orange"},{"name":"Flame Orange","hex":"#b64400","role":"Badge backgrounds for 'New' indicators or special offers.","group":"accent","cssVariable":"--color-flame-orange"},{"name":"Vivid Blue","hex":"#0071e3","role":"Primary call to action background, navigation highlights, focus outlines.","group":"brand","cssVariable":"--color-vivid-blue"},{"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%)","cssVariable":"--color-deep-sea-gradient"},{"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))","cssVariable":"--color-spectrum-gradient"}],"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"}],"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."]}}