Plunk — monochrome usage-based pricing

---
version: alpha
name: Plunk — monochrome usage-based pricing
colors:
  primary: '#171717'
  text: '#171717'
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: '"Funnel Display", "Funnel Display Fallback"'
    fontSize: 86.4px
    fontWeight: 800
    lineHeight: 79.488px
  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 usage-based pricing page with a white free-plan panel, a black paid-plan panel, a plain-language feature table and a self-hosting strip.

Captured from https://www.useplunk.com/pricing at 2026-10-14T06:09:47.168100+00:00. The primary image is the complete desktop page; mobile visual evidence is the 390 × 844 opening viewport.

## Colors

primary: `#171717`; text: `#171717`; surface: `#FFFFFF`. 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.

- `h1` “Simple, transparent pricing”: 86.4px, weight 800, leading 79.488px.
- `h2` “Every feature, every plan.”: 52px, weight 800, leading 54.6px.
- `h3` “Transactional emails”: 16px, weight 600, leading 24px.

## Layout

Center the large pricing title over two contrasting desktop plans. Show the allowance or unit price at the top, then feature bullets and a full-width pill action. Follow with an unboxed two-column feature catalogue, self-hosting strip and inverse CTA. Preserve the lack of ornamental plan badges.

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

At 390px the title becomes 40px and wraps to three lines. The plans stack with the free option first; the opening mobile frame shows the start of that plan. Desktop feature-table responsiveness below that point was not visually tested.

## Elevation & Depth

A black paid panel contrasts with the white free panel; very light section backgrounds and hairline rules organize the remainder.

## Shapes

Square plan silhouettes and pill actions keep the emphasis on the numeric price and plain feature lists.

## Components

Center the large pricing title over two contrasting desktop plans. Show the allowance or unit price at the top, then feature bullets and a full-width pill action. Follow with an unboxed two-column feature catalogue, self-hosting strip and inverse CTA. Preserve the lack of ornamental plan badges.

All interactions beyond ordinary navigation, consent dismissal and source-media loading remain untested. No credentials, forms, accounts, trials or purchases were submitted. Scroll-reveal headings were individually brought into view before the final full-page capture. Animated demos represent one moment, not a verified interaction specification.

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