CURATED · OPEN · FREE

Postmark

The email delivery service that people actually like.

01

Identity DNA

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

02

Color

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

03

Typography

slab-serif · humanist-sans · monospace

• display56px · 900
• heading40px · 700
• subhead20px · 400
• body16px · 400
• caption14px · 400

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.

04

Spacing

8px grid

05

Surfaces

1px solid rgba(36,39,45,1)

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)

06

Layout

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

07

Motion & Interaction

Fade in and slide up for elements entering the viewport. · Smooth color transitions for hover states.

Subtle change in background color or text color, with smooth transitions. · Immediate feedback via standard button states.

08

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.

09

Voice & Don'ts

• Tone Confident, direct, and friendly.
• Headlines Bold, clear statements of value proposition.
• CTAs Action-oriented, focusing on starting a trial or learning more.

• 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.
• Avoid: Avoid overly technical jargon that alienates non-developers.
• Avoid: Avoid a cold or purely corporate tone.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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