Postmark — Yellow Email Platform with Human Proof

---
version: alpha
name: Postmark — Yellow Email Platform with Human Proof
colors:
  ink: '#24272D'
  surface-1: '#FFFFFF'
  surface-2: '#ED746F'
  surface-3: '#4FC47E'
  surface-4: '#FFDE00'
  surface-5: '#007BC8'
typography:
  heading:
    fontFamily: Elizeth, "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif
    fontSize: 52px
    fontWeight: 700
    lineHeight: 57.2px
  body:
    fontFamily: '"Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
---

## Overview
A bold yellow email-service homepage with heavy serif messaging, a vertical testimonial treatment, blue actions, an API code example and playful delivery illustrations. 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 (The email delivery service that people actually like) uses Elizeth, "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif, 52px with 57.2px leading and weight 700. The supporting sample uses "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif, 16px / 22.4px. The corresponding mobile heading sample is 40px / 44px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
A broad yellow desktop hero splits the main message from a vertical stack of pale customer-quote cards. The page transitions to a light code section and alternating illustrated delivery/support stories, then a blue-tinted closing action and dense footer. At 390px the quote treatment appears above the main message, navigation becomes compact, and text uses shorter lines. Mobile headline size is 40px versus 52px desktop. Saved images measure 1440 × 5177px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
Cream quote cards and the white code surface lift slightly above flat backgrounds. The yellow hero is the dominant plane; colorful line-art vans and mailboxes create personality without photorealistic depth.

## Shapes
Moderately rounded quote and code cards, stronger rectangular blue actions, outlined logo/navigation elements and illustrated postage/mail motifs.

## Components
Announcement strip, navigation, main message, source customer quotes, trial and API-documentation links, language-tab code sample, migration dropdown, delivery/message-stream/support features, closing CTA and footer. The cookie notice was dismissed using its existing Close control. Source quotes and statistics are shown as authored, not verified performance claims.

## Do's and Don'ts
Use yellow for broad brand areas and blue for primary action contrast. Balance the assertive hero with breathable pale sections. Do not execute the illustrative API request or infer delivery performance from marketing copy. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.