Design language extracted

Creative tools for music makers

https://www.ableton.com/en/ · 668 elements · May 14, 2026
Intent: blog-post · 0.35 Library: unknown · 0.00 Material: flat Imagery: photography Voice: friendly · third-person Headings: Title Case
7
Colors
3
Font families
11
Spacing
0
Shadows
0
Radii
7
Components
7
Icons
100%
WCAG score

Color palette

7 unique colors. A disciplined three-axis system: black ink, Ableton blue, and a salmon-pink pop accent — used sparingly. No gradients, no chromatic surfaces. Score: 100/100 for color discipline.
Brand
Brand blue · secondary
#0000FF
42 uses — dominant chromatic
Salmon · primary
#FF8389
2 uses — pop / highlight
Teal · accent
#00D2BE
1 use — rare emphasis
Neutrals
Ink
#000000
1260 uses
Paper
#FFFFFF
31 uses
Surface 1
#F3F3F3
page bg
Surface 2
#EEEEEE
14 uses
Sky
#6DCBFF
10 uses — links
Patterns & surfaces
Detected: plain (no background patterns)
Saturation
0.437
Shadow profile
none
Avg radius
0px
Pills
no
Backdrop-blur
no
Gradients
0
Imagery
photography (16:9 dominant)

Tokens by context

The CSS variables in ableton-com-variables.css organised by role.
Surface Text Border & line Status

Surface

4 surface tokens. Strictly tonal — no chromatic backgrounds at the page level. Black is reserved for hero / video panels.
primary highlight ink
TokenHexUsed for
--color-bg#F3F3F3Page background
--color-bg-1#FFFFFFCard / panel
--color-bg-2#EEEEEESunken / divider strip
--color-bg-3#000000Hero / video / modal scrim

Text

4 text tokens. Title Case headings sit in ink; the brand blue is the only chromatic text token, reserved for links and category labels.
Headline in ink
Body copy on light surface — Ableton sets body weight to 700, which is unusually heavy.
A blue link in third-person voice
Inverted text on dark surface
TokenHexUsed for
--color-text#000000Body, headings
--color-text-1#FFFFFFInverted (on dark / blue)
--color-text-2#0000FFLinks, category labels
--color-text-3#6DCBFFSecondary link / hover (10 uses)

Border & line

Lines are either fully hard (1–2px solid black) or completely absent. There is no "soft" border treatment in source — the subtle #e5e5e5 used in this review is review-chrome only.
Hard / 2px
Hard / 1px
Underline only
No border, sunken fill

Status & callout

No explicit semantic status tokens were detected (the source declares them as [object Object] — likely Sass map serialisation failure). The values below are inferred from the brand palette.
Success — Live 12.4 installed.
Warning — Your session has 1 unsaved take.
Error — Could not authorise this computer.
Info — Three new packs are available.

Typography

A two-typeface system anchored by futura-pt at body weight 700 — an unusually heavy default that gives every page its signature confident voice. Family / size pairing below is inferred (designlang reports family usage but does not pair sizes to families).
Font families · 3 detected ⚠ audit recommends ≤2
futura-pt
614 uses · sans · display + body
Times
50 uses · serif · italic accent only
Arial
4 uses · system fallback
Note: futura-pt is licensed (Adobe Fonts / Typekit). This review renders in Jost — a free, geometric Futura-alike — for portability. The original site self-hosts the licensed file.
Type scale
90pxfutura-pt · display
Live
700 · lh 90 · H1
40pxfutura-pt · display
The latest from Ableton
700 · lh 48 · H2
30pxfutura-pt · display
Tutorial videos
700 · lh 42 · H3
24pxfutura-pt · ui
Free downloads
700 · lh 36 · feature
20pxfutura-pt · body
Body copy weighs 700 by default.
700 · lh 30 · body / H4
16pxsystem · meta
A neutral 16px tier carries metadata, fine print, and HTML defaults.
400 · normal · meta
14pxfutura-pt · ui
Compact UI — nav links, footer links, badges.
700 · lh 21 · UI
13pxsystem · caption
Caption / form control text — values like 13.3333px have been snapped to 13.
400 · normal · caption

Spacing scale (base: 2px)

11 values from 1px to 250px. The scale skips small increments entirely — no 4/6/8/12 — and jumps from 1px straight to 27px, suggesting most layout work happens at section scale rather than chrome scale.
s0 · 1px
0.5×
s1 · 27px
13.5×
s2 · 30px
15×
s3 · 40px
20×
s4 · 50px
25×
s5 · 53px
26.5×
s6 · 60px
30×
s7 · 107px
53.5×
s8 · 140px
70×
s9 · 180px
90×
s10 · 250px
125×
Original site tokens (rem)
--abl-spacing-2xs · .3125rem  ·  --abl-spacing-xs · .625rem  ·  --abl-spacing-s · 1.25rem  ·  --abl-spacing-m · 1.875rem  ·  --abl-spacing-l · 2.5rem  ·  --abl-spacing-xl · 3.75rem  ·  --abl-spacing-2xl · 5rem  ·  --abl-spacing-3xl · 6.25rem  ·  --abl-spacing-4xl · 7.5rem

