Missive — asymmetric editorial FAQ

---
version: alpha
name: Missive — asymmetric editorial FAQ
colors:
  surface: '#FFFFFF'
  primary: '#34363A'
typography:
  primary:
    fontFamily: Tiempos Headline
    fontSize: 56px
    fontWeight: 400
    lineHeight: 60px
  body:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 500
    lineHeight: 28px
  control:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 500
    lineHeight: 28px
components:
  primary:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  control-label:
    typography: '{typography.control}'
---

## Overview

A spacious FAQ section with a large left-aligned serif title and an offset column of eight collapsed questions with plus affordances.

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

## Colors

Observed roles: surface: #FFFFFF; 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 676.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

Align the headline with the wide content container while shifting the question list into the right two-thirds of the desktop grid. Use eight airy rows with question text on the left and a small plus at the far edge. There are no heavy card backgrounds or enclosing rounded panels.

The selected root's measured raster is 1440×812px on desktop and 390×1012px on mobile. The screenshot contains only `section:has(.accordion--wrapper)`.

Responsive evidence: At 390px the title becomes 30px/36px and the offset disappears. Questions use 18px/28px Inter and wrap within their row while the plus stays in a dedicated right-hand area. The section height grows from 812px to 1012px; preserve this natural reflow rather than clipping long questions.

## Elevation & Depth

White space is the primary separator. Avoid adding shadows or filled cards that would undermine the deliberately light treatment. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius not sampled and padding not sampled. 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

All eight rows are collapsed. Answer text found in the DOM is not presented as an inspected expanded state. Accordion opening, keyboard operation and transitions remain untested.

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