CURATED · OPEN · FREE

Missive

A professional SaaS landing page for a team email collaboration tool.

productivityemail

↓ Download design system (14 MB)Open in OpenDesign

Visit: https://missiveapp.com

📦 Browse pack contents →

Identity DNA

collaborationproductivityemailteamsworkflow

A clean, efficient team cockpit for managing email and tasks.

Color

#2266EDAccent

#333333Ink

#646C76Ink soft

#FFFFFFBG

#F5F6F6BG soft

#CDCDE4Muted

rgba(228, 230, 233, 1)Line

Crisp white backgrounds with dark text and a single vibrant blue for primary actions.

Typography

transitional-serif · humanist-sans

display48px · 400
h232px · 400
body16px · 400
caption14px · 400

Use Tiempos Headline (transitional serif) for main marketing headlines. · Use Inter (humanist sans-serif) for body text, navigation, and UI elements. · Keep body text weight at 400 and navigation links at 500 for clear hierarchy.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px base unit with multiples of 8 and 16 for consistent spacing.

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

1px solid #E4E6E9 used for subtle separators and input fields.

rgba(0, 0, 0, 0.1) 0px 0px 32px 0px

Layout

1280container

12columns

32pxgutter

768 / 1024breakpoints

Centered content layout with a standard top navigation bar and alternating white/gray sections.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle transitions on all interactive elements (0.3s opacity or transform).

Opacity or color changes on buttons and links. · Immediate visual feedback for interactive elements.

Components

button Rounded primary buttons in blue (#2266ED) with white text, and secondary buttons with dark text on white.
card Clean white cards with subtle shadows or borders for UI mockups and feature sections.
chip Small rounded tags used for categories or statuses within the application interface.
input Standard input fields with light gray borders and subtle rounded corners.
hero Large centered headline in serif font followed by sans-serif body text and primary/secondary CTAs.

Voice & Don'ts

Tone Professional, helpful, and direct.
Headlines Serif font, large size, focusing on clear benefits and value propositions.
CTAs Action-oriented (Try for free, Watch demo, Sign up) using clear, concise language.

Don't use vibrant, multi-colored gradients — screenshot shows clean white/gray backgrounds instead.
Don't use heavy, dark shadows — screenshot shows subtle, soft shadows like rgba(0,0,0,0.1) 0px 0px 32px.
Don't use all-caps for large sections — screenshot shows standard sentence case or title case.
Don't use overly decorative fonts for body text — screenshot shows clean, readable sans-serif (Inter).
Don't use harsh, high-contrast accent colors everywhere — screenshot limits the vibrant blue to primary buttons and links.
Don't use complex, cluttered layouts — screenshot shows generous white space and clear visual hierarchy.
Avoid: Slang
Avoid: Overly casual language
Avoid: Jargon-heavy descriptions

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Missive is a professional SaaS landing page for a team email collaboration tool. The design DNA uses a clean white background (#FFFFFF) with dark gray text (#333333) and a single vibrant blue accent (#2266ED) for primary calls to action. Typography features a transitional serif (Tiempos Headline) for prominent marketing headlines and a humanist sans-serif (Inter) for body copy and UI elements. The layout is centered and spacious, using a 4px base spacing unit. Critical donts: never use multi-colored gradients, avoid heavy dark shadows, and do not use all-caps for large text sections.

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