Ableton. Editorial workshop on stark white.
- Productivity
- Light theme
- 6 colors
- 1 typeface
Ableton's visual system reads like a working studio's editorial wall: stark white canvas, Futura PT geometry, and one confident blue that marks every interactive text. The site is text-first and almost ruthlessly flat — no shadows, no rounded corners, no decorative chrome — letting photography of musicians, hardware, and software do the emotional work. Color appears as small functional punctuation: a vivid blue for links, plus coral and teal tag fills that categorize content without softening it. Navigation is a thin top bar of monospace-feeling product names. The overall feel is that of a well-set technical manual that happens to be beautiful — information density carried by typography and image, not by container design.
Ableton design system
Brand1
Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Accent2
Category tag fills (Downloads, News) — flat rectangular badges that classify content without padding the layout
Category tag fills (Tutorials, Videos) — flat rectangular badges paired with coral to split content taxonomy visually
Neutrals3
Primary text, nav labels, logo, icon strokes, and every text-level heading — sets the full information hierarchy
Subtle form inputs, tag surfaces, and quiet secondary panel backgrounds — barely-there neutral
Page canvas, card surface, and hero overlay text — the default background for almost every screen
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper on Signal Blue
8.59 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
