Beeper — platform download CTA with store badges

---
version: alpha
name: Beeper — platform download CTA with store badges
colors:
  primary: '#0C52F9'
  surface: '#FFFFFF'
  text: '#1A1B1F'
typography:
  primaryRole:
    fontFamily: Haskoy, system-ui, sans-serif
    fontSize: 48px
    fontWeight: 600
    lineHeight: 55.2px
  supporting:
    fontFamily: Haskoy, system-ui, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
omitted:
- section: spacing
  reason: Measured geometry and responsive composition are documented below; no global
    spacing scale is inferred.
- section: rounded
  reason: Observed silhouettes and measured radii are described in Shapes rather than
    inventing a brand scale.
- section: components
  reason: This reference documents observed composition in prose, not an inferred
    component API.
---

## Overview

A centered app-download CTA with a gradient-colored heading, one blue pill download action and separate Apple App Store and Google Play badges.

Captured from https://www.beeper.com/ at 2026-10-15T06:08:46.243310+00:00. This image isolates `section.get-beeper-section`.

## Colors

primary: `#0C52F9`; surface: `#FFFFFF`; text: `#1A1B1F`. Values summarize measured surfaces and visually reviewed foregrounds; illustration and photograph colors are not a complete brand palette. Blue-violet text uses a painted gradient; transparent computed heading text is not the final visible color. Retain the observed light/dark contrast rather than applying the accent to every element.

## Typography

The primary token is a sampled heading; supporting typography is sampled independently. Generated font-loader aliases are normalized to portable family names.

- h2 “Get Beeper”: 48px, weight 600, line height 55.2px, tracking normal.
- p “Beeper is free to use, with optional paid subscription. You can u”: 16px, weight 400, line height 24px, tracking normal.
- a “Download for Linux”: 16px, weight 600, line height 24px, tracking normal.

## Layout

Stack a short heading, explanatory paragraph and platform-specific download action. Leave a deliberately large breathing space before the two store badges. The measured section padding is 64px 32px, with a 9999px button radius and 14px 32px button padding.

Desktop image: 1440 × 538px at a 1440px viewport. Mobile evidence: 390 × 697px at a 390px viewport. The selected element measured 1440.00 × 536.75px desktop and 390.00 × 696.06px mobile. Integer crops use the measured document coordinates; page-edge subpixel rounding is limited to one pixel.

At 390px the heading drops from 48px to 30px while paragraph text stays 16px/24px. The paragraph wraps into several centered lines, and the badges move from a horizontal pair to a vertical stack. The Linux label reflects the capture environment, not the only supported platform.

## Elevation & Depth

Keep the surface white and unboxed. Visual weight comes from the solid-blue primary action and black store badges. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

The primary download button is a long capsule. Keep the official store badges rectangular and preserve their proportions.

## Components

A centered app-download CTA with a gradient-colored heading, one blue pill download action and separate Apple App Store and Google Play badges. Preserve the hierarchy and grouping described above rather than mixing this composition with unrelated page modules. This capture records one visible state; hover, focus, validation, menus and successful transactions are untested unless explicitly described. No credentials were entered and no form was submitted. Source-owned customer statements, prices and certifications remain source claims, not independently verified facts.

## Do's and Don'ts

- Do preserve the responsive grouping, reading order and measured type hierarchy.
- Do use original content and only substantiated claims when adapting this layout.
- Do keep labels readable and provide accessible focus and reduced-motion behavior in a new implementation; these are recommendations, not verified source behavior.
- Don't treat a static animation frame as proof of timings, easing or all interaction states.
- Don't reproduce source overflow or use decorative padding at the expense of readable mobile content.