Ableton — Music Production and Creative Learning

---
version: alpha
name: Ableton — Music Production and Creative Learning
description: An image-led music-production homepage with an asymmetric overlapping
  hero collage, bold geometric sans-serif headings, electric-blue links, a mint checkerboard
  education offer and spacious three-column tutorial grids. Square-edged photography
  and a utility-rich footer balance product promotion with creative learning.
colors:
  primary: '#0000FF'
  surface: '#FFFFFF'
  on-surface: '#000000'
  secondary: '#00D2BE'
  accent: '#FF8389'
  surface-variant: '#EEEEEE'
typography:
  headline:
    fontFamily: futura-pt, Avenir, sans-serif
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 66px
  section:
    fontFamily: futura-pt, Avenir, sans-serif
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 48px
  card-title:
    fontFamily: futura-pt, Avenir, sans-serif
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 30px
  mobile-headline:
    fontFamily: futura-pt, Avenir, sans-serif
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 30px
---

# Ableton — Music Production and Creative Learning

## Overview

Observed at 2026-09-20T06:05:51.789850+00:00: desktop 1440 × 1000 CSS pixels, device scale factor 1; mobile 390 × 844. Full-page screenshot remains at native desktop width. This is an independent visual reference, not an official brand manual.

An energetic music-production homepage mixes a product announcement with education and artist-led learning. The composition is intentionally asymmetrical: a large studio photograph anchors the upper left, an education offer floats to the right, and a smaller artist-video panel overlaps the lower middle. Beneath it, strict editorial grids make a dense stream of tutorials easy to browse. This reference records the observed Live 12.4 campaign, not a permanent product specification.

## Colors

The measured interface uses white #FFFFFF, black #000000 and vivid blue #0000FF for navigation links and selected conversion controls. Tutorial category labels use measured #00D2BE, and the download label uses #FF8389. Light-gray #EEEEEE appears in supporting surfaces and the lower navigation band; the artist-panel text also samples to this near-white. A mint-and-pale-blue checkerboard makes the education campaign distinct. Its individual artwork colors are visual descriptions, not inferred global tokens. Warm studio wood and muted photography balance the digital accent colors.

## Typography

The declared stack begins with futura-pt, followed by Avenir and system sans-serif fallbacks. Use its geometric letterforms and bold headings as a defining feature. The main desktop campaign heading measures 60px/66px, weight 700, in a 719.98px-wide box at x=60. Secondary promotional headings are 30px/42px. Main section titles are 40px/48px, and image-card titles are 20px/30px. Category text samples at 16px/24px. Family declarations are measured; exact font loading and licensing are not established by the screenshot.

At 390px, the main and secondary campaign headings are 20px/30px. Editorial section titles also become 20px/30px, while card titles reduce to 16px/24px. Preserve strong weight and comfortable line height rather than using a giant mobile headline that obscures the studio scene. These values describe the sampled widths, not uninspected breakpoints.

## Layout

Use a full-width white navigation row with the striped logo at left, compact product and shop links across the middle, and the blue trial link plus login at right. Keep the opening collage close to the navigation: the wide studio panel occupies the left majority, the patterned offer sits lower on the right, and the smaller artist image overlaps near the bottom center. The white void above the right offer is deliberate compositional space, not a missing media panel. Put white copy over the darker studio background and black copy over the bright patterned field.

The content below returns to a centered 1200px grid with about 120px outer margins at 1440px. Three cards each measure 360px wide at x=119.98, 539.95 and 959.92, producing approximately 60px gutters. A row heading shares space with category filters; subsequent rows group tutorial videos and the One Thing series. Use rectangular landscape images above text, without enclosing each item in a bordered container. A full-width light-gray category band transitions into a roomy footer containing the large wordmark, education and community links, email signup, social icons and language/location controls.

At 390px, the top navigation collapses to the logo and a Menu label with a small chevron. The studio image occupies the full width. Promotional panels form a vertical sequence, retaining a small overlap between the offer and artist panel rather than the wide desktop offsets; the education text begins near x=65 while general content begins at x=32.48. The measured single-column card width is 325px. The mobile opening and desktop full page were visually checked; lower mobile columns were measured from the DOM, not exhaustively traversed. Both viewport measurements show no horizontal document overflow. Exact vertical section-spacing tokens were not sampled.

## Elevation & Depth

Create hierarchy through scale, photographic contrast and overlap, not drop-shadow cards. The artist panel layers over the space below the larger studio image. Lower tutorial rows remain flat on white, with spacing providing separation. The rectangular checkerboard panel acts as a strong color plane. No general shadow scale was measured; do not invent one.

## Shapes

The composition is square-edged: sampled heading and link boxes report 0px corner radii, and photographed panels have crisp rectangular bounds. The logo uses parallel bars, the offer uses a repeating geometric checkerboard, and navigation uses small chevrons. Avoid rounded pills or soft, bento-like tile treatments that would weaken this graphic language. Social logos retain their own shapes rather than defining a global radius system.

## Components

The campaign collage combines a large announcement link, a patterned education offer and an artist-led video link. Underlined white links remain readable against photography. Editorial cards pair landscape thumbnails with colored category strips and bold, compact titles. Filter links use blue text; the newsletter combines a pale input field with a blue square-ended signup control. Keep the footer's practical navigation distinct from promotional storytelling.

The site's cookie panel explicitly says Close denies consent; that control was used before the reviewed capture. The notice is not part of the reference composition. Menus, video playback, signup, trial and purchase flows were not exercised. The screenshots show a static campaign state, not every possible responsive, hover or animated state.

## Do's and Don'ts

- Do combine a freeform promotional collage with disciplined editorial grids below.
- Do reserve electric blue for purposeful links and conversion controls.
- Do align thumbnail rows and keep their titles outside the images.
- Don't fill deliberate hero whitespace with extra cards or decorations.
- Don't carry desktop overlap into the narrow single-column layout.
- Don't claim unobserved video, menu or form behavior from the static reference.