# Spark · Design system migration spec

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

> A prime example of modern SaaS design using restraint, clarity, and high-quality device mockups to communicate value.

## 1. Identity DNA

Spark’s design system is built on the principle of digital consolidation. It takes the cluttered desk of modern communication and clears it into a single, focused workspace, where every element earns its place through clarity and purpose.

**One-liner:** A modern email client focused on AI-powered clarity and platform consistency.
**Keywords:** Focus · Productivity · Smart · AI · Cross-platform
**Analogy:** A cluttered desk cleared into a single, focused workspace.

## 2. Color

The color system is a study in restraint. It relies on clean, airy whites and high-contrast text, punctuated by a single, vibrant blue action color that guides the user’s eye to primary tasks.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBFBFD` | main background |
| `--bg-soft` | `#F5F5F7` | card background |
| `--bg-quiet` | `#F8F8FA` | quiet area |
| `--ink` | `#111111` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#6E6E6E` | placeholder |
| `--muted-soft` | `#AFAFAF` | weak hint |
| `--accent` | `#205EFF` | single accent |
| `--line` | `rgba(175,175,175,1.0)` | divider |

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

The core principle is unambiguous: use color as a functional signal, not for decoration.

## 3. Typography

Typographic voice is established with a geometric humanist sans-serif, using bold, tightly tracked display type for impact. Regular-weight body text ensures maximum readability, creating a clear hierarchy from headline to secondary detail.

- **Display:** humanist-sans
- **Body:** system-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 800 | -1.5px | Hero headline |
| headline | 32px | 1.2 | 700 | -0.6px | Section titles |
| body | 20px | 1.5 | 400 | -0.42px | Hero subhead |
| small | 14px | 1.4 | 400 | -0.1px | Secondary text |

**Type rules:**
- Bold display type with tight tracking for impact
- Regular weight body text for maximum readability
- Geometric humanist primary font with system fallbacks

## 4. Spacing

A consistent 8-pixel base unit establishes the vertical rhythm, creating order through measured, predictable increments.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 64 px
- **Rhythm:** 8px base unit with generous section padding

## 5. Surfaces

Depth is conveyed through layered, subtle shadows rather than stark borders. The boundaries between surfaces are soft and rounded, defined by a single-pixel, semi-transparent stroke that maintains the airy, open feel.

- **Radius:** sm 6px · md 16px · lg 24px · pill 999px
- **Shadows:**
  - 0px 20px 40px 0px rgba(34,41,69,0.12)
  - 0px 7px 30px 0px rgba(160,165,209,0.2)
- **Borders:** 1px solid rgba(175,175,175,0.25)

## 6. Layout

The layout skeleton is a standard, centered 12-column grid. Generous whitespace and large padding define the structure, allowing content to breathe within clean, rounded containers.

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

**Skeleton:** Standard 12-column centered grid with generous whitespace

## 7. Motion & Interaction

Motion is used sparingly to confirm interaction and guide attention. Smooth color transitions on hover, opacity fades for state changes, and a subtle lift on interactive cards provide feedback without distraction.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on hover (0.3s)
  - Opacity fades for state changes
  - Subtle lift on interactive cards

- **Hover:** Smooth background color fill with 0.3s transition, slight scale on mockups
- **Click:** Immediate color shift with subtle shadow reduction
- **Transition:** All properties animated with 0.3s duration
- **Keyboard:** Standard focus rings on interactive elements

## 8. Voice & Don'ts

The editorial voice is professional, confident, and focus-oriented. Headlines are short, declarative sentences; calls to action are direct and high-contrast.

- **Tone:** Professional, confident, and focus-oriented
- **Headline style:** Short, punchy declarative sentences with periods
- **CTA style:** Action-oriented verbs (Buy, Download, See) in high-contrast buttons
- **Avoid:** Overly technical jargon / Aggressive sales language / Visual clutter / Low-contrast text / Complex nested menus / Dense text blocks

### Don'ts
- ❌ 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

The system deliberately avoids visual clutter, dense information architectures, and any element that would fracture the clean, single-accent aesthetic.

## System Prompt (paste into AI tool)

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