Beeper — illustrated three-benefit feature section

---
version: alpha
name: Beeper — illustrated three-benefit feature section
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 standalone three-benefit section with playful square illustrations, blue-violet headings and concise paragraphs explaining secure chats, multiple devices and chat features.

Captured from https://www.beeper.com/ at 2026-10-15T06:08:45.198152+00:00. This image isolates `section.features-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 “Messaging made easy”: 48px, weight 600, line height 55.2px, tracking normal.
- p “Beeper supports on-device connections for most chat apps. That me”: 16px, weight 400, line height 24px, tracking normal.
- p “Read and reply to your messages across multiple devices. Beeper i”: 16px, weight 400, line height 24px, tracking normal.
- p “Manage your inbox like a pro and never miss a message again with ”: 16px, weight 400, line height 24px, tracking normal.

## Layout

Center the section heading above three equal-width columns. Each column begins with a square illustration, then a left-aligned benefit label and a compact paragraph. The section has measured 64px vertical and 32px horizontal outer padding; keep the graphic-to-copy alignment consistent.

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

At 390px all three benefits stack vertically rather than becoming a carousel. The heading changes from 48px to 30px and body copy from 16px/24px to 14px/20px. Keep each illustration centered above its narrower left-aligned text block.

## Elevation & Depth

Illustrations contain perspective grids and light edge shadows; the outer section remains flat white. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Use softly rounded square illustrations, not generic icon circles. The section is not enclosed in a card.

## Components

A standalone three-benefit section with playful square illustrations, blue-violet headings and concise paragraphs explaining secure chats, multiple devices and chat features. 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.