Postmark — Yellow-Branded Username Sign-in

---
version: alpha
name: Postmark — Yellow-Branded Username Sign-in
colors:
  ink: '#272727'
  surface-1: '#FFFFFF'
  surface-2: '#007BC8'
typography:
  heading:
    fontFamily: Elizeth, "Rund Text", "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 30px
    fontWeight: 400
  body:
    fontFamily: '"Rund Text", "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21px
---

## Overview
A Postmark sign-in screen with yellow masthead, white username/password card, blue action, recovery and remembered-session controls, plus a desktop product-promotion sidebar. 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 (Log In) uses Elizeth, "Rund Text", "Helvetica Neue", Helvetica, Arial, sans-serif, 30px with normal leading and weight 400. The supporting sample uses "Rund Text", "Helvetica Neue", Helvetica, Arial, sans-serif, 15px / 21px. The corresponding mobile heading sample is 30px / normal. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
The desktop card sits left of a compact DMARC Digests promotion, crossing the boundary between the yellow masthead and pale body. At 390px the sidebar disappears from the opening screen and the white form becomes nearly full-width below the wordmark. The title stays 30px. Recovery, remembered-session checkbox, action and registration link remain in a vertical sequence. Saved images measure 1440 × 1000px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
The white card has a small-radius edge and subtle shadow. The blue login button gives a single clear action; the promotion uses a tiny product image rather than another large card.

## Shapes
Small-radius inputs, a square checkbox, compact rectangular button and quiet outlined registration link. A round chat launcher remains in the lower corner as source UI.

## Components
Username and password fields, recovery link, unchecked Remember me for 2 weeks checkbox, Log In action, Sign up now, desktop DMARC promotion and footer attribution. Empty fields and default state only; no credentials, checkbox changes or submissions.

## Do's and Don'ts
Keep recovery discoverable without making it compete with Log In. Preserve the desktop/mobile sidebar distinction. Do not call the promotional sidebar a third-party authentication provider. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.