CURATED · OPEN · FREE

Shortwave

AI-powered email automation and team collaboration platform

productivityemail
Shortwave screenshot
↓ Download design system (26 MB)Open in OpenDesign

Visit: https://www.shortwave.com

📦 Browse pack contents →

01

Identity DNA

AI emailautomationproductivitycollaborationagent

An intelligent email assistant that works like a team member

02

Color

#356affAccent
#ffffffInk
#a1a1a1Ink soft
#161620BG
#1e1e2eBG soft
#0f0f16BG quiet
#dededeMuted
rgba(53, 106, 255, 1)Line

Deep navy backgrounds with high-contrast white text and vibrant blue accents for focus areas

03

Typography

humanist-sans · monospace

Use humanist-sans for all interface text · Headlines use tighter letter-spacing at larger sizes · Body text maintains consistent 0.2px letter-spacing

04

Spacing

4px
8px
16px
24px
32px
48px
64px
72px
80px
96px

8px base unit with generous vertical spacing for premium feel

05

Surfaces

sm · 4px
md · 8px
lg · 12px
xl · 32px
pill · 999px

1px solid border color with low opacity

0 4px 24px rgba(0, 0, 0, 0.3)

06

Layout

1200container
12columns
24pxgutter
768 / 1024breakpoints

Single column centered for hero, two-column for feature sections

07

Motion & Interaction

200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color transitions on interactive elements · Subtle backdrop-filter blur effects

Color and background-color transitions with 0.2s ease-in-out · Immediate visual feedback

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Shortwave — 桌面首屏（hero）
桌面首屏（hero）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

Shortwave is an AI-powered email automation and team collaboration SaaS platform. Position: premium productivity tool with intelligent automation capabilities. Key colors: deep navy backgrounds (#161620, #0f0f16), white text (#ffffff), gray accents (#a1a1a1), and vibrant blue accent (#356aff). Font categories: humanist-sans for all interface elements with Poppins as primary typeface. Layout features centered hero sections with generous whitespace and two-column feature grids. Critical donts: never use light backgrounds (maintain dark theme), avoid decorative typography (keep clean sans-serif), don't cram UI elements (preserve generous spacing), avoid warm colors (stick to cool blue palette), don't use complex animations (keep interactions subtle), and don't clutter the interface (maintain focused, minimal approach).

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