Beeper — inverse three-directory footer

---
version: alpha
name: Beeper — inverse three-directory footer
colors:
  primary: '#FFFFFF'
  surface: '#000000'
  text: '#FFFFFF'
typography:
  primaryRole:
    fontFamily: Haskoy, system-ui, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  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 black footer with a white Beeper identity, three link directories, a fine divider and a secondary row for social links and parent-company attribution.

Captured from https://www.beeper.com/ at 2026-10-15T06:08:46.937804+00:00. This image isolates `footer.footer2_component`.

## Colors

primary: `#FFFFFF`; surface: `#000000`; text: `#FFFFFF`. Values summarize measured surfaces and visually reviewed foregrounds; illustration and photograph colors are not a complete brand palette. Retain the observed light/dark contrast rather than applying the accent to every element.

## Typography

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

- a “Blog”: 16px, weight 400, line height 24px, tracking normal.
- a “Mission”: 16px, weight 400, line height 24px, tracking normal.
- a “Media/Press Inquiries”: 16px, weight 400, line height 24px, tracking normal.
- a “Developers”: 16px, weight 400, line height 24px, tracking normal.
- a “Download”: 16px, weight 400, line height 24px, tracking normal.

## Layout

Place the brand in the broad left area and Company, App and Legal directories across the right. Use small muted uppercase category labels above readable link rows. Separate the lower attribution and social region with a thin rule.

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

At 390px the logo and all three directories stack left-aligned. Social icons move above the parent-company line and copyright text. Link text remains 16px with 24px line height and 8px vertical padding, preserving generous touch spacing.

## Elevation & Depth

Use one flat black field. The thin divider creates hierarchy; do not add elevated containers around link lists. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Keep square section edges and simple glyph icons. The logo is the only large organic mark.

## Components

A black footer with a white Beeper identity, three link directories, a fine divider and a secondary row for social links and parent-company attribution. 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.