---
version: alpha
name: Outreach Space
description: Cinematic dark editorial — near-black cosmic canvas, ITC Garamond serif display paired with Suisse Int'l sans and monospaced technical labels, a reddish-organic accent pulled from the interstellar object imagery, and gallery-quiet chrome that lets full-bleed astronomical detail shots carry the narrative.

colors:
  # Canvas + ink
  background: "#0a0a0c"
  surface: "#121316"
  surface-soft: "#1a1b1f"
  ink: "#f2f0ec"
  ink-secondary: "#a8a6a0"
  ink-muted: "#6e6c68"

  # Accent — reddish organic, from the object's surface material
  primary: "#c0492f"
  accent-ember: "#e0654a"
  accent-rust: "#8f3a25"

  # Cool technical highlight
  signal-blue: "#5a7d9a"

  # Neutral scale (warm-charcoal cosmic)
  gray-900: "#0a0a0c"
  gray-800: "#16161a"
  gray-700: "#26262b"
  gray-600: "#3a3a40"
  gray-400: "#6e6c68"
  gray-300: "#a8a6a0"
  gray-100: "#d8d6d0"

  # On-color
  on-primary: "#f2f0ec"
  on-surface: "#f2f0ec"

  # Lines + overlays (flattened over background)
  hairline: "#26262b"
  overlay-scrim: "#050506"

typography:
  display-hero:
    fontFamily: "ITC Garamond, EB Garamond, Garamond, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  chapter-heading:
    fontFamily: "ITC Garamond, EB Garamond, Garamond, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.4px
  sub-heading:
    fontFamily: "ITC Garamond, EB Garamond, Garamond, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Suisse Int'l, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Suisse Int'l, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Suisse Int'l, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-medium:
    fontFamily: "Suisse Int'l, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-label:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.2px
  mono-caption:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.8px
  caption:
    fontFamily: "Suisse Int'l, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.3px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  pill: 9999px

components:
  # Primary CTA — ember outline / solid on dark
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-medium}"
    rounded: "{rounded.pill}"
    padding: 10px 22px
    borderColor: "{colors.accent-ember}"

  # Ghost CTA — hairline outline on dark canvas
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-medium}"
    rounded: "{rounded.pill}"
    padding: 10px 22px
    borderColor: "{colors.gray-600}"

  # Interactive affordance pill ("Click & drag to rotate")
  affordance-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.hairline}"

  # Mono technical label / chapter tag
  tech-label:
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono-label}"

  # Hypothesis / object thumbnail (circular nav)
  thumbnail-circle:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.pill}"
    borderColor: "{colors.gray-600}"
    size: 56px

  # Content card — correspondence / data panel
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.hairline}"

  # Full-bleed image figure (the object detail shots)
  figure:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.none}"
    borderColor: "{colors.background}"

  # Top nav bar — minimal, transparent over canvas
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 16px 24px
    borderColor: "{colors.hairline}"

  # Accent eyebrow / status
  eyebrow:
    textColor: "{colors.primary}"
    typography: "{typography.mono-label}"
---

# Outreach Space Design System

## Overview

Outreach Space is a cinematic editorial experience built around a single object falling through the solar system — an interstellar visitor examined chapter by chapter through escalating scientific hypotheses. The design system treats the browser like a darkened gallery: a near-black cosmic canvas (`{colors.background}`) holds full-bleed astronomical detail shots while the interface chrome recedes almost entirely. Nothing competes with the imagery. Type, lines, and labels exist only to frame and pace the narrative.

The typographic pairing is the system's signature. Display and chapter headings are set in ITC Garamond — a high-contrast serif with an old-world, almost manuscript authority that lends the speculative story its scholarly gravity. Running body copy and interface labels switch to Suisse Int'l, a precise neo-grotesque sans whose neutrality keeps the scientific correspondence legible and contemporary. A monospaced voice (technical labels, coordinates, classifications) threads through both, evoking telemetry readouts and lab annotation. The contrast between humanist serif and machined mono IS the mood: ancient mystery meets instrument data.

Color is held in deliberate reserve. The palette is a warm charcoal scale from `{colors.background}` to a bone-white `{colors.ink}`, punctuated by one accent — a reddish-organic ember (`{colors.primary}`) lifted directly from the object's rusty surface material. That single warm note marks chapter eyebrows, active states, and the primary call to action; everywhere else the interface stays achromatic so the photography supplies the color. A cool slate-blue (`{colors.signal-blue}`) appears sparingly as a secondary technical highlight.

Chrome is whisper-quiet. Borders are 1px hairlines (`{colors.hairline}`) barely lifted off the canvas; cards are soft charcoal panels (`{colors.surface}`); navigation between hypotheses happens through circular object thumbnails rather than conventional menus. Interactive affordances ("Click to play sound", "Click & drag to rotate") are surfaced as small monospaced pills, reinforcing the instrument-panel feel.

