{"id":"a4f123f2-cd4b-4d26-998f-a3d3ee158024","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/a4f123f2-cd4b-4d26-998f-a3d3ee158024","originalSiteUrl":"https://apple.com","capturedAt":"2026-04-13T18:30:48.885Z","colors":[{"name":"Midnight Graphite","hex":"#1d1d1f","role":"Primary text, headline text, glyphs, and navigation elements. Near-black for maximum contrast on light backgrounds.","group":"neutral","cssVariable":"--color-midnight-graphite"},{"name":"Deep Gray","hex":"#333333","role":"Secondary text and navigation elements, slightly softer than primary text.","group":"neutral","cssVariable":"--color-deep-gray"},{"name":"Charcoal Grey","hex":"#474747","role":"Link text and navigation link text, indicating interactive elements.","group":"neutral","cssVariable":"--color-charcoal-grey"},{"name":"Medium Gray","hex":"#707070","role":"Tertiary text, footer text, and subtle UI elements. Softer body copy.","group":"neutral","cssVariable":"--color-medium-gray"},{"name":"Light Gray","hex":"#858585","role":"Muted text for less prominent information, icon fills.","group":"neutral","cssVariable":"--color-light-gray"},{"name":"Light Silver","hex":"#c7c7c7","role":"Subtle image box shadows, creating depth without heavy obscuration.","group":"neutral","cssVariable":"--color-light-silver"},{"name":"Border Silver","hex":"#d6d6d6","role":"Thin, crisp border lines for UI separation.","group":"neutral","cssVariable":"--color-border-silver"},{"name":"Lightest Gray Background","hex":"#e2e2e5","role":"Subtle background for UI components, hinting at separation.","group":"neutral","cssVariable":"--color-lightest-gray-background"},{"name":"Canvas White","hex":"#f5f5f7","role":"Dominant page background, primary canvas for content. The foundational light surface.","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Pure White","hex":"#ffffff","role":"Elevated UI elements, such as navigation backgrounds or contained content blocks, contrasting subtly with the primary canvas.","group":"neutral","cssVariable":"--color-pure-white"},{"name":"True Black","hex":"#000000","role":"Icon fills and occasional headline accents, providing maximum visual punch where needed.","group":"neutral","cssVariable":"--color-true-black"},{"name":"Interactive Blue","hex":"#0071e3","role":"Primary interactive element background, such as filled buttons and focus rings. A vivid, clear blue that signifies action.","group":"brand","cssVariable":"--color-interactive-blue"},{"name":"Action Blue","hex":"#0066cc","role":"Link color for interactive text and outline buttons. Slightly darker than Interactive Blue for text hierarchy.","group":"brand","cssVariable":"--color-action-blue"},{"name":"Sky Blue Highlight","hex":"#2997ff","role":"Vivid blue for interactive states, highlighting links, buttons, and other active elements. Creates a bright, inviting focus.","group":"brand","cssVariable":"--color-sky-blue-highlight"},{"name":"Cerulean Shine","hex":"#3397d4","role":"Secondary accent color, used in specific graphic elements or backgrounds to provide visual variation.","group":"accent","cssVariable":"--color-cerulean-shine"},{"name":"Pale Blue Overlay","hex":"#9fc6f4","role":"Muted background for specific content sections, providing a soft color block.","group":"accent","cssVariable":"--color-pale-blue-overlay"},{"name":"Vibrant Orange","hex":"#ec893c","role":"Accent color for specific products or promotional blocks, providing a warm, energetic contrast.","group":"accent","cssVariable":"--color-vibrant-orange"},{"name":"Deep Plum","hex":"#7424b5","role":"Accent color for distinct content blocks, especially in content-rich sections like Apple TV.","group":"accent","cssVariable":"--color-deep-plum"},{"name":"Blush Pink","hex":"#ea33c0","role":"Accent color for branding specific products or content categories, often in playful, illustrative contexts.","group":"accent","cssVariable":"--color-blush-pink"},{"name":"Warm Taupe","hex":"#604630","role":"Contextual background color, likely for specific product displays or themed sections.","group":"accent","cssVariable":"--color-warm-taupe"},{"name":"Cool Teal","hex":"#485b5","role":"Contextual background or accent color, subtly introducing a cool, modern feel.","group":"accent","cssVariable":"--color-cool-teal"}],"typography":[{"role":"Primary typeface for body text, UI labels, buttons, navigation, and footer content. Its wide range of weights and optical sizing ensures clarity across all scales. The light weights maintain an airy feel, while regular and semi-bold provide structure.","sizes":"12px, 14px, 17px, 18px, 24px, 26px, 34px, 44px","family":"SF Pro Text","weight":"300, 400, 600","lineHeight":"1.00, 1.18, 1.24, 1.29, 1.33, 1.47, 1.50, 2.12, 2.41","substitute":"system-ui","letterSpacing":"-0.26, -0.24, -0.22, -0.19, -0.18, -0.15"},{"role":"Used for headlines and display-sized text. Optically calibrated for larger sizes, ensuring tight kerning and legibility. The 'numr' feature enforces numeral alignment, maintaining a consistent grid for numbers in headlines.","sizes":"21px, 28px, 40px, 56px","family":"SF Pro Display","weight":"400, 600, 700","lineHeight":"1.07, 1.10, 1.14, 1.19","substitute":"system-ui","letterSpacing":"-0.28, 0.29, 0.44","fontFeatureSettings":"\"numr\""}],"spacing":{"radius":{"cards":"0px","lists":"999px","images":"8px","inputs":"0px","buttons":"980px"},"elementGap":"10px","sectionGap":"70px","cardPadding":"15px"},"radius":{"cards":"0px","lists":"999px","images":"8px","inputs":"0px","buttons":"980px"},"shadows":{"philosophy":"Elevation is sparingly used and subtle, achieved primarily through background color shifts between Canvas White and Pure White. A single, diffuse shadow on specific product images provides depth without drawing attention away from the object itself, avoiding heavy or dark shadows.","surfaces":[{"hex":"#f5f5f7","name":"Canvas White","level":0,"purpose":"Dominant page background, providing a clean, bright foundation for all content."},{"hex":"#ffffff","name":"Pure White","level":1,"purpose":"Elevated UI elements, such as navigation backgrounds and certain content blocks, creating a subtle contrast against the primary canvas."},{"hex":"#e2e2e5","name":"Lightest Gray Background","level":2,"purpose":"Subtle background for interactive elements or contained components, indicating a slightly recessed or grouped area."},{"hex":"#9fc6f4","name":"Pale Blue Overlay","level":3,"purpose":"Accent surface for specific sections or product narratives, introducing a soft, branded color block."}]},"guidelines":{"do":["Prioritize SF Pro Display for headlines (21px and up) with its specific letter spacing and 'numr' feature for numeral alignment.","Use SF Pro Text for all body copy, UI labels, and navigation elements, leveraging different weights for hierarchy (e.g., 300 for captions, 400 for body, 600 for important labels).","Apply 980px border-radius for all primary and secondary buttons, ensuring a consistent pill-shape aesthetic.","Utilize Interactive Blue (#0071e3) as the default background for interactive elements and Action Blue (#0066cc) for link text.","Maintain a clear visual hierarchy using the neutral color scale: Midnight Graphite (#1d1d1f) for primary text, Deep Gray (#333333) for secondary, and Medium Gray (#707070) for tertiary.","Frame product imagery tightly, allowing the product to be the central visual element without excessive padding or decorative borders.","Implement the 10px element gap for consistent vertical spacing between UI items and 15px card padding where applicable for internal content."],"dont":["Avoid using harsh drop shadows; instead, suggest elevation through subtle background color shifts (e.g., Canvas White to Pure White) and a very light box-shadow like rgba(0, 0, 0, 0.22) 3px 5px 30px 0px for images.","Do not deviate from the established pill-shape radius for buttons; rounded rectangles or sharp corners are reserved for specific components like image containers (8px).","Refrain from using heavily saturated colors for backgrounds unless it is a specific accent area or product showcase as defined by the accent palette.","Do not introduce decorative borders or heavy strokes around primary content blocks or cards; opt for clean edges or subtle background shifts.","Avoid excessive letter spacing on body or caption text; maintain the precise, optically balanced tracking values defined in the typography section.","Do not use generic system default link styles; ensure all links use Action Blue (#0066cc) and inherit SF Pro Text styling.","Do not introduce extraneous visual elements that compete with product imagery; the UI should be understated and serve to highlight the content."]}}