---
title: "Ableton design system"
variant: extended
source: https://www.ableton.com/
captured_at: 2026-10-12
theme: light
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/ableton-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ableton · Design System

> A bright editorial canvas for making music

**Theme:** light · **Industry:** entertainment · **Source:** https://www.ableton.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ableton’s homepage pairs a clean white editorial canvas with large, offset music stories and a steady feed of tutorials. Bold black typography and blue links keep navigation clear while vivid image-led cards bring the creative community forward.

## North star

Keep the interface quiet and white so bold type, useful blue links, and expressive music imagery carry the story.

## Overview

The page uses white as its primary canvas, with black text and blue links providing the clearest interface contrast. Pale gray bands distinguish the lower footer navigation from the white content areas, while turquoise and coral appear as small category markers rather than broad brand fills. Futura PT gives headings and navigation a rounded, confident character; heavier weights establish hierarchy without relying on uppercase styling. The opening area is deliberately asymmetric: a large music-making photograph anchors the left, while smaller campaign tiles sit to the right and overlap below. Further down, compact three-column image feeds are organized by strong section headings and generous white gaps. Product and creator photography supplies most of the page’s color, so interface colors stay restrained. Flat cards, minimal borders, and overlapping hero tiles preserve a light editorial feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and dominant content background, keeping stories and imagery visually open. |
| Signal Blue | `#0000ff` | `--color-signal-blue` | brand | Navigation and editorial links; also used for the compact scroll control. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary headings, navigation, body copy, and footer text. |
| Soft Canvas | `#f3f3f3` | `--color-soft-canvas` | surface | Light neutral surface used for broad page or section backgrounds. |
| Mist Gray | `#eeeeee` | `--color-mist-gray` | surface | Footer navigation band, cards, and language or email input backgrounds. |
| Pulse Turquoise | `#00d2be` | `--color-pulse-turquoise` | accent | Small tutorial category marker; measured in category buttons, not as a large page fill. |
| Coral Note | `#ff8389` | `--color-coral-note` | accent | Small downloads category marker; measured in a category button, not as a large page fill. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f3f3` (Soft Canvas) · `--color-surface-2` → `#eeeeee` (Mist Gray) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#eeeeee` (Mist Gray) · `--color-accent` → `#0000ff` (Signal Blue) · `--color-accent-2` → `#00d2be` (Pulse Turquoise) · `--color-accent-3` → `#ff8389` (Coral Note) · `--color-on-accent` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f3f3f3` | 18.93:1 | AAA |
| `#000000` | `#eeeeee` | 18.1:1 | AAA |
| `#ffffff` | `#f3f3f3` | 1.11:1 | fail |
| `#ffffff` | `#eeeeee` | 1.16:1 | fail |
| `#eeeeee` | `#ffffff` | 1.16:1 | fail |
| `#eeeeee` | `#f3f3f3` | 1.05:1 | fail |
| `#0000ff` | `#ffffff` | 8.59:1 | AAA |
| `#0000ff` | `#f3f3f3` | 7.74:1 | AAA |
| `#0000ff` | `#eeeeee` | 7.41:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| futura-pt | `--font-body` | webfont | 700, 400 | All measured roles, from large headings and navigation to body copy, captions, links, and buttons. | Jost |

- **futura-pt:** Rounded geometric sans; headings and navigation use bold weights, while button and body treatments also use regular. Sentence case; tracking is neutral.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1.1 | 0 | — | futura-pt | Oversized promotional headline in the opening campaign area. |
| h1 | 40px | 700 | 1.2 | 0 | — | futura-pt | Primary page or major editorial section headings. |
| h2 | 30px | 700 | 1.4 | 0 | — | futura-pt | Section titles introducing news, tutorials, and video feeds. |
| h3 | 24px | 700 | 1.5 | 0 | — | futura-pt | Individual story titles and nested content headings. |
| body | 20px | 700 | 1.5 | 0 | — | futura-pt | Promotional and explanatory copy, including footer descriptions. |
| caption | 14px | 700 | 1.5 | 0 | — | futura-pt | Compact category labels and supporting metadata. |
| button | 16px | 400 | 1.5 | 0 | — | futura-pt | Calls to action, including scroll and sign-up controls. |
| nav | 20px | 700 | 1.5 | 0 | — | futura-pt | Main header navigation and other prominent navigation items. |
| link | 24px | 700 | 1.5 | 0 | — | futura-pt | Large editorial links such as view-all actions. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 3, 5, 7, 8, 10, 11, 12, 13, 15, 16, 20, 30, 40, 50, 60 px.
- Section rhythm 120px · element gap — · card padding 51px · max content width 1200px.

