---
version: alpha
name: Fastmail — Signup with Email Builder and Data Residency
colors:
  ink: '#1B1E20'
  paper: '#FFFFFF'
  primary: '#0067B9'
  disabled: '#C1C5C8'
typography:
  heading:
    fontFamily: '"Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell,
      "Noto Sans", -apple-system, Arial, sans-serif'
    fontSize: 35.924px
    fontWeight: 600
    lineHeight: 45px
  body:
    fontFamily: '"Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell,
      "Noto Sans", -apple-system, Arial, sans-serif'
    fontSize: 19.9336px
    fontWeight: 600
    lineHeight: 25px
---

## Overview
A complete initial signup screen with a white rounded panel on a blue gradient, an email-address builder, inline help, password field, US/EU residency cards and a disabled trial action. 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, Arial, sans-serif, 35.924px / 45px, weight 600; the corresponding mobile sample is 28.382px. Supporting text sample is 19.9336px / 25px. 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 form fields are 474px wide inside a centered white card. At 390px fields narrow to 342px with 24px interior gutters, and the card reaches the viewport edges. The heading changes from about 35.92px to 28.38px. Email local-part and domain stay adjacent; the two residency options remain side by side. Taller 1300px desktop and 1200px mobile viewports were used to include the complete nested-scroll initial form without expanding DOM containers. Measured outer document/component bounds: 1440 × 1300px desktop; 390 × 1200px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
White panel contrasts with a deep blue gradient; lightly bordered inputs and residency cards keep the long form organized. The selected US card has a blue outline and pale selected row.

## Shapes
Large panel corners, 6px input/action radii, a small custom-domain toggle and paired rectangular residency choices containing circular flags.

## Components
Name, local-part/domain email builder, custom-domain toggle, password visibility affordance, US/EU data residency, explanatory and legal copy, and disabled Start your free trial action. The US default is shown as delivered by the source. No fields, toggles, residency options or submission controls were changed.

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