Standard Notes — subscription comparison page

---
version: alpha
name: Standard Notes — subscription comparison page
colors:
  primary: rgb(8, 109, 214)
  text: rgb(24, 24, 24)
  surface: rgb(248, 249, 252)
typography:
  heading:
    fontFamily: Lato, sans-serif
    fontSize: 48px
    fontWeight: 900
    lineHeight: 62.4px
  supporting:
    fontFamily: '"Avenir Next", sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 23.4px
omitted:
- section: spacing
  reason: Exact geometry is recorded in Layout; no unobserved global spacing scale
    is inferred.
- section: rounded
  reason: Shapes are described from the capture; no global corner scale is inferred.
- section: components
  reason: This reference uses prose composition rules rather than an invented component-token
    API.
---

## Overview

A clean three-plan pricing page with a blue-emphasized professional tier, checkmarked benefits, an extended feature comparison, guarantee copy, and collapsed FAQs.

Captured from https://standardnotes.com/plans at 2026-10-12T06:07:04.259429+00:00. This is a static reference in a logged-out browser, not a tested application flow.

## Colors

primary: `rgb(8, 109, 214)`; text: `rgb(24, 24, 24)`; surface: `rgb(248, 249, 252)`. Text and action values are computed CSS samples; decorative artwork contains additional colors and is not reduced to a fabricated palette.

## Typography

Use the measured families and sizes rather than substituting an unrelated display face. The matching heading is measured at 36px / 46.8px on mobile.

- `h1` “Pricing”: 48px, weight 900, line-height 62.4px, color `rgb(24, 24, 24)`.
- `h2` “Our subscription plans unlock powerful experiences on top of the standard experience ”: 16px, weight 600, line-height 24px, color `rgb(49, 57, 68)`.
- `h2` “Compare features”: 30px, weight 700, line-height 39px, color `rgb(24, 24, 24)`.
- `h2` “Frequently asked questions”: 30px, weight 700, line-height 39px, color `rgb(24, 24, 24)`.
- `a` “Pricing”: 16px, weight 600, line-height 22px, color `rgb(24, 24, 24)`.
- `a` “Features”: 16px, weight 500, line-height 22px, color `rgb(99, 102, 107)`.
- `a` “Help”: 16px, weight 500, line-height 22px, color `rgb(99, 102, 107)`.

## Layout

Align the desktop introduction left above three vertical plan cards. Keep plan names, annual amounts, feature lists and actions aligned in a predictable scan order. Continue into a comparison matrix with a left feature-label column. At 390px the title reduces from 48px to 36px and the first plan fills a 358px content width. Do not infer horizontal table behavior from the opening viewport; no plan purchase or checkout was tested.

Measured desktop region: 1440.00 × 4467.00px at a 1440px viewport. Measured mobile region/page: 390.00 × 7952.00px at a 390px viewport. The primary image is the complete desktop page; mobile evidence is the opening 390 × 844px viewport, not proof of every lower-page interaction.

## Elevation & Depth

Use white cards with light outlines and subtle shadows against near-white surfaces. Blue checks and outlined actions distinguish availability from the filled primary plan action. Preserve the captured billing labels; prices are observations at capture time, not permanent guarantees.

## Shapes

Follow the silhouette visible in this reference, including the relative contrast between rectangular content blocks and decorative artwork. Sampled text nodes have no intrinsic radius; that does not imply every surrounding card is square. Do not infer hover elevation, focus rings, or animation curves from this still image.

## Components

Align the desktop introduction left above three vertical plan cards. Keep plan names, annual amounts, feature lists and actions aligned in a predictable scan order. Continue into a comparison matrix with a left feature-label column. At 390px the title reduces from 48px to 36px and the first plan fills a 358px content width. Do not infer horizontal table behavior from the opening viewport; no plan purchase or checkout was tested.

All depicted copy, illustration, product data and any customer proof come from the source page. Retain attribution when discussing source examples; replace marketing claims with your own verified content when adapting the pattern. Only explicitly described responsive states were inspected.

## Do's and Don'ts

- Do preserve the section hierarchy, text wrapping and measured spacing relationships.
- Do keep readable labels and meaningful action text when adapting this layout.
- Don't reuse source customer claims as your own evidence.
- Don't claim tested validation, checkout, account creation, keyboard navigation or carousel behavior; these were not exercised.