---
version: alpha
name: Mailcoach — usage-based email pricing calculator
colors:
  primary: '#142D6F'
  accent: '#3461D6'
  surface: '#FFFFFF'
  canvas: '#F6F4EF'
  warm-shape: '#E1DCCC'
typography:
  heading:
    fontFamily: Jokker
    fontSize: 56px
    fontWeight: 600
    lineHeight: 56px
  body:
    fontFamily: neue-haas-grotesk-text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
  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 warm-canvas pricing page centered on an email-volume slider, an estimate summary, a feature grid and hosted/self-hosted choices instead of conventional tier columns.

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

## Colors

Observed palette: primary: #142D6F; accent: #3461D6; surface: #FFFFFF; canvas: #F6F4EF; warm-shape: #E1DCCC. 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 56px / 56px, weight 600, using Jokker; its measured width is 896.00px. The corresponding mobile sample is 36px / 36px, 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

Lead with a centered two-color headline and compact base-price explanation. Place the calculator in a rounded outline panel, keeping its segmented range track above a white estimated-cost card. Follow with feature explanations, testimonial cards, hosted/self-hosted choices and collapsed FAQs.

Responsive evidence: The heading changes from 56px/56px desktop to 36px/36px at 390px. The calculator shrinks to a single narrow column and the desktop navigation becomes Menu. The mobile screenshot shows the initial slider position and volume chip; cost details continue below the opening viewport.

## Elevation & Depth

Thin warm-gray outlines and white inner cards give the calculator structure. Royal-blue active range, figure and chips stand out against navy copy and the warm background; do not turn all feature cards into primary actions.

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

The captured calculator starts at 2,000 emails/month with an estimated €9.99 base cost. Describe this as an observed default, not a tested pricing engine. The slider, provider pricing alternatives, FAQ expansion and trial creation were not exercised.

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.