---
name: Courier
description: "A strong example of a modern, dark-themed developer tool interface that balances technical sophistication with clean, accessible design."
version: alpha

colors:
  background: "#0A0A0A"
  primary: "#FFFFFF"
  secondary: "rgba(255,255,255,0.72)"
  neutral: "rgba(255,255,255,0.56)"
  line: "rgba(255,255,255,0.04)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  display-sm:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.4px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "-0.18px"
  body-sm:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.14px"
  mono:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A premium dark-themed SaaS platform for designing and sending notifications.

*A developer-first control center for orchestrating cross-channel notifications.*

## Colors

High-contrast dark UI with subtle elevation.

- **Background (`#0A0A0A`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`rgba(255,255,255,0.72)`)** — uses `ink-soft` token
- **Muted (`rgba(255,255,255,0.56)`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.04)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospaced

- Use tight line-height (1.0-1.2) for large display text.
- Maintain generous vertical padding between sections.
- Use monospaced font for code snippets and variables.

## Layout

Standard centered-column layout with full-width hero sections.

*Rhythm:* 8px base unit, consistent vertical spacing.

## Elevation & Depth

- 0px 1px 1px 0px rgba(0, 0, 0, 0.12)
- 0px 0.602187px 0.602187px -1.25px rgba(0, 0, 0, 0.25)
- 0px 2.28853px 2.28853px -2.5px rgba(0, 0, 0, 0.22)
- Borders: Thin, low-contrast borders for subtle separation.

## Shapes

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

## Components

- **button:** Rounded, pill-shaped buttons with subtle background transitions.
- **card:** Elevated containers with rounded corners and subtle background gradients.
- **chip:** Small, rounded badges for status or tags.
- **input:** Dark-themed inputs with subtle borders and rounded corners.
- **hero:** Large, centered headline with supporting text and interactive product mockups.

## Do's and Don'ts

**Don't:**
- Don't use light backgrounds — the screenshot shows a near-black (#0A0A0A) primary background.
- Don't use multiple bright accent colors — the screenshot shows a monochrome palette with only one brand color (purple) used sparingly.
- Don't use decorative serif fonts — the screenshot shows a clean humanist sans-serif for all text.
- Don't use complex grid patterns or heavy textures — the screenshot shows clean, flat surfaces with subtle gradients.
- Don't use sharp, square corners — the screenshot shows rounded corners (8px, 12px) on all UI elements.
- Don't use busy layouts — the screenshot shows a clean, centered layout with generous white space.

---

## System Prompt (paste into AI agent)

```
Courier is a premium B2B SaaS platform for developer-centric notification orchestration. It uses a dark mode (#0A0A0A) design system with high-contrast white (#FFFFFF) and muted (#rgba(255,255,255,0.72)) text. The typography is a clean humanist sans-serif paired with a monospaced font for code elements. The layout is spacious, centered, and focuses on product mockups. Critical don'ts: don't use bright, multi-color accents; don't use decorative or serif fonts; don't clutter the interface with unnecessary patterns or textures; don't use sharp corners; don't use light backgrounds. The tone is confident and technical, speaking directly to developers and product managers.
```