Kindle DESIGN.md

1. Visual Theme & Atmosphere

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 #1A1A1A chrome — 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

2. Color Palette & Roles

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.

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).

3. Typography Rules

Font Family

• Reading Serif: Bookerly (Kindle's bundled commissioned reading serif by Dalton Maag). For non-Amazon implementations, use Bitter (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

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.

4. Component Stylings

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 #6B6B6B light / #9A9A9A dark
• Text: #1A1A1A light / #E8E8E8 dark, 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 10px shadow
• Reading progress: a 3pt bar pinned to the cover's bottom edge — #FF9900 fill on rgba(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; #C77800 tuned 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 magnifyingglass 16pt secondary
• Placeholder: "Search the Kindle Store" Ember 14pt secondary
• Focus: 1.5pt #FF9900 border

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

Distinctive Components

Reader Footer Whisper

• Percent + "X min left in chapter" + location, muted theme ink @ 55%, Ember 11pt
• A 2pt progress hairline above it, orange fill

Aa Theme Swatch Row

• 5 round swatches; active ringed in Amazon Orange — the most recognizable Kindle control

Continue Reading Card (Home)

• Most-recent book: cover thumbnail + title + "X% · X min left" + a wide orange "Read now"
• Surfaces at the very top of Home

Highlight & Note Popover

• On text selection: 4 highlight color chips (yellow/blue/pink/orange-amber), Note, Lookup (dictionary/X-Ray/Wikipedia tabbed), Translate, Search, Share
• Selected text stays highlighted in the chosen color in the page

X-Ray Panel

• Bottom sheet listing People / Terms / Images with occurrence counts and sparkline of where they appear in the book

Word Wise / Reading Ruler

• Optional inline glosses above hard words; accessibility ruler dims all but the current line

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48
• Chrome content inset: 16pt horizontal
• Reading margins: user-controlled (Narrow ≈ 16pt / Standard ≈ 26pt / Wide ≈ 40pt)
• Library cover gutter: 14pt

Grid & Container

• iPhone reader: single justified column at the user's margin width
• iPhone library: 3-up cover grid, 14pt gutter
• iPad reader: optional two-page spread in landscape; centered single column in portrait with wider max margins
• iPad library: 5–6-up cover grid

Whitespace Philosophy

• The page breathes maximally: generous margins + 1.72 leading — reading comfort over density
• Chrome is sparse: lists are simple rows; no decorative containers
• Covers carry the color: library is a quiet grid where the art is the only saturation
• One accent: orange appears for CTA / progress / active state and nothing else

Border Radius Scale

• Square (0pt): The reading page, full-bleed dividers
• Cover (4pt): Library cover art
• Standard (6–8pt): Buttons, search fields, chips
• Comfortable (12pt): Bottom sheets (Aa panel, X-Ray, search)
• Pill (500pt): Filter chips, "Add to Library"
• Circle (50%): Theme swatches, avatars

6. Depth & Elevation

Kindle is nearly flat — the reading page has zero elevation by design, and shadow appears only on cover art and floating sheets.

Shadow Philosophy: The reading surface must look like a physical page — flat, matte, shadowless. The only elevated objects are book covers (physical objects cast shadows) and transient sheets (they float over the page and you tap outside to dismiss). On the Black/Dark reader themes shadows are invisible, so sheets gain a 1pt theme-divider border as the elevation cue. Chrome cards never carry shadow — separation is by tone, not depth.

Motion

• Chrome fade on book open: nav + status + tab fade out over 250ms ease-out; reverse on center-tap (200ms ease-in)
• Page turn: slide (220ms ease-out) or curl (user setting); tap-edge and swipe both supported; soft haptic optional off by default
• Aa panel: slides up 280ms ease-out; theme change applies live behind it with a 150ms cross-tint of background + ink
• Theme swatch select: tapped dot's orange ring scales in 1.0→1.15→1.0 over 200ms; page background + ink cross-fade 150ms
• Library progress bar: on appear, fills 0→current over 500ms ease-out
• Continue reading: cover does a subtle scale-in (1.0 from 0.96, 250ms) on Home appear
• Highlight commit: selected range fills with the chosen color over 120ms; soft haptic
• Sync ("Furthest page read"): a quiet non-modal banner slides down 250ms — "You're at 38% — sync to furthest read (62%)?"
• Haptic feedback: soft impact on highlight commit and theme select; none on page turn by default

7. Do's and Don'ts

Do

• 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
• 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 #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
• 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Reading default page: #FBF0D9 (Sepia) / ink #5F4B32
• Reading themes: White #FFFFFF/#1A1A1A, Green #C5E1C5/#33492F, Dark #2A2A2A/#D8D8D8, Black #000000/#C8C8C8
• Brand accent (CTA / progress / active): #FF9900 (pressed #E88B00)
• Chrome black: #1A1A1A
• App chrome canvas: #FFFFFF light / #0E0E0E dark
• Chrome surface: #F4F2EE light / #1A1A1A–#242424 dark
• Text primary: #1A1A1A light / #E8E8E8 dark
• Text secondary: #6B6B6B light / #9A9A9A dark
• Link: #1A98FF
• Kindle blue (X-Ray accent): #4FB3D9
• Error: #E0533D

Example Component Prompts

• "Build the Kindle reading page in SwiftUI: full-bleed background = active theme page color (default Sepia #FBF0D9). A chapter eyebrow 'CHAPTER SEVEN' in Amazon Ember 11pt weight 700 letter-spacing 1.5pt at 55% ink; chapter title in Bitter 24pt weight 700 ink #5F4B32; body in Bitter 15.5pt weight 400, line-height 1.72, .multilineTextAlignment(.justified) with hyphenation, ink #5F4B32. Optional 52pt Bitter drop-cap on the first paragraph. A bottom whisper: percent + 'X min left in chapter' at Ember 11pt 55% ink, with a 2pt orange #FF9900 progress hairline above it. Zero chrome — a single center-tap fades the nav/tab back in over 200ms."

• "Create the Kindle Aa typography panel: a bottom sheet (12pt top radius, theme-tinted bg) with rows Font / Size (− Aa +) / Line Spacing / Margins, and a theme row of five 30pt round swatches — White #FFFFFF, Sepia #FBF0D9, Green #C5E1C5, Dark #2A2A2A, Black #000000. The active swatch is ringed 2pt Amazon Orange #FF9900 with 2pt offset; tapping a swatch scales its ring 1.0→1.15→1.0 over 200ms and cross-fades the page background + ink behind the sheet over 150ms."

• "Render a Kindle library cover cell: full-color cover art at 2:3, 4pt corner radius, rgba(0,0,0,0.4) 0 4px 10px shadow. A 3pt reading-progress bar pinned to the cover's bottom edge — #FF9900 fill on rgba(255,255,255,0.2) rail at the read fraction. Below: percent + author in Amazon Ember 11pt #6B6B6B. Grid 3-up, 14pt gutter; long-press opens Download / Remove / Mark-as-read."

• "Build the Kindle 'Continue reading' card for Home: leading cover thumbnail (2:3, 4pt radius, shadow), title in Ember 20pt weight 700, '38% · 14 min left in chapter' in Ember 14pt #6B6B6B, and a full-width orange #FF9900 'Read now' button (8pt radius, text #1A1A1A Ember 15pt 700). Card surfaces at the very top of Home; cover scales in 0.96→1.0 over 250ms on appear."

• "Render the Kindle highlight popover: on text selection show 4 round highlight color chips (yellow, blue, pink, orange-amber), then Note, Lookup, Translate, Search, Share. On commit, fill the selected range with the chosen color over 120ms and a soft haptic; the highlight persists in the page text."

• "Build the Kindle bottom tab bar (chrome context): 4 tabs Home / Library / Discover / More, 22pt glyphs, Ember 10pt weight 500 labels. Active = filled glyph in Amazon Orange #FF9900 (use #C77800 if chrome is sepia-tinted); inactive = muted secondary ink. No tint pill — color + fill only. Background follows system: #FFFFFF light / #0E0E0E dark, 0.5pt top divider."

Iteration Guide

1. The reading page is the product — every pixel of chrome fades out on book open; center-tap restores it
2. Default reading theme is Sepia #FBF0D9 paper / #5F4B32 ink — paper, never screen
3. Five reading themes (White/Sepia/Green/Dark/Black) and the reader's choice overrides OS appearance
4. Body is a reading serif (Bitter analog), justified + hyphenated, 1.72 line-height — like a paperback
5. Amazon Orange #FF9900 is the ONLY accent — CTA, progress fill, active-theme ring, selected tab
6. Every library cover wears a thin orange progress bar on its bottom edge
7. Cover art is the only saturation in chrome; the library is an otherwise quiet grid
8. The reading surface is flat — no cards, borders, or shadows; covers and sheets are the only elevated things
9. Respect the reader's font/size/spacing/margin controls globally — design must scale across all of them
10. Chrome is neutral Amazon Ember on near-black #1A1A1A; never add a second accent color