At a glance
14tokens
11type steps
2radius steps
8pxspacing base
Audible, in one page
Audible's iOS app is a literary listening room rendered in software. The canvas is a warm charcoal (#1A1A1A) — not the cold pure-black of music apps, but a deep, paper-at-night gray that frames book covers like a well-lit shelf. Surfaces step up to #2A2A2A for cards and the player chrome, with #3A3A3A hairline dividers. The mood is calm, premium, and unhurried — this is an app for hours-long sessions, so it avoids visual urgency. Audiobook cover art is the chromatic hero; the UI recedes into warm darkness so the artwork (and the act of reading-by-ear) takes the foreground.
The accent system is a single confident orange. Audible Orange (#FF9900) — the Amazon-family amber — is reserved for the primary action: the play affordance, progress fill, the active chapter, and the primary CTA. A pressed orange (#E68A00) handles tap-down. There is no second brand hue. White (#FFFFFF) is primary text; a soft gray (#B0B0B0) carries author names, narrator credits, and metadata. The orange is the verb; everything else is the warm, quiet room around it.
Typography is a deliberate two-family pairing — and this pairing is the brand's editorial signature. Headers use Playfair Display, a high-contrast transitional serif that signals *literature* the moment you see it; body, metadata, and controls use Inter, a neutral grotesque that stays legible during long sessions (a Voce/serif-headline + sans-body system). Weights stay at 400 / 600 / 700. The most expressive typographic moment is the title screen: the book's title set large in Playfair Display 26-32pt over its cover, with the author in Inter beneath — the look of a hardcover dust jacket.
Key Characteristics:
- Warm charcoal canvas (
#1A1A1A) — a paper-at-night reading room, not cold black - Audible Orange (
#FF9900) as the single accent — play, progress, active chapter, primary CTA - Serif headers (Playfair Display) + sans body (Inter) — the editorial, literary signature
- Audiobook cover hero — large, framed like a hardcover on a shelf
- The player: 30-seconds-back / 30-seconds-forward + a speed dial (0.5×–3.5×)
- Chapter list with the active chapter marked in orange
- Captions toggle (synced text) and a circular progress ring on the cover
- Inter weights 400/600/700; Playfair Display for titles only
Do's and don'ts
Do
- Use a warm charcoal canvas (
#1A1A1A) — a paper-at-night reading room, not cold black - Reserve Audible Orange (
#FF9900) for the primary action, progress, active chapter, and CTA - Pair Playfair Display (titles/headers) with Inter (body/UI) — and keep the roles strict
- Use the
gobackward.30/goforward.30skip controls flanking a 72pt orange Play - Wrap the player cover in an orange circular progress ring
- Give covers a real, soft shadow so they feel like physical books
- Mark the active chapter in orange with a leading bar; check finished chapters
- Make captions large (18pt Inter) — readability while listening comes first
- Use a speed-dial sheet (0.5×–3.5×) with haptic detents and preset chips
Don't
- Don't use cold pure-black — Audible's warmth (
#1A1A1A) is the literary signature - Don't set body or metadata in the serif — Playfair Display is headings/titles only
- Don't add a second accent color — orange is the entire system
- Don't use generic ±10s skip — the 30-second skip is Audible's signature transport
- Don't use full-pill buttons — Audible buttons are 8pt rounded rects
- Don't flatten the covers — their soft shadow conveys physicality
- Don't use thin or black weights — 400/600/700 only
- Don't make the UI feel urgent or dense — this is an unhurried, long-session app
- Don't animate the progress ring with easing — it sweeps linearly with playback
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Audible design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Audible Orange: #ff9900
- Orange Pressed: #e68a00
- Canvas Charcoal: #1a1a1a
- Surface 1: #2a2a2a
- Surface 2: #343434
- Divider: #3a3a3a
- Text Primary: #ffffff
- Text Secondary: #b0b0b0
- Text Tertiary: #6e6e6e
- Progress Orange: #ff9900
Type:
- families: Playfair Display, Headers, Inter, Numerics
- scale: 10, 11, 13, 14, 15, 16, 17, 18, 22
- weights: 400, 600, 700
Shape:
- radius: 8, 10
- elevation: Shadow: `rgba(255,153,0,0.28) 0 6px 22px` (orange glow) | Give covers a real, soft shadow so they feel like physical books | Don't flatten the covers — their soft shadow conveys physicality
Spacing: 8, 13
Rules:
- Use a warm charcoal canvas (`#1A1A1A`) — a paper-at-night reading room, not cold black
- Reserve Audible Orange (`#FF9900`) for the primary action, progress, active chapter, and CTA
- Pair Playfair Display (titles/headers) with Inter (body/UI) — and keep the roles strict
- Use the `gobackward.30` / `goforward.30` skip controls flanking a 72pt orange Play
- Wrap the player cover in an orange circular progress ring
- Give covers a real, soft shadow so they feel like physical books
Avoid:
- Don't use cold pure-black — Audible's warmth (`#1A1A1A`) is the literary signature
- Don't set body or metadata in the serif — Playfair Display is headings/titles only
- Don't add a second accent color — orange is the entire system
- Don't use generic ±10s skip — the 30-second skip is Audible's signature transport
- Don't use full-pill buttons — Audible buttons are 8pt rounded rects
- Don't flatten the covers — their soft shadow conveys physicality
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Audible Orange (
#FF9900): Primary CTA, play button, progress fill, active chapter row, speed-dial active value, "Add to Library". - Orange Pressed (
#E68A00): Tap-down state for the play button and orange CTAs. - Orange Glow (
rgba(255,153,0,0.28)): Soft halo under the play button and the progress ring.
Canvas & Surfaces
- Canvas Charcoal (
#1A1A1A): Primary canvas — the warm reading-room background. - Surface 1 (
#2A2A2A): Cards, the player sheet, list rows, chapter panel. - Surface 2 (
#343434): Pressed rows, elevated panels, the speed-dial sheet. - Divider (
#3A3A3A): Hairline dividers between chapters and list rows.
Text
- Text Primary (
#FFFFFF): Book titles, screen headlines, primary UI text. - Text Secondary (
#B0B0B0): Author names, narrator credits, durations, metadata. - Text Tertiary (
#6E6E6E): Disabled state, very low-emphasis labels.
Semantic
- Progress Orange (
#FF9900): The circular progress ring on the cover and the linear chapter progress. - Active Chapter (
#FF9900): The currently-playing chapter's title + a leading orange bar. - Finished Check (
#FF9900): Completed-book / finished-chapter checkmark. - Captions Active (
#FF9900): The Captions toggle when synced text is on. - Error Red (
#E5484D): Download failures, playback errors.
Light Mode
Audible's primary listening experience is the warm-dark reading room. A light variant exists for some browse contexts, but the player and library default to charcoal — the warm darkness is core to the long-session, literary identity.
Type scaleRead the full spec
Font Family
- Headers:
Playfair Display(high-contrast transitional serif) — titles, hero, section headers - Body / UI:
Inter(neutral grotesque) — body, metadata, controls, lists, buttons - Production Fallback (headers):
'Playfair Display', Georgia, 'Times New Roman', serif - Production Fallback (body):
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerics: Tabular figures (Inter) for time remaining and speed values
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Title Screen (Large) | Playfair Display | 30pt | 700 | 1.15 | 0pt | Book title on the player hero |
| Book Title | Playfair Display | 26pt | 700 | 1.2 | 0pt | Title on detail / now-playing |
| Section Header | Playfair Display | 22pt | 700 | 1.2 | 0pt | "Continue Listening", "From Your Wishlist" |
| Card Title (Serif) | Playfair Display | 17pt | 700 | 1.3 | 0pt | Audiobook tile title |
| Author / Subtitle | Inter | 14pt | 400 | 1.3 | 0pt | "By Madeline Miller" |
| Narrator Credit | Inter | 13pt | 600 | 1.3 | 0.2pt | "Narrated by Jake Gyllenhaal" |
| Chapter Title | Inter | 16pt | 600 | 1.3 | 0pt | Chapter row in the chapter list |
| Body | Inter | 15pt | 400 | 1.5 | 0pt | Book summary, About the author |
| Captions Text | Inter | 18pt | 400 | 1.6 | 0pt | Synced caption line (large for readability) |
| Meta / Time | Inter | 13pt | 400 | 1.3 | 0pt | "8 hrs 14 min left", tabular |
| Label (UPPER) | Inter | 11pt | 700 | 1.2 | 0.8pt | "AUDIBLE ORIGINAL", section eyebrow |
| Button (Primary) | Inter | 16pt | 700 | 1.0 | 0.2pt | Orange "Play" / "Add to Library" |
| Button (Secondary) | Inter | 14pt | 600 | 1.0 | 0pt | Outline "Sample" |
| Speed Value | Inter | 15pt | 700 | 1.0 | 0pt | "1.5×" on the speed dial, tabular |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
Principles
- Two families, strict roles: Playfair Display = headings/titles only; Inter = everything else. Never set body in the serif.
- Weights 400 / 600 / 700: regular, semibold, bold — no thin, no black (Playfair's high contrast supplies the drama)
- No tracking on the serif (0pt — Playfair's optical spacing is intrinsic); small positive tracking on Inter all-caps labels
- Tabular numerals on time-remaining and speed values so digits don't shift mid-session
- Captions are intentionally large (18pt) — readability while listening is the priority
- Dynamic Type respected on titles, authors, body, captions; speed value and tab labels stay fixed
Components and layoutRead the full spec
Buttons
Primary Play Button (Player)
- Shape: Circle, diameter 72pt
- Background:
#FF9900 - Icon: SF Symbol
play.fill/pause.fillin#1A1A1A(dark glyph on orange — warm contrast) - Pressed: scale 0.93, background
#E68A00, with.impactOccurred(.medium)haptic - Shadow:
rgba(255,153,0,0.28) 0 6px 22px(orange glow)
30-Second Skip Buttons (flanking Play)
- Shape: 44pt circular tap area, no fill (icon-only)
- Icon: SF Symbol
gobackward.30(back) /goforward.30(forward), 30pt,#FFFFFF - The "30" numeral is part of the glyph — these are Audible's signature transport controls
- Pressed: scale 0.9, brief orange tint flash, light haptic
Primary Pill (Add to Library / Play)
- Background:
#FF9900 - Text:
#1A1A1A - Padding: 13pt vertical, 28pt horizontal
- Corner radius: 8pt (Audible uses a soft rounded rect, not a full pill)
- Font: Inter 16pt weight 700, +0.2pt tracking
- Pressed:
#E68A00, scale 0.98
Outline Pill ("Sample" / "In Library")
- Background: transparent
- Text:
#FFFFFF - Border: 1pt solid
#B0B0B0 - Padding: 13pt vertical, 24pt horizontal
- Corner radius: 8pt
- Font: Inter 14pt weight 600
- Pressed: border
#FF9900, text#FF9900
Icon Actions (Bookmark, Sleep, Bookmarks list, Share, More)
- Size: 22pt glyph, 44pt hit area
- Default:
#B0B0B0 - Active:
#FF9900(bookmarked, sleep timer running) - Spacing: evenly distributed in the player's secondary action row
Text Button ("See all", "Details")
- Font: Inter 14pt weight 700
- Color:
#B0B0B0 - No underline, 44pt hit area
Cards & Containers
Audiobook Tile (Horizontal shelf)
- Width: 150pt
- Aspect: 1:1 square cover, 8pt corner radius, subtle
rgba(0,0,0,0.4) 0 6px 16pxshadow (covers feel like physical objects) - Gap between tiles: 16pt
- Structure: cover → title (Playfair Display 17pt 700, 2-line clamp) → author (Inter 13pt 400
#B0B0B0) - A thin orange progress underline beneath in-progress tiles
- Tap: scale 0.97 with light haptic
Continue-Listening Row
- Height: 96pt
- Layout: 72pt × 72pt cover (8pt radius) with an orange circular progress ring around it → stacked title (Playfair 17pt 700) + author (Inter 13pt 400) + "8 hrs left" (Inter 12pt 400
#B0B0B0) → trailing 56pt orange play circle - Background:
#2A2A2Acard, 12pt radius
Player (Now Playing — Full Screen)
- Cover art centered, ~280pt × 280pt, 10pt corner radius, with an orange circular progress ring tracking around its perimeter (4pt stroke,
#FF9900, remaining track#3A3A3A) - Below: book title (Playfair Display 30pt 700) + author (Inter 14pt 400
#B0B0B0) + narrator (Inter 13pt 600) - Transport:
gobackward.30· 72pt orange Play ·goforward.30 - Below transport: chapter scrubber + "8 hrs 14 min left" (tabular)
- Action row: speed pill · sleep timer · bookmark · chapters · car mode
- Drag up: chapter list sheet
Chapter List Sheet
- Bottom sheet, 16pt top corner radius, surface
#2A2A2A - Each chapter row: chapter number + title (Inter 16pt 600) + duration (Inter 13pt 400
#B0B0B0, tabular) - The active chapter: title in
#FF9900with a 3pt orange leading bar; finished chapters show a small orange check
Speed Dial Sheet
- Bottom sheet, 16pt top corner radius
- A horizontal arc/slider of speed stops from 0.5× to 3.5× (0.05 increments, snapping to .25 ticks)
- The selected value renders large center (Inter 22pt 700
#FF9900, e.g. "1.5×") - Quick chips: 1.0× · 1.25× · 1.5× · 2.0× as one-tap presets
Navigation
Bottom Tab Bar
- Height: 54pt + safe area
- Background:
rgba(26,26,26,0.96)with.regularMaterialblur - Tabs: Home, Library, Discover, Profile
- Icon size: 24pt
- Active color:
#FF9900; inactive:#B0B0B0 - Labels: Inter 10pt weight 600, shown always
- Active icon: filled SF Symbol variant; inactive: outlined
Now Playing Mini Bar
- Sits directly above the tab bar, full width, 56pt tall
- Background:
#2A2A2A - A 3pt orange progress line pinned to the very top edge of the mini bar
- Left: 40pt cover (6pt radius); center: title (Playfair Display 14pt 700, single line) + author (Inter 11pt 400
#B0B0B0) - Right:
gobackward.3020pt +play.fill/pause.fill22pt - Tap: expands to the full player with a shared-element transition
Top Nav (Library / Home Entry)
- Height: 44pt + safe area
- Title centered (Playfair Display 22pt 700), search + settings top-right
- Filter chips row below on Library (32pt height pills): "All", "Unfinished", "Downloaded"
Input Fields
Search Bar
- Background:
#2A2A2A - Height: 44pt
- Corner radius: 10pt
- Leading SF Symbol
magnifyingglass, 18pt,#B0B0B0 - Placeholder: "Search Audible", 16pt 400
#B0B0B0 - Focus: 1pt
#FF9900border, cursor orange - Text in field:
#FFFFFF
Filter Chip
- Background:
#2A2A2Adefault /#FF9900selected - Text:
#FFFFFFdefault /#1A1A1Aselected - Padding: 8pt vertical, 18pt horizontal
- Corner radius: 8pt
- Font: Inter 14pt weight 600
- Examples: "All", "Unfinished", "Downloaded", "Audible Originals"
Distinctive Components
The Speed Dial + 30s Skip Player (Signature)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 130pt shelf tiles; player cover 240pt |
| iPhone 13/14/15 | 390pt | Standard 150pt tiles; player cover 280pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | 170pt tiles; player cover 320pt; larger captions panel |
| iPad | 768pt+ | 3-column grid; player cover 420pt, chapter list as a side panel |
Dynamic Type
- Book titles, authors, body, captions, chapter titles: full scale (captions scale generously — readability priority)
- Speed value ("1.5×"): fixed 15pt (dial geometry is exact)
- Time-remaining: scales but stays tabular
- Play button: icon size fixed (32pt within the 72pt circle)
- Tab labels: fixed 10pt
Orientation
- Home / Library / Discover: portrait-locked
- Player: portrait-locked (the cover-ring composition is portrait-tuned)
- Car mode: a simplified large-control layout, landscape-friendly
Touch Targets
- Play button: 72pt — unmissable for at-a-glance control
- 30s skip: 44pt circular hit area each
- Speed pill: ≥44pt tall
- Chapter rows: 56pt height, full-row tappable
- Tab icons: 24pt glyph, 44pt effective hit
Safe Area Handling
- Top: safe area honored on nav (Dynamic Island clears the title)
- Bottom: mini-bar floats above tab bar; both respect the home indicator
- Sides: 16pt content insets
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-audible {--page-bg: #1a1a1a;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #ff9900;
--link-hover-color: #cc7a00;
--border-color: #434343;
--card-bg: #1a1a1a;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #2c2c2c;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #1a1a1a;
--footer-text-color: #afafaf;
--button-bg: #ff9900;
--button-text-color: #000000;
--button-hover-bg: #cc7a00;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #282828;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #353535;
--button-secondary-border: 1px solid #434343;
--prompt-bg: #252525;
--prompt-text-color: #ffffff;
--base-font: var(--font-serif);
--heading-font: var(--font-inter);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- clubhouse 89.5%
- lemon8 83.9%
- plex 82.4%
- happn 81.6%
- coffee meets bagel 81.3%
Where this came from
- Source document
ios/design-md/music/audible/DESIGN.md· 21.5 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.