Readwise — Two-Plan Editorial Comparison Page

---
version: alpha
name: Readwise — Two-Plan Editorial Comparison Page
colors:
  canvas: '#FFFFFF'
  text: '#1F1F1F'
  observed-1: '#478CD0'
  observed-2: '#2D2F33'
  observed-3: '#333333'
  observed-4: '#000000'
typography:
  heading:
    fontFamily: Charter, Georgia, serif
    fontSize: 60px
    fontWeight: 600
    lineHeight: 67.5px
  body:
    fontFamily: Mulish, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A complete white pricing page with a large serif title, two-plan feature matrix, highlighted full-plan column, blue signup action, FAQ and angled testimonial gallery. 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 Charter, Georgia, serif, 60px / 67.5px, weight 600; supporting text uses 16px / 24px. Its corresponding mobile sample is 50px / 56.25px. 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
The desktop comparison uses a wide feature-label column and two narrower plan columns. At 390px it retains a compact three-column comparison rather than turning the plans into separate cards; text wraps inside the narrower row labels. A centered action, reader avatars, FAQ and horizontally clipped testimonial gallery follow. Measured screenshot bounds: 1440 × 2664px desktop and 390 × 2781px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Mostly flat white surfaces, pale alternating rows and thin table borders. A gray Lite header and blue full-plan header distinguish the options without large elevated cards.

## Shapes
Squared comparison grid with mildly rounded outer corners, check marks, a blue rounded action and simple FAQ disclosure rows.

## Components
Readwise Lite and Readwise plan columns, annual-billing monthly amounts, feature availability checks, signup action, FAQ, source testimonials and dark footer. The two prices reflect the captured annual-billing state; trial activation, billing and accordion interactions were not tested. The horizontally clipped testimonial strip intentionally contains more content than this static state shows.

## Do's and Don'ts
Align each availability mark precisely with its feature label. Keep the billing basis adjacent to the amounts. Do not confuse a feature check with a call-to-action or claim that hidden carousel items were all inspected. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.