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 #ebf0dc, lavender #cdbefd, mint #b6ffc0, dark brown #784f26), so the page reads as a stack of coloured cards rather than a scroll of white. The whole identity is a single geometric grotesque, Futura PT (1425 uses, Jost stand-in), at just two weights — 700 for every heading (60/78 display, 30/42 section) and 400 for 19px body and nav — with tracking always normal and no uppercase, so hierarchy comes from size and colour rather than family. Colour is disciplined: black #000000 text, one electric blue #0032e6 for the square CTA buttons and #0000ff for text links, an orange #dd4312 reserved for the active nav item only, and the pastels used strictly as section backgrounds (never on text or buttons). Every corner is square (0px radius); the only rounded elements are a few 100px pill tags and 50% circular media controls. Elevation is refused — the shadow census is essentially empty — and structure comes instead from 2px bold borders (#0000ff/#eeeeee/#efefef) and 1px #0032e6. The primary CTA is a square electric-blue button (h48, white, weight 700) whose hover slides a white fill (rgba(255,255,255,.9)) over a color/background 0.3s ease transition, with a springy cubic-bezier(0.54,1.5,0.38,1.11) for pop-ins and one hero video; no animation library, and one reduced-motion block is honoured. The captured anti-pattern is a non-isolable focus state on buttons. Futura PT is licensed, so the preview specimen stands in with Jost.
⚠ needs-dashboard
Browse Ableton in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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. Theclaude-pulsekeyframe 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.
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.
| 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) |
| 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) |
| 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.
| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.