Standard Notes — illustrated privacy landing

---
version: alpha
name: Standard Notes — illustrated privacy landing
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 white-and-blue note-taking homepage with a bold centered message, saturated vault and library illustrations, paired editorial cards, and an orbiting-icon download section.

Captured from https://standardnotes.com/ at 2026-10-12T06:05:38.372621+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` “Free your mind.”: 48px, weight 900, line-height 62.4px, color `rgb(24, 24, 24)`.
- `h2` “Standard Notes is a free, secure note-taking app with powerful end-to-end encryption,”: 18px, weight 500, line-height 27px, color `rgb(49, 57, 68)`.
- `h2` “A steel vault for your mind.”: 30px, weight 700, line-height 39px, color `rgb(24, 24, 24)`.
- `h2` “Write fearlessly.”: 28px, weight 700, line-height 36.4px, color `rgb(24, 24, 24)`.
- `h2` “Your notes and files, always.”: 28px, weight 700, line-height 36.4px, color `rgb(24, 24, 24)`.
- `h2` “Take back your data.”: 30px, weight 700, line-height 39px, color `rgb(24, 24, 24)`.
- `h2` “Download Standard Notes”: 30px, weight 700, line-height 39px, color `rgb(24, 24, 24)`.
- `h2` “Who is Standard Notes?”: 30px, weight 700, line-height 39px, color `rgb(24, 24, 24)`.

## Layout

Constrain desktop content to approximately 1082px centered within 1440px. Use a narrow centered hero description and two adjacent blue actions. The large security illustration spans the content width; smaller editorial benefits sit in two columns. At 390px the heading drops from 48px to 36px, navigation becomes a menu control, and the illustrated content reflows to the viewport width. Only the opening mobile viewport and separately captured download section were visually verified.

Measured desktop region: 1440.00 × 4780.00px at a 1440px viewport. Measured mobile region/page: 390.00 × 6610.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

Combine pale-gray panels and thin borders with richly colored editorial images. Use modest card rounding and occasional soft shadows, not a uniform shadow on every section. The download motif uses concentric circles as decoration.

## 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

Constrain desktop content to approximately 1082px centered within 1440px. Use a narrow centered hero description and two adjacent blue actions. The large security illustration spans the content width; smaller editorial benefits sit in two columns. At 390px the heading drops from 48px to 36px, navigation becomes a menu control, and the illustrated content reflows to the viewport width. Only the opening mobile viewport and separately captured download section were visually verified.

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.