Mailcoach — playful blue email platform landing page

---
version: alpha
name: Mailcoach — playful blue email platform landing page
colors:
  primary: '#142D6F'
  accent: '#3461D6'
  surface: '#FFFFFF'
  canvas: '#F6F4EF'
  sky: '#A3BDFF'
typography:
  heading:
    fontFamily: Jokker
    fontSize: 96px
    fontWeight: 600
    lineHeight: 96px
    letterSpacing: -2.4px
  body:
    fontFamily: neue-haas-grotesk-text
    fontSize: 21.008px
    fontWeight: 400
    lineHeight: 29.4112px
  control:
    fontFamily: neue-haas-grotesk-text
    fontSize: 14px
    fontWeight: 500
    lineHeight: 19.6px
rounded:
  control: 9999px
spacing:
  control-block: 12px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.primary}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

A playful navy-and-sky marketing page with oversized rotating audience copy, angled testimonial cards, illustrated feature rows and a pill-shaped white navigation strip.

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

## Colors

Observed palette: primary: #142D6F; accent: #3461D6; surface: #FFFFFF; canvas: #F6F4EF; sky: #A3BDFF. 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 96px / 96px, weight 600, using Jokker; its measured width is 744.00px. The corresponding mobile sample is 48px / 48px, width 342.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

Frame the opening content in a large sky-blue rounded panel. Offset the oversized left headline against a right-side promise, then scatter a few tilted white testimonial cards below. Continue on a warm canvas with alternating illustration/text features, a white proof region, navy CTA and compact footer.

Responsive evidence: The main Jokker display text drops from 96px/96px to 48px/48px at 390px, while negative tracking halves from -2.4px to -1.2px. Desktop columns become centered mobile stacks and the white navigation strip becomes a Menu control. Different screenshots show different audience words because the heading rotates; this is not a content error.

## Elevation & Depth

Favor large rounded color fields and crisp cards over deep shadows. Slight testimonial rotations create informality, while the navy type and consistent outlines keep the page readable.

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

## Components

Use navy pill actions, lightly tilted source testimonials and clean vector-like email illustrations. Newsletter signup in the footer is a newsletter, not authentication. Testimonial claims remain source evidence, not verified endorsements by the collector. Menus, carousel timing and subscription behavior were not tested.

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.