CURATED · OPEN · FREE
Elevenlabs
Premium AI audio platform with a clean, warm, and slightly playful aesthetic.
SaaS AI Product Clean Productivity
01
Identity DNA
AI voice enterprise creative developer audio
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
display 56px · 500heading 32px · 500body 18px · 400small 14px · 40004
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
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Clean, single-column layout with generous whitespace and centered containers
07
Motion & Interaction
150ms micro
300ms small
300ms medium
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
button Pill-shaped (9999px radius) with solid black background for primary and white/outlined for secondary card Light gray background with very subtle border-radius (20px) and soft shadows chip Pill-shaped with 1px border and transparent background input Clean with 1px subtle border and rounded corners hero Large bold headline left-aligned with supporting text and pill buttons 09
Voice & Don'ts
Tone Professional, innovative, and slightly playful Headlines Large, bold, geometric sans-serif headlines with tight letter-spacing CTAs Pill-shaped buttons with solid black fill for primary actions Don't use pure white backgrounds — screenshot shows a warm off-white (#FDFCFC) instead Don't use sharp corners — screenshot shows 20px radius on large cards and 9999px on buttons Don't use high-chroma accent colors — screenshot shows organic, soft gradients instead Don't use thin, light fonts for headlines — screenshot shows 500 weight for display text Don't use complex backgrounds — screenshot shows clean, mostly flat surfaces Don't use tight spacing — screenshot shows generous padding (160px top) and gaps (48px) Avoid: Loud colors Avoid: Aggressive typography Avoid: Cluttered layouts Avoid: Technical jargon in hero copy 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 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.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: Worth including as a prime example of a modern, premium SaaS aesthetic that balances professionalism with a warm, slightly playful feel through its use of soft gradients and rounded shapes.
