CURATED · OPEN · FREE

Courier

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

devnotifications

Courier screenshot

↓ Download design system (25 MB)Open in OpenDesign

Visit: https://www.courier.com

📦 Browse pack contents →

01

Identity DNA

notificationorchestrationmessagingplatformdeveloper

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

02

Color

#FFFFFFInk

rgba(255,255,255,0.72)Ink soft

#0A0A0ABG

rgba(255,255,255,0.56)Muted

rgba(255,255,255,0.04)Line

High-contrast dark UI with subtle elevation.

03

Typography

humanist-sans · monospaced

display56px · 500
display-sm40px · 500
body-lg18px · 400
body-sm14px · 400
mono12px · 400

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.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px base unit, consistent vertical spacing.

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Thin, low-contrast borders for subtle separation.

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)

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth fade-ins and subtle parallax on scroll. · Interactive elements respond to hover with subtle scale or opacity changes.

Subtle background or opacity change on interactive elements. · Subtle scale or depth change to indicate activation.

08

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.

09

Voice & Don'ts

Tone Confident, technical, and professional.
Headlines Direct, benefit-oriented statements.
CTAs Action-oriented verbs like 'Request demo', 'Sign up'.

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.
Avoid: Overly casual or playful language.
Avoid: Vague marketing jargon.
Avoid: Unnecessary exclamation points.

10

Inside the pack — real screenshots

Courier — 桌面首屏（hero） — 桌面首屏（hero）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko