Fastmail — Blue-Gradient Offline Inbox CTA

---
version: alpha
name: Fastmail — Blue-Gradient Offline Inbox CTA
colors:
  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: 16px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: '"Proxima Nova", system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell,
      "Noto Sans", -apple-system, "Segoe UI", Arial, sans-serif'
    fontSize: 22.6941px
    fontWeight: 400
    lineHeight: 31.8784px
---

## Overview
An isolated closing CTA with rounded upper corners, a navy-to-blue gradient, three compact product icons, a centered serif headline, supporting migration copy, and one blue trial button. Inspected on 2026-09-30 at 1440px and 390px widths. This screenshot contains only the element selected by `section.c-footer-cta`.

## 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, 16px / 24px, weight 400; the corresponding mobile sample is 16px. Supporting text sample is 22.6941px / 31.8784px. 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
The selected section spans 1440px and is about 491px high on desktop, with roughly 1261px content width. The heading is 46.01px and fits one line. At 390px the section is about 564px high, the content width is 348px, and the 41.36px heading wraps over three lines. The supporting text wraps to two lines while the button stays compact and centered. Measured outer document/component bounds: 1440 × 491px desktop; 390 × 564px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
Gradient supplies the main depth; a soft button shadow gives the single action a clear foreground position without introducing a surrounding card.

## Shapes
Section has 24px top corner radii and square bottom corners. The action has an 8px radius and measures about 247px wide on desktop. Three small blue icons create a quiet lead-in above the headline.

## Components
Mail, calendar and people icons; offline-inbox headline; migration sentence; trial CTA. Capture contains only section.c-footer-cta, not the landing page. The trial link was not activated and no account was created.

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