Missive — account creation form panel

---
version: alpha
name: Missive — account creation form panel
colors:
  primary: '#2E3034'
  surface: '#FFFFFF'
  accent: '#2266ED'
  muted: '#585F66'
typography:
  primary:
    fontFamily: -apple-system
    fontSize: 24px
    fontWeight: 500
    lineHeight: 33.6px
  body:
    fontFamily: -apple-system
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
  control:
    fontFamily: -apple-system
    fontSize: 14px
    fontWeight: 600
components:
  primary:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  control-label:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 8px
spacing:
  sampled-control-block: 12px
---

## Overview

An isolated Missive signup panel with stacked Google, Apple and SSO choices, email and password fields, consent checkbox, native CAPTCHA widget and disabled signup action.

Source: https://mail.missiveapp.com/#signup. Captured 2026-10-07T06:06:42.251690+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed roles: primary: #2E3034; surface: #FFFFFF; accent: #2266ED; muted: #585F66. Values are measured source colors and inspected surfaces. Do not apply the accent indiscriminately to secondary copy or disabled controls.

## Typography

The primary sampled text uses -apple-system at 24px / 33.6px, weight 500, with a measured desktop width of 372.00px. Its corresponding mobile sample is 24px / 33.6px across 342.00px. Body and control tokens above come from this reference's own computed styles; `normal` leading is omitted from YAML rather than guessed.

## Layout

Center the small framed brand glyph above the account title and business-inbox subtitle. Stack three equal-width identity-provider buttons, then an OR divider. Place persistent work-email and password labels above outlined fields; follow with consent, the source CAPTCHA, disabled signup and an account-switch link.

The selected root's measured raster is 420×809px on desktop and 390×809px on mobile. The screenshot contains only `div:has(> form:has(#signup-email))`.

Responsive evidence: The panel measures 420px wide on desktop and 390px at the mobile viewport, preserving 24px side padding and a 342px mobile content width. All controls stay in one column and the 24px title size is retained. The entire mobile panel, not just its opening, was inspected.

## Elevation & Depth

Use fine input borders and inset outlines on provider buttons. The pale gray disabled action must remain visibly distinct from the blue active login action on the other state. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius 8px and padding 12px 24px. Those measurements belong to that sample, not every container. Preserve the visible geometry and spacing hierarchy; any additional spacing scale would be an implementation estimate.

## Components

This is the initial empty registration form. Password dots are placeholder characters, not an entered password. The CAPTCHA checkbox is untouched and no account, consent, OAuth or form submission occurred. The exact signup-specific selector keeps this real state distinct from the login form on the same fragment-routed app.

## Do's and Don'ts

- Do preserve the documented content order, visual hierarchy and measured responsive changes.
- Do retain source field labels, attribution and clear differences between primary, secondary and disabled controls.
- Do treat visible prices, statistics and quotations as dated source content.
- Don't fabricate customer evidence, expanded states, errors or successful form submissions.
- Don't infer unobserved interactions, dark mode, additional breakpoints or exact motion timings.