What is Audible's primary brand color?

Audible's brand voltage is a saturated Amazon-orange wired into CSS as --adbl-accent-pressed and --adbl-progress-bar. It is reserved for the 'Start free trial' CTA pill and the progress-bar fill in the audiobook player; on the captured marketing page it appears as the single orange pill above the cover-art mosaic. Audible also declares a softer accent-hover orange and a darker brand-fill brown for hover/press states. The orange voltage is the single chromatic moment on the otherwise midnight-blue canvas — every other surface is white text on dark, or dark text on the pale sky-blue marketing bands. The orange A sound-wave logo mark is the system's mascot.

What typeface does Audible use, and what should I use as a substitute?

Audible runs Audible Sans (a proprietary Amazon-family sans) across every typographic tier — display, heading, body, button, nav, and metadata. Display headlines sit at 36-48px in weight 700; sub-headings at 18-24px in weight 700; body at 16px in weight 400; nav links and sub-headings at 14-16px in weight 600; metadata labels at 14px in weight 400. There is no second typeface and no monospace tier on the captured surface. The closest open-source substitute is Inter at the same weights; Public Sans is the next-closest if a more neutral feel is needed. Avoid mixing Audible Sans with a serif display family — the system is single-face by discipline.

Why does Audible use a near-black midnight instead of pure black?

The canvas is #010e19, a deep blue-shifted near-black wired as --adbl-midnight-fill (and as --adbl-primary-fill, --adbl-on-accent, --adbl-scrim, and four more CSS custom properties — the token has nine separate semantic roles). The slight blue shift away from pure #000000 carries the brand warmth on the dark surface; pure black would feel borrowed from a Netflix or a Spotify near-black, both of which run flat blacks. Audible's #010e19 is closer to the navy a print publisher would use for hardcover bindings — the audiobook context wants a 'library at night' surface, not a 'streaming app in dark mode' surface.

Why does the page alternate between dark and light bands?

The marketing site toggles between the midnight floor (#010e19) and a pale sky-blue band (#dae9f9 — wired as --adbl-surface-base, --adbl-progress-bar-empty, --adbl-placeholder-background, and five more CSS variables) roughly every 480-560px of vertical scroll. The dark bands hold cover-art mosaics with white display text; the light bands hold marketing copy with dark text. The alternation gives the page rhythm without changing the underlying cover-art grid that anchors every section. Single-canvas streaming brands (Spotify, Apple Music, Tidal) hold one tone end-to-end and rely on card stacking for rhythm; Audible inverts the relationship — the band tone is the rhythm, and the cards stay constant.

What is Audible's corner-radius philosophy?

The radius scale is small. 16px appears 10 times on cover-art tile frames, on the marketing band cards, and on the larger feature cells. 9999px (full pill) appears 6 times — every primary CTA, every nav-link hover state, and the progress-bar in the player. 1px renders on hairline-bordered surfaces. There is no 4-8px middle tier — adding one would soften the cover-art mosaic into a SaaS card grid, and Audible's catalog-as-content premise needs the tiles to feel like physical media (book spines, vinyl sleeves) more than UI cards. The cover-art tiles' 16px radius is the heaviest moment in the system; the pill is the warmest.

Can I use this DESIGN.md to build my own audiobook subscription site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Audible's specific moves: midnight-blue marketing canvas, single Amazon-orange voltage reserved for the trial CTA, alternating dark/sky-blue band rhythm, 16px-rounded cover-art tiles with 1px hairline outlines, and Audible Sans across every tier. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The move worth borrowing only if your product is catalog-led: the alternating band rhythm. For a flat-canvas SaaS, the toggling reads as inconsistent surface; for a media catalog where the cover-art grid is the protagonist, it gives each band its own visual register.

Audible Design System

Audible's marketing site as a DESIGN.md file — Amazon-orange CTA on a midnight-blue floor, Audible Sans across every tier, cover-art mosaics in 16px-rounded tiles with a 1px hairl…

About Audible DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source audible.com

Music, Video & Streaming

Audible's logged-out marketing site composes like a turntable display in a bookstore. The above-fold band sits on a near-black midnight floor with a 36px Audible Sans display headline in white ("Listen free for 30 days with our newest plan"), a single Amazon-orange CTA pill, and a 5-by-2 grid of audiobook cover-art tiles arrayed behind the copy. Below the fold the page alternates between the same midnight surface and a pale sky-blue band that holds the marketing pitches ("We've got what everyone's listening to"), and every band returns to the same cover-art mosaic as its visual proof. Where Spotify holds its lime-green to the Play button and Apple Music runs photography-led card grids on white, Audible commits fully to a "shelf full of audiobooks" composition — the product (the catalog) is also the marketing material.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 18 color tokens drawn from the 137-entry `--adbl-*` CSS custom-property palette (every brand token namespaces under the `--adbl-` prefix), 11 typography tokens spanning four Audible Sans weights — 400 body, 600 nav and sub-heading, 700 display, with a 14px / 400 metadata tier for cover-art captions — 4 radius tokens (16px on cover-art tiles, 9999px on the CTA pill, 1px on hairlines, plus a derived `0px`), 7 spacing values on a 4px / 8px base, and 18 components covering the orange CTA, the cover-art tile, the dark hero band, the sky-blue marketing band, the Audible Sans display headline, and the nav band.

Feed this file to an AI coding tool and it reproduces Audible's specific moves: midnight-blue marketing surface instead of pure black or white, single Amazon-orange voltage reserved for the trial CTA, alternating dark/sky-blue band rhythm to break up the cover-art mosaics, 16px-rounded rectangular audiobook tiles with 1px hairline outlines (not shadows), and Audible Sans across every tier with weight escalating from 400 body to 700 display. The move worth borrowing: the alternating band rhythm. Most streaming brands hold a single-canvas tone end-to-end; Audible toggles between midnight and sky-blue to give each section a different visual register without changing the cover-art grid that anchors every band.

What makes it distinct

Midnight floor over whitethe marketing hero sits on #010e19 with white text, then sections alternate with pale sky-blue (#dae9f9) bands holding marketing copy
Orange CTA voltageAmazon-orange #ff8909 reserved for the 'Start free trial' pill; declared as --adbl-accent-pressed and --adbl-progress-bar across the token system
Audible Sans, four weights400 for body, 600 for nav/sub-heading, 700 for display, 800 reserved for the wordmark
Cover-art mosaic as contentrectangular audiobook tiles in 16px-rounded frames anchor every band, each with a 1px hairline outline #d1d6d7 (513 border occurrences)
16px and pill radius onlyno 4-8px middle tier; tiles round at 16px, CTAs round at 9999px, hairlines render at 1px

Live at audible.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

audible.com

Explore Audible

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Audible design system FAQ

Common questions about Audible's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Audible — official site

Audible's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.