**Key Characteristics:**
- Near-black warm-charcoal canvas (`{colors.background}`) — a darkened gallery for full-bleed imagery
- ITC Garamond serif for display/chapter headings — manuscript authority
- Suisse Int'l neo-grotesque sans for body and UI labels — neutral, legible
- Monospaced technical labels (coordinates, classifications) evoking telemetry
- A single reddish-organic ember accent (`{colors.primary}`) pulled from the object's surface
- Achromatic chrome so photography carries all the color
- Circular object thumbnails as primary chapter navigation
- Monospaced affordance pills for interaction cues
- Desktop-first, cinematic pacing with generous vertical breathing room

## Colors

### Canvas & Ink
- **Cosmic Black** (`{colors.background}`): Page background — warm near-black, the void the object falls through.
- **Panel Surface** (`{colors.surface}`): Correspondence cards, data panels, thumbnail wells.
- **Bone White** (`{colors.ink}`): Primary heading and body text — slightly warm, never pure white.
- **Ash** (`{colors.ink-secondary}`): Secondary copy, captions, affordance text.
- **Muted Gray** (`{colors.ink-muted}`): Technical labels, timestamps, tertiary metadata.

### Accent — Reddish Organic
- **Ember** (`{colors.primary}`): The signature accent — chapter eyebrows, active states, primary CTA. Drawn from the object's rusty surface material.
- **Bright Ember** (`{colors.accent-ember}`): Hover/active lift on the accent, CTA border glow.
- **Rust** (`{colors.accent-rust}`): Deeper accent for pressed states and dense detail.

### Technical Highlight
- **Signal Blue** (`{colors.signal-blue}`): Cool secondary highlight for instrument/telemetry accents, used sparingly.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deepest canvas, equal to background.
- **Gray 800–600** (`{colors.gray-800}` → `{colors.gray-600}`): Surface tints, hairlines, borders.
- **Gray 400–100** (`{colors.gray-400}` → `{colors.gray-100}`): Muted to near-white text steps.

### Lines & Overlays
- **Hairline** (`{colors.hairline}`): 1px dividers and card borders — barely lifted off canvas.
- **Overlay Scrim** (`{colors.overlay-scrim}`): Darkening scrim over imagery for text legibility.

## Typography

