Mailcoach — newsletter and five-column footer

---
version: alpha
name: Mailcoach — newsletter and five-column footer
colors:
  primary: '#142D6F'
  accent: '#3461D6'
  surface: '#F6F4EF'
  input: '#EBE8DD'
typography:
  heading:
    fontFamily: neue-haas-grotesk-text
    fontSize: 21.008px
    fontWeight: 500
    lineHeight: 29.4112px
  body:
    fontFamily: neue-haas-grotesk-text
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
  control:
    fontFamily: neue-haas-grotesk-text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
rounded:
  control: 12px
spacing:
  control-block: 24px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.primary}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

A complete warm-canvas footer with owl wordmark, integrated newsletter field, five compact navigation groups and a separated service-status/legal row.

Source: https://www.mailcoach.app/. Captured 2026-10-06T06:14:28.287281+00:00. This guide describes the observed reference, not an official brand specification.

## Colors

Observed palette: primary: #142D6F; accent: #3461D6; surface: #F6F4EF; input: #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 21.008px / 29.4112px, weight 500, using neue-haas-grotesk-text; its measured width is 560.00px. The corresponding mobile sample is 14px / 19.6px, width 342.00px. Computed styles may describe a parent while a child paints a colored word. Exact selected element bounds: desktop 1152.00 × 595.20px; mobile 374.00 × 1446.44px. Crops use freshly measured document coordinates after a warm-up screenshot.

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

## Layout

At desktop pair the brand at upper left with a newsletter invitation at upper right. Below, distribute Get started, Platform, Solutions, Developers and Resources across five columns. Separate the lower organization, live-status indicator, legal links and social handle with a thin horizontal rule.

Responsive evidence: The full component is 1152px wide by about 595px tall at desktop. At mobile it is 374px wide and about 1446px tall: the wordmark and subscription area center above five stacked navigation groups, while the legal row wraps. The newsletter heading reduces from about 21px to 14px; the email field narrows from 560px to 342px.

## Elevation & Depth

The footer remains flat with no card grid or heavy shadows. A beige rounded email field is the principal container; navy text, brighter blue group headings and the quiet legal divider structure the rest of the region.

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 12px radius and padding 24px. Match that control's role rather than applying the same radius to every container.

## Components

The email field uses an in-field Subscribe action and a short no-spam reassurance. This is a product newsletter signup, not an authentication form; it was not filled or submitted. Preserve semantic navigation groups and keep the observed service-status dot as source evidence, not a promise of current uptime.

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.