# Courier · Design system migration spec

> Source: https://www.courier.com  ·  Curated by OpenDesign  ·  en

> A strong example of a modern, dark-themed developer tool interface that balances technical sophistication with clean, accessible design.

## 1. Identity DNA

Courier is a developer-first control center for orchestrating cross-channel notifications, and its design system reflects this precision. The analogy is architectural: it's a control room built for clarity, where every surface, shadow, and typographic decision serves the operator's focus.

**One-liner:** A premium dark-themed SaaS platform for designing and sending notifications.
**Keywords:** notification · orchestration · messaging · platform · developer
**Analogy:** A developer-first control center for orchestrating cross-channel notifications.

## 2. Color

The palette is a study in restraint: a monochromatic dark field of near-black (#0A0A0A) provides the stage for high-contrast white text and a single, muted purple brand accent. This is a system that understands color as a tool for hierarchy and emphasis, not decoration.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0A0A0A` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `rgba(255,255,255,0.72)` | secondary text |
| `--muted` | `rgba(255,255,255,0.56)` | placeholder |
| `--line` | `rgba(255,255,255,0.04)` | divider |

**Color principle:** High-contrast dark UI with subtle elevation.

The guiding principle is high contrast for readability and a single chromatic signal for brand identity within a dark, utilitarian environment.

## 3. Typography

The typographic voice is clean and functional, built on a humanist sans-serif for all interface text. A tight line-height for display sizes and a dedicated monospaced face for code snippets and variables create a clear distinction between interface language and the code it describes.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Main headline |
| display-sm | 40px | 1.2 | 500 | -0.4px | Section headers |
| body-lg | 18px | 1.45 | 400 | -0.18px | Subheadings |
| body-sm | 14px | 1.5 | 400 | -0.14px | UI text |
| mono | 12px | 1.6 | 400 | 0 | Code and variables |

**Type rules:**
- 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.

## 4. Spacing

The system's rhythm is governed by an 8px base unit, creating a consistent vertical grid that imposes order on spacious layouts.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base unit, consistent vertical spacing.

## 5. Surfaces

Surfaces are defined by subtle depth, achieved through a triad of low-opacity shadows that lift cards and containers from the background. Thin, low-contrast borders provide additional separation without introducing visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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.

## 6. Layout

The structural skeleton is a standard, centered-column layout that prioritizes content focus. Full-width hero sections break this column for primary announcements, creating a clear visual hierarchy from marketing to application.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard centered-column layout with full-width hero sections.

## 7. Motion & Interaction

Motion is treated as a functional enhancement, not a spectacle. Animations are limited to smooth fade-ins and subtle parallax on scroll, designed to guide attention without diverting it from the product's utility.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth fade-ins and subtle parallax on scroll.
  - Interactive elements respond to hover with subtle scale or opacity changes.

- **Hover:** Subtle background or opacity change on interactive elements.
- **Click:** Subtle scale or depth change to indicate activation.
- **Transition:** Smooth transitions on all interactive properties.
- **Keyboard:** Standard focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, technical, and professional, speaking in direct, benefit-oriented statements. It avoids playful language and vague marketing jargon, opting instead for precise, action-oriented calls to action.

- **Tone:** Confident, technical, and professional.
- **Headline style:** Direct, benefit-oriented statements.
- **CTA style:** Action-oriented verbs like 'Request demo', 'Sign up'.
- **Avoid:** Overly casual or playful language. / Vague marketing jargon. / Unnecessary exclamation points.

### Don'ts
- ❌ 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.

The system deliberately omits decorative serif fonts, light backgrounds, busy patterns, and sharp corners to maintain its core identity of technical sophistication and clean focus.

## System Prompt (paste into AI tool)

```
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.
```