Readwise — Warm Editorial Reading Journey

---
version: alpha
name: Readwise — Warm Editorial Reading Journey
colors:
  canvas: '#FBF9F3'
  text: '#333333'
  observed-1: '#E8E6E1'
  observed-2: '#7B7A79'
  observed-3: '#FFFFFF'
  observed-4: '#161616'
typography:
  heading:
    fontFamily: '"Source Serif 4", "Source Serif 4 Fallback", serif'
    fontSize: 64px
    fontWeight: 600
    lineHeight: 70.4px
  body:
    fontFamily: '"Albert Sans", "Albert Sans Fallback", sans-serif'
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28px
---

## Overview
A cream-and-apricot reading-product landing page with large serif headlines, highlighted phrases, layered library/device imagery, alternating features, source testimonials and an angled-card closing CTA. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This is a complete page/screen capture, not an isolated element crop.

## Colors
The YAML palette records computed opaque CSS text/action colors. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. Preserve the visual contrast between the main reading surface, text and actions shown in the capture.

## Typography
The selected h1 sample uses "Source Serif 4", "Source Serif 4 Fallback", serif, 64px / 70.4px, weight 600; supporting text uses 22px / 28px. Its corresponding mobile sample is 39.6947px / 43.6641px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.

## Layout
A rounded apricot hero sits inside broad desktop gutters, with centered headline, short supporting text and overlapping desktop/phone views. Three benefits lead to alternating illustration-and-copy rows, integrations, a horizontal testimonial treatment, additional features and a closing panel. At 390px the hero foreground changes to a single tall phone view; benefit blocks and feature rows stack and headings wrap. Measured screenshot bounds: 1440 × 7405px desktop and 390 × 8168px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Warm gradient glows and translucent device frames create soft depth. Feature illustrations sit on light tinted patches; the core reading canvas remains quiet and cream.

## Shapes
Large rounded hero and CTA panels, black pill actions, yellow marker-like highlights and paper-note cards rotated within clipped decorative regions.

## Components
Product navigation, reading hero, Import/Review/Remember benefits, highlight-management features, integration tiles, source-authored testimonials, scan/stats/chat cards, AI-tool feature list, closing action and footer. The screenshot represents one resting animation/carousel state. Source quotes and ratings are captured evidence, not independently verified claims to reuse.

## Do's and Don'ts
Use serif display text for editorial warmth and sans-serif body copy for utility. Keep highlight marks selective. Do not copy the source authors or testimonials into a different product as social proof. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.