Fastmail — Warm Plan Cards and Detailed Comparison

---
version: alpha
name: Fastmail — Warm Plan Cards and Detailed Comparison
colors:
  ink: '#1B1E20'
  paper: '#FFFFFF'
  primary: '#0067B9'
typography:
  heading:
    fontFamily: '"Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell,
      "Noto Sans", -apple-system, "Segoe UI", Arial, sans-serif'
    fontSize: 15.75px
    fontWeight: 400
    lineHeight: 22px
  body:
    fontFamily: '"Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell,
      "Noto Sans", -apple-system, "Segoe UI", Arial, sans-serif'
    fontSize: 17.9306px
    fontWeight: 400
    lineHeight: 26.8958px
---

## Overview
A complete localized pricing page with a warm off-white serif introduction, personal/business tabs, country and term controls, three plan cards, a long feature matrix, and collapsed FAQs. Inspected on 2026-09-30 at 1440px and 390px widths. This is a full-page or complete initial-screen reference, not an isolated component crop.

## Colors
The token values above are measured opaque CSS text, surface or action colors. Blue gradient direction and tonal variation are visually observed; exact gradient stops were not measured. Transparent roots inherit their surrounding surfaces and are not treated as measured white. Artwork and logo colors remain source-specific rather than universal tokens.

## Typography
The selected heading/label sample uses "Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", -apple-system, "Segoe UI", Arial, sans-serif, 15.75px / 22px, weight 400; the corresponding mobile sample is 15.75px. Supporting text sample is 17.9306px / 26.8958px. Preserve the hierarchy rather than assuming every paragraph uses the same size. Computed font stacks do not grant font licenses; choose licensed equivalents when adapting.

## Layout
Three desktop plan cards align beneath the country selector and term switch. Individual, Duo and Family plans are differentiated by small icons and colored top accents, with a comparison matrix below. At 390px plan cards stack; the country/term controls compress into the available width. The serif page title scales from about 51.76px to 46.53px. Keep feature descriptions readable instead of reducing all type to fit the desktop grid. Measured outer document/component bounds: 1440 × 7145px desktop; 390 × 8771px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
Warm intro background, white cards and a restrained shared shadow give the prices emphasis; the matrix uses mostly white space, text alignment and check marks.

## Shapes
Subtle card corners, pill-like term controls and fine table separators. The dark footer closes the long light page.

## Components
Personal/business selector, country selector, 1/12/24/36-month term controls, plan cards, feature comparison and collapsed FAQ. The source redirected to /pricing/de/ and displayed Germany/EUR with 12 months selected. Business plans, alternate countries, terms and FAQ expansion were not tested; do not treat captured prices as an evergreen offer.

## Do's and Don'ts
Do preserve the observed reading order, contrast, spacing and responsive emphasis. Do supply keyboard focus, meaningful labels and reduced-motion alternatives in an implementation. Do not copy source testimonials, brand assets or performance claims as your own. Do not infer successful submission, hidden validation, hover or authentication behavior from resting screenshots.