---
version: alpha
name: Airmail Desk
description: Periwinkle stationery with a sage primary and one rose — envelope proportions and address blocks throughout.
meta:
  id: "theme-airmail-desk"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Written, addressed, and sent.
  bestFor: Newsletters and correspondence products, personal CRM, invitations, small-team messaging, memberships
  avoidFor: Analytics, technical tooling, high-density operational software
  defaultMode: light
  surfaceStyle: outline
  accentUse: underline
  caseStyle: none
  borderWidth: 1px
  imageTreatment: soft
  motion:
    intensity: 2
    duration: 280ms
    ease: "cubic-bezier(0.22, 1, 0.36, 1)"
    signature: "A sent item slides up and out through the top edge, the way a letter leaves a slot."
  displayFont: Gabarito
  displayKind: sans
  bodyFont: Urbanist
  monoFont: Kode Mono
colors:
  background: "#D1EDFF"
  foreground: "#151D27"
  card: "#CAE1EF"
  card-foreground: "#151D27"
  popover: "#CAE1EF"
  popover-foreground: "#151D27"
  primary: "#658365"
  primary-foreground: "#020F18"
  secondary: "#B6D5E9"
  secondary-foreground: "#151D27"
  muted: "#B6D5E9"
  muted-foreground: "#4C5A68"
  accent: "#9E3E98"
  accent-foreground: "#F5FBFF"
  destructive: "#B6322D"
  destructive-foreground: "#F5FBFF"
  border: "#AAC5D6"
  input: "#AAC5D6"
  ring: "#658365"
  chart-1: "#537E54"
  chart-2: "#6C926C"
  chart-3: "#466446"
  chart-4: "#8CA78C"
  chart-5: "#3B4D3B"
colorsDark:
  background: "#001A29"
  foreground: "#DCE3EA"
  card: "#052333"
  card-foreground: "#DCE3EA"
  popover: "#052333"
  popover-foreground: "#DCE3EA"
  primary: "#C5E6C5"
  primary-foreground: "#020F18"
  secondary: "#002E44"
  secondary-foreground: "#DCE3EA"
  muted: "#002E44"
  muted-foreground: "#8C949C"
  accent: "#CF6CC8"
  accent-foreground: "#020F18"
  destructive: "#FFCDC7"
  destructive-foreground: "#020F18"
  border: "#153A4E"
  input: "#153A4E"
  ring: "#C5E6C5"
  chart-1: "#85B286"
  chart-2: "#6F956F"
  chart-3: "#A7C8A7"
  chart-4: "#607960"
  chart-5: "#C2D8C2"
typography:
  display-lg:
    fontFamily: Gabarito
    fontSize: 54px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Gabarito
    fontSize: 29px
    fontWeight: 600
    lineHeight: 1.22
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Gabarito
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.34
  body-lg:
    fontFamily: Urbanist
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.68
  body-md:
    fontFamily: Urbanist
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.64
  body-sm:
    fontFamily: Urbanist
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.52
  label-caps:
    fontFamily: Urbanist
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: Kode Mono
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.42
    letterSpacing: 0.03em
  numeral-xl:
    fontFamily: Kode Mono
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  none: 0px
  sm: 2px
  md: 3px
  lg: 4px
  xl: 6px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 17px
  lg: 26px
  xl: 50px
  gutter: 22px
  margin: 32px
  measure: 62ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 12px
  card-envelope:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 20px
  address-block:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.label-mono}"
  badge-label:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Airmail Desk

## Overview

Airmail Desk borrows its structure from correspondence. Panels use envelope
proportions rather than the square-ish cards most systems default to; every item
carries an address block — who it is from, who it is to, when it was sent — set
in mono in the upper left; and the edge treatment on a primary panel is a
repeating diagonal stripe in the primary and accent, which is the airmail border
rebuilt from tokens rather than an image.

The palette is periwinkle stationery, a sage primary that does almost no
shouting, and a single rose used as an underline. Nothing in the system is
filled with the rose; it marks and it never occupies.

It suits newsletters, invitations, personal CRM and small-team messaging. It is
not built for density and will look ridiculous carrying a data table.

## Colors

Periwinkle, sage, rose.

- **Ground (periwinkle):** a genuinely blue-violet stationery stock. It is the
  most tinted light ground in the library after the pinks.
- **Primary (sage):** panels, actions, the stripe. Very low chroma — the
  system's calm comes from the primary refusing to compete with the paper.
- **Accent (rose):** the underline. New, unread, needs-reply. A 2px rule under
  the text and nothing else.
- **Neutrals** carry the periwinkle strongly, so a border looks like a fold in
  the same paper.
- Charts are monochrome sage; this system does not really do charts.

## Typography

Gabarito for display, Urbanist for reading, Kode Mono for addresses.

- **Display:** Gabarito at 54px, weight 600. Slightly quirky geometric with a
  friendly single-storey a — informal without being cute.
- **Body:** Urbanist at 15px, 1.64, 62ch. Geometric, light, and open; letters
  are meant to be read at a relaxed pace.
- **Address blocks:** Kode Mono at 12.5px with 0.03em tracking. From, to, date,
  reference. Always mono, always upper left, always four lines or fewer.
- **No uppercase headings.** Only the small hanging labels are uppercase.

## Layout

A 12-column grid at 1240px with 22px gutters. The signature structure is the
**envelope panel**: a 1.62:1 landscape rectangle with a mono address block in
the upper left, content in the lower two-thirds, and a stamp-sized square
reserved in the upper right.

Vertical rhythm is 6px. Panels are separated by 26px so each reads as a separate
piece of post.

## Elevation & Depth

Outline. 1px borders, no shadows, no tonal cards except the one filled panel per
view. The airmail stripe along an edge is the only decoration in the system and
it is reserved for the primary panel.

A sent item slides up and out through the top edge — the one motion in the
system that removes something from view.

## Shapes

Small — 2px on controls and panels, 6px on modals. The proportions carry the
identity, not the corners; an envelope is recognisable by its ratio.

Photography is soft-treated and lives inside the stamp square or as a wide crop
above an address block.

## Components

- **Envelope panel:** the signature component. 1.62:1, mono address block upper
  left, stamp square upper right.
- **Airmail edge:** repeating 8px diagonal stripes in primary and accent along
  one edge of the primary panel. One per view.
- **Address block:** from / to / date / reference, mono, four lines maximum.
- **Buttons:** sage fill, 2px radius, 12px padding.
- **Unread marker:** 2px rose underline beneath the subject line.

## Do's and Don'ts

- Do give every item an address block in mono.
- Do keep panels at envelope proportions.
- Do use the rose as an underline only.
- Do limit the airmail stripe to one panel per view.
- Don't fill anything with the rose.
- Don't use uppercase for headings.
- Don't put a dense table in this system.