Mailcoach — login card with passkey alternative

---
version: alpha
name: Mailcoach — login card with passkey alternative
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
  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 compact navy-on-cream login screen with an owl wordmark, white card, Google/GitHub pills, labeled fields and a quiet passkey alternative.

Source: https://dashboard.mailcoach.app/login. Captured 2026-10-06T06:03:15.673499+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 306.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 brand above the white card. Align the heading left, place provider pills side by side at desktop, then labeled email and password rows with helper links on their right. Keep the small blue login action on the left and passkey link below on the right.

Responsive evidence: At 390px provider buttons stack while the compact helper links remain alongside their field labels. The card nearly fills the width with small outer margins; the 28px/35px title stays on one line. The self-hosting note remains a separate footer outside the card.

## Elevation & Depth

Keep the outer card softly rounded and mostly flat. Beige provider pills, blue focus borders and a compact blue action establish three distinct control roles without competing panels.

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

The email field is initially focused. Registration, recovery, passkey and self-hosting license links are visible but their workflows were not activated. No credentials were entered and no login attempt was made.

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.