---
version: alpha
name: Mailcoach — illustrated automation feature section
colors:
  primary: '#142D6F'
  accent: '#3461D6'
  surface: '#FFFFFF'
  canvas: '#F6F4EF'
  warm-shape: '#E1DCCC'
typography:
  heading:
    fontFamily: Jokker
    fontSize: 48px
    fontWeight: 600
    lineHeight: 48px
  body:
    fontFamily: neue-haas-grotesk-text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
  control:
    fontFamily: neue-haas-grotesk-text
    fontSize: 16px
    fontWeight: 500
    lineHeight: 22.4px
rounded:
  control: 9999px
spacing:
  control-block: 14px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.primary}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

An isolated automation feature row combining a branching email-workflow illustration, blue category icon, bold navy heading and outlined pill link.

Source: https://www.mailcoach.app/. Captured 2026-10-06T06:05:45.947292+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 48px / 48px, weight 600, using Jokker; its measured width is 576.00px. The corresponding mobile sample is 28px / 28px, width 342.00px. Computed styles may describe a parent while a child paints a colored word. Exact selected element bounds: desktop 1152.00 × 500.00px; mobile 342.00 × 654.34px. 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

Use the actual #block-lskbkfzr section. At desktop the 1152px-wide row places a 500px illustration left and copy right. Keep the label, large heading, short paragraph and outlined More about automations link grouped rather than scattering separate cards.

Responsive evidence: The measured mobile section narrows to 342px and stacks the illustration above the text. The heading wraps over two lines and body copy over several lines, with the full outlined action retained. Both complete component crops were checked, not just their viewport openings.

## Elevation & Depth

Pastel circular and angled shapes sit behind crisp blue connector lines and white nodes. Keep the text area flat on the warm canvas; the outlined pill and arrow should remain secondary to the heading.

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

## Components

The illustration shows an email-opened decision with yes/no branches, a clock and a send-email action. It is illustrative source artwork, not an interactive workflow editor. The outbound feature link was not used to start or configure an automation.

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.