# Shortwave · Design system migration spec

> Source: https://www.shortwave.com  ·  Curated by OpenDesign  ·  en

> Exemplary dark mode SaaS design with strong typography hierarchy and focused AI positioning through strategic gradient accent on 'AI' keyword.

## 1. Identity DNA

Shortwave treats its interface like a well-staffed control room: dark, focused, and built around a single intelligent agent. The system's visual language maps directly onto its product promise—an AI teammate that never sleeps, rendered in deep navy and crisp white so the work itself stays front and center.

**One-liner:** AI-powered email automation and team collaboration platform
**Keywords:** AI email · automation · productivity · collaboration · agent
**Analogy:** An intelligent email assistant that works like a team member

## 2. Color

The palette is deliberately austere. A near-black navy ground absorbs attention, while a single vibrant blue accent (#356aff) marks every interactive surface, making navigation instinctive.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#161620` | main background |
| `--bg-soft` | `#1e1e2e` | card background |
| `--bg-quiet` | `#0f0f16` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#a1a1a1` | secondary text |
| `--muted` | `#dedede` | placeholder |
| `--accent` | `#356aff` | single accent |
| `--line` | `rgba(53, 106, 255, 1)` | divider |

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

Every color choice serves a single principle: contrast as a usability tool, not decoration.

## 3. Typography

Humanist sans-serif Poppins carries all interface text, its open letterforms balancing warmth with precision. Headlines tighten their tracking at display sizes to hold authority, while body copy settles into a consistent 0.2px spacing tuned for extended reading.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.1 | 600 | -1px | Main hero headlines |
| h2 | 34px | 1.2 | 600 | 0px | Section headings |
| body | 16px | 1.5 | 400 | 0.2px | Regular body text |
| small | 13px | 1.4 | 400 | 0.2px | Captions and metadata |

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

## 4. Spacing

An 8px base unit governs the spatial grid, and vertical spacing is deliberately generous to let content breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 72 / 80 / 96 px
- **Rhythm:** 8px base unit with generous vertical spacing for premium feel

## 5. Surfaces

Surfaces are defined less by borders than by light. Cards float on a deep navy ground, separated by 1px low-opacity strokes and a single shadow layer—0 4px 24px rgba(0,0,0,0.3)—that suggests gentle elevation without skeuomorphic fuss.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(0, 0, 0, 0.3)
- **Borders:** 1px solid border color with low opacity

## 6. Layout

The page skeleton follows a clear two-act structure. A centered single-column hero anchors the opening statement, then the layout widens into two-column feature grids that give each capability its own territory.

- **Container max:** 1200px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single column centered for hero, two-column for feature sections

## 7. Motion & Interaction

Motion here is restrained and purposeful: 0.2s ease-in-out transitions on hover states, smooth color shifts on interactive fills, and the occasional backdrop-filter blur for overlay depth. Nothing animates without a functional reason—the goal is polish, not performance.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on interactive elements
  - Subtle backdrop-filter blur effects

- **Hover:** Color and background-color transitions with 0.2s ease-in-out
- **Click:** Immediate visual feedback
- **Transition:** All properties transition smoothly for polished feel
- **Keyboard:** Standard focus indicators on interactive elements

## 8. Voice & Don'ts

The editorial voice is direct and professional, leaning on action verbs and benefit statements rather than hype. Language stays clear of jargon and avoids the casual tone that can cheapen a premium productivity tool.

- **Tone:** Professional yet approachable, emphasizing efficiency and intelligence
- **Headline style:** Direct action verbs with benefit-focused statements
- **CTA style:** Clear, low-friction calls to action with 'Get started for free'
- **Avoid:** Jargon-heavy technical language / Overly casual or playful tone / Aggressive sales language

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows consistently dark navy theme
- ❌ Don't use decorative serif fonts — screenshot shows clean sans-serif typography
- ❌ Don't use warm color palettes — screenshot uses cool blues and grays only
- ❌ Don't use complex multi-column layouts for hero sections — screenshot shows centered, single-column focus
- ❌ Don't use small, cramped spacing — screenshot shows generous padding and gaps
- ❌ Don't use gradient text effects throughout — screenshot uses gradient only for 'AI' highlight

Shortwave deliberately refuses light backgrounds, decorative serifs, warm palettes, and complex animations—constraints that keep the interface relentlessly focused.

## System Prompt (paste into AI tool)

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