# Ableton — Marketing Site Design Spec

> Source: ableton.com/en/live/ (live DOM, computed styles), 2026-08-03; desktop 1512px.
> Coverage: Live 12 marketing + feature sections + sub-nav. One published var (`--main-navigation-link-active`); the rest from computed styles + census. sheetsBlocked 0. The `claude-pulse` keyframe is a capture-tool artifact, excluded.
> Reality check: hint ("technical Swiss, dense feature pages, waveform motifs") is ACCURATE — Swiss to the core (single Futura PT, square 0px corners, 2px bold borders, one electric blue) and dense feature pages ✅. "Waveform motifs" live inside the product screenshots, not the chrome; the defining chrome move the hint undersells is a **pastel section-block system** (each feature band a different soft wash) over the light-gray canvas.

## 1. Visual Theme & Atmosphere

Bauhaus-Swiss music software: confident, geometric and utilitarian, set almost entirely in one typeface with square corners and bold hairlines. A light-gray `#f3f3f3` canvas is broken into full-width feature bands, each washed a different soft pastel (pale green, lavender, mint, brown), so the page reads as a stack of coloured cards rather than a scroll of white. Type is a single geometric grotesque, **Futura PT**, at just two weights — 700 for every heading, 400 for body and nav — with normal tracking, so hierarchy comes from size and colour, not family. Colour is disciplined: black text, one electric blue `#0032e6` for CTAs and links, an orange `#dd4312` for the active nav item, and the pastels reserved for section backgrounds. Nothing is rounded except a few 100px pill tags; elevation is refused (essentially no shadows). Feels: geometric, Swiss, confident, utilitarian.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Primary text + headings |
| gray-800 | `#333333` | Secondary text |
| blue-link | `#0000ff` | Text links ("Try Live 12 for free") |
| blue-cta | `#0032e6` | Interactive blue (links, active states) |

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#f3f3f3` | Page background (light gray) |
| white | `#ffffff` | Cards, hero-text-on-photo, inverted panels |
| gray-100 | `#eeeeee` | Select/input fill (also border `#efefef`) |
| wash-green | `#ebf0dc` | Feature-band background (pale green) |
| wash-lavender | `#cdbefd` | Feature-band background (lavender) |
| wash-mint | `#b6ffc0` | Feature-band background (mint) |
| wash-brown | `#784f26` | Feature-band background (brown, dark) |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| blue-cta | `#0032e6` | Primary CTA fill ("Buy now"), 2px borders |
| blue-link | `#0000ff` | Link text |
| orange | `#dd4312` | Active nav item ("Live") |
| pink | `#ff0956` | Accent / highlight pops |

Rule: chrome is black + one electric blue `#0032e6`; the orange `#dd4312` marks only the active nav item, and the pastels are section backgrounds — never applied to text or buttons.

## 3. Typography Rules

- Family: **Futura PT** (single geometric grotesque, 1425 uses) + Ionicons (icon font). No serif, no mono.
- Body base: 19px. Specimen swap: **Jost** (an open Futura-style geometric) stands in for licensed Futura PT.

| Role | Size/Line | Weight | Tracking | Color |
|---|---|---|---|---|
| Display (h1) | 60 / 78 | 700 | normal | `#ffffff` (on photo) / `#000000` |
| Section (h2/h3) | 30 / 42 | 700 | normal | `#000000` |
| Body | 19 / 26.6 | 400 | normal | `#000000` |
| Nav | 19 / 26.6 | 400 | normal | `#000000` (active `#dd4312`) |
| Button | 16 | 700 | normal | varies |
| Small link | 14 | 700 | normal | `#0000ff` |

Pattern: exactly two weights (700 headings / 400 body-nav), tracking always normal, no uppercase. One family carries the entire hierarchy.

## 4. Component Stylings

### Buttons
- **Primary CTA ("Buy now")**: bg `#0032e6` electric blue, text `#ffffff`, **radius 0px (square)**, h 48px, pad 8px 30px, 1px `#0032e6` border, Futura 16/700. Hover: a sliding white fill — span bg → `rgba(255,255,255,.9)` over a `color, background-color 0.3s ease` transition.
- **Text link CTA ("Try Live 12 for free")**: transparent, text `#0000ff`, Futura 14/700, square.
- **Nav link**: transparent, text `#000000`; active item is orange `#dd4312`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | bg `#0032e6`, white, 0px | span fill `rgba(255,255,255,.9)` (0.3s ease) | not isolable — see §9 | — | dimmed |
| Nav link | `#000000` | color shift | — | orange `#dd4312` | — |

### Inputs
- Select/dropdown: bg `#eeeeee`, **0px radius**, h 30px, pad 5.6px 50px 5.6px 12px, 16px, no visible border.

### Cards / feature bands
- Full-width bands on a pastel wash (`#ebf0dc` / `#cdbefd` / `#b6ffc0` / `#784f26`), square corners, 2px hairline borders (`#0000ff` / `#eeeeee` / `#efefef`) where used; no shadow.

### Tags / badges
- The only rounded element: 100px pill tags; some 50% circular media controls.

## 5. Layout Principles

