Apple

The Apple design system exudes a precise, almost ethereal clarity, like a perfectly polished lens focusing on content. Impeccable kerning and tracking, especially in headlines, create an understated authority. A subtle hierarchy of grays defines surfaces without heavy shadows, anchored by a vibrant yet contained blue for interaction. Product imagery is the hero, framed by minimal UI that gets out of the way. 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. 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.