---
title: "ElevenReader design system"
variant: extended
source: https://elevenreader.io/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/elevenreader-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ElevenReader · Design System

> Quiet editorial design for a world of listening

**Theme:** light · **Industry:** ai · **Source:** https://elevenreader.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ElevenReader’s homepage pairs a calm, near-white canvas with a confident black-and-white interface and vivid book artwork. Spacious editorial sections, rounded controls, and product previews make a voice-reading service feel approachable and content-rich.

## North star

Keep the interface quiet and near-white, letting expressive book artwork and clear listening actions provide the visual emphasis.

## Overview

The page uses a near-white canvas (#fdfcfc) from hero through footer, so colour comes primarily from the books, app screens, and video rather than large branded bands. Black (#000000) anchors headlines, navigation, links, and the pill-shaped primary actions; muted greys keep supporting copy quiet. Warm off-white cards (#f5f3f1) distinguish upload, testimonial, and pricing surfaces without breaking the restrained palette. Waldenburg headlines have a light, open editorial character, while Inter handles compact navigation, body copy, controls, and metadata. The centered hero pairs a floating stack of book covers with a large two-line headline and concise calls to action. Lower sections alternate centered introductions with left-aligned feature areas, horizontal book and genre displays, app mockups, reviews, and pricing cards. Generous vertical separation lets each content-rich showcase breathe. Rounded pills and soft card corners temper the otherwise flat, minimal interface; accent colours are sparse and mostly belong to book or product imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Reader White | `#fdfcfc` | `--color-reader-white` | brand | Dominant page canvas behind the hero and every major section; also supports subtle fades around content. |
| Listening Ink | `#000000` | `--color-listening-ink` | brand | Primary text, headings, navigation, book links, and filled listening calls to action. |
| Paper Warmth | `#f5f3f1` | `--color-paper-warmth` | surface | Soft card background for testimonials, pricing, and reading or audiobook product surfaces. |
| Soft Charcoal | `#4b4a4a` | `--color-soft-charcoal` | neutral | Muted supporting copy that remains readable without competing with headlines. |
| Quiet Divider | `#e4e2e0` | `--color-quiet-divider` | neutral | Subtle borders and hairlines around cards and controls. |
| Offer Green | `#307d18` | `--color-offer-green` | semantic | Savings badge text; a small promotional cue rather than a primary brand colour. |
| Caption Grey | `#656565` | `--color-caption-grey` | neutral | Secondary descriptions, compact labels, and understated link or control text. |
| Mist Border | `#eae9e9` | `--color-mist-border` | neutral | Faint card and surface edging; use only for low-contrast separation. |
| Stone Edge | `#d6d3ce` | `--color-stone-edge` | neutral | Quiet secondary outlines and card details. |
| Cover Ochre | `#a0713a` | `--color-cover-ochre` | accent | Accent observed in book-card artwork; not a broad interface colour. |
| Cover Umber | `#6f5546` | `--color-cover-umber` | accent | Brown detail within product imagery; keep it confined to illustrated or photographed content. |
| Narrator Coral | `#f58971` | `--color-narrator-coral` | accent | Coral accent in a product showcase illustration, not a page-wide CTA colour. |
| Cover Violet | `#7767d8` | `--color-cover-violet` | accent | Violet detail appearing in book or product-card imagery. |
| Cover Slate | `#6a668d` | `--color-cover-slate` | accent | Muted violet-grey within imagery rather than a defining interface tone. |
| Pale Text | `#b6b6b6` | `--color-pale-text` | neutral | Very subdued supporting text or decorative interface detail. |
| Warm Outline | `#8e8880` | `--color-warm-outline` | neutral | Measured input outline tone for the upload-and-listen field. |

### Semantic aliases

`--color-canvas` → `#fdfcfc` (Reader White) · `--color-surface` → `#f5f3f1` (Paper Warmth) · `--color-text` → `#000000` (Listening Ink) · `--color-text-muted` → `#4b4a4a` (Soft Charcoal) · `--color-text-subtle` → `#656565` (Caption Grey) · `--color-border` → `#e4e2e0` (Quiet Divider) · `--color-accent` → `#a0713a` (Cover Ochre) · `--color-accent-2` → `#f58971` (Narrator Coral) · `--color-accent-3` → `#7767d8` (Cover Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fdfcfc` | 20.51:1 | AAA |
| `#000000` | `#f5f3f1` | 18.97:1 | AAA |
| `#4b4a4a` | `#fdfcfc` | 8.62:1 | AAA |
| `#4b4a4a` | `#f5f3f1` | 7.98:1 | AAA |
| `#656565` | `#fdfcfc` | 5.69:1 | AA |
| `#656565` | `#f5f3f1` | 5.27:1 | AA |
| `#a0713a` | `#fdfcfc` | 4.17:1 | AA-large |
| `#a0713a` | `#f5f3f1` | 3.86:1 | AA-large |

### Gradients

- `linear-gradient(in oklab, rgb(253, 252, 252) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top in oklab, rgb(253, 252, 252) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left in oklab, rgb(245, 243, 241) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgb(245, 243, 241) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, buttons, links, captions, badges, and compact product labels. | Inter |
| Waldenburg | `--font-display` | webfont | 375, 400, 700 | Headlines, including the hero statement and section titles. | Inter |

- **Inter:** Measured weights 400–700; generally sentence case, with small tracking on body, caption, navigation, and button text.
- **Waldenburg:** Measured light-to-regular headline weights; use restrained negative tracking on the hero and natural sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.339, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 375 | 1.17 | -0.01em | — | Waldenburg | Large, light hero headline; concise statement with a close two-line composition. |
| h2 | 24px | 400 | 1.33 | 0 | — | Waldenburg | Section titles introducing features, reviews, pricing, and content collections. |
| h3 | 20px | 400 | 1.35 | 0 | — | Waldenburg | Subheads within feature areas and supporting content blocks. |
| body | 15px | 400 | 1.47 | 0.01em | — | Inter | Descriptions, feature explanations, review copy, and pricing details. |
| caption | 13px | 400 | 1.38 | 0.01em | — | Inter | Small metadata, author names, book details, and supporting labels. |
| button | 16px | 400 | 1.4 | 0.01em | — | Inter | Primary and secondary listening, upload, and subscription actions. |
| nav | 14px | 400 | 1.43 | 0.01em | — | Inter | Header navigation and compact in-product navigation labels. |
| link | 13px | 400 | 1.38 | 0.01em | — | Inter | Small text links for books, authors, and supporting destinations. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 11, 12, 16, 18, 20, 22, 24, 28, 32, 56, 64 px.
- Section rhythm 56px · element gap 16px · card padding 18px · max content width 780px.

The page is arranged as a long, single-column sequence with a measured 780px maximum content width and comfortable density. Hero and selected section introductions are centered; feature demonstrations, review content, and footer columns shift to left-aligned or multi-column layouts. Horizontal carousels and cover rows create breadth within the otherwise contained page. The measured spacing system uses a 4px base, with a 56px section rhythm and 16px element gap. Preserve large visual pauses between showcases rather than filling every available area.

## Shape & elevation

- Radius: button `50%` · input `24px` · card `24px` · badge `9999px` · nav `9999px` · link `20px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `8px` · 2xl `10px` · pill `9999px`
- Shadow `sm` (other, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px`
- Shadow `hairline` (button, link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px`
- Shadow `hairline-2` (input, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm-3` (button): `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`
- Shadow `sm-4` (other, card): `rgba(0, 0, 0, 0.4) 0px 0px 0.991453px 0px, rgba(0, 0, 0, 0.04) 0px 0.991453px 0.991453px 0px, rgba(0, 0, 0, 0.04) 0px 1.98291px 4.00395px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.31, 0.325, 0, 0.92)` on interactive elements.

Most sections sit flat on the near-white canvas. Warm off-white cards provide separation through fill and rounded corners rather than strong shadows; controls use faint hairline outlines, with only restrained soft shadowing on selected buttons or layered surfaces. Avoid heavy dark drop shadows and strong dividing bands.

## Imagery

Book covers are the dominant expressive imagery, shown as layered stacks in the hero and as horizontal collections in library and genre sections. Product areas use app-interface mockups and voice-selection panels; one wide video preview adds cinematic photography. Keep images crisp and recognizably content-led, with rounded presentation surfaces where shown. Their saturated colours are largely artwork, not a reason to colour the surrounding interface.

## Components

### Pill actions

Use fully rounded controls; the main listening action is black with white Inter text, while secondary actions are light with a delicate outline.

### Book-cover carousel

Present cover artwork in horizontal rows or overlapping stacks, with compact title and author metadata beneath where appropriate.

### Upload-and-listen panel

Pair a warm off-white upload surface with file guidance, a rounded link input, and a compact listening action.

### Feature showcase

Combine app or voice-selection mockups with short headings and concise supporting copy; keep each surface softly rounded.

### Review cards

Set listener quotes in pale warm cards with small rating details and subdued attribution.

### Pricing cards

Use parallel plan panels, clear price hierarchy, concise benefit lists, and a prominent dark pill action.

### FAQ rows

Keep questions in a clean vertical list with compact plus affordances and generous separation.

### Measured component styles

- **Primary button** (“Skip to content”): background #000000 · text #ffffff · radius 9999px · padding 22px · 400 16px Inter
- **Secondary button** (“Sign in”): background #ffffff · text #000000 · border 1px solid #e5e5e5 · radius 9999px · padding 0px 16px · 400 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Five Little Pigs”): transparent background · text #000000 · radius 0px · padding 0px · 500 15px Inter
- **Input**: background #fbfaf9 · text #1a1a1a · border 1px solid #8e8880 · radius 24px · padding 8px 24px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“While searching for an app that would al”): background #f5f3f1 · text #000000 · radius 24px · padding 22px 24px 0px 24px · 400 18px Inter
- **Badge** (“Romance”): background #f5f3f1 · text #202020 · radius 9999px · padding 0px 11.1px · 400 10.906px Inter
- **Navigation item** (“Explore Pricing For Authors Upload & Lis”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Inter

## Do

- Keep the page canvas near-white and visually uninterrupted.
- Use black for core text and the primary listening action.
- Let book covers supply most of the vivid colour.
- Reserve warm off-white fills for cards and product surfaces.
- Use rounded pills for prominent actions and compact controls.
- Leave generous vertical pauses between major showcases.

## Don't

- Do not introduce large saturated section backgrounds.
- Do not treat illustration colours as primary brand colours.
- Do not use heavy shadows to separate ordinary cards.
- Do not crowd the hero with extra supporting elements.
- Do not make secondary copy as dark or prominent as headings.
- Do not replace the editorial whitespace with dense dashboard grids.

## Agent prompt

Build a new page in ElevenReader’s calm editorial style. Use Reader White (#fdfcfc) as the continuous canvas, Listening Ink (#000000) for headings, navigation, and the primary pill action, and Paper Warmth (#f5f3f1) for softly rounded cards. Keep muted copy in Soft Charcoal (#4b4a4a) or Caption Grey (#656565), with Quiet Divider (#e4e2e0) for restrained outlines. Set headlines in Waldenburg or a close Inter substitute; use Inter for body, controls, captions, and links. Center the main introduction, then alternate concise copy with book-cover collections, app previews, or a wide video surface. Let vivid artwork provide colour; keep interface accents sparse. Preserve the measured 780px content maximum, comfortable spacing, rounded controls, and flat, low-shadow treatment.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with book-cover artwork above a headline, supporting line, and two actions. | Primary and secondary CTA, Carousel arrows, Social proof | Layered book covers, Large centered headline, Black pill button |
| 2 | feature-split | Two-column feature area with upload workflow beside audiobook selection imagery. | File upload, Paste-link input, Listen action | Warm surface panels, App-style controls, Book artwork |
| 3 | video | Centered introduction above a wide video preview. | Video playback | Centered heading, Wide cinematic frame |
| 4 | product-grid | Left-aligned introduction followed by a horizontal row of book cards. | Browse library, Carousel navigation | Cover-led cards, Compact author metadata |
| 5 | category-nav | Centered section title above a wide, multi-column book display and genre links. | Choose a genre, View all genres | Overlapping book covers, Compact category labels |
| 6 | product-showcase | Left-aligned section lead above a horizontal set of app and voice showcase panels. | Explore product features, Carousel navigation | App interface mockups, Voice selection panels, Rounded showcase cards |
| 7 | testimonials | Two-column composition with rating summary beside stacked listener quotes. | Review credibility, Store rating proof | Rating statistics, Pale testimonial cards |
| 8 | integrations | Centered heading above a compact row of device and platform previews. | Choose a platform, Open listening option | Device previews, Platform action row |
| 9 | pricing | Centered introduction and billing toggle above two side-by-side plan cards. | Monthly or annual billing, Compare plans, Start trial | Two pricing panels, Savings badge, Pill CTA |
| 10 | faq | Left-aligned FAQ heading above a single-column list of expandable questions. | Expand answers | Question rows, Plus affordances |
| 11 | footer | Two-column footer with a brand mark and grouped link lists. | Explore site destinations, Open social channels | Grouped link columns, Small brand mark |
| 12 | other |  |  |  |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/elevenreader-io