---
version: alpha
name: Interlude
description: Quiet, restraint-first minimalism — a warm off-white canvas, near-black ink, and a single muted sage accent. Generous whitespace, large light-weight headlines with gentle negative tracking, hairline borders, and soft pill buttons. Presence without performance expressed as an interface that recedes.

colors:
  # Canvas + ink
  background: "#f6f4ef"
  surface: "#fbfaf7"
  surface-soft: "#efece5"
  ink: "#1c1b19"
  ink-secondary: "#5c5953"
  ink-muted: "#8a877f"

  # Accent — muted sage, used sparingly
  primary: "#6b7d6a"
  primary-hover: "#586a57"
  accent-soft: "#e4e8e1"

  # Lines + neutrals
  border: "#e2ded5"
  border-strong: "#cfcabd"
  neutral-100: "#ebe8e1"
  neutral-200: "#ddd9cf"

  # On-color
  on-primary: "#fbfaf7"
  on-ink: "#f6f4ef"

  # Focus
  focus-ring: "#6b7d6a"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.08
    letterSpacing: -1.4px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.6px
  sub-heading:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  micro-label:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 112px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.micro-label}"
    rounded: "{rounded.pill}"
    padding: 6px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  card-quiet:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Interlude Design System

## Overview

Interlude is a presence-first connection app, and its website is the visual argument for its own thesis: "presence without performance, connection without capture." Where most app marketing pages shout — saturated gradients, bouncing screenshots, urgent CTAs — Interlude whispers. The canvas is a warm off-white (`{colors.background}`), closer to paper than to screen-white, and the page is built almost entirely from whitespace, near-black ink (`{colors.ink}`), and restraint. The design recedes so the words can be felt.

The typographic voice splits the difference between editorial warmth and quiet utility. A light-weight serif (Fraunces) carries the headlines at large sizes with gentle negative tracking, lending the page a literary, almost handwritten calm. The body and interface text shift to a neutral grotesque (Inter), keeping reading effortless. Headlines lean on weight 300–400 rather than bold — the page never raises its voice. Size and air create hierarchy, not heaviness.

Color is held almost entirely in reserve. The only chromatic note is a muted sage green (`{colors.primary}`), a color that reads as natural, grounded, unhurried — the opposite of an attention-economy red. It appears in tiny doses: a hover state, a soft badge, a focus ring. Everything else is a tight family of warm neutrals from ink to paper. There are no shadows competing for depth; structure comes from hairline borders (`{colors.border}`) and generous spacing alone.

**Key Characteristics:**
- Warm paper-toned canvas (`{colors.background}`) instead of clinical white
- Light-weight serif (Fraunces) headlines with gentle negative tracking, set against Inter body
- A single muted sage accent (`{colors.primary}`) used sparingly — never decoratively
- Hierarchy from whitespace and scale, not weight or color
- Hairline borders (`{colors.border}`) instead of shadows for structure
- Pill-shaped buttons; dark ink default, sage on hover
- Calm, recessive interface that embodies "presence without performance"

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas — paper, not screen-white.
- **Surface** (`{colors.surface}`): Slightly lighter card/surface tone, lifts above the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Recessed quiet surfaces, muted blocks.
- **Ink** (`{colors.ink}`): Primary text and headings. Near-black, never pure black.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, the quietest text.

### Accent
- **Sage** (`{colors.primary}`): The single accent — muted natural green for hovers, focus, small marks.
- **Sage Hover** (`{colors.primary-hover}`): Darker sage for pressed/hover and badge text.
- **Accent Soft** (`{colors.accent-soft}`): Pale sage tint for badge fills and gentle highlights.

### Lines & Neutrals
- **Border** (`{colors.border}`): Default hairline border, dividers, card outlines.
- **Border Strong** (`{colors.border-strong}`): Input and secondary-button outlines.
- **Neutral 100/200** (`{colors.neutral-100}` / `{colors.neutral-200}`): Subtle fills, separators.

### On-Color
- **On Primary** (`{colors.on-primary}`): Text on the sage accent.
- **On Ink** (`{colors.on-ink}`): Paper-toned text on dark ink buttons.

## Typography

### Font Family
- **Display / Headings**: `Fraunces`, with fallbacks `Georgia, serif` — a soft, optical serif used at light weights.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif`.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px Fraunces 300 — the quiet hero statement |
| `section-heading` | Section titles, Fraunces 400 |
| `sub-heading` | Inter 22px supporting headlines |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text, nav |
| `button-ui` | Buttons and interactive labels |
| `caption` | Metadata, footer copy |
| `micro-label` | Tiny uppercase tracked labels, badges |

### Principles
- **Quiet hierarchy**: Headlines use weight 300–400, not bold. The page never shouts; scale and air do the work.
- **Serif warmth, sans clarity**: Fraunces for emotional, literary headlines; Inter for frictionless reading and UI.
- **Gentle tracking**: Display sizes use mild negative letter-spacing (-1.4px at 56px) for cohesion, never compression.
- **Restraint as voice**: One accent, a few neutrals, lots of space.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) that produce the page's signature breathing room.

### Grid & Container
- Narrow, centered single-column for editorial passages (~640–720px reading width)
- Generous top and bottom padding using `{spacing.4xl}`
- Hairline `{colors.border}` dividers between sections instead of background changes

### Whitespace Philosophy
- **Air as design**: Vertical rhythm built on `{spacing.3xl}`–`{spacing.4xl}` gaps. Emptiness is the point.
- **No competing depth**: No drop shadows; structure comes from borders and spacing.
- **Calm rhythm**: Sections separated by space and hairlines, never by loud color blocks.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Dark ink pill, paper-toned text. On hover it shifts to sage (`{colors.primary}`), the one chromatic moment.
- **`button-secondary`** — Surface fill with a `{colors.border-strong}` hairline outline, pill-shaped.

### Badges
- **`badge`** — Pale sage fill with sage-hover text, tiny uppercase tracked label.

### Cards
- **`card`** — Lifted surface with a hairline border, generous 28px padding, `{rounded.lg}` corners.
- **`card-quiet`** — Recessed soft surface for secondary, muted blocks.

### Inputs
- **`input`** — Surface fill, `{colors.border-strong}` outline; focus swaps the border to sage (`{colors.focus-ring}`).

### Navigation
- **`nav-bar`** — Paper background, small Inter text, hairline bottom border. Minimal — a couple of links and the app download.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`), not pure white
- Keep headlines light (300–400) in Fraunces
- Reserve sage (`{colors.primary}`) for hovers, focus, and tiny marks
- Build structure from hairline borders and whitespace
- Let sections breathe with `{spacing.3xl}`–`{spacing.4xl}` gaps

### Don't
- Don't add saturated colors or gradients — the palette is warm neutral + one sage
- Don't use heavy/bold display weights — restraint is the brand
- Don't introduce drop shadows for depth — use borders and space
- Don't crowd the layout; air is the design
- Don't make CTAs loud — the dark pill is enough

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced display size, tighter padding |
| Tablet | 600–1024px | Centered reading column, expanded padding |
| Desktop | >1024px | Full editorial layout, maximum air |

### Collapsing Strategy
- Hero: 56px → ~36px, tracking eases proportionally
- Navigation: inline links remain (page is minimal — no hamburger needed)
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile

### Touch Targets
- Pill buttons use comfortable 14px vertical padding
- Nav links spaced for tap comfort

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Interlude. Brand names and trademarks belong to their respective owners.