Missive — editorial shared-inbox landing page

---
version: alpha
name: Missive — editorial shared-inbox landing 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

An editorial shared-inbox landing page with Tiempos serif headlines, blue actions, large email-product demonstrations, alternating pale sections and a black closing invitation.

Source: https://missiveapp.com/. Captured 2026-10-07T06:07:22.557287+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 768.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

Start with a slim white navigation and centered serif promise, a restrained supporting paragraph and two adjacent actions. The large framed inbox demonstration anchors the opening. Continue through customer logos, the email problem illustration, collaboration and coordination demonstrations, flexible workflow tabs, an AI section and customer stories. End with a black invitation and grouped footer links.

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

Responsive evidence: At 390px the full navigation becomes a compact logo, Log in, Sign up and hamburger. The headline wraps to two lines at 30px, the intro stays centered and the demonstration scales into the narrow column. The opening mobile viewport is inspected; lower mobile interactions are not inferred from the desktop page.

## Elevation & Depth

Product frames and lightly shaded feature areas carry depth, while text sections remain spacious and flat. The final black section is a strong tonal change, not a floating overlay. 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

Product demos and customer media are static frames from real source animations. Workflow tab switching, video controls, demo booking and signup were not exercised. The reviewed capture allowed lazy media to settle; all missing-image candidates intersecting the raster were resolved.

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