---
name: Missive
description: "A classic example of a clean, professional SaaS landing page that effectively uses typography and spacing to convey a premium, trustworthy product."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#333333"
  secondary: "#646C76"
  tertiary: "#2266ED"
  neutral: "#CDCDE4"
  bg-soft: "#F5F6F6"
  line: "rgba(228, 230, 233, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "normal"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A professional SaaS landing page for a team email collaboration tool.

*A clean, efficient team cockpit for managing email and tasks.*

## Colors

Crisp white backgrounds with dark text and a single vibrant blue for primary actions.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#646C76`)** — uses `ink-soft` token
- **Accent (`#2266ED`)** — uses `accent` token
- **Muted (`#CDCDE4`)** — uses `muted` token
- **Borders (`rgba(228, 230, 233, 1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Use Tiempos Headline (transitional serif) for main marketing headlines.
- Use Inter (humanist sans-serif) for body text, navigation, and UI elements.
- Keep body text weight at 400 and navigation links at 500 for clear hierarchy.

## Layout

Centered content layout with a standard top navigation bar and alternating white/gray sections.

*Rhythm:* Standard 4px base unit with multiples of 8 and 16 for consistent spacing.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 0px 32px 0px
- Borders: 1px solid #E4E6E9 used for subtle separators and input fields.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Rounded primary buttons in blue (#2266ED) with white text, and secondary buttons with dark text on white.
- **card:** Clean white cards with subtle shadows or borders for UI mockups and feature sections.
- **chip:** Small rounded tags used for categories or statuses within the application interface.
- **input:** Standard input fields with light gray borders and subtle rounded corners.
- **hero:** Large centered headline in serif font followed by sans-serif body text and primary/secondary CTAs.

## Do's and Don'ts

**Don't:**
- Don't use vibrant, multi-colored gradients — screenshot shows clean white/gray backgrounds instead.
- Don't use heavy, dark shadows — screenshot shows subtle, soft shadows like rgba(0,0,0,0.1) 0px 0px 32px.
- Don't use all-caps for large sections — screenshot shows standard sentence case or title case.
- Don't use overly decorative fonts for body text — screenshot shows clean, readable sans-serif (Inter).
- Don't use harsh, high-contrast accent colors everywhere — screenshot limits the vibrant blue to primary buttons and links.
- Don't use complex, cluttered layouts — screenshot shows generous white space and clear visual hierarchy.

---

## System Prompt (paste into AI agent)

```
Missive is a professional SaaS landing page for a team email collaboration tool. The design DNA uses a clean white background (#FFFFFF) with dark gray text (#333333) and a single vibrant blue accent (#2266ED) for primary calls to action. Typography features a transitional serif (Tiempos Headline) for prominent marketing headlines and a humanist sans-serif (Inter) for body copy and UI elements. The layout is centered and spacious, using a 4px base spacing unit. Critical donts: never use multi-colored gradients, avoid heavy dark shadows, and do not use all-caps for large text sections.
```