---
name: Spark
description: "A prime example of modern SaaS design using restraint, clarity, and high-quality device mockups to communicate value."
version: alpha

colors:
  background: "#FBFBFD"
  primary: "#111111"
  secondary: "#333333"
  tertiary: "#205EFF"
  neutral: "#6E6E6E"
  bg-soft: "#F5F5F7"
  bg-quiet: "#F8F8FA"
  muted-soft: "#AFAFAF"
  line: "rgba(175,175,175,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 800
    letterSpacing: "-1.5px"
  headline:
    fontFamily: system-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.6px"
  body:
    fontFamily: system-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.42px"
  small:
    fontFamily: system-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.1px"

rounded:
  sm: 6px
  md: 16px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

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

*A cluttered desk cleared into a single, focused workspace.*

## Colors

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

- **Background (`#FBFBFD`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#205EFF`)** — uses `accent` token
- **Muted (`#6E6E6E`)** — uses `muted` token
- **Borders (`rgba(175,175,175,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

Standard 12-column centered grid with generous whitespace

*Rhythm:* 8px base unit with generous section padding

## Elevation & Depth

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

## Shapes

- `sm`: 6px
- `md`: 16px
- `lg`: 24px
- `pill`: 999px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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