stable_audio___style_reference:
  info: "> Sunlit studio on warm paper."

  theme: "light"

  info: "Stable Audio uses a warm-paper studio language: the canvas is cream (#f4f1ec) rather than clinical white, letting bold black headlines and a single amber CTA sit on a surface that feels analog and approachable, like a record sleeve. Full-bleed colored panels — lavender, mustard, sage, khaki — function as oversized section backgrounds behind product mockups, giving the page rhythm the way paint-chip swatches might behind a mixing console. Every interactive element is pill-shaped (9999px) and every card surface is a near-sharp 4px, creating a deliberate contrast between round controls and angular content blocks. A signature half-circle \"sun\" graphic recurs in every track artwork, and a vivid neon green (#a0f32f) marks every audio-active element, making sound visible across the interface. Product screenshots do the explanatory work; illustration and lifestyle photography are deliberately absent."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Amber Pulse | `#f9a916` | `--color-amber-pulse` | Yellow supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Lime Signal | `#a0f32f` | `--color-lime-signal` | Green supporting accent for decorative details and low-frequency emphasis. |"
    info: "| Lavender Wash | `#c4bae3` | `--color-lavender-wash` | Text-to-audio feature panel background — large full-bleed section tint |"
    info: "| Mustard Field | `#e1ca46` | `--color-mustard-field` | Audio-to-audio feature panel background — full-bleed section tint |"
    info: "| Sage Mist | `#9fc2c7` | `--color-sage-mist` | Sound effects feature panel background — full-bleed section tint |"
    info: "| Khaki Paper | `#e5dfc8` | `--color-khaki-paper` | Secondary panel tint, hero left-column background — warm beige sitting one step darker than the main cream canvas |"
    info: "| Warm Canvas | `#f4f1ec` | `--color-warm-canvas` | Page background, dominant cream surface — every section and most cards sit on this tone |"
    info: "| Pure Paper | `#ffffff` | `--color-pure-paper` | Card surfaces, track cards, elevated panels — the only true white in the system |"
    info: "| Pale Mist | `#e2e2e7` | `--color-pale-mist` | Cool light-gray structural tone for subtle UI layers beneath the warm cream |"
    info: "| Hairline | `#d2d1db` | `--color-hairline` | Borders, dividers, subtle separators |"
    info: "| Ink Stone | `#27262b` | `--color-ink-stone` | Secondary text, dark app-interface surfaces, filled toggle states — near-black with a slight warm cast |"
    info: "| Charcoal | `#000000` | `--color-charcoal` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Ash | `#737170` | `--color-ash` | Muted body text, helper text, metadata — mid-gray for tertiary information |"

  tokens___typography:

    inter___all_text___headlines_commit_to_weight_700_bold__never_500_or_600__the_two_weight_commitment_is_a_signature_choice_that_gives_the_interface_a_confident__opinionated_voice_without_needing_a_display_face____font_inter:
      - "**Substitute:** DM Sans, Manrope"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12, 14, 16, 18, 20, 30, 40"
      - "**Line height:** 1.00, 1.15, 1.33, 1.50, 1.71, 1.78"
      - "**Letter spacing:** -0.0210em, -0.0170em, -0.0150em, -0.0140em, -0.0110em, -0.0060em"
      - "**Role:** All text — headlines commit to weight 700 (bold), never 500 or 600; the two-weight commitment is a signature choice that gives the interface a confident, opinionated voice without needing a display face"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 18 | -0.07px | `--text-caption` |"
      info: "| body-sm | 14px | 20 | -0.09px | `--text-body-sm` |"
      info: "| body | 16px | 25 | -0.1px | `--text-body` |"
      info: "| subheading | 18px | 28 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 20px | 30 | -0.3px | `--text-heading-sm` |"
      info: "| heading | 30px | 40 | -0.51px | `--text-heading` |"
      info: "| heading-lg | 40px | 46 | -0.84px | `--text-heading-lg` |"

  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: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 4px |"
      info: "| images | 4px |"
      info: "| buttons | 9999px |"
      info: "| toggles | 9999px |"
      info: "| trackCards | 4px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    amber_cta_button:
      role: "Primary call-to-action (Sign up, Try now, Generate)"

      info: "Filled pill, #f9a916 background, #000000 bold text, 9999px border-radius, padding 12px 24px, Inter weight 700 at 14-16px. Often paired with a → arrow icon at the right."

    ghost_nav_button:
      role: "Secondary nav action (Log in)"

      info: "White fill, #000000 1px border, 9999px border-radius, #000000 bold text at 14px, padding 8px 20px. Sits inline with the amber CTA in the header."

    active_toggle_pill:
      role: "Selected state in text-to-audio / audio-to-audio toggle group"

      info: "Filled pill, #27262b background, #ffffff bold text, 9999px border-radius, padding 8px 20px, Inter weight 700 at 14-16px."

    inactive_toggle_pill:
      role: "Unselected state in toggle groups"

      info: "Transparent fill, #000000 1px border, #000000 bold text, 9999px border-radius, same padding as active state."

    track_card:
      role: "Display a generated music track with artwork, title, description, and player"

      info: "White #ffffff surface, 4px border-radius, padding 24px. Contains a square half-circle lime-green (#a0f32f) artwork block at top, track title in Inter 700 16px, description in Inter 400 14px #737170, and a 'Try prompt' dark button."

    try_prompt_dark_button:
      role: "Action inside track cards to reuse the generation prompt"

      info: "Filled pill, #27262b background, #ffffff bold text, 9999px border-radius, padding 6px 16px, Inter weight 700 at 12-14px."

    lavender_feature_panel:
      role: "Text-to-audio feature showcase section"

      info: "Full-bleed #c4bae3 background section, 2-column layout: left column has bold #000000 heading at 30-40px and body copy; right column holds a white product mockup card. Padding 48-64px vertical."

    mustard_feature_panel:
      role: "Audio-to-audio feature showcase section"

      info: "Full-bleed #e1ca46 background, same 2-column structure as the lavender panel, with yellow-toned product mockup card on the right."

    half_circle_art_graphic:
      role: "Signature track-artwork element"

      info: "A semi-circular arc shape in #a0f32f filling the top half of a square frame, set against a muted panel color. This 'sun' motif recurs in every track card and product mockup — it is the visual shorthand for 'audio' across the system."

    audio_waveform_player:
      role: "In-card playback control with timeline and playhead"

      info: "Horizontal waveform visualization spanning the card width, time labels (0:00 / 3:00) in Inter 400 12px #737170 at each end, circular play button on the left, draggable playhead. Waveform rendered in #27262b against the white card."

    product_mockup_card:
      role: "Full app interface preview embedded in feature sections"

      info: "Large white card (#ffffff) with 4px radius, containing a realistic screenshot of the Stable Audio app — prompt input textarea, model selector, duration slider, generate button, and history list. Often set against a colored feature panel."

    header_bar:
      role: "Site-wide navigation"

      info: "Transparent bar on the cream canvas, logo 'Stable Audio' with sun-burst icon at top-left in #000000, Sign up (amber) and Log in (ghost) buttons at top-right. Minimal, no background fill."

  do_s_and_don_ts:

    do:
      - "Use #f4f1ec Warm Canvas as the page background for every section — never replace it with pure white"
      - "Give every button, tag, and toggle a 9999px border-radius; the pill shape is the system's most recognizable trait"
      - "Use #f9a916 Amber Pulse as the sole fill for primary action buttons (Try now, Sign up, Generate)"
      - "Render headlines at Inter weight 700 with negative tracking (-0.84px at 40px) — do not use weight 500 or 600 for display copy"
      - "Build feature sections as full-bleed colored panels (lavender, mustard, sage, khaki) behind white product mockup cards"
      - "Use the half-circle lime-green (#a0f32f) arc graphic in every track-artwork and music-related visual"
      - "Keep card surface radius at 4px — the contrast between round controls and angular cards is intentional"

    don_t:
      - "Do not use #ffffff as a full page or section background — it breaks the warm-paper feeling"
      - "Do not add drop shadows to cards or panels — depth comes from surface color contrast only"
      - "Do not introduce additional button accent colors — amber is the single action color"
      - "Do not use weight 500 or 600 for headlines — the system commits to 700 bold or 400 regular"
      - "Do not use photography, lifestyle imagery, or people in section visuals — product mockups and geometric graphics only"
      - "Do not use square radii on buttons or tags — the 9999px pill is non-negotiable"
      - "Do not use the vivid lime green (#a0f32f) for non-audio UI — reserve it for active sound and waveform elements"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f4f1ec` | Page background, dominant warm cream surface |"
    info: "| 1 | Card | `#ffffff` | Elevated card surfaces (track cards, nav, product cards) |"
    info: "| 2 | Feature Panel | `#c4bae3` | Full-bleed colored section backgrounds (lavender, mustard, sage, khaki variants) |"
    info: "| 3 | Dark Surface | `#27262b` | Dark app-interface surfaces, active toggle states |"

  elevation:

    info: "No shadows. Depth is created entirely by surface color contrast — warm cream canvas behind white cards behind full-bleed colored feature panels. The absence of drop shadows keeps the design flat and poster-like, like printed album art."

  imagery:

    info: "No photography, no people, no lifestyle imagery. The visual system is pure UI: product mockups (screenshots of the Stable Audio app) and geometric graphic motifs. The signature visual is a half-circle lime-green arc inside a muted square — a flat 'sun' shape that recurs in every track artwork. Audio waveforms are rendered as thin dark bars on white. All imagery is flat, sharp-cornered, and product-focused: the app IS the hero."

  layout:

    info: "Full-bleed colored sections with centered max-width content (1280px). Hero is a 2-column split: headline left, product card right, both on the warm cream canvas. Feature sections alternate as full-bleed colored panels (lavender, mustard, sage) each with a 2-column text-left / product-mockup-right structure. Intro sections on white have centered headlines. Vertical rhythm is generous: 80px between sections. Navigation is a transparent bar with no background fill, logo top-left, action buttons top-right. The overall page reads top-to-bottom as: cream hero → centered white intro → lavender feature → mustard feature → sage feature → white CTA, a colorful vertical progression."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 (primary) / #27262b (secondary) / #737170 (muted)"
    - "Background: #f4f1ec (canvas) / #ffffff (card)"
    - "Border: #d2d1db"
    - "Accent: #a0f32f (lime green, audio/sound-active only)"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**Feature Section Panel**: Full-bleed #c4bae3 lavender background, 80px vertical padding, two columns. Left: bold heading Inter 700 30px #000000, body copy Inter 400 16px #27262b, ghost outline button (white fill, #000000 border, 9999px radius). Right: white product mockup card (#ffffff, 4px radius) containing app UI preview."

    - "**Toggle Group**: Two pills side by side, 9999px radius, 8px 20px padding, Inter 700 14px. Active: #27262b fill, #ffffff text. Inactive: transparent fill, #000000 1px border, #000000 text."

    - "**Header Bar**: Transparent on cream canvas. Logo 'Stable Audio' + sun-burst icon (#000000) at top-left. Top-right: amber 'Sign up' pill (#f9a916, #000000 bold text, 9999px radius) and ghost 'Log in' button (white fill, #000000 border, 9999px radius)."

    - "**Track Artwork Block**: Square 1:1 frame with 4px radius. Top half: filled #a0f32f lime-green half-circle. Bottom half: muted panel color (e.g. #e5dfc8 khaki). No text inside the art block itself."

  color_panel_system:

    info: "Colored panels are structural, not decorative. Each major feature section gets a full-bleed background tint from a fixed palette: #c4bae3 (lavender) for text-to-audio, #e1ca46 (mustard) for audio-to-audio, #9fc2c7 (sage) for sound effects. These panels extend edge-to-edge with no border or shadow — the color itself defines the section boundary. Product mockup cards (white, 4px radius) always sit on the right side of these panels, creating a consistent 2-column template that can be reused for any feature."

  similar_brands:

    - "**Suno AI** — Same music-generation product category with bold black headlines and product-mockup-driven marketing pages"
    - "**Luma AI** — Same flat, poster-like aesthetic with full-bleed colored section panels behind product showcases"
    - "**Runway** — Same commitment to pill-shaped controls, bold display type, and feature-section-as-product-demo layout"
    - "**Stability AI** — Parent brand sibling with a similar warm, confident typographic voice and clean light-mode interface"
    - "**Midjourney** — Same anti-corporate, opinionated visual identity with strong black headlines and minimal chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-amber-pulse: #f9a916;
          --color-lime-signal: #a0f32f;
          --color-lavender-wash: #c4bae3;
          --color-mustard-field: #e1ca46;
          --color-sage-mist: #9fc2c7;
          --color-khaki-paper: #e5dfc8;
          --color-warm-canvas: #f4f1ec;
          --color-pure-paper: #ffffff;
          --color-pale-mist: #e2e2e7;
          --color-hairline: #d2d1db;
          --color-ink-stone: #27262b;
          --color-charcoal: #000000;
          --color-ash: #737170;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 18;
          --tracking-caption: -0.07px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.09px;
          --text-body: 16px;
          --leading-body: 25;
          --tracking-body: -0.1px;
          --text-subheading: 18px;
          --leading-subheading: 28;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 30;
          --tracking-heading-sm: -0.3px;
          --text-heading: 30px;
          --leading-heading: 40;
          --tracking-heading: -0.51px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 46;
          --tracking-heading-lg: -0.84px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 4px;
          --radius-images: 4px;
          --radius-buttons: 9999px;
          --radius-toggles: 9999px;
          --radius-trackcards: 4px;
        
          /* Surfaces */
          --surface-canvas: #f4f1ec;
          --surface-card: #ffffff;
          --surface-feature-panel: #c4bae3;
          --surface-dark-surface: #27262b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-amber-pulse: #f9a916;
          --color-lime-signal: #a0f32f;
          --color-lavender-wash: #c4bae3;
          --color-mustard-field: #e1ca46;
          --color-sage-mist: #9fc2c7;
          --color-khaki-paper: #e5dfc8;
          --color-warm-canvas: #f4f1ec;
          --color-pure-paper: #ffffff;
          --color-pale-mist: #e2e2e7;
          --color-hairline: #d2d1db;
          --color-ink-stone: #27262b;
          --color-charcoal: #000000;
          --color-ash: #737170;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 18;
          --tracking-caption: -0.07px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.09px;
          --text-body: 16px;
          --leading-body: 25;
          --tracking-body: -0.1px;
          --text-subheading: 18px;
          --leading-subheading: 28;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 30;
          --tracking-heading-sm: -0.3px;
          --text-heading: 30px;
          --leading-heading: 40;
          --tracking-heading: -0.51px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 46;
          --tracking-heading-lg: -0.84px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 9999px;
        }