Postmark — Volume Pricing and Detailed Plan Matrix

---
version: alpha
name: Postmark — Volume Pricing and Detailed Plan Matrix
colors:
  ink: '#272727'
  surface-1: '#F5FAFD'
  surface-2: '#FFFFFF'
  surface-3: '#007BC8'
  surface-4: '#FFDE00'
  surface-5: '#F1F1F1'
typography:
  heading:
    fontFamily: Elizeth, "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif
    fontSize: 36px
    fontWeight: 400
    lineHeight: 45px
  body:
    fontFamily: '"Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
---

## Overview
A complete usage-pricing page with a yellow introductory band, email-volume slider, four plan cards, dense grouped comparison matrix, add-ons, testimonials and FAQ. Inspected at 1440px desktop and 390px mobile on 2026-10-02. The primary image is the full desktop page; mobile evidence is the opening viewport only.

## Colors
The palette lists opaque computed CSS colors observed in this reference. A sampled-canvas token, when present, is a screenshot pixel sample rather than a CSS declaration. Gradients, transparency, texture, illustration colors and logo hues remain visually described; do not flatten them into one accent.

## Typography
The measured heading sample (Simple pricing that scales with your business) uses Elizeth, "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif, 36px with 45px leading and weight 400. The supporting sample uses "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif, 18px / 27px. The corresponding mobile heading sample is 30px / 37.5px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
The desktop page centers a volume control above four plans, then extends into a long four-column matrix divided into capability groups. Optional add-ons and explanatory blocks precede source testimonials and closed question rows. At 390px the headline reduces to 30px and the volume control nearly spans the content width; the Free card begins below it. The long matrix was reviewed on desktop, not exhaustively on mobile. Saved images measure 1440 × 8949px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
Flat yellow announcement/hero areas contrast with white cards and a lightly tinted main canvas. A blue emphasized plan header and button row organize the pricing tier hierarchy without heavy decoration.

## Shapes
A horizontal stepped track with circular yellow handle, rounded plan cards, small dot/check indicators, fine table separators and a full-width yellow closing band.

## Components
Volume slider captured at 10,000 emails, Free/Basic/Pro/Platform cards, send/receive, integration, analytics, support/security and user comparisons, optional add-ons, product benefits, vendor-comparison links, quotes and FAQs. The cookie notice was closed. Slider, plan changes, accordions, chat and purchases were not exercised.

## Do's and Don'ts
Keep usage quantity, price and plan scope visually connected. Preserve grouped table headings so the dense matrix remains navigable. Do not imply a dragged-slider state or reuse captured pricing as a guaranteed current quote. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.