Elevation

No discrete shadow tokens detected. Ableton is strictly flat — elevation is expressed through borders and contrast, never blur.
none / flat
box-shadow: 0
All surfaces share one plane. Hierarchy comes from 1–2px borders.
2px hard outline
border: 2px solid #000
Elevation substitute — used on outline buttons and emphasis cards.
inversion
background: #000
Hero / video panels reverse the page palette as elevation.

Border radii

No discrete radius tokens detected — material profile is "sharp / brutalist". Every chrome element terminates at 0px.
0px · everything
999px · pip only
(inline status dot exception)
Score: 100/100 for radius consistency — the entire system uses a single value. Zero exceptions in detected components.

Motion

Two duration tiers (xs / md), no explicit easing tokens. Feel is mixed; scroll-linked animations are active on the page.
xs · fast
150ms · ease
Hover transitions on links and buttons. Hover this card.
md · default
350ms · ease
Color transitions on text + most state changes.
scroll-linked
depends on viewport
Homepage grid + sticky nav respond to scroll position.

Icon system

7 SVG icons, all filled. No standard icon library detected — Ableton uses custom marks (the logo, social glyphs, control glyphs). 6 of 7 sit on a 48px grid.
7
Total
3
Fill only
4
Mixed
0
Stroke only
48
Dominant grid
0%
Rounded caps
Library — unknown (custom) · Lucide approximations
music (logo)
play
download
chevron-down
search
close
external
Unidentified marks (placeholder cards)
48px · fill
48px · mixed
48px · mixed
48px · mixed

Components

7 patterns detected: buttons · inputs · links · navigation · footer · modals · badges. Each rendered live below using the extracted tokens. CTA labels come from voice.json: more, close, accept.

Buttons

12 instances · variants: primary, outline, default · sample labels: More, Close, Accept

Cards

post / artist / pack tile · sharp 0px corners · 16:9 thumbnails dominate
Downloads
Download the Live Set of Artefakt's New Track "Undertow"
A taster from the artist's forthcoming EP, in Live 12 format.
Tutorials
Watch dnksaus Experiment with Live 12.4's Updated Delay
Three creative tips from the 12.4 release notes.
Loop
Talks & performances from Ableton's summit for music makers
A long-running editorial format that doubles as community programming.

Inputs

12 instances · #EEEEEE fill · #000 1px underline · 13–20px text

Badges

2 instances detected · sharp · 24px / 700
Downloads New Tutorials Free Beta Live

Modals

5 instances · rgba(0,0,0,0.6) scrim · 1000px max-width · 0px radius

We use cookies

This site uses cookies to provide essential functionality, measure performance and personalise content. Read our cookie policy for details.

Navigation

51 instances · static + sticky · z-index 35 · brand mark left, CTA right

Voice & content

Friendly, third-person, Title Case. CTA verbs are remarkably short — more, close, accept — and almost always paired with a noun (more from Ableton, more info).
Sample headings
Creative tools for music makers
Live 12.4 is out now — with Link Audio, updated devices and more
The latest from Ableton
Watch dnksaus experiment with Live 12.4's updated Delay
Free downloads
CTA verbs
more ×2 close ×1 accept ×1
Common button labels
more ×1 close ×1 accept ×1 more info ×1
Voice metadata
Tone
Friendly
Pronoun posture
Third-person
Heading case
Title Case
Heading length
Balanced
Total buttons
4
Total headings
27

Page anatomy

Reading order detected on the homepage. Two "pricing" classifications likely reflect the dense card-grid layout rather than real pricing tables.
navMore on Ableton.com:0.40
navMore on Ableton.com:0.90
contentMore on Ableton.com:0.30
feature-gridMore from Ableton:0.80
pricingLive 12.4 is out now — with Link Audio, updated devices and more0.40
contentThe latest from Ableton0.30
contentTutorial videos0.30
pricingFree downloads0.40
content— (no heading)0.30
footerEducation0.95
⚠ Likely heuristic miss: the two "pricing" sections are the release-banner and downloads grid — neither is a pricing table. The classifier flagged them via dense card layout + monetary signal in card metadata.

Accessibility

Both detected colour pairs pass AAA. The black/white default and white-on-blue brand pair are both well above WCAG 2.1 thresholds.
100%
WCAG contrast score
2 passing pairs · 0 failing pairs · only 2 chromatic combinations in production
The quick brown fox jumps over the lazy dog
#000000 on #FFFFFF
21.00 : 1
AAA
The quick brown fox jumps over the lazy dog
#FFFFFF on #0000FF
8.59 : 1
AAA
designlang v12.10.0 · extracted 2026-05-14 · review compiled 2026-05-14