CURATED · OPEN · FREE

Elevenlabs

Premium AI audio platform with a clean, warm, and slightly playful aesthetic.

SaaSAIProductCleanProductivity
Elevenlabs screenshot
↓ Download design system (28 MB)Open in OpenDesign

Visit: https://elevenlabs.io

📦 Browse pack contents →

01

Identity DNA

AI voiceenterprisecreativedeveloperaudio

A high-end recording studio interface brought to a clean digital canvas

02

Color

#000000Ink
#777169Ink soft
#FDFCFCBG
#F5F3F1BG soft
#EBE8E4BG quiet
#E5E5E5Muted
rgba(0,0,0,0.05)Line

High-contrast ink on warm neutrals with soft, organic gradients for accents

03

Typography

geometric-sans · humanist-sans · geometric-mono

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

Consistent use of 8px and 16px increments for padding and gaps

05

Surfaces

sm · 4px
md · 8px
lg · 20px
pill · 9999px

Very subtle 1px borders in rgba(0,0,0,0.05) or rgb(229,229,229)

0 1px 2px 0 rgba(0,0,0,0.04) · 0 2px 4px 0 rgba(0,0,0,0.04) · 0 0 0 1px rgba(0,0,0,0.06)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Clean, single-column layout with generous whitespace and centered containers

07

Motion & Interaction

150msmicro
300mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions for color and background on hover

Color and background-color transitions with 0.15s duration · Subtle transform or opacity change

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

A premium AI audio platform (SaaS) for enterprises and creators. Key colors are warm off-white (#FDFCFC) for backgrounds, solid black (#000000) for ink, and soft muted tones (#777169, #EBE8E4). Typography combines geometric-sans for display with humanist-sans for body. Critical don'ts: avoid pure white backgrounds, use 9999px pill radius for buttons, never use high-chroma accent colors, use generous whitespace, use 500 font-weight for display text, avoid complex background patterns.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko