amp___style_reference:
  info: "> warm orange pill on cool white. The design feels like a premium fitness product photographed in a sunlit loft: one object, one accent, one confident typeface doing all the work."

  theme: "light"

  info: "amp is a single-color, single-typeface system: one warm orange against an achromatic canvas, and one custom sans-serif used at every size. The page reads like a product photography spread — generous whitespace, large editorial headlines, and a single device (the amp column) photographed in a soft beige interior. Orange is rationed: it marks the buy button, the current step indicator, and a thin accent rule. Everything else stays in white, off-white, and near-black, so the accent does the talking. Cards and inputs use small 5px corners; the primary CTA is a 50px pill with a brand-colored glow; secondary controls round to 24px. Typography is one family (PublicaSans) at weights 300/400/500, tightening its tracking aggressively as sizes scale up — -0.036em at display, almost zero at body."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Amp Orange | `#ff6105` | `--color-amp-orange` | Primary action fill, active step badge, accent rule, and brand strokes — the only chromatic color in the interface. Used at high contrast on white surfaces (7.0:1 against #ffffff) and as a warm border tint on cards and inputs |"
    info: "| Amp Glow | `#ffa069` | `--color-amp-glow` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Peach Wash | `#ffdfcd` | `--color-peach-wash` | Soft highlight surface for featured cards and step accents. A near-gray peach that stays quiet while adding warmth to a card stack |"
    info: "| Ink | `#0a0a0a` | `--color-ink` | Primary text, logo mark, button text. 19.8:1 against white — the highest-contrast neutral in the stack |"
    info: "| Carbon | `#292b2a` | `--color-carbon` | Secondary text and nav links, slightly softer than Ink. Icon strokes also draw from this level |"
    info: "| Slate | `#7a7b7b` | `--color-slate` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. |"
    info: "| Ash | `#a2a3a2` | `--color-ash` | Disabled link text and placeholder-level text — the quietest text tone before disappearing |"
    info: "| Graphite Hairline | `#e5e5e5` | `--color-graphite-hairline` | The dominant border color across the site — dividers, card borders, button outlines, and structural rules. By far the most-used neutral (1628+ borderColor occurrences) |"
    info: "| Fog | `#dfe0df` | `--color-fog` | Soft border for cards and body blocks where #e5e5e5 reads as too crisp against off-white |"
    info: "| Bone | `#e5e7eb` | `--color-bone` | Neutral button fill (88 occurrences) — the ghost/secondary button background. A light step above canvas |"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Page background, card surfaces, button text on dark and orange fills. The base of the surface stack |"
    info: "| Linen | `#f3f4f3` | `--color-linen` | Off-white alt surface — secondary button fills and surface tints where pure white is too clinical |"
    info: "| Charcoal | `#202120` | `--color-charcoal` | Dark elevated surface for cards, headers, and contained panels. |"
    info: "| Smoke | `#3c3e3d` | `--color-smoke` | Heading underline accent in dark sections, heavier than Carbon |"

  tokens___typography:

    publicasans___the_only_typeface_in_the_system__light_300_for_display_headlines__regular_400_for_body_and_ui__medium_500_for_buttons_and_emphasis__tracking_tightens_with_size___0_036em_at_72_78px___0_030em_at_48px___0_020em_at_32px___0_010em_at_16_18px__near_zero_at_body__the_progressive_tightening_gives_display_sizes_a_magazine_cover_feel_while_body_text_stays_open_and_readable_____font_publicasans:
      - "**Substitute:** Inter, Söhne, or IBM Plex Sans for similar geometric-humanist proportions. For the editorial display feel, pair with GT America or Söhne Breit."
      - "**Weights:** 300, 400, 500"
      - "**Sizes:** 12px, 14px, 16px, 18px, 24px, 32px, 48px, 72px, 78px"
      - "**Line height:** 0.71, 0.92, 0.94, 1.00, 1.10, 1.20, 1.22, 1.30, 1.33, 1.50, 1.56"
      - "**Letter spacing:** -0.036em at 72-78px, -0.030em at 48px, -0.020em at 32px, -0.010em at 16-18px, 0 at 12-14px"
      - "**Role:** The only typeface in the system. Light 300 for display headlines, Regular 400 for body and UI, Medium 500 for buttons and emphasis. Tracking tightens with size: -0.036em at 72-78px, -0.030em at 48px, -0.020em at 32px, -0.010em at 16-18px, near-zero at body. The progressive tightening gives display sizes a magazine-cover feel while body text stays open and readable."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.56 | -0.01px | `--text-body` |"
      info: "| subheading | 18px | 1.5 | -0.01px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.02px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.22 | -0.02px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.2 | -0.03px | `--text-heading-lg` |"
      info: "| display | 72px | 1.1 | -0.036px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      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: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 40px |"
      info: "| cards | 5px |"
      info: "| images | 8px |"
      info: "| inputs | 50px |"
      info: "| buttons-small | 8px |"
      info: "| buttons-primary | 50px |"
      info: "| buttons-secondary | 24px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(255, 97, 5, 0.6) 1px 6px 14px 0px, rgba(0, 0, 0, 0.0...` | `--shadow-md` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 16px"
      - "**Element gap:** 5-8px"

  components:

    primary_pill_button:
      role: "The single CTA on most pages — Buy Now, Get Started."

      info: "Fill #ff6105, white text, 50px border-radius, 16px vertical / 32px horizontal padding, PublicaSans weight 500 at 16px. Carries the only shadow in the system: rgba(255,97,5,0.6) 1px 6px 14px 0 layered with rgba(0,0,0,0.06) 0 1px 4px 0 — the orange glow is the brand signature. Trailing chevron icon optional."

    secondary_pill_button:
      role: "Lower-emphasis action when a primary exists on the same surface."

      info: "Fill #ffffff or #f3f4f3, 1px border #e5e5e5, #292b2a text, 24px border-radius, 14px / 24px padding, weight 400. The tighter radius (not 50px) signals it is the secondary action."

    nav_buy_now_button:
      role: "Persistent top-right CTA across all pages."

      info: "Fill #ff6105, white text, 40px border-radius, smaller scale than the hero CTA. Mirrors the Primary Pill Button at nav density."

    step_indicator_row:
      role: "Onboarding step list with active state."

      active_step: "small orange pill badge reading 'Step 1' in white on #ff6105, weight 500 at 12px, 8px radius. Step title in Ink 18px weight 500 with a 2px #e5e5e5 underline. Inactive steps: 'Step 2' / 'Step 3' in Ash 12px, title in #292b2a 18px weight 400, underline 1px #e5e5e5."

    press_logo_strip:
      role: "As-row, grayscale media logos under 'FEATURED ON' label."

      info: "Single row, 80-100px height, logos desaturated to Ink (#0a0a0a) or Carbon. Spacing 40-60px between logos. The eyebrow label 'FEATURED ON' in 12px tracked uppercase Ash."

    editorial_section_heading:
      role: "Large section title with accent rule underneath."

      info: "PublicaSans weight 300 at 48-72px, tracking -0.030em to -0.036em, color Ink. A 2-3px #ff6105 accent rule sits below the heading at roughly 1/3 of the heading width — the only chrome on the page."

    dark_feature_band:
      role: "Full-bleed atmospheric section over a darkened product photo."

      info: "Background #202120 with a 60-70% dark overlay over a full-bleed product photograph. Headline in white at 48px weight 300, accent rule in #ff6105. Padding 120px vertical."

    featured_card_peach:
      role: "Highlighted callout in a stack — e.g. the app onboarding card."

      info: "Fill #ffdfcd (Peach Wash), 5px radius, 16-20px padding, with a phone/product mockup on the right. The peach fill is reserved for a single card per section to maintain scarcity."

    ghost_card:
      role: "Default card surface in a feature grid."

      info: "Fill #ffffff, 1px border #e5e5e5, 5px radius, 16-24px padding. No shadow. Image radius 8px. Heading 24px weight 500 Ink, body 16px weight 400 Carbon."

    announcement_bar:
      role: "Thin top bar below the nav with a time-sensitive message."

      info: "Background Linen (#f3f4f3), 40-48px height, centered text 14px weight 400 Carbon with a right-side text-link 'Let's Go →' in Ink weight 500."

    top_navigation:
      role: "Persistent header across all pages."

      info: "Background #ffffff, 64-72px height, logo left, 5 center links in 14px weight 400 Carbon with 30-40px horizontal gaps, nav Buy Now button right. Optional thin 1px #e5e5e5 bottom border."

    input_field_pill:
      role: "Single-line input in onboarding and form contexts."

      info: "50px border-radius, 1px border #e5e5e5, 16px horizontal padding, PublicaSans 16px weight 400. Placeholder text in Ash #a2a3a2. Focus ring 2px #ff6105 at 40% opacity."

  do_s_and_don_ts:

    do:
      - "Use #ff6105 only for the primary CTA fill, the active step badge, the accent rule, and key brand strokes — never for body text or large background washes."
      - "Set display headlines at 48-78px in weight 300 with tracking between -0.030em and -0.036em; this is the signature editorial moment of the system."
      - "Round the primary CTA to 50px, secondary buttons to 24px, and cards to 5px — the radius ladder (5 / 8 / 24 / 32 / 50) defines component hierarchy."
      - "Apply the two-layer shadow stack (orange glow + neutral 1px lift) only to the primary CTA — no other element should carry elevation."
      - "Stack the surface ladder in this order: #ffffff → #f3f4f3 → #e5e7eb → #ffdfcd → #202120. Each step should feel like a deliberate lift, not a tint shift."
      - "Keep body copy in PublicaSans 16px weight 400 at line-height 1.5 with -0.01em tracking; reserve weight 500 for buttons, step titles, and short labels."
      - "Use the 2-3px #ff6105 accent rule beneath editorial headlines at roughly one-third of the heading width — it is the visual punctuation mark of the brand."

    don_t:
      - "Don't introduce a second accent color or a secondary brand hue — the system is monochrome + one orange, and any chromatic addition breaks the rationing."
      - "Don't use weight 600 or 700 in PublicaSans; the system tops out at 500. Heavier weights are not part of the type scale."
      - "Don't apply shadows to cards, images, or non-primary buttons. Flat-with-hairline-border is the default; elevation is a privilege, not a default."
      - "Don't use the 50px radius on anything except the primary CTA and inputs. 24px is the cap for secondary buttons, 5px for cards."
      - "Don't set display text in all-caps or with positive letter-spacing. Tracking only tightens as size grows; never loosens."
      - "Don't fill large areas with #ff6105. The orange is a punctuation mark — let it punctuate, not paint."
      - "Don't mix rounded and square corner systems on the same page. Pick from the 5 / 8 / 24 / 32 / 50 ladder and stay on it."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background, base layer |"
    info: "| 1 | Linen | `#f3f4f3` | Off-white alt surface for secondary buttons and warm sections |"
    info: "| 2 | Bone | `#e5e7eb` | Ghost button fill, raised neutral control |"
    info: "| 3 | Peach Wash | `#ffdfcd` | Featured card highlight, warm accent surface |"
    info: "| 4 | Charcoal | `#202120` | Dark full-bleed feature band background |"

  elevation:

    - "**Primary Pill Button:** `rgba(255, 97, 5, 0.6) 1px 6px 14px 0px, rgba(0, 0, 0, 0.06) 0px 1px 4px 0px`"

  imagery:

    info: "Full-bleed product photography is the dominant visual asset — the amp column photographed in a warm beige interior with soft directional lighting. No lifestyle scenes, no people-only shots, no illustration system. Phone mockups appear in onboarding sections, framed by Peach Wash cards. Image radius is 8px consistently. The product is always shot isolated on a neutral surface — the object IS the hero. Press logos in the social proof band are desaturated to single-tone Ink."

  layout:

    info: "Max-width 1200px centered, with full-bleed sections that break out for product photography and dark feature bands. Hero is a full-viewport product image with a single Buy Now CTA pill anchored at the bottom-center. The 'How to use amp' section uses a 2-column layout (50/50) — step list left, phone mockup right. The press strip is a single horizontal row. The dark feature band ('Designed to move you') is a full-bleed photo with a centered headline and accent rule. Vertical rhythm is generous: 80-120px between sections. Navigation is a simple top bar with no sidebar or mega-menu. The system favors centered stacks and split text+image compositions over asymmetric or grid-heavy layouts."

  agent_prompt_guide:

    quick_color_reference:
    - "text primary: #0a0a0a"
    - "text secondary: #292b2a"
    - "text muted: #7a7b7b"
    - "background: #ffffff"
    - "surface alt: #f3f4f3"
    - "border hairline: #e5e5e5"
    - "primary action: #ff6105 (filled action)"

    example_component_prompts:

    - "*Primary CTA pill*: Fill #ff6105, white text, 50px border-radius, padding 16px vertical / 32px horizontal. PublicaSans weight 500, 16px, letter-spacing -0.01em. Box-shadow: rgba(255,97,5,0.6) 1px 6px 14px 0, rgba(0,0,0,0.06) 0 1px 4px 0. Optional trailing chevron in white."

    - "*Editorial section heading*: PublicaSans weight 300, 48px, color #0a0a0a, letter-spacing -0.030em, line-height 1.2. Below the text, a 2px tall, 120px wide accent rule in #ff6105, aligned to the start of the heading. Section padding 80px top, 80px bottom."

    - "*Featured onboarding card*: Fill #ffdfcd, 5px border-radius, padding 24px. Contains a phone mockup on the right (200px wide, 8px radius image frame). Step badge: orange pill #ff6105, white text 'Step 1', 8px radius, 12px / 12px padding. Step title in PublicaSans 18px weight 500 #0a0a0a with a 2px #e5e5e5 underline rule."

    - "*Dark feature band*: Full-bleed background #202120 with a darkened product photo overlay at 65% opacity. White headline in PublicaSans weight 300, 48px, letter-spacing -0.030em, centered. A 60px wide, 2px tall #ff6105 accent rule centered below. Vertical padding 120px."

    - "*Press logo strip*: Single horizontal row, logos rendered in #0a0a0a at 24-28px height, spaced 60px apart. Above the row, a 12px uppercase tracked label 'FEATURED ON' in #7a7b7b. Background #ffffff, padding 40px vertical."

  similar_brands:

    - "**Tonal** — Same single-product hero photography on a near-white canvas, with a confident sans-serif headline and a single saturated accent for the buy CTA."
    - "**Peloton (equipment pages)** — Editorial product spreads, large light-weight headlines, and a monochrome interface that lets one accent color carry the call-to-action."
    - "**Whoop** — Generous whitespace, custom geometric sans, nearly colorless UI with a single warm accent and hairline 1px borders as the primary structural device."
    - "**Forme** — Same restraint: one product, one typeface, one accent color, pill-shaped primary buttons, and flat cards with minimal border treatment."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-amp-orange: #ff6105;
          --color-amp-glow: #ffa069;
          --color-peach-wash: #ffdfcd;
          --color-ink: #0a0a0a;
          --color-carbon: #292b2a;
          --color-slate: #7a7b7b;
          --color-ash: #a2a3a2;
          --color-graphite-hairline: #e5e5e5;
          --color-fog: #dfe0df;
          --color-bone: #e5e7eb;
          --color-canvas-white: #ffffff;
          --color-linen: #f3f4f3;
          --color-charcoal: #202120;
          --color-smoke: #3c3e3d;
        
          /* Typography — Font Families */
          --font-publicasans: 'PublicaSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.56;
          --tracking-body: -0.01px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.02px;
          --text-heading: 32px;
          --leading-heading: 1.22;
          --tracking-heading: -0.02px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.03px;
          --text-display: 72px;
          --leading-display: 1.1;
          --tracking-display: -0.036px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 16px;
          --element-gap: 5-8px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 50px;
          --radius-full-2: 53px;
          --radius-full-3: 56.16px;
          --radius-full-4: 70px;
        
          /* Named Radii */
          --radius-nav: 40px;
          --radius-cards: 5px;
          --radius-images: 8px;
          --radius-inputs: 50px;
          --radius-buttons-small: 8px;
          --radius-buttons-primary: 50px;
          --radius-buttons-secondary: 24px;
        
          /* Shadows */
          --shadow-md: rgba(255, 97, 5, 0.6) 1px 6px 14px 0px, rgba(0, 0, 0, 0.06) 0px 1px 4px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-linen: #f3f4f3;
          --surface-bone: #e5e7eb;
          --surface-peach-wash: #ffdfcd;
          --surface-charcoal: #202120;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-amp-orange: #ff6105;
          --color-amp-glow: #ffa069;
          --color-peach-wash: #ffdfcd;
          --color-ink: #0a0a0a;
          --color-carbon: #292b2a;
          --color-slate: #7a7b7b;
          --color-ash: #a2a3a2;
          --color-graphite-hairline: #e5e5e5;
          --color-fog: #dfe0df;
          --color-bone: #e5e7eb;
          --color-canvas-white: #ffffff;
          --color-linen: #f3f4f3;
          --color-charcoal: #202120;
          --color-smoke: #3c3e3d;
        
          /* Typography */
          --font-publicasans: 'PublicaSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.56;
          --tracking-body: -0.01px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.02px;
          --text-heading: 32px;
          --leading-heading: 1.22;
          --tracking-heading: -0.02px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.03px;
          --text-display: 72px;
          --leading-display: 1.1;
          --tracking-display: -0.036px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 50px;
          --radius-full-2: 53px;
          --radius-full-3: 56.16px;
          --radius-full-4: 70px;
        
          /* Shadows */
          --shadow-md: rgba(255, 97, 5, 0.6) 1px 6px 14px 0px, rgba(0, 0, 0, 0.06) 0px 1px 4px 0px;
        }