Missive — three-tier pricing and comparison page

---
version: alpha
name: Missive — three-tier pricing and comparison page
colors:
  ink: '#34363A'
  surface: '#FFFFFF'
  accent: '#2266ED'
  soft: '#F5F6F6'
  primary: '#34363A'
typography:
  primary:
    fontFamily: Tiempos Headline
    fontSize: 56px
    fontWeight: 400
    lineHeight: 60px
  body:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
  control:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    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: 12px
---

## Overview

A white editorial pricing page with three adjacent plans, a yearly billing toggle and discount badge, a founder quotation, feature matrix and spare accordion FAQ.

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

## Colors

Observed roles: ink: #34363A; surface: #FFFFFF; accent: #2266ED; soft: #F5F6F6; primary: #34363A. 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 721.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

Place the serif title and trial explanation above a compact billing switch. Present Starter, Productive and Business as three aligned panels with consistent benefit rhythm; the center panel receives a subtle lift. Use one shared action row beneath the plan group. A founder quotation separates the introductory plans from the long comparison table, then FAQs, customer stories and the dark closing invitation.

This is a full-page desktop reference at 1440px width, with a source document height of 5317px. Mobile evidence is a 390×844px opening viewport, not a claim to have inspected every lower-page breakpoint.

Responsive evidence: At 390px the headline is 30px and the plan cards become a vertical stack with readable left-aligned details. The annual switch and yellow discount chip remain together. The mobile opening shows Starter and the beginning of Productive; the lower table breakpoint was not visually tested.

## Elevation & Depth

Fine gray panel outlines and a soft shadow on the middle plan distinguish the recommendation without a saturated card background. Small yellow and blue chips annotate billing and inherited features. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius 8px and padding 12px. 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 captured default is billed yearly with the source showing $14, $24 and $36 per user/month. These are dated source prices, not a live quote. Toggle behavior and subscription actions were not tested. Missing-image warnings belong to offscreen carousel cards, outside the uploaded raster.

## 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.