- Top nav: Ableton logo (three-bar mark) left, primary nav (Live/Push/Move/Note/Link/Shop…) centre-left, "Try Live 12 for free" + "Log in or register" right; a second contextual sub-nav row below (Live 12 · All new features · Buy now · Rent-to-own).
- Content is a vertical stack of full-width feature bands, each its own pastel wash, with a large 700-weight heading + 400 body + product screenshot or video.
- Square, grid-aligned, generous — Swiss density with clear columns.
- Nav uses a `backdrop-filter: blur(10px)` when overlaying content.

## 6. Depth & Elevation

- Radii: **0px dominant** (square is the rule); a few 100px pill tags and 50% circles are the only exceptions.
- Elevation refused: essentially **no box-shadows** (census is `rgba(0,0,0,0)` no-ops); one warm inset glow `rgba(217,119,87,.7) 0 0 15px inset` on a media control.
- Structure from **2px bold borders** (`#0000ff`, `#eeeeee`, `#efefef`) and 1px `#0032e6`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background-color | 0.3s | ease | house transition (buttons/links) |
| all | 0.4s | ease-in-out | panels / reveals |
| opacity | 0.3s | ease-in-out | fades |
| transform | 0.4s | ease-in-out | movement |

- House transition: `color, background-color 0.3s ease`; a springy `cubic-bezier(0.54,1.5,0.38,1.11)` appears for pop-in.
- No animation library detected; no notable published keyframes (only the excluded capture artifact). **1 `prefers-reduced-motion` block honoured** (reducedMotionBlocks: 1).
- One hero `<video>` autoplays behind the headline.

## 8. Backgrounds, Effects & WebGL

- Flat: light-gray `#f3f3f3` canvas with solid pastel section blocks — **no CSS gradients**, no canvas/WebGL, no grain.
- One background `<video>` (hero). Imagery is `<img>` product photography/screenshots.
- `backdrop-filter: blur(10px)` on the overlay nav.

## 9. Do's and Don'ts

### Do
- Set everything in one geometric grotesque (Futura PT / Jost) at only 700 (headings) and 400 (body/nav), tracking normal.
- Keep the canvas light-gray `#f3f3f3` and build the page as a stack of full-width pastel feature bands (`#ebf0dc`/`#cdbefd`/`#b6ffc0`/`#784f26`).
- Use one electric blue `#0032e6` for CTAs and `#0000ff` for links; reserve orange `#dd4312` for the active nav item only.
- Keep every corner square (0px); allow 100px pills only for small tags.
- Use 2px bold borders instead of shadows — elevation stays flat.

### Don't
- Don't add a second typeface, or weights other than 400/700.
- Don't round buttons or cards — square is the rule.
- Don't apply the pastel washes to text or buttons; they are backgrounds only.
- Don't introduce drop shadows; structure comes from borders.
- Don't add a third accent colour beyond blue (and the orange active-nav).

## 10. Responsive Behavior

- Breakpoints: 575, 600, 768, 990, 1023, 1200, 1600px plus 64em / 80em — a mixed em+px ladder marking the sub-nav collapse and column reflow.
- Mobile collapses the primary nav to a menu and stacks the feature bands single-column.
- Light-only, no theme toggle (`darkSchemeBlocks: 0`); no container queries; **1 reduced-motion block**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f3f3f3` · Text `#000000` · Muted `#333333` · Accent blue `#0032e6` / link `#0000ff` · Active-nav orange `#dd4312`
- Font: Futura PT (Jost) only, 700 headings / 400 body · Body 19px · Radius **0px** (square) · Button h 48px, weight 700
- Focus: not isolable (add a visible ring) · Hover: sliding white fill `rgba(255,255,255,.9)` (0.3s ease)

<ableton-marketing_design_language>
Use the Ableton design language: Bauhaus-Swiss music software. Light-gray #f3f3f3 canvas built as a stack of full-width feature bands, each a different soft pastel wash (pale green #ebf0dc, lavender #cdbefd, mint #b6ffc0, dark brown #784f26). Set EVERYTHING in one geometric grotesque, Futura PT (Jost stand-in), at only two weights — 700 for every heading (60/78 display, 30/42 section) and 400 for 19px body and nav — tracking always normal, no uppercase, no second family. Text is black #000000; chrome uses one electric blue #0032e6 for CTAs and #0000ff for text links, with orange #dd4312 reserved for the active nav item and the pastels used only as section backgrounds. Every corner is square (0px radius); the only rounded elements are 100px pill tags. Elevation is refused — no drop shadows; structure comes from 2px bold borders (#0000ff/#eeeeee) and 1px #0032e6. The primary CTA is a square electric-blue #0032e6 button (h48, white text, 700) whose hover slides a white fill (rgba(255,255,255,.9)) over a color/background 0.3s ease transition; a springy cubic-bezier(0.54,1.5,0.38,1.11) handles pop-ins, and reduced motion is honoured. Feels: geometric, Swiss, confident, utilitarian. Avoid: a second typeface or extra weights, rounded buttons/cards, pastel on text or buttons, drop shadows, and a third accent colour.
</ableton-marketing_design_language>