A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
21tokens
12type steps
1radius steps
13pxspacing base
Kindle, in one page
Kindle's iOS app exists to disappear. Its entire design philosophy is that the reading page *is* the product, and every pixel of chrome is engineered to vanish the instant a book opens. Tap into a title and the navigation, status bar, and toolbars fade away in 250ms, leaving a single justified column of warm-ink serif text on a sepia page (#FBF0D9). There are no cards, no borders, no shadows, no accent colors in the reading view — just type, generous leading (1.7+), hyphenated justified text, and a thin progress whisper at the bottom edge ("38% · 14 min left in chapter"). A single tap in the center of the page brings the chrome back; a tap on the edges (or a swipe) turns the page. This radical reduction is the brand: Kindle competes with paper, so it behaves like paper.
The signature screen is the reader page: chapter eyebrow ("CHAPTER SEVEN"), a serif chapter title, body set in a reading serif (Bookerly on real devices; Bitter is a close free analog) at ~15.5pt with 1.72 line-height and justified, hyphenated text, an optional drop-cap on the opening paragraph, and the location/time-left footer. Pulling up the bottom toolbar reveals the iconic Aa typography panel — font family, size, line spacing, margins, and the five page themes (White, Sepia, Green, Dark, Black) shown as round swatches with the active one ringed in Amazon orange. The second signature surface is the Library: a grid of full-color cover art, each cover wearing a thin orange reading-progress bar along its bottom edge, with "Continue reading" surfacing the most recent book at the top of Home.
Outside the reader, Kindle is an Amazon product and uses Amazon's system: near-black chrome (#1A1A1A), Amazon Ember as the UI typeface, and Amazon Orange (#FF9900) as the single brand accent — used for the primary "Read now" / "Buy" CTA, reading-progress fills, the active-theme ring, and selected tab. There is no second accent. Cover art provides all the color; the UI is monochrome warm-neutral plus orange. The app has two distinct surface contexts: the reading surface, which obeys the user's chosen page theme regardless of system appearance, and the app chrome (Home, Library, store, settings), which follows system light/dark.
Key Characteristics:
- The reading page is the product — chrome fades out 250ms on book open, taps it back
- Sepia paper (
#FBF0D9) + warm ink (#5F4B32) as the default reading theme — paper, not screen - Five reading themes: White / Sepia / Green / Dark / Black — user-chosen, OS-independent
- Reading serif (Bookerly → Bitter analog) at ~15.5pt, 1.72 line-height, justified + hyphenated
- Amazon Orange (
#FF9900) — the single accent: CTA, progress fill, active-theme ring, selected tab - Amazon Ember + near-black
#1A1A1Achrome — this is an Amazon app - Library = full-color cover grid, each cover wearing a thin orange progress bar
- The Aa typography panel — font, size, spacing, margins, theme swatches
- Progress everywhere: "38% · 14 min left in chapter", location numbers, percent
- Quiet bottom progress whisper in the reader; no heavy chrome
- Minimal bottom tab bar: Home / Library / Discover / More
Do's and don'ts
Do
- Make the reading page the product — fade ALL chrome out on book open
- Default to Sepia (
#FBF0D9paper /#5F4B32ink) — paper, not screen - Offer all five reading themes and let the reader's choice override OS appearance
- Set body in a reading serif, justified, hyphenated, 1.72 line-height — it must read like a paperback
- Use Amazon Orange (
#FF9900) as the ONLY accent — CTA, progress, active-theme ring, selected tab - Put a thin orange progress bar on every library cover's bottom edge
- Keep cover art full-color; the library is a quiet grid where art is the only saturation
- Respect the reader's font / size / spacing / margin choices globally — design to scale across them
- Use one drop-cap maximum, only on a chapter's opening paragraph
- Keep chrome neutral Amazon Ember on near-black
#1A1A1A
Don't
- Don't put cards, borders, or shadows on the reading page — paper is flat
- Don't tie the reading surface to OS dark mode — the reader's theme choice wins
- Don't use pure white ink on the Black theme — dimmed
#C8C8C8reduces halation - Don't introduce a second accent color — orange is the only one; no green/blue CTAs
- Don't set reading body in a UI sans by default — the book is serif
- Don't left-align/ragged the reading column by default — Kindle justifies and hyphenates
- Don't keep chrome visible while reading — a single center-tap reveals it; otherwise it's gone
- Don't tint or crop cover art with UI overlays beyond the thin bottom progress bar
- Don't animate the reading surface decoratively — page turn + fade only, quiet and fast
- Don't hard-code one reading font/size — every reader sets their own
- Don't add a Material tint pill to the active tab — it's glyph fill + orange
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 Kindle design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Amazon Orange: #ff9900
- Orange Pressed: #e88b00
- Kindle Black: #1a1a1a
- Link Blue: #1a98ff
- Kindle Blue: #4fb3d9
- Chrome Canvas: #ffffff
- Surface Subtle: #f4f2ee
- Divider: #e4e2dd
- Dark Canvas: #0e0e0e
- Dark Surface 1: #1a1a1a
Type:
- families: Bookerly, Bitter, Reading Serif, Amazon Ember
- scale: 10, 11, 12, 13, 14, 15, 15.5, 17, 20
- weights: 400, 500, 700
Shape:
- radius: 8
Spacing: 13
Rules:
- Make the reading page the product — fade ALL chrome out on book open
- Default to Sepia (`#FBF0D9` paper / `#5F4B32` ink) — paper, not screen
- Offer all five reading themes and let the reader's choice override OS appearance
- Set body in a reading serif, justified, hyphenated, 1.72 line-height — it must read like a paperback
- Use Amazon Orange (`#FF9900`) as the ONLY accent — CTA, progress, active-theme ring, selected tab
- Put a thin orange progress bar on every library cover's bottom edge
Avoid:
- Don't put cards, borders, or shadows on the reading page — paper is flat
- Don't tie the reading surface to OS dark mode — the reader's theme choice wins
- Don't use pure white ink on the Black theme — dimmed `#C8C8C8` reduces halation
- Don't introduce a second accent color — orange is the only one; no green/blue CTAs
- Don't set reading body in a UI sans by default — the book is serif
- Don't left-align/ragged the reading column by default — Kindle justifies and hyphenates
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Brand & Interactive)
- Amazon Orange (
#FF9900): The single brand accent — primary CTA ("Read now", "Buy"), reading-progress fill, active-theme ring, selected tab, in-text highlight tint. - Orange Pressed (
#E88B00): Pressed state of the orange CTA. - Kindle Black (
#1A1A1A): Primary chrome surface / text-on-orange / app bars. - Link Blue (
#1A98FF): Hyperlinks, footnote links, store links (inherited from Amazon system). - Kindle Blue (
#4FB3D9): Accent for X-Ray / Word Wise / accessibility highlights (secondary, sparing).
Reading Themes (the core surface system)
The reading surface obeys the user's chosen theme, independent of OS appearance.
| Theme | Page Background | Body Ink |
|---|---|---|
| White | #FFFFFF | #1A1A1A |
| Sepia (default) | #FBF0D9 | #5F4B32 |
| Green | #C5E1C5 | #33492F |
| Dark | #2A2A2A | #D8D8D8 |
| Black (OLED) | #000000 | #C8C8C8 |
App Chrome — Light Mode
- Chrome Canvas (
#FFFFFF): Home / Library / store background. - Surface Subtle (
#F4F2EE): Grouped rows, search field. - Divider (
#E4E2DD): Hairline rules in lists.
App Chrome — Dark Mode
- Dark Canvas (
#0E0E0E): App chrome background in system dark. - Dark Surface 1 (
#1A1A1A): Cards, rows, toolbars. - Dark Surface 2 (
#242424): Pressed rows, search field. - Dark Divider (
#2E2E2E): Hairline rules on dark.
Text (Chrome)
- Text Primary Light (
#1A1A1A): Library titles, settings labels. - Text Secondary Light (
#6B6B6B): Metadata, progress captions. - Text Primary Dark (
#E8E8E8): Primary text on dark chrome. - Text Secondary Dark (
#9A9A9A): Secondary text on dark chrome. - Text Tertiary Dark (
#6A6A6A): Disabled / overline on dark.
Semantic
- Error Red (
#E0533D): Download failure, remove-from-device confirm. - Success Green (
#2FAE5F): "Downloaded" / sync-complete toast. - Progress Orange (
#FF9900): Reading progress bar fill (reuses brand orange). - Warning Amber (
#FF9900): Non-blocking warnings (reuses orange).
Type scaleRead the full spec
Font Family
- Reading Serif:
Bookerly(Kindle's bundled commissioned reading serif by Dalton Maag). For non-Amazon implementations, useBitter(Huerta Tipográfica, Google Fonts, SIL OFL) — a slab-leaning transitional serif with similar dark, even color and excellent screen reading at small sizes. Kindle also ships Amazon Ember, Caecilia, Palatino, Helvetica Neue, Georgia, Baskerville, OpenDyslexic as selectable reading faces. - UI / Chrome:
Amazon Ember(Dalton Maag for Amazon). For non-Amazon implementations, fall back to-apple-system, 'SF Pro Text'— a neutral grotesque; used for navigation, library, settings, and all chrome. - Reading face is user-selectable: respect the reader's chosen serif/sans + size + spacing + margins globally — never hard-code one.
- iOS Fallback: serif →
Georgia/'Times New Roman'; sans →-apple-system.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Ember | 30pt | 700 | 1.2 | -0.4pt | "Library", "Home" large nav title |
| Chapter Title | Bitter | 24pt | 700 | 1.25 | 0pt | Chapter head in the reader |
| Book Title | Ember | 20pt | 700 | 1.3 | 0pt | Book detail / library title |
| Subtitle / Author | Ember | 17pt | 500 | 1.4 | 0pt | "by Anthony Doerr" |
| Reading Body | Bitter | 15.5pt | 400 | 1.72 | 0pt | The book text — user-scalable; justified + hyphenated |
| List Title | Ember | 15pt | 500 | 1.4 | 0pt | "Continue reading", row titles |
| Metadata | Ember | 14pt | 400 | 1.4 | 0pt | "38% · 14 min left in chapter" |
| Caption | Ember | 12pt | 500 | 1.4 | 0pt | "Downloaded · 412 pages" |
| Chapter Eyebrow | Ember | 11pt | 700 | 1.0 | 1.5pt | "CHAPTER SEVEN" all-caps |
| Tab Label | Ember | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Drop Cap | Bitter | ~52pt | 700 | 0.82 | 0pt | Optional opening-paragraph cap |
| Footnote / Note | Ember | 13pt | 400 | 1.5 | 0pt | Footnote popover, highlights note |
Principles
- The page is typeset, not designed: reading text is justified, hyphenated, generously leaded (1.72) — it should read like a fine paperback, not a web page.
- Reading face is the user's: size, family, line spacing, and margins are user controls — the design must scale gracefully across all of them.
- Chrome is neutral and quiet: Amazon Ember at small sizes, no decorative weights — chrome must never compete with the page.
- One drop-cap maximum: a single ornamental cap on a chapter's first paragraph; nowhere else.
- Numerals everywhere: location, percent, time-left use Ember tabular figures for stable progress display.
Components and layoutRead the full spec
Buttons
Primary CTA ("Read now" / "Buy" / "Download")
- Shape: Rounded rectangle, 8pt corner radius
- Background:
#FF9900(Amazon Orange) - Text:
#1A1A1A, Ember 15pt weight 700 - Padding: 13pt vertical, 26pt horizontal
- Pressed: background
#E88B00+ scale 0.98 - This is the only filled-orange element in chrome
Secondary / Outline Button ("Download", "Sample")
- Background: transparent
- Border: 1pt
#6B6B6Blight /#9A9A9Adark - Text:
#1A1A1Alight /#E8E8E8dark, Ember 14pt weight 500 - Corner radius: 8pt
- Pressed: background
#F4F2EE/#242424
Pill Button ("Add to Library", filter chips)
- Background:
#F4F2EE/#242424 - Border: 1pt divider
- Text: Ember 13pt weight 500
- Corner radius: 500pt
Text / Link Button ("Sample this book", "See all")
- Font: Ember 14pt weight 500
- Color:
#1A98FF - No underline
Reading Page (the core atom)
The reading view is Kindle's fundamental surface.
- Background: the active reading theme's page color
- Body: reading serif at user size, justified, hyphenated, 1.72 line-height
- Horizontal margins: user-controlled (Narrow / Standard / Wide) — default ~26pt
- Paragraph spacing: 0 (indent-based, like print) OR user-set block spacing
- Chapter eyebrow + chapter title at chapter starts; optional drop-cap on first paragraph
- Footer whisper: percent + "X min left in chapter" + location, in muted ink at 55% opacity
- Zero chrome while reading; single center-tap restores chrome with a 200ms fade
- Page turn: tap right edge / swipe left → next page (curl or slide per user setting); tap left edge → previous
- Text selection → highlight (4 colors) / note / lookup / translate / search popover
Aa Typography Panel
- Bottom sheet over the page, 12pt top radius, theme-tinted background
- Rows: Font (segmented list of faces), Size (− / Aa / +), Line Spacing, Margins, Orientation
- Theme swatches: 5 round 30pt dots (White / Sepia / Green / Dark / Black); active dot ringed 2pt Amazon Orange with 2pt offset
- Brightness slider (with "Match system" toggle)
- Changes apply live behind the sheet
Library Cover Cell
- Cover: full-color art, 2:3 aspect, 4pt corner radius,
rgba(0,0,0,0.4) 0 4px 10pxshadow - Reading progress: a 3pt bar pinned to the cover's bottom edge —
#FF9900fill onrgba(255,255,255,0.2)rail - Below cover: percent + author in Ember 11pt secondary
- Downloaded badge: small check/cloud glyph top-right
- Grid: 3-up on iPhone, 14pt gutter; long-press → quick actions (Download, Remove, Mark as read)
Reading Progress Bar
- Rail: 4pt,
#242424/#E4E2DD - Fill:
#FF9900 - Caption: Ember 12pt — "38% · ch. 7" / "4h left" / "Finished"
- Also rendered as a thin edge whisper at the bottom of the reading page
Navigation
Reader Top Bar (when chrome is shown)
- Height: 44pt + safe area, theme-tinted translucent
- Leading: back chevron (to Library)
- Trailing: search-in-book, bookmark, X-Ray / contents icons — all 18–20pt, muted theme ink
- Fades out on read; center-tap restores
Bottom Tab Bar (chrome context)
- Height: 50pt + safe area
- 4 tabs: Home, Library, Discover, More
- Icon size: 22pt; labels Ember 10pt weight 500
- Active:
#FF9900(filled glyph) — light;#C77800tuned for sepia-tinted chrome - Inactive: theme/secondary muted ink
- No tint pill — active is glyph fill + orange color
Input Fields
Search (Discover / Library)
- Height: 40pt
- Background:
#F4F2EE/#242424 - Corner radius: 8pt
- Leading
magnifyingglass16pt secondary - Placeholder: "Search the Kindle Store" Ember 14pt secondary
- Focus: 1.5pt
#FF9900border
In-Book Search
- Full-screen sheet; results list with location + snippet (matched term highlighted orange)
- Tap result → jumps to location, briefly flashes the matched line
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Library 3-up at ~100pt covers; reader Standard margin ≈ 22pt |
| iPhone 13/14/15 | 390pt | Standard layout; reader Standard margin ≈ 26pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected by reader top bar when chrome shown |
| iPhone 15/16 Pro Max | 430pt | Library 4-up; wider default reading column |
| iPad (portrait) | 768pt | Single centered reading column, wide max margins; library 5-up |
| iPad (landscape) | 1024pt+ | Optional two-page spread reader; library 6-up |
Dynamic Type
- The reading body uses the in-app size control, not system Dynamic Type — but it must honor it as a floor when "Match system" is on
- Chrome (titles, list rows, captions): full system Dynamic Type scale
- Tab labels, chapter eyebrow, footer whisper: FIXED (layout-sensitive)
Orientation
- Reader rotates; iPad landscape can show a two-page spread
- Library reflows column count to width
- Aa panel and sheets re-anchor on rotation
Touch Targets
- Page-turn tap zones: full left third / right two-thirds (or symmetric per setting)
- Center-tap (reveal chrome): center ~40% of the page
- Theme swatch: 30pt glyph, 44pt hit
- Tab bar icons: 22pt glyph, 49pt hit
- Primary CTA: 44pt tall minimum
Safe Area Handling
- Reader: page content respects safe area; footer whisper sits above the home indicator
- Top bar (when shown) respects Dynamic Island
- Bottom: tab bar + home indicator respected in chrome
- Sides: chrome 16pt inset; reading margins are the user's chosen width
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-kindle {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0e0e0e;
--heading-color: #0e0e0e;
--link-color: #9b5d00;
--link-hover-color: #683e00;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(14,14,14,0.06);
--card-hover-shadow: 0 6px 18px rgba(14,14,14,0.12);
--header-bg: #0e0e0e;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #626262;
--button-bg: #ff9900;
--button-text-color: #000000;
--button-hover-bg: #cc7a00;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #0e0e0e;
--button-secondary-hover-bg: #e2e2e2;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0e0e0e;
--base-font: var(--font-serif);
--heading-font: var(--font-serif);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- resy 81.9%
- marriott bonvoy 81.9%
- booking 81.7%
- gyokusendo 78.6%
- youtube music 78.3%
Where this came from
- Source document
ios/design-md/misc/kindle/DESIGN.md· 23.2 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.