ableton___style_reference:
  info: "> Editorial workshop on stark white. White paper, black Futura, one blue pen mark for interactivity, photography clipped flush to the edges like magazine spreads."

  theme: "light"

  info: "Ableton's visual system reads like a working studio's editorial wall: stark white canvas, Futura PT geometry, and one confident blue that marks every interactive text. The site is text-first and almost ruthlessly flat — no shadows, no rounded corners, no decorative chrome — letting photography of musicians, hardware, and software do the emotional work. Color appears as small functional punctuation: a vivid blue for links, plus coral and teal tag fills that categorize content without softening it. Navigation is a thin top bar of monospace-feeling product names. The overall feel is that of a well-set technical manual that happens to be beautiful — information density carried by typography and image, not by container design."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, nav labels, logo, icon strokes, and every text-level heading — sets the full information hierarchy |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surface, and hero overlay text — the default background for almost every screen |"
    info: "| Fog | `#eeeeee` | `--color-fog` | Subtle form inputs, tag surfaces, and quiet secondary panel backgrounds — barely-there neutral |"
    info: "| Signal Blue | `#0000ff` | `--color-signal-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Coral | `#ff8389` | `--color-coral` | Category tag fills (Downloads, News) — flat rectangular badges that classify content without padding the layout |"
    info: "| Teal | `#00d2be` | `--color-teal` | Category tag fills (Tutorials, Videos) — flat rectangular badges paired with coral to split content taxonomy visually |"

  tokens___typography:

    futura_pt___the_single_typeface_powering_everything_from_body_copy_to_90px_display_headlines__futura_pt_s_geometric_precision_mirrors_ableton_s_grid_based_music_software___the_type_and_the_product_share_a_visual_logic__weight_700_carries_headlines__400_carries_body__no_serif__no_monospace_secondary_face___the_system_stays_mono_typographic_____font_futura_pt:
      - "**Substitute:** Futura PT Bold, Futura PT Book → free substitutes: Jost* (geometric grotesque) or Avenir Next; for closer match try ITC Avant Garde Gothic"
      - "**Weights:** 400, 700"
      - "**Sizes:** 14px, 16px, 20px, 24px, 30px, 40px, 90px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"kern\"`"
      - "**Role:** The single typeface powering everything from body copy to 90px display headlines. Futura PT's geometric precision mirrors Ableton's grid-based music software — the type and the product share a visual logic. Weight 700 carries headlines, 400 carries body. No serif, no monospace secondary face — the system stays mono-typographic."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 21 | — | `--text-caption` |"
      info: "| body | 16px | 24 | — | `--text-body` |"
      info: "| subheading | 20px | 30 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 33.6 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 36 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 48 | — | `--text-heading-lg` |"
      info: "| display | 90px | 90 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 203 | 203px | `--spacing-203` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 0px"
      - "**Element gap:** 10px"

  components:

    top_navigation_bar:
      role: "Primary site navigation"

      thin_white_bar__height__48px__left: "Ableton wordmark icon (vertical-line glyph). Center-left: product names (Live, Push, Move, Note, Link, Shop, Packs, Help, More +) in 14px Futura PT weight 400 black, separated by 20–24px horizontal gap. Right: 'Try Live 12 for free' link in #0000ff, then 'Log in or register' in #0000ff, each at 14px. No background fill change on hover, no borders."

    full_bleed_hero_with_photo_scrim:
      role: "Above-the-fold announcement"

      info: "Full-viewport-width photograph (laptop on patterned rug) with a dark semi-transparent overlay. Headline in 90px Futura PT weight 400 white, line-height 1.00, positioned at left ~8% from edge. Subhead/CTA link 'Learn more >' in 14px white beneath. No box around the text — the scrim and white type are the entire component. Edge-to-edge photography with no rounded corners."

    section_header_with_filter_bar:
      role: "Content section introduction"

      info: "Left-aligned 'The latest from Ableton' in 30px weight 400 black. Right-aligned filter links (All posts, Artists, News, Downloads, Tutorials, Videos, Loop) in 14px #0000ff, horizontally separated by ~16px gaps. The two elements sit on a single baseline-aligned row, no divider between them."

    content_card_grid_item:
      role: "Blog post or video entry in 3-column grid"

      info: "Rectangular card, 0px border-radius, 0px border, 0px shadow. Structure top-to-bottom: full-width contained image (aspect ~16:10, no rounding), then a category tag (see Category Tag), then the title in 20px weight 400 black. Cards in a 3-column grid with ~20px horizontal and ~40px vertical gap. No card background fill — cards sit directly on the white canvas."

    category_tag:
      role: "Content classification badge"

      info: "Filled rectangle, 0px border-radius, ~2px vertical and ~8px horizontal padding. Two color variants: coral #ff8389 (Downloads, News) and teal #00d2be (Tutorials, Videos). Label text in ~12–14px Futura PT weight 400, color #000000. Tags are flat, non-interactive, non-removable."

    inline_text_link:
      role: "Default clickable text"

      info: "14–16px Futura PT weight 400 #0000ff, no underline by default. Hover state adds underline. Often followed by a right-pointing chevron character '>' to signal destination. Used for all primary navigation and in-content references."

    overlay_text_link_on_dark_scrim:
      role: "Link variant on photographic backgrounds"

      info: "White #ffffff text at 14px weight 400, paired with '>' chevron. Sits directly on darkened image without a background fill. Used for hero CTAs and overlay actions."

    filter_link_section:
      role: "Content category filter"

      info: "14px Futura PT weight 400 in #0000ff when active, #000000 when inactive. No pill, no background fill, no underline. Arranged inline with even gaps. Selection communicated purely through color."

    image_thumbnail_tutorial_card:
      role: "Visual entry into video content"

      info: "Full-bleed rectangular image within a 3-column grid card, 0px border-radius, no border. Aspect ratio approximately 16:9. Acts as the entire card surface — no padding, no frame."

    logo_glyph:
      role: "Brand mark in navigation"

      ableton__live__mark: "a series of vertical black bars of varying heights, evoking a DAW track header or audio meters. Rendered at ~24px height in the nav. No wordmark beside it — the glyph alone is the brand."

    horizontal_section_divider:
      role: "Implicit separation between content zones"

      info: "Not a drawn rule — separation comes from ~80px vertical whitespace between sections and the change in heading typography. The page flows without visible borders."

  do_s_and_don_ts:

    do:
      - "Use Futura PT for all text — never introduce a secondary typeface"
      - "Set every border-radius to 0px — the system is sharp, angular, and grid-faithful"
      - "Use #0000ff exclusively for link text, active nav, and interactive text — no other blue"
      - "Reach for coral #ff8389 and teal #00d2be only as category tag fills, never as backgrounds or text colors"
      - "Let the page be flat: no shadows, no borders, no fills on cards — let whitespace and type do the work"
      - "Use 90px weight 400 white for hero overlay text, not weight 700 — the light weight on bold imagery is the signature"
      - "Set body line-height to 1.50 and display line-height to 1.00 — the contrast between breathing body and tight display is intentional"

    don_t:
      - "Do not add box-shadows or elevation to any component — the system is deliberately flat"
      - "Do not round corners on cards, tags, buttons, or inputs — keep 0px everywhere"
      - "Do not use coral or teal for buttons, CTAs, or interactive text — they are taxonomy-only"
      - "Do not call #0000ff a 'CTA color' — it is a link color used for interactive text, not filled buttons"
      - "Do not introduce gradient backgrounds — the system is solid color and photography only"
      - "Do not add icons, illustrations, or decorative graphics — photography and type carry the visual load"
      - "Do not set body text below 14px or use a weight other than 400 for body copy"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#ffffff` | Primary page canvas and card surface |"
    info: "| 2 | Fog | `#eeeeee` | Recessed form input fields and occasional quiet panel fills |"

  imagery:

    info: "Photography dominates the visual system — no illustrations, no 3D renders, no abstract graphics. The hero uses a full-bleed environmental shot (laptop on patterned rug, musician at workstation) with a dark scrim and white overlaid type. Grid content cards use contained 16:10 or 16:9 photographs — musicians in studios, hardware close-ups, software UI captures, domestic creative spaces. Photography is warm, natural-lit, candid rather than staged; people are shown making, not performing. The product itself (the software, controllers like Push) appears in context rather than as isolated hero shots. Photography edges are sharp, un-masked, flush to container boundaries — no rounded corners, no soft drop shadows behind images. Icons are absent except for the brand glyph and minimal interface controls."

  layout:

    info: "The page model is full-bleed for hero and footer zones, contained to ~1200px for content sections. The hero is a full-viewport-width photographic band with left-aligned white type overlay. Content sections sit on white with generous ~80px vertical breathing room between them. The 3-column card grid is the dominant content pattern, used for blog posts, tutorial videos, and featured content. Card titles are left-aligned, category tags sit flush left above the title. The top navigation is a single thin horizontal bar — no mega-menu, no sidebar, no sticky behavior visible beyond standard. Section transitions rely on whitespace rather than dividers, background changes, or visual breaks. The overall rhythm is: bold photographic hero → quiet white editorial sections → 3-column grid repeat. The design favors a left-to-right, top-to-bottom reading flow with no overlapping or asymmetric compositions."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000"
    - "background: #ffffff"
    - "border: none (0px everywhere)"
    - "link/interactive text: #0000ff"
    - "tag fill A: #ff8389 (coral)"
    - "tag fill B: #00d2be (teal)"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"

    - "Create a full-bleed hero: a photograph (musician at studio desk) fills the entire viewport width, with a dark semi-transparent scrim overlay. Headline at 90px futura-pt weight 400 white, line-height 1.00, positioned at left ~8% from edge, sits on the scrim. A white inline link 'Learn more >' at 14px weight 400 sits directly below the headline, 0px border-radius, no background, no underline."

    - "Create a content section: white #ffffff background, max-width 1200px centered, 80px vertical padding above and below. Section heading at 30px futura-pt weight 400 #000000, left-aligned. To the right on the same baseline, filter links at 14px #0000ff separated by 16px gaps."

    - "Create a 3-column card grid: three cards per row, 20px horizontal gap, 40px vertical gap. Each card has 0px border-radius, 0px border, no shadow, no background fill. Top of card: full-width 16:10 photograph (contained, sharp edges). Below: a flat tag rectangle (0px radius, #ff8389 or #00d2be fill, 2px 8px padding, #000000 text at 12px). Below tag: title at 20px weight 400 #000000."

    - "Create a top navigation bar: white background, 48px height, full width. Left: Ableton glyph icon (vertical black bars) at 24px height. Beside it: product names (Live, Push, Move, Note, Link, Shop, Packs, Help, More +) in 14px futura-pt weight 400 #000000, 20px gap between items. Right-aligned: 'Try Live 12 for free' in 14px #0000ff, then 16px gap, then 'Log in or register' in 14px #0000ff. No borders, no fills, no hover backgrounds."

    - "Create a category tag: 0px border-radius rectangle, 2px vertical padding, 8px horizontal padding, fill #ff8389 (or #00d2be for the second category), text at 12px futura-pt weight 400 #000000. No border, no shadow, no hover state."

  similar_brands:

    - "**Native Instruments** — Same monochrome editorial approach with photography-first content cards, flat layout, and a single accent color for interactive text"
    - "**Teenage Engineering** — Same sharp-cornered zero-radius aesthetic, Futura-adjacent geometric type, and reliance on product-in-context photography over decorative chrome"
    - "**Moog Music** — Same stark-white-canvas editorial feel with bold geometric type, category-color taxonomy tags, and full-bleed photography of musicians at work"
    - "**Bandcamp** — Same text-driven, no-decoration layout philosophy with 3-column content grids and category-based color coding for tags"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-fog: #eeeeee;
          --color-signal-blue: #0000ff;
          --color-coral: #ff8389;
          --color-teal: #00d2be;
        
          /* Typography — Font Families */
          --font-futura-pt: 'futura-pt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 21;
          --text-body: 16px;
          --leading-body: 24;
          --text-subheading: 20px;
          --leading-subheading: 30;
          --text-heading-sm: 24px;
          --leading-heading-sm: 33.6;
          --text-heading: 30px;
          --leading-heading: 36;
          --text-heading-lg: 40px;
          --leading-heading-lg: 48;
          --text-display: 90px;
          --leading-display: 90;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-203: 203px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 0px;
          --element-gap: 10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-fog: #eeeeee;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-fog: #eeeeee;
          --color-signal-blue: #0000ff;
          --color-coral: #ff8389;
          --color-teal: #00d2be;
        
          /* Typography */
          --font-futura-pt: 'futura-pt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 21;
          --text-body: 16px;
          --leading-body: 24;
          --text-subheading: 20px;
          --leading-subheading: 30;
          --text-heading-sm: 24px;
          --leading-heading-sm: 33.6;
          --text-heading: 30px;
          --leading-heading: 36;
          --text-heading-lg: 40px;
          --leading-heading-lg: 48;
          --text-display: 90px;
          --leading-display: 90;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-203: 203px;
        }