Missive — dark editorial closing CTA

---
version: alpha
name: Missive — dark editorial closing CTA
colors:
  canvas: '#050607'
  primary: '#FFFFFF'
  body: '#CDD0D4'
  primary-action: '#F5F6F6'
  secondary-action: '#232529'
typography:
  primary:
    fontFamily: Tiempos Headline
    fontSize: 56px
    fontWeight: 400
    lineHeight: 60px
  body:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
  control:
    fontFamily: Inter
    fontSize: 17.84px
    fontWeight: 500
    lineHeight: 20px
components:
  primary:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  control-label:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 8px
spacing:
  sampled-control-block: 16px
---

## Overview

A black closing invitation with a white brand tile, large centered serif headline, two contrasting actions and a compact review badge.

Source: https://missiveapp.com/. Captured 2026-10-07T06:06:54.968737+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed roles: canvas: #050607; primary: #FFFFFF; body: #CDD0D4; primary-action: #F5F6F6; secondary-action: #232529. Values are measured source colors and inspected surfaces. Do not apply the accent indiscriminately to secondary copy or disabled controls.

## Typography

The primary sampled text uses "Tiempos Headline" at 56px / 60px, weight 400, with a measured desktop width of 666.00px. Its corresponding mobile sample is 30px / 36px across 351.00px. Body and control tokens above come from this reference's own computed styles; `normal` leading is omitted from YAML rather than guessed.

## Layout

Build a generous centered vertical stack: brand glyph tile, two-line editorial heading, one short explanation, adjacent trial and demo buttons, then a review pill. Keep the CTA separate from the following footer rather than merging navigation into the invitation.

The selected root's measured raster is 1440×722px on desktop and 390×667px on mobile. The screenshot contains only `section.neutral-1000.hide-in-iframe`.

Responsive evidence: The section changes from 1440×722px to 390×667px. The heading decreases from 56px to 30px and wraps to three lines. Both actions remain side by side. The desktop multi-star badge becomes a compact single-star rating pill on mobile.

## Elevation & Depth

A nearly black canvas and white main action establish hierarchy. The secondary action is a charcoal rectangle; the subtle outline on the review pill is quieter than either button. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius 8px and padding 16px 24px. Those measurements belong to that sample, not every container. Preserve the visible geometry and spacing hierarchy; any additional spacing scale would be an implementation estimate.

## Components

The visible 4.8 rating and review-count wording are source marketing content only. Trial and demo actions were not followed from this component, and no hover or pressed state was measured.

## Do's and Don'ts

- Do preserve the documented content order, visual hierarchy and measured responsive changes.
- Do retain source field labels, attribution and clear differences between primary, secondary and disabled controls.
- Do treat visible prices, statistics and quotations as dated source content.
- Don't fabricate customer evidence, expanded states, errors or successful form submissions.
- Don't infer unobserved interactions, dark mode, additional breakpoints or exact motion timings.