Missive — email and social sign-in panel

---
version: alpha
name: Missive — email and social sign-in 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 white login panel with three stacked provider choices, an OR rule, labeled email/password fields, recovery link and blue full-width login button.

Source: https://mail.missiveapp.com/#login. Captured 2026-10-07T06:06:42.162434+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

Use a centered brand tile, compact login heading and business-inbox subtitle. Keep Google, Apple and SSO actions as a consistent stack above the email alternative. Right-align password recovery beneath the password field, then give the blue Log in action full width and place account creation below it.

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

Responsive evidence: The desktop panel is 420px wide and reduces to 390px with 24px side padding on mobile. Title and subtitle retain their sizes; controls narrow rather than changing their order. The entire mobile panel fits the captured 751px component height.

## Elevation & Depth

The white panel has no heavy outer card shadow. Hairline input and social-button borders create enough grouping; blue is reserved for the submit action and account/recovery links. 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

Fields are empty and password dots are placeholder text. Password reveal, recovery, SSO, provider redirects and login submission were not exercised. This crop excludes the unrelated testimonial/product column from the full auth page.

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