Fastmail — Username-First Login on Blue Gradient

---
version: alpha
name: Fastmail — Username-First Login on Blue Gradient
colors:
  ink: '#1B1E20'
  paper: '#FFFFFF'
  primary: '#0067B9'
  button-text: '#F4F5F5'
typography:
  heading:
    fontFamily: '"Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell,
      "Noto Sans", -apple-system, Arial, sans-serif'
    fontSize: 15.75px
    fontWeight: 400
    lineHeight: 60px
  body:
    fontFamily: '"Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell,
      "Noto Sans", -apple-system, Arial, sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
---

## Overview
A username-first login screen with a compact white rounded card on a deep-blue gradient, a blue Continue action, and a separate recovery link beneath the card. 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, 15.75px / 60px, weight 400; the corresponding mobile sample is 15.75px. Supporting text sample is 14px / 20px. 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 centers the card in the upper portion of a wide blue canvas; the visible username field is 380px wide. At 390px the card has 20px outer gutters and 254px-wide fields, keeping large internal padding. Logo and Log in/Sign up navigation remain above the card. The initial screenshot shows only Username, not a visible password field. Measured outer document/component bounds: 1440 × 1000px desktop; 390 × 844px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
A restrained card shadow separates the white panel from the diagonal blue gradient. The active username border is blue.

## Shapes
Large rounded panel corners and compact 6px field/button radii. The recovery link sits outside the panel so it is secondary to Continue.

## Components
Brand header, initial username field, Continue action and account recovery link. Password and keep-logged-in nodes exist in the DOM but are not visible in this captured step and are not described as tested UI. No username was entered or submitted.

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