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

# Readwise · Design System

> A warm, editorial canvas for a reading companion.

**Theme:** light · **Industry:** productivity · **Source:** https://readwise.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._

Readwise pairs an editorial serif voice with a quiet cream canvas and vivid, warm product imagery. Rounded product previews, highlight cards, and restrained blue links make the page feel approachable while keeping the software itself in focus.

## North star

Let warm editorial typography and cream space frame tangible product imagery, reserving strong contrast for the primary action.

## Overview

The page is built on a warm cream canvas (#fbf9f3), with white product surfaces and dark charcoal text providing a calm, book-like foundation. Large headlines use Source Serif 4, often with tight tracking, while Albert Sans handles compact headings, navigation, buttons, and interface labels; Inter appears in testimonial-style content. The hero and later promotional panels use soft orange-peach imagery, but these colors belong to the artwork rather than the core interface palette. The composition alternates centered headline-led moments with spacious split feature rows and compact multi-column cards. Product screenshots and reading artifacts are framed as tangible objects, layered over subtly tinted backgrounds. Cards rely on pale borders and occasional soft shadows instead of heavy outlines. Blue is a sparse link accent, while black pill-shaped calls to action create clear focal points. Section spacing feels generous and orderly despite the measured compact density of interface elements.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Reading Cream | `#fbf9f3` | `--color-reading-cream` | brand | Dominant page canvas and background behind feature sections and footer. |
| Book Ink | `#333333` | `--color-book-ink` | neutral | Main heading, body, navigation, and link text. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Product previews, testimonial cards, and light button surfaces. |
| Quiet Gray | `#7b7a79` | `--color-quiet-gray` | neutral | Muted supporting copy, secondary navigation, and footer links. |
| Parchment Line | `#dbd7cd` | `--color-parchment-line` | semantic | Fine outlines around cards and product surfaces. |
| Soft Oat | `#f5f1e8` | `--color-soft-oat` | surface | Subtle card and link treatments; also appears as a gentle section tint. |
| Reader Blue | `#2675de` | `--color-reader-blue` | accent | Occasional text links and small interface accents. |
| Linen Shade | `#efebdf` | `--color-linen-shade` | surface | Minor pale card and background detail, not a defining brand color. |
| Action Black | `#161616` | `--color-action-black` | neutral | Primary pill-shaped calls to action and occasional strong text. |

### Semantic aliases

`--color-canvas` → `#fbf9f3` (Reading Cream) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#333333` (Book Ink) · `--color-text-muted` → `#7b7a79` (Quiet Gray) · `--color-border` → `#dbd7cd` (Parchment Line) · `--color-accent` → `#2675de` (Reader Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#fbf9f3` | 12:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#7b7a79` | `#fbf9f3` | 4.07:1 | AA-large |
| `#7b7a79` | `#ffffff` | 4.28:1 | AA-large |
| `#2675de` | `#fbf9f3` | 4.26:1 | AA-large |
| `#2675de` | `#ffffff` | 4.49:1 | AA-large |

### Gradients

- `linear-gradient(rgba(251, 249, 243, 0) 6.4%, rgba(251, 249, 243, 0.8) 82.8%), url("https://d34adp677peecb.cloudfront.net/static/images/landing2/testimonials-bg.fcda8ea24800.webp")`
- `linear-gradient(rgb(245, 241, 232) 248.002px, rgb(251, 249, 243) 518.004px)`
- `linear-gradient(rgba(123, 122, 121, 0.1), rgba(123, 122, 121, 0.1)), linear-gradient(rgba(123, 122, 121, 0.1), rgba(123, 122, 121, 0.1)), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Source Serif 4 | `--font-body` | webfont | 400, 600 | Display and main editorial headings; also measured in body copy. | Literata |
| Inter | `--font-inter` | webfont | 400, 600, 500 | Testimonial and quote-card content. | Inter |
| Albert Sans | `--font-albert-sans` | webfont | 400, 600, 500 | Navigation, buttons, secondary headings, captions, and larger links. | DM Sans |

- **Source Serif 4:** Use a confident, bookish serif voice; display headings are semibold with slightly tight tracking.
- **Inter:** Keep testimonial copy clean and compact; measured styles use regular weight.
- **Albert Sans:** Use medium or semibold for controls and labels; keep case natural and tracking neutral.

### Type scale — Augmented Fourth (ratio ≈ 1.375, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.1 | -0.02em | — | Source Serif 4 | Hero-scale editorial headline. |
| h1 | 54px | 600 | normal | -0.02em | — | Source Serif 4 | Primary page headline and major section heading. |
| h2 | 40px | 600 | normal | -0.02em | — | Source Serif 4 | Feature and promotional section headings. |
| h3 | 28.5px | 600 | 1.33 | 0 | — | Albert Sans | Feature-card and secondary section headings. |
| h4 | 24px | 600 | normal | 0 | — | Albert Sans | Compact subheadings and interface group titles. |
| body | 13px | 400 | 1.16 | 0 | — | Source Serif 4 | Supporting editorial copy and descriptive paragraphs. |
| caption | 12.5px | 600 | 1.11 | 0 | — | Albert Sans | Small labels, ratings, and card metadata. |
| button | 16px | 600 | 1.38 | 0 | — | Albert Sans | Primary and secondary action labels. |
| nav | 16px | 500 | 1.38 | 0 | — | Albert Sans | Header navigation links. |
| link | 22px | 400 | 1.27 | 0 | — | Albert Sans | Prominent inline links and integration links. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 3, 4, 6, 8, 10, 11, 12, 13, 15, 16, 17, 23, 24, 31, 32, 36 px.
- Section rhythm 32px · element gap 4px · card padding 3px · max content width 1344px.

A centered, wide page composition uses a measured maximum width of 1344px, with a compact header followed by a full-bleed-feeling hero panel inset from the canvas. The page alternates centered headline sections, two-column feature rows, and a three-column capability area. Testimonials form a wide card-filled band, while the footer resolves into several compact link columns. Section spacing is notably open, giving product imagery room to breathe; alignment shifts between centered promotional blocks and left-aligned feature copy.

## Shape & elevation

- Radius: button `16px` · card `11px` · media `1px` · link `16px` · xs `1px` · sm `2px` · md `6px` · lg `10px` · xl `11px` · 2xl `12px` · pill `9999px`
- Shadow `inset` (media): `rgba(0, 0, 0, 0.1) 0px 0.6px 0.6px 0px, rgba(255, 255, 255, 0.35) 1.5px 0px 1px 0px inset`
- Shadow `sm` (link): `rgba(42, 40, 34, 0.1) 0px 4px 4px 0px, rgba(42, 40, 34, 0.1) 0px 1.5px 1.5px 0px`
- Shadow `inset-2` (button): `rgba(0, 0, 0, 0.1) 0px 2px 10px 0px inset`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.1) 0px 6px 10px 0px, rgba(0, 0, 0, 0.15) 0px 12px 48px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.34, 1.56, 0.64, 1)` on interactive elements.

Most page areas remain flat against the cream canvas. White cards use fine parchment-colored borders, with soft shadows reserved for selected floating cards and layered product previews. Rounded corners and overlap create depth without heavy outlines or dramatic ambient effects.

## Imagery

Product UI is the primary visual material: library screens, mobile previews, highlights, and integration examples appear as layered interface mockups. Warm peach and orange gradients surround the hero, testimonial band, and closing CTA, while feature imagery sits on pale, softly tinted backplates. Small product artifacts and book covers add color inside screenshots; treat those as content imagery, not as the core palette.

## Components

### Header navigation

Minimal brand mark and product links sit on the cream canvas; secondary Sign in control uses a light gray pill treatment.

### Primary CTA

Use a dark #161616 pill with white semibold Albert Sans text, matching the prominent Get Started For Free action.

### Product preview cards

White interface panels with dark text and pale borders present reading libraries, reviews, and mobile product screens.

### Feature split

Pair a short editorial heading and supporting copy with a product screenshot; alternate image and text sides down the page.

### Testimonial cards

Arrange white quote and social-post cards over a warm orange-peach section backdrop; use restrained borders and soft shadow.

### Integration links

Show a compact row of recognizable app marks with a small blue link beneath, keeping the surrounding area spacious.

### Footer link columns

Group product, support, connect, and legal links in muted text beneath the closing promotional panel.

### Measured component styles

- **Primary button** (“Sign in”): background #e8e6e1 · text #333333 · radius 40px · padding 9px 20px · 600 16px Albert Sans
- **Secondary button** (“Get Started For Free”): background #161616 · text #ffffff · radius 40px · padding 10px 24px · 600 16px Albert Sans
- **Link** (“jihad @jaesmail “Scan your paper book an”): background #ffffff · text #333333 · border 1px solid #f5f1e8 · radius 16px · padding 14.5px · 400 14.5px Inter · shadow rgba(42, 40, 34, 0.1) 0px 4px 4px 0px, rgba(42, 40, 34, 0.1) 0px 1.5px 1.5px 0px
- **Card** (“Alchemy Rory Sutherland ··· For a busine”): background #ffffff · text #333333 · border 1px solid #dbd7cd · radius 11.0638px · padding 11.1px 0px 0px 0px · 400 16px Albert Sans
- **Navigation item** (“Dashboard”): transparent background · text #7b7a79 · radius 0px · padding 0px · 500 16px Albert Sans

## Do

- Use #fbf9f3 as the dominant canvas.
- Set editorial headlines in Source Serif 4.
- Keep product UI on clean white surfaces.
- Use warm gradients as contained promotional artwork.
- Reserve #2675de for sparse links and accents.
- Make primary actions dark, rounded, and easy to find.

## Don't

- Do not turn the whole page into an orange gradient.
- Do not use heavy borders around every section.
- Do not make every heading sans serif.
- Do not treat screenshot colors as the brand palette.
- Do not crowd feature rows with dense copy.
- Do not use bright blue as a large background.

## Agent prompt

Build a new Readwise-style page on a #fbf9f3 Reading Cream canvas, using #333333 Book Ink for the main text and Source Serif 4 for editorial headlines. Use Albert Sans for navigation, controls, captions, and secondary headings. Keep content centered within a wide page frame, with generous gaps between alternating image-and-copy feature rows. Show the product through layered white UI previews, pale borders, and occasional soft shadows. Use warm peach-orange gradients only as contained hero, testimonial, or CTA artwork—not as the site-wide palette. Make the main action a dark #161616 pill with white text. Use #2675de Reader Blue sparingly for inline links, and finish with muted footer link columns.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero message and CTA layered above a large product showcase within a warm illustrated panel. | Prominent signup action, Product value proposition | Editorial serif headline, Peach gradient artwork, Layered app previews, Dark pill CTA |
| 2 | testimonials | Centered section heading over a wide, warm backdrop filled with overlapping testimonial cards. | Social proof, App rating | Warm gradient band, White quote cards, Rounded card edges, Subtle shadows |
| 3 | cta | Wide closing promotional panel with left-aligned headline and action beside reading-themed artwork. | Final signup prompt | Warm illustrated background, Serif headline, Dark pill button |
| 4 | footer | Brand mark and grouped link columns sit on the cream canvas beneath the closing CTA. | Grouped site navigation, Legal links | Muted link text, Multi-column groups, Store badges |

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