Ableton

# Ableton — Style Reference
> High-contrast digital studio. A canvas of stark black and white, illuminated by electric blue.

**Theme:** light

**Site:** https://ableton.com

This design system presents a digital canvas for creative tools, characterized by its stark, high-contrast monochrome base with strategic, vibrant accents. The primary palette of black and white, occasionally softened by light gray, is frequently punctuated by a singular, intense violet-blue. This creates an energetic, almost electric, feel, reflecting the dynamic nature of music production. Typography is assertive and direct yet uses a soft geometry, balancing instruction with visual appeal.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Electric Violet | `#0000ff` | `--color-electric-violet` | Interactive elements like navigation links, primary call-to-action buttons, active states – a high-energy focal point that signifies interaction and importance. |
| Melody Red | `#ff8389` | `--color-melody-red` | Categorization badges on content cards – a warm, vibrant accent for content taxonomy. |
| Synth Teal | `#00d2be` | `--color-synth-teal` | Categorization badges on content cards – a cool, energetic accent for content taxonomy. |
| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, borders, button text, iconic elements – provides strong legibility and defines structural outlines. |
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, card surfaces, button backgrounds – the primary stage for all content. |
| Studio Gray | `#eeeeee` | `--color-studio-gray` | Input field backgrounds, subtle background separations – provides minimal visual distinction in UI elements. |

## Tokens — Typography

### futura-pt
- **Substitute:** Futura
- **Weights:** 400, 700
- **Sizes:** 14px, 16px, 20px, 24px, 30px, 40px, 90px
- **Line height:** 1, 1.2, 1.4, 1.5
- **Letter spacing:** normal
- **Role:** The primary typeface for all content, from headings to body text and interactive elements. Its geometric forms provide a technical yet approachable feel, integral to the brand's identity creating a forward-thinking aesthetic.

## Tokens — Spacing

- **Section gap:** 69px
- **Card padding:** 0px
- **Element gap:** 10px

## Tokens — Radius

- **all:** 0px

## Layout

The page exhibits a mix of full-bleed and constrained content. The hero section is full-bleed, showcasing a product shot with a large, centered headline. Subsequent sections often feature a `1200px` max-width centered container, breaking into two-column layouts with text on one side and a corresponding image or nested content cards on the other. Vertical rhythm is established through consistent section gaps, maintaining a comfortable density. Navigation is a sticky top bar, providing persistent access to key tools. Content is arranged to present information in visually digestible blocks, often in grids of 3, keeping visual clutter to a minimum and emphasizing direct interaction with media and text.

## Imagery

The visual language is utilitarian and product-focused, featuring tight shots of hardware and software interfaces. Photography often captures studio environments or creative practitioners interacting with Ableton's tools, lending an authentic, creator-centric feel. Treatments are generally full-bleed or contained within sharp-edged containers, with a raw, unpolished quality that suggests real-world usage rather than glossy abstraction. Icons are monochrome, often Midnight Ink on Canvas White backgrounds, with a clear, outlined style that complements the geometric typography. Imagery serves primarily to showcase the product's functionality and its place in the creative process, blending seamlessly with the high-contrast UI.

## Components

### Blog Post Card Grid

### Category Tag Collection

### CTA Banner with Input

### Primary Call-to-Action Button
*Action*

Solid Electric Violet background (#0000ff) with Canvas White text (#ffffff), no border-radius, 7px vertical and 30px horizontal padding. Font is futura-pt 400.

### Category Tag Button - Melody Red
*Categorization*

Solid Melody Red background (#ff8389) with Midnight Ink text (#000000), no border-radius, 1.96px vertical and 11.9px horizontal padding. Font is futura-pt 400.

### Category Tag Button - Synth Teal
*Categorization*

Solid Synth Teal background (#00d2be) with Midnight Ink text (#000000), no border-radius, 1.96px vertical and 11.9px horizontal padding. Font is futura-pt 400.

### Ghost Button
*Secondary action*

Transparent background, Midnight Ink text (#000000), no border-radius or visible padding, typically used for inline actions.

### Basic Card
*Content container*

Transparent background, no border-radius, no box shadow, 0px padding. Acts as a structural grouping without adding visual weight.

### Input Field
*Form Element*

Studio Gray background (#eeeeee) with Midnight Ink text (#000000), no border-radius, 8px vertical and 15px horizontal padding. Font is futura-pt 400.

### Navigation Link
*Navigation*

Midnight Ink text (#000000) for unselected state, Electric Violet (#0000ff) for active/hover state. Font is futura-pt 400, 16px. No specific padding detected, relies on element spacing.

### Hero Headline
*Primary heading*

Midnight Ink text (#000000), futura-pt 700 at 90px size, line-height 1.0. Used for dominant page titles capturing immediate attention.

## Guidelines

### Do

- Use Midnight Ink (#000000) for all primary text elements to ensure high contrast.
- Apply Canvas White (#ffffff) as the default background for content sections.
- Utilize Electric Violet (#0000ff) exclusively for primary interactive elements, such as CTA buttons and active navigation links, to draw attention.
- Maintain a consistent `0px` border-radius across all buttons, cards, and input fields for a sharp, unyielding aesthetic.
- Employ futura-pt throughout the UI, with variations in weight and size to create hierarchy while retaining brand consistency.
- Maintain minimal vertical padding of 1.96px for utility tags with a vibrant background and 7px for primary action buttons.

### Don't

- Avoid using drop shadows or complex gradients; the aesthetic relies on flat, high-contrast surfaces.
- Do not introduce additional rounded corners beyond `0px`; sharp edges are a defining characteristic.
- Do not deviate from the futura-pt typeface; alternative fonts will dilute the brand's typographic identity.
- Refrain from using Electric Violet (#0000ff) for purely decorative elements; reserve it for interactive or highlight states.
- Do not use background colors other than Canvas White (#ffffff) or Studio Gray (#eeeeee) for primary content containers; chromatic colors are for accents only.
- Avoid excessive spacing between elements; a comfortable but not overly sparse density is preferred, often using `10px` element gaps.

## Agent Prompt Guide

**Quick Color Reference:**
- Text: #000000 (Midnight Ink)
- Background: #ffffff (Canvas White)
- CTA: #0000ff (Electric Violet)
- Border: #000000 (Midnight Ink - where applicable)
- Accent: #ff8389 (Melody Red)

**3-5 Example Component Prompts:**
1. Create a primary call-to-action button: background #0000ff, text #ffffff, futura-pt 400 16px, padding 7px 30px, border-radius 0px, text 'Try Live 12 free'.
2. Design a content card: transparent background, 0px border-radius, no shadow. Above the content, place a category tag: background #ff8389, text #000000, futura-pt 400 14px, padding 1.96px 11.9px, text 'Downloads'.
3. Generate a primary heading: text #000000, futura-pt 700 90px, line-height 1.0, text 'Rent-to-own – now available for all upgrades'.
4. Create an input field: background #eeeeee, text #000000, futura-pt 400 16px, padding 8px 15px, border-radius 0px, placeholder text 'Search...'.
5. Implement a navigation link: text #000000, futura-pt 400 16px, on hover/active change text to #0000ff, text 'Shop'.