---
name: Postmark
description: "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."
version: alpha

colors:
  background: "#FFDE00"
  primary: "#24272D"
  secondary: "#5A5A5A"
  tertiary: "#007BC8"
  neutral: "#929292"
  bg-soft: "#FFFFFF"
  bg-quiet: "#F5F5F5"
  line: "rgba(36,39,45,1)"

typography:
  display:
    fontFamily: slab-serif
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 900
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  subhead:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

The email delivery service that people actually like.

*A highly efficient, dedicated delivery service that prioritizes critical mail over junk.*

## Colors

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

- **Background (`#FFDE00`)** — uses `bg` token
- **Primary text (`#24272D`)** — uses `ink` token
- **Secondary text (`#5A5A5A`)** — uses `ink-soft` token
- **Accent (`#007BC8`)** — uses `accent` token
- **Muted (`#929292`)** — uses `muted` token
- **Borders (`rgba(36,39,45,1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 8px grid

## Elevation & Depth

- 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)

## Shapes

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

## Components

- **button:** Solid primary color with rounded corners, used for primary calls to action.
- **card:** White background with subtle shadows and rounded corners, used for testimonials.
- **chip:** Simple text links with an arrow indicator.
- **input:** Standard text inputs with clear borders and padding.
- **hero:** Large, bold typography on a vibrant background color, accompanied by a supporting visual or call to action.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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