Postmark — Illustrated Email-Service Registration

---
version: alpha
name: Postmark — Illustrated Email-Service Registration
colors:
  ink: '#000000'
  surface-1: '#FFFFFF'
  surface-2: '#FFDE00'
  surface-3: '#007BC8'
typography:
  heading:
    fontFamily: Elizeth, "Rund Text", "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 40px
    fontWeight: 400
    lineHeight: 50px
  body:
    fontFamily: '"Rund Text", "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
---

## Overview
A distinct registration page using a yellow illustrated postal header, strong serif promise, and a white four-field account form with legal consent and a full-width blue action. 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 (Say goodbye to missing or delayed emails.) uses Elizeth, "Rund Text", "Helvetica Neue", Helvetica, Arial, sans-serif, 40px with 50px leading and weight 400. The supporting sample uses "Rund Text", "Helvetica Neue", Helvetica, Arial, sans-serif, 12px / 16.8px. The corresponding mobile heading sample is 25px / 31.25px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
The desktop centers a white form beneath a wide postal illustration and headline; the card overlaps the boundary from yellow to pale background. On 390px the brand and existing-account link share the top row, the headline falls to 25px from 40px, and the form becomes a full-width white section with 25px inner gutters. The narrow opening viewport includes the main action and legal notice but not every footer element. Saved images measure 1440 × 1084px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
The white registration card uses a light shadow over the flat two-tone canvas. A dotted flight path ties the stamp and mailbox line drawings together; it is decoration, not a progress indicator.

## Shapes
Postal-stamp perforations, outlined mailbox art, four small-radius input rectangles, square legal checkbox and a wide blue action. A circular chat launcher is visible as an untouched default widget.

## Components
Full name, Work email, Username, Password, unchecked legal acceptance, Let’s get started, reCAPTCHA notice and Log in link. Placeholder names and addresses belong to the source form; no data was typed or submitted.

## Do's and Don'ts
Retain the separate username and email labels rather than collapsing their roles. Keep legal acceptance explicit and independent of marketing claims. Do not imply trial activation, validation success or a created account. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.