Plunk — inverse editorial closing CTA

---
version: alpha
name: Plunk — inverse editorial closing CTA
colors:
  primary: '#FFFFFF'
  text: '#FFFFFF'
  surface: '#171717'
typography:
  heading:
    fontFamily: '"Funnel Display", "Funnel Display Fallback"'
    fontSize: 86.4px
    fontWeight: 800
    lineHeight: 82.08px
  supporting:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 31px
omitted:
- section: spacing
  reason: Measured geometry is documented in Layout; no unobserved global spacing
    scale is inferred.
- section: rounded
  reason: Observed silhouettes are described in Shapes without inventing a global
    radius scale.
- section: components
  reason: Reference-specific composition is described in prose rather than an inferred
    token API.
---

## Overview

A standalone black closing band pairing a large white two-line headline with a compact pricing reassurance and two pill actions.

Captured from https://www.useplunk.com/ at 2026-10-14T06:08:06.589563+00:00. The primary image isolates `main > section:last-child`; desktop and mobile crops were measured independently.

## Colors

primary: `#FFFFFF`; text: `#FFFFFF`; surface: `#171717`. These are observed reference colors, not a complete brand palette. Neutral hex values summarize visually matching neutral surfaces; measured text samples are retained below.

## Typography

The primary sampled role is heading, using `"Funnel Display", "Funnel Display Fallback"`. Supporting text uses `ui-sans-serif, system-ui, sans-serif`. Do not mistake a button sample for a measured page heading.

- `h2` “Start sending in 5 minutes.”: 86.4px, weight 800, leading 82.08px.

## Layout

Split the desktop block into a dominant left headline and smaller right action group. Align the secondary copy and two actions near the lower headline baseline. Preserve substantial top/bottom padding; the black region is a full-width band, not a floating card.

Desktop region/page: 1440.00 × 453.16px at a 1440px viewport. Mobile region/page: 390.00 × 486.00px at a 390px viewport.

At 390px the headline and action group stack with 24px side gutters. Display type drops from 86.4px to 40px; the supporting copy stays 20px and the two pill actions remain side by side.

## Elevation & Depth

The inverse black surface provides all necessary emphasis. Avoid adding gradients or strong card shadows.

## Shapes

An edge-to-edge rectangular band with white filled primary and thin outlined secondary pill actions.

## Components

Split the desktop block into a dominant left headline and smaller right action group. Align the secondary copy and two actions near the lower headline baseline. Preserve substantial top/bottom padding; the black region is a full-width band, not a floating card.

All interactions beyond ordinary navigation, consent dismissal and source-media loading remain untested. No credentials, forms, accounts, trials or purchases were submitted.

## Do's and Don'ts

- Do preserve this reference's alignment, hierarchy and measured responsive changes.
- Do keep labels and supporting text readable; preserve intentional carousel peeks where described.
- Do replace source-specific prices, product examples, metrics and customer proof with your own verified content.
- Don't infer validation, hover behavior, animation timing or accessibility conformance from a static capture.
- Don't promote a sampled font or radius into an unsupported global design system.