---
name: Superhuman
description: "This site exemplifies how premium SaaS products balance sophistication with clarity through restrained color usage and purposeful typography."
version: alpha

colors:
  background: "#f2f0eb"
  primary: "#292827"
  secondary: "#ffffff"
  tertiary: "#734cb6"
  neutral: "#734cb6"
  bg-soft: "#ffffff"
  bg-quiet: "#ebe9e2"
  muted-soft: "rgba(255,255,255,0.8)"
  line: "rgba(255,255,255,0.05)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.5px"
  headline:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  body-lg:
    fontFamily: geometric-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Premium AI-powered productivity suite for professionals

*A high-end private club for your inbox and workflow*

## Colors

High contrast ink on warm off-white with purple accents

- **Background (`#f2f0eb`)** — uses `bg` token
- **Primary text (`#292827`)** — uses `ink` token
- **Secondary text (`#ffffff`)** — uses `ink-soft` token
- **Accent (`#734cb6`)** — uses `accent` token
- **Muted (`#734cb6`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.05)`)** — uses `line` token

## Typography

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

- Headlines use tight letter-spacing (-1px to -1.5px)
- Body text uses system fallback stack for performance
- Weight 600 reserved for navigation and buttons

## Layout

Asymmetric two-column layouts with overlapping UI elements in hero sections

*Rhythm:* Consistent 8px-based vertical rhythm for spacing and alignment

## Elevation & Depth

- 0 0 0 1px rgba(113,76,182,1) inset
- 0 0 0 1px rgba(255,255,255,0.95) inset
- Borders: Subtle 1px borders using ink or white at low opacity

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped with dark background and purple accent states
- **card:** Semi-transparent panels with subtle borders and rounded corners
- **chip:** Small pill shapes with borders for status and tags
- **input:** Clean text fields with subtle bottom borders
- **hero:** Large gradient background with centered typography and overlapping interface mockups

## Do's and Don'ts

**Don't:**
- Don't use a dark primary background — screenshot shows light off-white (#f2f0eb) as the main canvas
- Don't use rounded full-pill buttons for all actions — screenshot shows mixed use of rounded rectangles and pills
- Don't use bright saturated accent colors — screenshot shows muted purple (#734cb6) as the primary accent
- Don't use heavy drop shadows — screenshot shows only subtle inset border effects
- Don't use wide letter-spacing in headlines — screenshot shows tight negative letter-spacing (-1px to -1.5px)
- Don't use center-aligned body text — screenshot shows left-aligned paragraphs for readability

---

## System Prompt (paste into AI agent)

```
Superhuman is a premium AI-powered productivity suite for professionals. Position it as an exclusive tool that enhances speed and efficiency across email, docs, and AI assistants. Key colors include warm off-white backgrounds (#f2f0eb), near-black ink (#292827), and muted purple accents (#734cb6). Typography uses geometric sans-serif categories with tight letter-spacing for headlines. Critical design constraints: never use dark mode as the default, avoid overly playful or casual visual treatments, and maintain generous whitespace with asymmetric layouts. The interface should feel refined, fast, and professional—never cluttered or generic.
```