Beeper — playful universal messaging landing

---
version: alpha
name: Beeper — playful universal messaging landing
colors:
  primary: '#0C52F9'
  surface: '#FFFFFF'
  text: '#1A1B1F'
typography:
  primaryRole:
    fontFamily: Haskoy, system-ui, sans-serif
    fontSize: 48px
    fontWeight: 800
    lineHeight: 48px
  supporting:
    fontFamily: Haskoy, system-ui, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
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 bright messaging-app landing page combining a blue-violet illustrated hero, recognizable service icons, three illustrated benefits, a download CTA and a black directory footer.

Captured from https://www.beeper.com/ at 2026-10-15T06:06:03.743000+00:00. This is a complete page/screen reference, not an isolated element.

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

- h1 “One inbox for all your chats”: 48px, weight 800, line height 48px, tracking -0.75px.
- h2 “Messaging made easy”: 48px, weight 600, line height 55.2px, tracking normal.
- h2 “Get Beeper”: 48px, weight 600, line height 55.2px, tracking normal.
- h2 “About Beeper”: 48px, weight 600, line height 55.2px, tracking normal.
- p “Get the most popular messaging services, all in a single app.”: 18px, weight 400, line height 28px, tracking normal.

## Layout

Begin with a small white brand-and-download bar, then a full-width cloud-and-avatar illustration behind centered copy. Follow with a six-column service grid, three illustrated feature columns, a spacious centered download area, explanatory company copy and an inverse footer. Keep artwork separate from live headings.

Desktop image: 1440 × 3420px at a 1440px viewport. Mobile evidence: 390 × 844px at a 390px viewport.

At 390px the hero heading drops from 48px to 36px and wraps to two lines; the service grid becomes three columns. The reviewed feature and CTA crops confirm a single-column feature stack and vertically separated store badges. Mobile evidence does not test navigation or app installation.

## Elevation & Depth

Use depth inside the illustrations, not heavy shadows on the page sections. White content areas remain flat. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Round the download controls into pills; use circular avatars, cloud silhouettes and softly rounded square illustrations.

## Components

A bright messaging-app landing page combining a blue-violet illustrated hero, recognizable service icons, three illustrated benefits, a download CTA and a black directory footer. 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.