Apple

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. 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. 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.