ElevenLabs PlatformSolutionsUse CasesResources Schedule a Demo

Warm cream editorial with

#c3603a

Terracotta

#1e1c17

Ink

#6a655c

Ash

ElevenLabs

Visit ↗

Warm cream editorial with typewriter accents

A voice-AI marketing site that reads like a small-batch print magazine: cream stock, serif headlines, and a typewriter-inspired mono for callouts. The chromatic accent is a soft terracotta reserved for interactive elements. Illustrations are grainy photography rather than flat vector.

https://elevenlabs.io

Color Palette

ACCENT

Terracotta

#c3603a

--color-terracotta

Primary CTA, link

NEUTRALS

Ink

#1e1c17

--color-ink

Body text, headlines

Ash

#6a655c

--color-ash

Secondary text

Cream

#f6f1e8

--color-cream

Page background

Bone

#efe8db

--color-bone

Section background alternate

Typography

Type Scale

Perfect Fourth (1.333) from 17px base

display

80px · 400 · 1.05

The quick brown fox jumps

heading-lg

48px · 400 · 1.1

The quick brown fox jumps

heading

28px · 500 · 1.25

The quick brown fox jumps

subheading

20px · 500 · 1.35

The quick brown fox jumps

body

17px · 400 · 1.6

The quick brown fox jumps

callout

14px · 400 · 1.5

The quick brown fox jumps

Fonts

display GT Alpina

Weights 400, 500

Sizes 24–80px

Line-height 1.05–1.35

Letter-spacing -0.015em

Fallback Cormorant Garamond, Playfair Display

High-contrast editorial serif.

body Söhne

Weights 400, 500

Sizes 14–20px

Line-height 1.5–1.6

Letter-spacing -0.005em

Fallback Inter, -apple-system

Warm sans for reading.

code GT America Mono

Weights 400

Sizes 12–14px

Line-height 1.4

Letter-spacing 0

Fallback JetBrains Mono, IBM Plex Mono

Typewriter voice for meta and callouts.

Spacing & Shape

Spacing

space-2

8px

Inline gap

space-4

16px

Component padding

space-8

32px

Card padding

space-16

64px

Section gap

Radii

radius-sm

4px

Tags, small chips

radius-md

10px

Cards

Guidelines

Headlines use the editorial serif set at large scale — never body copy.
Terracotta is the only chromatic accent and appears only on interactive elements.
Photography is grainy, warm, and slightly desaturated — never crisp stock.
Callouts in mono use uppercase and appear at 14/1.5 — like a magazine byline.

More like this

AI for Business

Brutalist editorial showroom on warm gray

Reflect Notes

Starlit violet cosmos — a dark editorial notebook

dope.security

Midnight terminal with violet phosphor accents

Hungry Tiger

Turmeric-bright graffiti on a warm cream wall

Apple

White room with a single blue accent

Vercel

Typeset terminal on white paper

# ElevenLabs — Style Reference
> Warm cream editorial with typewriter accents

**Theme:** light

A voice-AI marketing site that reads like a small-batch print magazine: cream stock, serif headlines, and a typewriter-inspired mono for callouts. The chromatic accent is a soft terracotta reserved for interactive elements. Illustrations are grainy photography rather than flat vector.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Terracotta | `#c3603a` | `--color-terracotta` | Primary CTA, link |
| Ink | `#1e1c17` | `--color-ink` | Body text, headlines |
| Ash | `#6a655c` | `--color-ash` | Secondary text |
| Cream | `#f6f1e8` | `--color-cream` | Page background |
| Bone | `#efe8db` | `--color-bone` | Section background alternate |

## Tokens — Typography

**Scale:** Perfect Fourth (1.333), base 17px

| Step | Size | Weight | Line-height |
|------|-----:|-------:|------------:|
| display | 80px | 400 | 1.05 |
| heading-lg | 48px | 400 | 1.1 |
| heading | 28px | 500 | 1.25 |
| subheading | 20px | 500 | 1.35 |
| body | 17px | 400 | 1.6 |
| callout | 14px | 400 | 1.5 |

### Fonts
- **DISPLAY — GT Alpina** · weights 400, 500 · sizes 24–80px · line-height 1.05–1.35 · letter-spacing -0.015em
  - Fallback: Cormorant Garamond, Playfair Display
  - High-contrast editorial serif.
- **BODY — Söhne** · weights 400, 500 · sizes 14–20px · line-height 1.5–1.6 · letter-spacing -0.005em
  - Fallback: Inter, -apple-system
  - Warm sans for reading.
- **CODE — GT America Mono** · weights 400 · sizes 12–14px · line-height 1.4 · letter-spacing 0
  - Fallback: JetBrains Mono, IBM Plex Mono
  - Typewriter voice for meta and callouts.

## Tokens — Spacing & Shape

| Name | Value | Role |
|------|-------|------|
| `space-2` | 8px | Inline gap |
| `space-4` | 16px | Component padding |
| `space-8` | 32px | Card padding |
| `space-16` | 64px | Section gap |
| `radius-sm` | 4px | Tags, small chips |
| `radius-md` | 10px | Cards |

## Guidelines

- Headlines use the editorial serif set at large scale — never body copy.
- Terracotta is the only chromatic accent and appears only on interactive elements.
- Photography is grainy, warm, and slightly desaturated — never crisp stock.
- Callouts in mono use uppercase and appear at 14/1.5 — like a magazine byline.