Pen Blue
#478cd0Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Readwise
readwise.ioWebsite preview
The design language
Readwise presents a literary productivity workspace: a near-white canvas with a single editorial blue accent and warm yellow highlighter washes that literally visualize the product's purpose. The type system pairs a transitional serif (Charter) for headlines with a humanist sans (Mulish) for everything else, creating a bookish-but-modern reading-room atmosphere rather than a typical SaaS dashboard feel. Surfaces are flat and quiet — cards float on a cool paper-white (#f1f5f8) with hairline borders, almost no shadows, and rounded corners that feel like printed cards rather than app tiles. Yellow (#fff7ca) functions as a literal highlighter behind in-line emphasized text, not as a decorative accent — the product's identity IS the act of marking what matters. Components stay compact and text-forward, with one filled blue button carrying all the weight and everything else rendered in ghost or text-link form.
Color palette
brand
accent
Highlighter Yellow
#fff7caYellow supporting accent for decorative details and low-frequency emphasis.
Reader Orange
#fb9100Orange supporting accent for decorative details and low-frequency emphasis
neutral
Paper White
#ffffffCard surfaces, product screenshot backgrounds, button text on filled buttons, and the nav background. The topmost surface tier
Ink
#1f1f1fPrimary heading and body text. Near-black rather than pure black — softer on the eye, reads as printed ink rather than digital display
Page Mist
#f1f5f8Page canvas background. A cool, very-light blue-gray that reads as off-white paper rather than a flat gray, giving the entire page a subtle blue cast
Deep Slate
#2d2f33Secondary text and dark surface details. Used in nav and component borders where a slightly different tone from Ink is needed
True Black
#000000Dark supporting neutral for text, icons, and strong contrast.
Typography
Type scale
Major Second (1.125) · 16px basedisplay
50px · 600 · 1 · 0px trackingThe quick brown fox jumps
heading
29px · 600 · 1.13 · 0px trackingThe quick brown fox jumps
heading-sm
22px · 400 · 1.25 · -0.44px trackingThe quick brown fox jumps
subheading
18px · 700 · 1.5 · -0.36px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.32px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.5 · -0.28px trackingThe quick brown fox jumps
caption
11px · 800 · 1.09 · -0.22px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Charter
- Weights
- 400, 600
- Sizes
- 22px, 29px, 50px
- Line height
- 1.00–1.25
- Letter spacing
- normal
- Fallback
- Source Serif Pro
Editorial serif used exclusively for headlines and large display text. The choice of a transitional serif in a productivity SaaS is the site's signature move — it signals 'reading' and 'books' before any copy is read. Weight 400 at 50px with lineHeight 1.00 creates tight, book-title-style display; weight 600 at 29px handles section headlines. Substitute: Source Serif Pro or Lora if Charter is unavailable.
Additional typeface
Mulish
- Weights
- 400, 600, 700, 800
- Sizes
- 11px, 14px, 16px, 18px, 22px
- Line height
- 1.09–1.50
- Letter spacing
- -0.02em
- Fallback
- Inter or DM Sans
- Features
- "tnum" on, "lnum" on
Humanist sans for everything non-display: nav, body, buttons, labels, icons. The weight range is wide — 400 for body, 600 for buttons, 700/800 for bold tags and emphasis. Tighter lineHeight (1.09) at 11px keeps captions compact; 1.50 at 16–18px gives body copy room to breathe. Consistent -0.02em tracking across all sizes tightens the sans into a clean utility voice.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 12px
Border radius
nav
16pxtags
10pxcards
10pxbuttons
10pxSpacing scale
2px5px6px8px10px12px14px18px20px24px30px35px40px48px60px64px123px147pxGuidelines
Do
- Use Charter 50px weight 400 for hero display headlines, lineHeight 1.00, no letter-spacing adjustment — the tight leading makes the headline feel like a book title.
- Apply #fff7ca as a background wash behind 2–4 word phrases in body copy to signal emphasis; never as a full-surface background or button fill.
- Set the primary CTA as a solid #478cd0 button with white text, 10px radius, and 10/24px padding — no gradients, no shadows on the button itself.
- Use Mulish -0.02em tracking at all sizes; the tightened letter-spacing is what makes the sans feel like a deliberate choice rather than a default.
- Layer cards on the #f1f5f8 canvas with white #ffffff fills and hairline borders rather than relying on shadows for separation.
- Limit chromatic color to the single Pen Blue accent for actions and links; use Reader Orange only for the single 'Reader' feature badge.
- Pair every serif headline with Mulish body text at 16–18px — the contrast between transitional serif and humanist sans is the site's typographic identity.
Don’t
- Don't use Charter for body copy, nav, or buttons — it's reserved for headlines 22px and above.
- Don't apply #fff7ca to full card surfaces, section backgrounds, or large areas — it loses its meaning as a highlighter if it covers more than a line of text.
- Don't introduce additional accent colors beyond Pen Blue, Highlighter Yellow, and Reader Orange — the system is deliberately near-monochromatic.
- Don't use heavy drop shadows on cards or buttons; if elevation is needed, keep it soft (spread ≤ 20px) and tinted with Ink rather than pure black.
- Don't set display headlines in all-caps or with positive letter-spacing — Charter at 50px works because of its tight 1.00 leading and natural tracking.
- Don't use a filled colored button for secondary actions; use the Ghost Sign In style (white fill, 1px border) or a plain text link in Pen Blue.
- Don't set the page background to pure white #ffffff — Page Mist #f1f5f8 is what makes the white cards and product mockups read as elevated surfaces.
Components
Primary CTA Button
The main conversion action on hero and feature sectionsFilled with Pen Blue (#478cd0), white text, Mulish 16px weight 600 uppercase tracking, 10px border-radius, 10px vertical / 24px horizontal padding. Single, confident button — no secondary action beside it on the hero.
Ghost Sign In Button
Top-right navigation actionWhite background, 1px True Black border, 10px radius, Mulish 14px weight 600, 10px vertical / 18px horizontal padding. Outlined, not filled — keeps the nav quiet.
Feature Badge Tag
Flags new or beta features in the navReader Orange (#fb9100) pill background, white text, Mulish 11px weight 700, 10px radius, tightly padded (2–4px vertical, 6px horizontal). Small enough to be a footnote, colorful enough to catch the eye.
Step Icon Circle
Visual anchor for 'How it works' steps36–40px filled circle with a white line-icon inside. Three instances use three different colors: Pen Blue, a desaturated purple, and Reader Orange. Each circle sits above a Charter 22px step title and a Mulish 14–16px description.
Testimonial Card
User social proof in horizontal scrollWhite card on Page Mist canvas, 10px radius, 24px padding, hairline 1px border in #f1f5f8 (slightly darker than canvas), optional very soft shadow. Contains avatar, name, handle, date, and the tweet text in Mulish 14px. Twitter card aesthetic — looks like a screenshot, not a designed card.
In-line Highlighted Text
Emphasizes key phrases in body copyText wrapped in a Highlighter Yellow (#fff7ca) background wash, no border, no padding adjustment. The yellow extends slightly above and below the text baseline. This is the product's signature visual element — it IS the brand.
Product Hero Mockup
Shows the actual app on laptop and phonePhotorealistic laptop and iPhone frame, centered on Page Mist canvas, slight rotation/tilt for depth. The laptop screen shows the Daily Review interface; the phone shows a connected mobile view. Functions as the hero's primary visual — not an illustration, a real product shot.
Navigation Bar
Top-level site navigationWhite background, 16px radius on the outer container (pill-shaped bar), horizontal layout: logo left, nav links center, Sign In button right. Tight vertical padding (~14px). Minimal, quiet, almost invisible.
Text Link
In-body navigation and referencesPen Blue (#478cd0), underlined, Mulish inherits surrounding text size. Used for usernames, hashtags, and references inside testimonial content. No special hover treatment needed — the underline IS the affordance.
Section Heading
Top-of-section titles like 'Here's how Readwise works:' and 'Here's what our users say:'Charter 29px weight 400, Ink color, lineHeight 1.13, centered alignment. Sets the editorial tone immediately — a serif headline tells the reader they're in a book-adjacent space, not a dashboard.
Surfaces & elevation
Level 0
Page Canvas
#f1f5f8Base page background. Cool off-white paper tone.
Level 1
Card Surface
#ffffffTestimonial cards, product mockup backgrounds, elevated content blocks.
Level 2
Highlight Wash
#fff7caIn-line emphasis behind text. Also used as a soft callout surface.
Elevation is used sparingly and only on hero product imagery and testimonial cards. Most surfaces rely on hairline borders and the contrast between the page canvas (#f1f5f8) and white cards to establish layering. Shadows are soft, low-spread, and tinted with the Ink color rather than pure black — this keeps the page from feeling like a typical app UI.
Product mockup laptop frame
0 20px 40px rgba(31,31,31,0.15)
Testimonial cards
0 2px 8px rgba(31,31,31,0.08)
Layout & imagery
Layout
Centered, max-width ~1200px page container with a near-full-bleed hero. The hero is a vertical stack: nav bar at top, large serif headline, sub-headline with inline yellow highlight, single blue CTA, then the product mockup below — no split-screen, no side-by-side text/image. Sections below the hero alternate between centered text-and-icon blocks (3-column grid for 'How it works') and horizontal-scrolling card rows (testimonials). Vertical rhythm is comfortable but not spacious — ~64px between sections, ~24px internal padding. The nav is a single horizontal bar, not sticky, with a pill-shaped container that sits on the Page Mist background. No sidebar, no mega-menu, no footer visible above the fold.
Imagery
Product mockups dominate the visual hierarchy: a photorealistic laptop showing the Daily Review interface paired with an iPhone showing the mobile companion, both centered on the hero. The mockups are real product screenshots, not illustrations or 3D renders. Below the hero, user-generated content (tweet screenshots) provides social proof in a horizontal scrolling row — treated as found objects rather than designed cards. The only illustration is three small circular step icons in the 'How it works' section, each a flat filled circle with a white line-glyph. No lifestyle photography, no abstract graphics, no decorative imagery — every visual either shows the product or shows what users say about it.
Design notes
Agent Guide
**Quick Color Reference** - text: #1f1f1f - background: #f1f5f8 - card surface: #ffffff - border / hairline: #e2e8f0 (derive from #f1f5f8 family) - highlight wash: #fff7ca - primary action: no distinct CTA color - feature badge: #fb9100 (Reader Orange, single-use) **3-5 Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. **Section heading block**: Charter 29px weight 400, #1f1f1f, lineHeight 1.13, centered. Followed by 64px vertical gap to a 3-column grid of step cards on the #f1f5f8 canvas. 3. **Step card**: centered column. 40px filled circle in #478cd0 with a white line-icon. Below: Charter 22px weight 600 step title in #1f1f1f. Below: Mulish 16px weight 400 description in #1f1f1f, max-width 280px. 4. **Testimonial card**: #ffffff background, 10px radius, 24px padding, 1px hairline border (#e2e8f0), soft shadow 0 2px 8px rgba(31,31,31,0.08). Avatar 32px circle top-left, name in Mulish 14px weight 700 #1f1f1f, handle in Mulish 14px weight 400 #478cd0, date in Mulish 14px weight 400 #1f1f1f. Body text in Mulish 14px weight 400 #1f1f1f with #478cd0 underlined link text inline. 5. **Ghost nav button**: #ffffff background, 1px solid #000000 border, 10px radius, Mulish 14px weight 600 #1f1f1f, 10px vertical / 18px horizontal padding. Sits at the right edge of the nav bar.
Typographic Identity
The serif/sans pairing is the single most distinctive choice in this system. Charter at 50px weight 400 with lineHeight 1.00 for the hero, Charter at 29px weight 400 for section headlines, then Mulish for everything from 22px down. The serif does not appear in body copy, nav, or buttons — it is a display-only face. This split is deliberate: the serif signals 'reading material / books / editorial', while Mulish handles all functional UI. Don't blur this boundary; don't set Charter at 14px or 16px, and don't let Mulish creep into the headline role.
Similar brands
Medium
Same serif-display-headline + sans-body pairing on a near-white canvas, with a single accent color used sparingly for CTAs and links.
Substack
Editorial serif headlines on a quiet paper-white background, product-first hero with a real screenshot, and an almost-monochromatic palette that lets the content carry the color.
Notion
Comfortable density, minimal nav, product mockups as hero imagery, and a near-monochromatic palette with one accent color doing all the work.
Pocket (Mozilla)
Reading-focused product with a single blue accent on white, testimonial-heavy social proof section, and compact typographic rhythm.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
