---
version: alpha
name: Fastmail — Friendly Serif Email Product Tour
colors:
  ink: '#1B1E20'
  paper: '#FFFFFF'
  primary: '#0067B9'
typography:
  heading:
    fontFamily: roca, "Georgia Roca Fallback", "Iowan Old Style", "Palatino Linotype",
      "URW Palladio L", P052, serif
    fontSize: 58.2274px
    fontWeight: 400
    lineHeight: 64.7488px
  body:
    fontFamily: '"Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell,
      "Noto Sans", -apple-system, "Segoe UI", Arial, sans-serif'
    fontSize: 25.5304px
    fontWeight: 400
    lineHeight: 35.8626px
---

## Overview
A complete email-service landing page combining warm serif headlines, deep-blue gradients, a large inbox preview, scroll-linked feature illustrations, testimonial cards, and pale privacy sections. 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. Native-resolution vertical viewport stitch after warm-up, preserving observed scroll-driven content. Subsequent tiles exclude the repeated sticky navigation area. No DOM/CSS content modifications.

## 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 roca, "Georgia Roca Fallback", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif, 58.2274px / 64.7488px, weight 400; the corresponding mobile sample is 46.533px. Supporting text sample is 25.5304px / 35.8626px. 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
Desktop opens with a centered serif headline above a broad app preview, then a two-column feature story with a sticky illustration rail. The native-resolution stitched capture preserves sampled scroll states, so the sticky artwork can appear at multiple positions. At 390px the navigation collapses, the headline is about 46.53px rather than 58.23px, feature illustrations stack with their copy, and card groups become vertical. Avoid turning the spacious feature narrative into a dense dashboard. Measured outer document/component bounds: 1440 × 10476px desktop; 390 × 12492px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
Dark-to-bright blue gradients separate promotional chapters from warm off-white content. White testimonial and feature cards use subtle shadows and large clean surfaces.

## Shapes
Rounded top corners mark major overlapping sections. The hero includes pill-like product tabs and a broad rounded application frame; content cards stay more restrained.

## Components
Residency announcement, navigation, mail/contact/calendar preview tabs, testimonial strip, productivity/privacy/organization story, quote cards, trust features, open-standards story, closing CTA and footer. Tabs and video controls were not clicked. Quotes and app data are original source evidence, not invented endorsements.

## 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.