---
version: alpha
name: Mailcoach — registration form with provider options
colors:
  primary: '#142D6F'
  accent: '#3461D6'
  surface: '#FFFFFF'
  canvas: '#F6F4EF'
  provider-fill: '#EBE8DD'
typography:
  heading:
    fontFamily: neue-haas-grotesk-text
    fontSize: 28px
    fontWeight: 700
    lineHeight: 35px
  body:
    fontFamily: neue-haas-grotesk-text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
  control:
    fontFamily: neue-haas-grotesk-text
    fontSize: 15.008px
    fontWeight: 500
    lineHeight: 15.008px
rounded:
  control: 33554400px
spacing:
  control-block: 8px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.primary}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

A long white registration card on warm off-white, with navy type, side-by-side provider pills, four labeled fields, consent choices and an inline anti-bot control.

Source: https://dashboard.mailcoach.app/register. Captured 2026-10-06T06:03:11.114671+00:00. This guide describes the observed reference, not an official brand specification.

## Colors

Observed palette: primary: #142D6F; accent: #3461D6; surface: #FFFFFF; canvas: #F6F4EF; provider-fill: #EBE8DD. Values come from source computed styles and inspected native-raster surface samples. Disabled controls are recorded as painted colors where opacity changes their base accent. Preserve the color roles shown in this individual reference.

## Typography

Measured in a 1440px desktop viewport and a 390px mobile viewport at device scale 1. The chosen desktop primary text sample is 28px / 35px, weight 700, using neue-haas-grotesk-text; its measured width is 464.00px. The corresponding mobile sample is 28px / 35px, width 300.00px. Computed styles may describe a parent while a child paints a colored word.

Maintain the observed heading/body hierarchy. Do not replace the source typeface with a system font without checking wrapping and control widths.

## Layout

Center the card and keep the title left aligned. Put Google and GitHub options on one desktop row, then Name, Email, Password and Confirm Password, agreement and optional newsletter choices, inline verification and the account action.

Responsive evidence: At 390px the provider choices stack as full-width pills. The heading stays 28px/35px and the fields become about 300px wide with visible side padding. The form is taller than the mobile opening viewport, so its complete desktop screenshot supplies lower-control evidence.

## Elevation & Depth

A white rounded card with minimal border/shadow separates the form from the warm background. Provider actions use a muted beige fill, focused input outlines are blue, and the final account button is a compact royal-blue pill.

No hover, transition timing or shadow blur values were measured. Any additional elevation values would be implementation estimates, not captured tokens.

## Shapes

A measured visible control uses a 33554400px radius and padding 8px 24px. Match that control's role rather than applying the same radius to every container.

## Components

An inline Cloudflare verification checkbox is present below the source form; it does not replace or obscure the registration UI and was not solved or clicked. Terms and optional product-update checkboxes stayed unchecked. No form values, credentials, account creation or trial activation occurred.

This is a static recorded state. Interactions not explicitly described as inspected remain untested.

## Do's and Don'ts

- Do preserve the hierarchy, whitespace, source-state distinctions and responsive changes documented above.
- Do keep field labels, content order and visible control affordances intact.
- Do treat captured prices, marketing claims and quotations as dated source content.
- Don't fabricate testimonials, metrics, expanded states, error messages or successful transactions.
- Don't infer dark mode, extra breakpoints or animation timings from these two viewport samples.