# Readwise Reader · Design system migration spec

> Source: https://readwise.io  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of how to balance literary aesthetics with modern SaaS functional design.

## 1. Identity DNA

Readwise Reader operates as a personal library assistant, a system designed to surface and reinforce the most valuable fragments from a user's reading history. Its design DNA is therefore one of clarity and recollection: a typographically-driven interface that prioritizes content legibility and the quiet mechanics of memory.

**One-liner:** A clean, typographically-driven platform for revisiting and learning from reading highlights.
**Keywords:** reading · knowledge · memory · spaced-repetition · highlights
**Analogy:** A personal library assistant that reminds you of the best things you've read.

## 2. Color

The palette is a deliberate exercise in restraint, built on a high-contrast monochrome base of white and near-black. A single, functional blue is reserved exclusively for actionable elements, creating an unambiguous visual hierarchy that guides the reader without ornament.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#1F1F1F` | body text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#478CD0` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome base with a single functional blue for actions and links.

The core principle is clarity through contrast, using a minimal palette to ensure content remains the primary visual actor.

## 3. Typography

The typographic system pairs a transitional serif for headlines, evoking the authority of print, with a humanist sans-serif for body text to ensure sustained reading comfort. This duality speaks directly to the application's dual purpose: the literary curation of highlights and the modern, functional tool for review.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.125 | 800 | -0.22px | Main hero headline |
| h2 | 28.8px | 1.25 | 700 | 0 | Section headings |
| body | 16px | 1.5 | 400 | 0 | Paragraph text and UI labels |

**Type rules:**
- Transitional serif for headlines to evoke a literary and educational feel.
- Humanist sans for body text to maintain high readability and a modern aesthetic.
- Generous line-height for comfortable reading of long-form content.

## 4. Spacing

A consistent 4px base grid establishes a measured rhythm throughout the interface, creating a sense of order and predictability.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous padding (24px-35px) for content blocks.

## 5. Surfaces

Depth is communicated sparingly, eschewing drop shadows for a primarily flat, content-first presentation. Borders are subtle and functional, appearing as thin rules for navigation underlines and clear state indicators for form inputs.

- **Radius:** sm 4px · md 8px · lg 10px · pill 999px
- **Borders:** Subtle 1px borders used primarily for navigation underlines and input states.

## 6. Layout

The layout is a centered single-column structure, focusing user attention on a linear content flow. Alternating image and text sections create visual pacing within this focused skeleton, maintaining engagement without structural complexity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout with alternating image-text sections.

## 7. Motion & Interaction

Motion is employed as subtle feedback, not decoration. All interactions use smooth, standardized transitions on background-color and opacity to acknowledge user input with quiet, consistent feedback.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(1, 0.3, 0.54, 1.39)`
- **Patterns:**
  - Simple background-color and color transitions on hover.
  - Smooth opacity and transform transitions for interactive elements.

- **Hover:** Change in background-color or color with a 0.2s transition.
- **Click:** Immediate feedback via state change.
- **Transition:** All elements use a 0.2s transition for smooth state changes.
- **Keyboard:** Standard focus management for navigation and forms.

## 8. Voice & Don'ts

The editorial voice is educational and encouraging, framed around personal growth and knowledge retention. Headlines make clear, benefit-driven statements, while calls to action are direct and action-oriented, avoiding corporate jargon and aggressive sales rhetoric.

- **Tone:** Educational, encouraging, and focused on personal growth.
- **Headline style:** Clear, benefit-driven statements in a large serif font.
- **CTA style:** Direct and action-oriented, such as 'GET STARTED FOR FREE'.
- **Avoid:** Jargon-heavy language / Overly corporate tone / Aggressive sales tactics

### Don'ts
- ❌ don't use a dark background for the main interface — screenshot shows a predominantly white background.
- ❌ don't use monospace fonts for body text — screenshot shows a humanist sans-serif for readability.
- ❌ don't use neon or overly bright accent colors — screenshot shows a functional, muted blue (#478CD0).
- ❌ don't use complex gradients on primary buttons — screenshot shows solid color fills.
- ❌ don't use high-contrast drop shadows on cards — screenshot shows a clean, border-based or flat UI.
- ❌ don't use condensed or decorative fonts for headlines — screenshot uses a clear transitional serif.

The system deliberately avoids dark-mode interfaces, neon accents, and complex gradients to preserve its clean, typographic core.

## System Prompt (paste into AI tool)

```
Readwise is a productivity tool for readers, focusing on memory and knowledge retention through spaced repetition. The design DNA is a clean, minimalist aesthetic that prioritizes readability. The core color palette is monochrome: white backgrounds (#FFFFFF) with near-black ink (#1F1F1F), accented by a functional blue (#478CD0). Typography is a refined mix of transitional-serif for headlines (evoking literature) and humanist-sans for body text (ensuring legibility). Critical design constraints: don't use dark mode or dark backgrounds, don't use neon or high-chroma accent colors, and don't use complex gradients or busy background patterns. The layout is spacious and centered, focusing the user's attention on the content and the value of their reading highlights.
```
