Plunk — monochrome developer-email homepage

---
version: alpha
name: Plunk — monochrome developer-email homepage
colors:
  primary: '#171717'
  text: '#171717'
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: '"Funnel Display", "Funnel Display Fallback"'
    fontSize: 86.4px
    fontWeight: 800
    lineHeight: 86.4px
  supporting:
    fontFamily: ui-sans-serif, system-ui, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32.5px
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 monochrome developer-email homepage with tightly tracked display type, a fine grid hero, sparse comparison rows, workflow diagrams, a terminal panel and a dark closing CTA.

Captured from https://www.useplunk.com/ at 2026-10-14T06:09:29.382108+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` “The open-sourceemail platform”: 86.4px, weight 800, leading 86.4px.
- `h2` “Replace your email stack”: 52px, weight 800, leading 54.6px.
- `h2` “Simple to start. Serious at scale.”: 52px, weight 800, leading 54.6px.

## Layout

Use a centered hero, four proof/price markers and a logo row before a long editorial sequence. Alternate broad white and faint-neutral sections. Pair explanatory copy with a workflow diagram, segment query, inbound feed and terminal demonstration. Finish with pricing, attributed reviews, FAQs and an inverse CTA.

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

At 390px the display title drops from 86.4px to 40px, actions stack, and the four opening markers form two columns. A small brand mark and hamburger replace desktop navigation. The mobile evidence covers the opening frame, not every lower interactive demo.

## Elevation & Depth

Depth comes from neutral separators and black demonstration panels rather than colorful gradients or heavy shadows.

## Shapes

Fine grid lines, predominantly rectangular demos, thin rules and rounded pill actions balance precision and approachability.

## Components

Use a centered hero, four proof/price markers and a logo row before a long editorial sequence. Alternate broad white and faint-neutral sections. Pair explanatory copy with a workflow diagram, segment query, inbound feed and terminal demonstration. Finish with pricing, attributed reviews, FAQs and an inverse CTA.

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.