Standard Notes — orbiting-icon download CTA

---
version: alpha
name: Standard Notes — orbiting-icon download CTA
colors:
  primary: rgb(8, 109, 214)
  text: rgb(24, 24, 24)
  surface: rgb(248, 249, 252)
typography:
  heading:
    fontFamily: Lato, sans-serif
    fontSize: 30px
    fontWeight: 700
    lineHeight: 39px
  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 centered download call to action framed by orbiting feature icons, with a platform selector, blue download button, and a secondary plans link.

Captured from https://standardnotes.com/ at 2026-10-12T06:09:25.980397+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 30px / 39px on mobile.

- `h2` “Download Standard Notes”: 30px, weight 700, line-height 39px, color `rgb(24, 24, 24)`.
- `button` “Download for free”: 16px, weight 600, line-height normal, color `rgb(255, 255, 255)`.
- `a` “Learn about our plans”: 18px, weight 400, line-height 23.4px, color `rgb(8, 109, 214)`.

## Layout

On desktop, center the logo medallion, heading and supporting line; place the platform selector and download button side by side. At 390px the heading wraps, the selector and button each span the 326px inner area with 32px gutters, and the plans link stays below. The captured selector shows Linux. The menu and file download were not activated.

Measured desktop region: 1440.00 × 734.89px at a 1440px viewport. Measured mobile region/page: 390.00 × 762.69px at a 390px viewport. The primary image is only the selected element; use selector `[class*="downloadSection__MainContainerStyled"]` to identify its boundary. Desktop and mobile were warmed up, measured, and cropped from fresh full-page captures.

## Elevation & Depth

The central logo sits on a raised white circular medallion with a pale patterned halo. Small colored icons orbit within striped circles. Keep the actual controls rectangular with modest rounding; do not turn the main action into another circular icon.

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

On desktop, center the logo medallion, heading and supporting line; place the platform selector and download button side by side. At 390px the heading wraps, the selector and button each span the 326px inner area with 32px gutters, and the plans link stays below. The captured selector shows Linux. The menu and file download were not activated.

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.