CURATED · OPEN · FREE

Spark

A modern email client focused on AI-powered clarity and platform consistency.

productivityemail

Spark screenshot

↓ Download design system (36 MB)Open in OpenDesign

Visit: https://sparkmailapp.com

📦 Browse pack contents →

01

Identity DNA

FocusProductivitySmartAICross-platform

A cluttered desk cleared into a single, focused workspace.

02

Color

#205EFFAccent

#111111Ink

#333333Ink soft

#FBFBFDBG

#F5F5F7BG soft

#F8F8FABG quiet

#6E6E6EMuted

rgba(175,175,175,1.0)Line

Clean, airy whites with a single vibrant blue action color and high-contrast text.

03

Typography

humanist-sans · system-sans

display56px · 800
headline32px · 700
body20px · 400
small14px · 400

Bold display type with tight tracking for impact · Regular weight body text for maximum readability · Geometric humanist primary font with system fallbacks

04

Spacing

4px

8px

12px

16px

24px

32px

40px

64px

8px base unit with generous section padding

05

Surfaces

sm · 6px

md · 16px

lg · 24px

pill · 999px

1px solid rgba(175,175,175,0.25)

0px 20px 40px 0px rgba(34,41,69,0.12) · 0px 7px 30px 0px rgba(160,165,209,0.2)

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard 12-column centered grid with generous whitespace

07

Motion & Interaction

200msmicro

300mssmall

600msmedium

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

Smooth color transitions on hover (0.3s) · Opacity fades for state changes · Subtle lift on interactive cards

Smooth background color fill with 0.3s transition, slight scale on mockups · Immediate color shift with subtle shadow reduction

08

Components

button High-contrast solid primary buttons with pill radius, secondary outlined ghost buttons
card Soft rounded cards with subtle shadow depth on white backgrounds
chip Pill-shaped status badges with background gradients (e.g., AI tag)
input Clean bordered inputs with subtle internal shadows
hero Split layout with large typography on left, floating device mockups on right with blue radial gradient background

09

Voice & Don'ts

Tone Professional, confident, and focus-oriented
Headlines Short, punchy declarative sentences with periods
CTAs Action-oriented verbs (Buy, Download, See) in high-contrast buttons

Don't use dark mode layouts — screenshot shows predominantly light (#FBFBFD) background
Don't use serif typography for headlines — screenshot shows humanist sans-serif (Sofia-Pro)
Don't use multiple competing accent colors — screenshot shows a single dominant blue (#205EFF)
Don't create dense information architectures — screenshot shows generous whitespace and large padding (64px)
Don't use sharp square corners on cards — screenshot shows rounded radiuses (16px to 24px)
Don't use thin light font weights for emphasis — screenshot shows bold (800) for headlines
Avoid: Overly technical jargon
Avoid: Aggressive sales language
Avoid: Visual clutter
Avoid: Low-contrast text
Avoid: Complex nested menus
Avoid: Dense text blocks

10

Inside the pack — real screenshots

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Spark — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

Spark is a productivity-focused email client positioning itself as a smart, focused solution for modern professionals. The design DNA features a clean, airy aesthetic with a dominant white (#FBFBFD) background and a single high-chroma blue accent (#205EFF) for primary actions. Typography relies on a humanist sans-serif (Sofia-Pro) for display headlines with tight letter-spacing (-1.5px) and weight 800, paired with system fonts for body text. Layout utilizes generous whitespace (64px padding) and soft rounded corners (16-24px radius). Key critical donts: never introduce dark mode as the primary interface, never use serif fonts for display type, and never fragment the color system with multiple competing accent colors.

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