# Postmark · Design system migration spec

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

> This site is a great example of how to use a bold, unconventional color to create a strong, memorable brand identity in a typically dry B2B space.

## 1. Identity DNA

The Postmark design system is built on the identity of a highly efficient, dedicated delivery service that prioritizes critical mail over junk. This analogy informs every choice, from its confident typography to its vibrant, high-contrast palette, creating a system that feels both reliable and approachable.

**One-liner:** The email delivery service that people actually like.
**Keywords:** reliable · fast · friendly · developer-focused · transactional email
**Analogy:** A highly efficient, dedicated delivery service that prioritizes critical mail over junk.

## 2. Color

The palette is a study in controlled vibrancy, anchored by a bold primary yellow and balanced with crisp whites and deep, readable inks. It establishes a high-contrast environment where information clarity is paramount.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFDE00` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#F5F5F5` | quiet area |
| `--ink` | `#24272D` | body text |
| `--ink-soft` | `#5A5A5A` | secondary text |
| `--muted` | `#929292` | placeholder |
| `--accent` | `#007BC8` | single accent |
| `--line` | `rgba(36,39,45,1)` | divider |

**Color principle:** High-contrast, vibrant primary yellow balanced with crisp whites and deep inks for readability.

The principle is balance: vibrant energy for emphasis, deep tones for authority, and white space for clarity.

## 3. Typography

Typographic voice is established through a clear hierarchy of function. A sturdy slab-serif conveys friendly strength for headings, while a humanist sans-serif provides the warm, modern clarity essential for body text and developer documentation.

- **Display:** slab-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 900 | -1px | Hero headline |
| heading | 40px | 1.1 | 700 | -0.5px | Section headline |
| subhead | 20px | 1.4 | 400 | 0px | Hero subheading |
| body | 16px | 1.5 | 400 | 0px | Paragraph text |
| caption | 14px | 1.5 | 400 | 0px | Small text, nav links |

**Type rules:**
- Use slab-serif for main impactful headings to convey friendliness and strength.
- Use humanist-sans for body text to maintain excellent readability and a modern feel.
- Maintain tight letter-spacing for large display text.

## 4. Spacing

A strict 8px grid underpins the entire layout, creating a consistent, predictable rhythm across components and sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px grid

## 5. Surfaces

Depth and separation are achieved through subtle, layered shadows and precise, single-pixel borders. These elements lift content cards and interactive components off the clean, white surface without visual clutter.

- **Radius:** sm 4px · md 12px · lg 12px · pill 999px
- **Shadows:**
  - 0px 2px 3px 0px rgba(0,0,0,0.07)
  - 0px 4px 15px 0px rgba(0,0,0,0.07)
  - 0px 9px 25px 0px rgba(0,0,0,0.2)
- **Borders:** 1px solid rgba(36,39,45,1)

## 6. Layout

The foundational skeleton is a standard hero layout, structurally divided into a content column on the left and a supporting visual or testimonial card column on the right. This clear split organizes the primary value proposition and social proof within a spacious 12-column grid.

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

**Skeleton:** Standard hero layout with split columns: content on the left, visual/testimonial cards on the right.

## 7. Motion & Interaction

Motion philosophy is one of purposeful subtlety, used only to guide attention and confirm interaction. Elements enter with a gentle fade and slide upward, while interactive states are confirmed with smooth, immediate color transitions.

- **Durations:** micro 150ms · small 200ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Fade in and slide up for elements entering the viewport.
  - Smooth color transitions for hover states.

- **Hover:** Subtle change in background color or text color, with smooth transitions.
- **Click:** Immediate feedback via standard button states.
- **Transition:** All properties transition smoothly over 0.2s for most interactive elements.
- **Keyboard:** Standard focus states using browser defaults or subtle outlines.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and friendly, speaking in bold, clear statements of value. It avoids cold corporate tone and technical jargon that could alienate, focusing instead on action-oriented calls to start a trial or learn more.

- **Tone:** Confident, direct, and friendly.
- **Headline style:** Bold, clear statements of value proposition.
- **CTA style:** Action-oriented, focusing on starting a trial or learning more.
- **Avoid:** Avoid overly technical jargon that alienates non-developers. / Avoid a cold or purely corporate tone.

### Don'ts
- ❌ Don't use a dark mode theme — screenshot shows a bright, high-energy yellow as the primary background.
- ❌ Don't use overly complex gradients — screenshot shows mostly solid color backgrounds with subtle depth via shadows.
- ❌ Don't use thin, decorative serif fonts — screenshot shows a sturdy, slab-serif display font.
- ❌ Don't use a muted, low-contrast color palette — screenshot shows a vibrant, high-contrast scheme.
- ❌ Don't use a highly dense, multi-column layout — screenshot shows generous whitespace and clear separation between sections.
- ❌ Don't use generic, abstract iconography — screenshot shows custom line-art illustrations that add character.

What the system deliberately avoids is as defining as what it includes: no dark mode, no complex gradients, and no thin, decorative serifs that would undermine its sturdy, high-energy character.

## System Prompt (paste into AI tool)

```
This is a SaaS website for a developer-focused email delivery service. The design is defined by a vibrant primary yellow (#FFDE00) background in the hero section, contrasted with crisp whites and deep inks (#24272D). Typography features a bold slab-serif (Elizeth) for impactful headlines and a humanist-sans (Rund Text) for body text, prioritizing friendliness and readability. The layout is clean and spacious, utilizing a 12-column grid. Key components include solid buttons, white testimonial cards with subtle shadows, and custom line-art illustrations. Critical don'ts: Do not use dark mode; the design is inherently light and bright. Do not use complex, multi-color gradients; the palette is flat and solid. Do not use decorative, thin serifs; the display font is heavy and robust.
```