The header spans the page, followed by an asymmetric hero with a large left image and smaller, offset campaign tiles on the right. The measured content max width is 1200px. Subsequent editorial feeds use three columns with left-aligned headings and image cards. Section spacing is spacious, with a measured 120px section gap; content density stays low and navigation remains visually compact. A pale gray category strip separates the content from a multi-column footer.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease` on interactive elements.

The interface reads as flat: measured components have no shadows, and the palette reports no shadow or gradient system. Cards and inputs use simple fills without measured borders or rounded corners. Visual depth comes from image content and the overlapping hero tiles, not from raised UI surfaces.

## Imagery

Photography leads throughout: music hardware and software in use, artists at work, tutorial interface captures, and creator video stills. Hero imagery is large and rectangular, with promotional copy placed directly over darker photographs. Feed thumbnails are consistent and compact, with little visible framing. The bright striped campaign graphic is a distinct promotional illustration; its colors should not be mistaken for the overall site palette.

## Components

### Header navigation

A white horizontal header with the Ableton mark, bold black product links, and a blue free-trial link aligned toward the right.

### Campaign hero

Large photo-led feature on the left, paired with smaller offset promotional tiles and text links on the right and below.

### Editorial feed cards

Three-column image-led stories with compact category markers, black titles, and generous white separation between feeds.

### Category markers

Small turquoise tutorial and coral downloads labels with black text; keep these as localized accents.

### Category navigation strip

A full-width pale gray band containing a centered row of blue links for browsing content categories.

### Footer signup and language controls

Multi-column footer with black section headings, blue links, a gray email input, a blue sign-up control, and language/location selectors.

### Measured component styles

- **Primary button** (“View posts in category: Tutorials”): background #00d2be · text #000000 · radius 0px · padding 2px 11.9px · 700 14px futura-pt
- **Secondary button** (“Scroll down”): background #0000ff · text #000000 · radius 0px · padding 0px · 400 16px futura-pt
- **Link** (“All posts”): transparent background · text #0000ff · radius 0px · padding 0px · 700 24px futura-pt
- **Input** (“English Deutsch Français 日本語 简体中文 Españo”): background #eeeeee · text #000000 · radius 0px · padding 4.9px 50px 4.9px 10.5px · 700 14px futura-pt
- **Card**: background #eeeeee · text #000000 · radius 0px · padding 0px 0px 202.5px 0px · 400 16px futura-pt
- **Navigation item** (“Live”): transparent background · text #000000 · radius 0px · padding 0px · 700 20px futura-pt

## Do

- Use white as the dominant canvas.
- Set interface text in black Futura-like geometric sans.
- Use blue for navigation and editorial links.
- Let campaign imagery form the main color fields.
- Keep turquoise and coral confined to small category markers.
- Use offset hero tiles and orderly three-column feeds.
- Separate content groups with generous white space.

## Don't

- Do not turn the page into a dark interface.
- Do not use gradients or shadows for depth.
- Do not make turquoise or coral full-page backgrounds.
- Do not replace the asymmetric hero with a uniform banner.
- Do not crowd cards with heavy borders or decoration.
- Do not mistake photograph colors for interface palette colors.

## Agent prompt

Build a new Ableton-style page as a bright editorial canvas. Use Gallery White (#ffffff) for the main background and Studio Ink (#000000) for headings and copy; reserve Signal Blue (#0000ff) for links and key navigation. Use Futura PT or a close geometric sans substitute, with bold sentence-case headings and a compact, clear header. Create an asymmetric, image-led feature area with offset campaign tiles, then organize related stories into spacious three-column feeds. Keep photography vivid and rectangular, with minimal card chrome. Use Mist Gray (#eeeeee) for a restrained category strip or form surfaces. Pulse Turquoise (#00d2be) and Coral Note (#ff8389) belong only on small category labels. Keep the interface flat, avoid decorative shadows, and let spacing and image composition create hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Asymmetric opening campaign: large left-side image with smaller promotional tiles offset to the right and below. | promotional links, scroll cue | photo-led feature, overlapping tiles, white canvas |
| 2 | content-feed | Editorial heading and category links above a three-column story feed. | category browsing, story cards | thumbnail grid, colored category labels, blue links |
| 3 | video | Left-aligned section title followed by three evenly arranged video-story thumbnails. | watch tutorials, open video stories | three-column thumbnails, compact captions |
| 4 | video | Section heading with a view-all link, followed by three creator-video cards. | view all videos, browse episodes | creator photography, three-column feed, blue action link |
| 5 | footer | Category-link band above a multi-column footer with newsletter signup, community links, and language controls. | newsletter signup, language selection, footer navigation | gray link band, multi-column footer, form controls |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ableton-com