### Font Family
- **Display / Headings**: `ITC Garamond` (mapped to `EB Garamond` for web), fallbacks `Garamond, Georgia, serif`
- **Body / UI**: `Suisse Int'l`, fallbacks `Inter, Helvetica Neue, Arial, sans-serif`
- **Technical**: `Space Mono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### 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 Garamond hero — the object's name / opening line |
| `chapter-heading` | Chapter and hypothesis titles |
| `sub-heading` | Sub-sections within a chapter |
| `body-large` | Lead paragraphs, correspondence openings |
| `body` | Standard reading text |
| `body-small` | Dense data, footnotes |
| `label-medium` | Buttons, emphasized UI labels |
| `mono-label` | Technical labels, coordinates, classifications |
| `mono-caption` | Image captions, telemetry readouts |
| `caption` | Metadata, secondary captions |

### Principles
- **Serif announces, sans explains**: Garamond carries every headline and chapter title; Suisse handles all running copy and chrome. The pairing is strict — never set body in the serif or headings in the sans.
- **Mono as instrument voice**: Monospaced labels with positive tracking (`letterSpacing` 0.8–1.2px) read as telemetry. Reserve for technical metadata, never narrative.
- **One weight per family, mostly**: Garamond stays at 400 (its contrast does the work); Suisse uses 400 for reading and 500 for labels. Avoid heavy weights — the drama is in contrast and scale, not boldness.
- **Generous leading on dark**: Body line-height stays at 1.6+ so light text breathes against the black canvas.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px. Note the large jump from `{spacing.3xl}` (64px) to `{spacing.4xl}` (120px) — used for cinematic chapter breaks.

### Grid & Container
- Centered single-column reading measure (~640–720px) for correspondence and prose
- Full-bleed (edge-to-edge) breakout sections for the object's detail imagery
- Circular thumbnail row for hypothesis navigation
- Max content width ~1200px; imagery escapes the measure to span viewport

### Whitespace Philosophy
- **Cinematic pacing**: Large vertical voids (`{spacing.4xl}`) between chapters create suspense and scroll rhythm.
- **Image-forward**: Photography is full-bleed; text columns are narrow and centered so the eye returns to the object.
- **Quiet chrome**: Borders and panels barely separate from the canvas — separation comes from spacing and imagery, not heavy dividers.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed figures — imagery is never rounded |
| `xs` | 2px | Inline tags |
| `sm` | 4px | Small controls |
| `md` | 6px | Inputs, compact panels |
| `lg` | 10px | Content cards, data panels |
| `pill` | 9999px | Buttons, affordance pills, status, circular object thumbnails |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Ember fill, bone-white text, pill radius. The single CTA.
- **`button-ghost`** — Transparent over canvas with a `{colors.gray-600}` hairline border.
- **`affordance-pill`** — Monospaced interaction cue ("Click & drag to rotate") on a soft surface.

### Cards & Panels
- **`card`** — Soft charcoal surface (`{colors.surface}`), 1px hairline, `{rounded.lg}`. Holds correspondence and data.
- **`figure`** — Full-bleed, unrounded imagery. The object's detail shots run edge to edge.

### Navigation
- **`nav-bar`** — Minimal, transparent over the canvas; monospaced labels; hairline bottom edge.
- **`thumbnail-circle`** — 56px circular object thumbnail; the primary way to move between hypotheses.

### Labels
- **`tech-label`** — Muted monospaced technical metadata.
- **`eyebrow`** — Ember-colored monospaced chapter eyebrow.

## Do's and Don'ts

### Do
- Keep the canvas warm near-black (`{colors.background}`) and let imagery carry color
- Pair ITC Garamond headings with Suisse Int'l body — strictly
- Use the ember accent (`{colors.primary}`) only for eyebrows, active states, and the primary CTA
- Run object imagery full-bleed and unrounded
- Use monospaced labels for any technical/telemetry metadata
- Maintain generous leading (1.6+) on body copy against dark
- Use circular thumbnails for chapter navigation

### Don't
- Don't introduce a second saturated accent — the ember is the only warm note
- Don't set body copy in the serif or headings in the sans
- Don't round the full-bleed imagery
- Don't use heavy font weights — contrast and scale carry the drama
- Don't add heavy borders or dividers — hairlines only
- Don't use pure white (`#ffffff`) for text — keep the warm `{colors.ink}` bone tone
- Don't let chrome compete with the photography

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked thumbnails, reduced hero scale |
| Tablet | 600–1024px | Wider measure, thumbnail row wraps |
| Desktop | 1024–1400px | Full cinematic layout (the intended experience) |
| Large Desktop | >1400px | Centered, full-bleed imagery with generous margins |

### Touch Targets
- Buttons and affordance pills use comfortable padding (6–10px vertical)
- Circular thumbnails at 56px provide generous tap targets
- Drag-to-rotate interaction is desktop-optimized; touch provides a simplified view

### Collapsing Strategy
- Hero: 56px Garamond → scales down, retains negative tracking proportionally
- Thumbnail navigation: horizontal row → wraps or horizontal scroll
- Full-bleed figures: maintain edge-to-edge treatment at all sizes
- Chapter spacing: 120px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Cosmic Black `{colors.background}`
- Heading + body text: Bone White `{colors.ink}`
- Secondary text: Ash `{colors.ink-secondary}`
- Accent / CTA: Ember `{colors.primary}`
- Hairline borders: `{colors.hairline}`
- Technical labels: Muted Gray `{colors.ink-muted}`

### Example Component Prompts
- "Create a hero on a warm near-black background (`{colors.background}`). Title in ITC/EB Garamond 56px weight 400, line-height 1.05, color `{colors.ink}`. Above it, an ember (`{colors.primary}`) monospaced eyebrow, 12px, letter-spacing 1.2px, uppercase."
- "Design a correspondence card: soft charcoal surface (`{colors.surface}`), 1px `{colors.hairline}` border, 10px radius, 24px padding. Body in Suisse Int'l / Inter 16px weight 400, line-height 1.6, `{colors.ink}`."
- "Build a primary CTA: ember (`{colors.primary}`) fill, bone-white text, pill radius, 10px 22px padding, 14px weight 500 sans. Hover lifts to bright ember (`{colors.accent-ember}`)."
- "Create an affordance pill: surface (`{colors.surface}`) background, `{colors.ink-secondary}` monospaced 12px text with 1.2px tracking, pill radius, hairline border — e.g. 'Click & drag to rotate'."

### Iteration Guide
1. Imagery is the hero — keep chrome minimal and full-bleed photography unrounded
2. Strict type pairing: Garamond announces, Suisse explains, Mono instruments
3. One accent only — the ember marks eyebrows, active states, and the single CTA
4. Hairlines (`{colors.hairline}`), never heavy borders
5. Warm near-black canvas + bone-white text — avoid pure black and pure white

---

## 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 Outreach Space. Brand names and trademarks belong to their respective owners.