apple___style_reference:
  info: "> Museum vitrine on white marble. Products are sculpture; the interface is the gallery wall that steps back to let them speak."

  theme: "light"

  info: "Apple.com operates as a digital product vitrine: vast, gallery-like whitespace frames each device as the subject, with the entire interface receding behind it. A near-white canvas (#f5f5f7) supports white product surfaces, creating barely-perceptible elevation rather than shadow-defined hierarchy. One signature blue (#2997ff) is the only chromatic element allowed to break the achromatic default — it marks every link, every filled button, and every interactive moment. Typography is SF Pro exclusively, running from a whisper-weight 300 for subtitles to weight 700 for display headlines, with aggressively negative letter-spacing at large sizes that tightens the wordmark into an editorial sculpture. Layout rhythm alternates between centered text-above-product hero bands and horizontal media card grids, each section breathing with 80–120px of vertical air."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Apple Blue | `#2997ff` | `--color-apple-blue` | Link color, active states, accent icons — the sole chromatic element in the system; appears wherever a text element invites interaction |"
    info: "| Deep Link Blue | `#0066cc` | `--color-deep-link-blue` | Visited and hover state for links; deeper saturation signals state change without introducing a new hue family |"
    info: "| Button Blue | `#0071e3` | `--color-button-blue` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Graphite | `#1d1d1f` | `--color-graphite` | Primary text, headings, product names — the near-black of editorial print rather than pure #000, with a subtle warmth that feels premium on retina displays |"
    info: "| Slate | `#333333` | `--color-slate` | Secondary body text, descriptions under headlines, icon strokes — one step lighter than Graphite for reading rhythm |"
    info: "| Steel | `#474747` | `--color-steel` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Fog | `#707070` | `--color-fog` | Helper text, legal copy, sub-labels — quiet enough to disappear into the page when not needed |"
    info: "| Ash | `#858585` | `--color-ash` | Disabled button text, tertiary metadata — the lightest functional gray still legible at 12px |"
    info: "| Cloud | `#f5f5f7` | `--color-cloud` | Page canvas, alternating section backgrounds — not pure white, slightly cool-tinted to feel like a paper substrate |"
    info: "| Bone | `#e2e2e5` | `--color-bone` | Subtle button hover surfaces, card backgrounds, disabled states — the first perceptible step off the canvas |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, nav bar, modal overlays — pure white reserved for elements that need to sit ON the canvas |"
    info: "| Ink | `#000000` | `--color-ink` | Apple logo, high-contrast icons, dark-section text — used only where maximum punch is needed |"

  tokens___typography:

    sf_pro_text___body_copy__navigation__buttons__footer__captions__the_workhorse_family__handles_90__of_all_text_on_the_site__weight_300_is_used_selectively_for_product_subtitles__now_supercharged_by_m4__to_create_a_whisper_tone_beneath_the_bold_display_headline_____font_sf_pro_text:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 300, 400, 600"
      - "**Sizes:** 12, 14, 17, 18, 24, 26, 34, 44"
      - "**Line height:** 1.00, 1.18, 1.24, 1.29, 1.33, 1.47, 1.50, 2.12, 2.41"
      - "**Letter spacing:** -0.003em at 17px, -0.010em at 24–28px, -0.016em at 44px — tracking tightens progressively as size increases"
      - "**Role:** Body copy, navigation, buttons, footer, captions. The workhorse family: handles 90% of all text on the site. Weight 300 is used selectively for product subtitles ('Now supercharged by M4') to create a whisper-tone beneath the bold display headline."

    sf_pro_display___display_headlines__product_names_iphone__ipad_air__macbook_neo__hero_section_titles__the_optical_size_variant_designed_for_20px__rendering_with_tighter_apertures_and_higher_contrast_strokes_____font_sf_pro_display:
      - "**Substitute:** Inter Display, system-ui"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 21, 28, 40, 56"
      - "**Line height:** 1.07, 1.10, 1.14, 1.19"
      - "**Letter spacing:** -0.005em at 21px, -0.011em at 28px, -0.015em at 40px, -0.022em at 56px — aggressive negative tracking sculpts the wordmark into an editorial display lockup"
      - "**OpenType features:** `\"numr\"`"
      - "**Role:** Display headlines, product names (iPhone, iPad air, MacBook Neo), hero section titles. The optical-size variant designed for 20px+ rendering with tighter apertures and higher contrast strokes."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | 0.08px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 17px | 1.47 | -0.05px | `--text-body` |"
      info: "| body-lg | 21px | 1.38 | -0.11px | `--text-body-lg` |"
      info: "| subheading | 28px | 1.14 | -0.28px | `--text-subheading` |"
      info: "| heading | 40px | 1.1 | -0.6px | `--text-heading` |"
      info: "| heading-lg | 44px | 1.18 | -0.7px | `--text-heading-lg` |"
      info: "| display | 56px | 1.07 | -1.23px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| inputs | 8px |"
      info: "| buttons | 980px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 980px"
      - "**Section gap:** 80px"
      - "**Card padding:** 15px"
      - "**Element gap:** 10px"

  components:

    top_notification_bar:
      role: "Regional context and store redirect"

      info: "Full-width #f5f5f7 band above the nav. Left: instructional micro-copy in #1d1d1f at 12px. Center: country selector dropdown with 1px border. Right: filled #1d1d1f button (Continue) and a close X icon. Height ~44px, no border, seamless with the canvas."

    sticky_navigation_bar:
      role: "Primary site navigation"

      info: "Background rgba(251, 251, 253, 0.8) with backdrop blur when scrolled. Apple logo left, then 8 product category links in #1d1d1f at 12px weight 400, search icon and bag icon right. Height 44px, 8px horizontal padding per item, no visible border."

    product_hero_section:
      role: "Primary marketing surface per product line"

      info: "Full-viewport-width band, background matches canvas. Top: product name in SF Pro Display 56px weight 700, #1d1d1f, centered. Below: subtitle in SF Pro Text 21px weight 300, #1d1d1f. Below that: two buttons side by side (filled + outlined). Below buttons: product render image, 60-70% of viewport width, centered."

    filled_pill_button:
      role: "Primary interactive element in hero sections"

      info: "Background #0071e3, text #ffffff, SF Pro Text 17px weight 400. Border-radius 980px. Padding 8px 15px. No border, no shadow. Hover: background darkens to #0066cc."

    outlined_pill_button:
      role: "Secondary action paired with the filled button"

      info: "Background transparent, text #0066cc or #2997ff, 1px border in matching color. Border-radius 980px. Padding 8px 15px. No fill on hover — the border darkens slightly."

    product_lineup_showcase:
      role: "Multi-device comparison within one product family"

      info: "Section with #f5f5f7 canvas. Renders 4+ product variants side by side, each at ~20% viewport width, overlapping slightly with subtle parallax. No cards, no borders — the devices themselves define the layout edges."

    colored_product_section:
      role: "Product hero with brand-tinted background"

      info: "Full-width band with a wash of the product's signature color (e.g. iPad Air section uses a soft cyan #9fc6f4). Headline in #1d1d1f, product image centered. Buttons inherit the same filled/outlined treatment but the outlined button's border switches to #1d1d1f for contrast against the tinted background."

    featured_media_card_large:
      role: "Hero tile for streaming content"

      aspect_ratio__3: "2, background is a full-bleed photograph or poster. Overlay: Apple TV watermark top-right in #ffffff at 24px. Bottom-left: 'Stream now' outlined pill button (white text, 1px white border). Beside button: title in #ffffff SF Pro Text 17px weight 600, one-line description in weight 300 below."

    media_card_grid:
      role: "Secondary content discovery"

      info: "Horizontal row of 3-4 cards, each ~25% viewport width, 8px gap between. Card content: poster image filling card, 'Listen now' / 'Watch now' / 'Play now' pill button anchored bottom-right in #ffffff. Card background matches poster — no separate card surface."

    iphone_showcase_title_block:
      role: "Product family introduction"

      info: "Centered text stack. Product name 'iPhone' in SF Pro Display 56px weight 600, #1d1d1f. Tagline 'Meet the latest iPhone lineup.' in SF Pro Text 21px weight 400, #1d1d1f. No buttons in this variant — just the title serving as a section header."

  do_s_and_don_ts:

    do:
      - "Use SF Pro Display at 56px weight 700 with letter-spacing -1.23px for all primary product headlines — this combination is the visual signature"
      - "Apply #2997ff exclusively for link text and outlined interactive elements; never use it for large backgrounds or decorative blocks"
      - "Use 980px border-radius for every button shape — the pill is non-negotiable, no rounded rectangles allowed"
      - "Center all hero section text and product imagery on a vertical axis; the layout reads as a magazine spread, not a dashboard"
      - "Alternate between #f5f5f7 canvas and #ffffff card surfaces for visual rhythm; avoid introducing new neutrals mid-page"
      - "Set body text at 17px line-height 1.47 — this is the optimal reading size for long-form product descriptions"
      - "Use weight 300 in SF Pro Text for product subtitles ('Now supercharged by M4') to create a whisper layer beneath the bold product name"

    don_t:
      - "Don't introduce shadows on interface elements; shadows are reserved exclusively for product renders, never for cards, buttons, or nav"
      - "Don't use pure #000000 for body text; #1d1d1f is the system text black — pure black feels digital, #1d1d1f feels editorial"
      - "Don't use any border-radius value between 8px and 980px; the system only knows sharp (0), gentle (8px), and pill (980px)"
      - "Don't break the centered hero composition with left-aligned text or off-center product images; the vertical axis is sacred"
      - "Don't use multiple blues in one section; pick #2997ff for text/links and #0071e3 for the filled button, never mix them on the same element"
      - "Don't add gradients to the background; the system is committed to flat color fields — product images carry all the color storytelling"
      - "Don't set display headlines with positive letter-spacing or normal tracking; the negative tracking (-0.022em at 56px) is what makes the wordmark feel premium"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f5f5f7` | Base page background; cool-tinted off-white that recedes behind product imagery |"
    info: "| 1 | Section Band | `#e2e2e5` | Alternating section tint to break visual rhythm without introducing a color family |"
    info: "| 2 | Card | `#ffffff` | Media cards, nav bar, elevated content blocks — pure white sits ON the canvas |"

  elevation:

    - "**Product imagery:** `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`"

  imagery:

    info: "Product photography dominates the visual system, presented as large hero renders on pure canvas backgrounds with no environmental context. Devices are shot at slight three-quarter angles to show depth, never flat-on or top-down. Lifestyle and human imagery appears only in the media/streaming section (TV shows, Music artists, Fitness instructors), where it functions as editorial poster art. Iconography is SF Symbols-style: thin 1-2px stroke, monochrome, inheriting text color. No illustrations, no abstract graphics, no decorative shapes — the system treats whitespace as the primary visual element."

  layout:

    info: "Full-bleed sections stacked vertically, each section owns its own background color field. The page is built from alternating horizontal bands: white/canvas product hero → white/canvas product lineup → tinted product section → dark media card section. Maximum content width is ~980px for text, but product imagery extends wider (up to ~80% of viewport). Navigation is a single 44px sticky top bar with no mega-menu, no sidebar. The grid system is implicit rather than visible — cards in the media section use a 4-column flexible grid that collapses to 2-column on mobile, with 8px gaps. Section vertical spacing is generous (80-120px between bands), creating a museum-walk rhythm where each product or content group feels like a separate gallery room."

  agent_prompt_guide:

  quick_color_reference:
    - "Primary text: #1d1d1f"
    - "Secondary text: #333333"
    - "Link / accent: #2997ff"
    - "Button background: #0071e3"
    - "Canvas background: #f5f5f7"
    - "Card surface: #ffffff"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    - "**Product Hero Section**: White canvas (#f5f5f7). Centered product name 'iPhone' in SF Pro Display 56px weight 700, #1d1d1f, letter-spacing -1.23px. Subtitle in SF Pro Text 21px weight 300, #1d1d1f. Filled pill button: #0071e3 background, white text 17px weight 400, 980px radius, 8px 15px padding. Outlined pill button beside it: transparent background, #2997ff text and border, 980px radius. Product render image below, ~65% viewport width, centered."

    - "**Outlined Ghost Button**: Transparent background, 1px solid #2997ff border, text #2997ff in SF Pro Text 17px weight 400. Border-radius 980px. Padding 8px 15px. No shadow, no fill on hover — border darkens to #0066cc."

    - "**Featured Media Card (Large)**: Full-bleed poster image at 3:2 aspect ratio. White Apple TV watermark top-right at 24px. Bottom-left: white outlined pill button ('Stream now', 1px white border, 980px radius, white text 14px) beside a two-line title in white SF Pro Text 17px weight 600 and description in weight 300."

    - "**Sticky Navigation Bar**: Height 44px, background rgba(251,251,253,0.8) with backdrop blur. Apple logo (#1d1d1f) at left margin. Eight category links in #1d1d1f 12px weight 400, evenly spaced. Search icon and bag icon at right margin in #1d1d1f. No visible border, no shadow."

    - "**Media Card Grid Item**: Poster image filling card width (~25% of viewport), no card background or border. 'Listen now' / 'Watch now' / 'Play now' pill button anchored bottom-right with white background, #1d1d1f text, 980px radius, 8px 15px padding. 8px gap between cards in the row."

  similar_brands:

    - "**Bang & Olufsen** — Same product-as-sculpture gallery approach; devices on pure white canvas with editorial whitespace and near-zero chrome"
    - "**Dyson** — Same full-bleed product hero pattern with centered headline above large device render, pill-shaped CTAs"
    - "**Sonos** — Same product family lineup showcase (multiple device variants side by side) on alternating tinted section backgrounds"
    - "**Stripe** — Same typography precision with aggressive negative tracking at display sizes, and single accent color discipline"
    - "**Teenage Engineering** — Same commitment to whitespace as a design element and ultra-minimal navigation with no decorative chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-apple-blue: #2997ff;
          --color-deep-link-blue: #0066cc;
          --color-button-blue: #0071e3;
          --color-graphite: #1d1d1f;
          --color-slate: #333333;
          --color-steel: #474747;
          --color-fog: #707070;
          --color-ash: #858585;
          --color-cloud: #f5f5f7;
          --color-bone: #e2e2e5;
          --color-paper: #ffffff;
          --color-ink: #000000;
        
          /* Typography — Font Families */
          --font-sf-pro-text: 'SF Pro Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sf-pro-display: 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.08px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 17px;
          --leading-body: 1.47;
          --tracking-body: -0.05px;
          --text-body-lg: 21px;
          --leading-body-lg: 1.38;
          --tracking-body-lg: -0.11px;
          --text-subheading: 28px;
          --leading-subheading: 1.14;
          --tracking-subheading: -0.28px;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --tracking-heading: -0.6px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.18;
          --tracking-heading-lg: -0.7px;
          --text-display: 56px;
          --leading-display: 1.07;
          --tracking-display: -1.23px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
        
          /* Layout */
          --page-max-width: 980px;
          --section-gap: 80px;
          --card-padding: 15px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-full: 980px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-inputs: 8px;
          --radius-buttons: 980px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
        
          /* Surfaces */
          --surface-canvas: #f5f5f7;
          --surface-section-band: #e2e2e5;
          --surface-card: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-apple-blue: #2997ff;
          --color-deep-link-blue: #0066cc;
          --color-button-blue: #0071e3;
          --color-graphite: #1d1d1f;
          --color-slate: #333333;
          --color-steel: #474747;
          --color-fog: #707070;
          --color-ash: #858585;
          --color-cloud: #f5f5f7;
          --color-bone: #e2e2e5;
          --color-paper: #ffffff;
          --color-ink: #000000;
        
          /* Typography */
          --font-sf-pro-text: 'SF Pro Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sf-pro-display: 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.08px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 17px;
          --leading-body: 1.47;
          --tracking-body: -0.05px;
          --text-body-lg: 21px;
          --leading-body-lg: 1.38;
          --tracking-body-lg: -0.11px;
          --text-subheading: 28px;
          --leading-subheading: 1.14;
          --tracking-subheading: -0.28px;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --tracking-heading: -0.6px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.18;
          --tracking-heading-lg: -0.7px;
          --text-display: 56px;
          --leading-display: 1.07;
          --tracking-display: -1.23px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-full: 980px;
          --radius-full-2: 999px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
        }