# Superhuman — Design System
> AI-powered productivity suite for email, docs, and cross-app assistance.
- **Canonical:** https://uiuxskills.com/library/superhuman
- **Source:** https://superhuman.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:03.159Z

---

---
version: alpha
name: Superhuman
description: AI-powered productivity suite for email, docs, and cross-app assistance.
tone: Confident, fast-paced, professional, and highly focused on productivity gains.
color-scheme: light
colors:
  primary: "#554DCB"
  secondary: "#86CBF9"
  surface: "#FFFFFF"
  surface-dim: "#F7F7F7"
  surface-container: "#F7DBFF"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#E0E0E0"
  error: "#D93025"
  focus-ring: "#86CBF9"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
    fontWeight: 700
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
    fontWeight: 600
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
    fontWeight: 400
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
    fontWeight: 500
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
    fontWeight: 500
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#4540A8"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDECEA"
    textColor: "{colors.error}"
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Superhuman presents a high-performance, sleek aesthetic that emphasizes speed and clarity. The visual language uses vibrant, electric blues and purples against clean surfaces to convey a sense of modern, intelligent efficiency.

## Colors

The color palette is anchored by a high-contrast, professional base, utilizing vibrant accents to highlight productivity-focused interactions.

*   Primary (#554DCB): The core brand purple used for primary CTAs and key brand elements.
*   Secondary (#86CBF9): Accent color used for highlights and secondary UI elements.
*   Surface (inferred) (#FFFFFF): Main background color for the application and marketing site.
*   Surface-dim (inferred) (#F7F7F7): Subtle background for section dividers or secondary containers.
*   Surface-container (#F7DBFF): Soft purple tint used for subtle container backgrounds.
*   On-surface (inferred) (#1A1A1A): Primary text color for high readability on light surfaces.
*   Outline (inferred) (#E0E0E0): Border color for cards and input fields.
*   Error (inferred) (#D93025): Standard semantic color for errors and destructive actions.
*   Focus-ring (inferred) (#86CBF9): Focus state indicator using the secondary brand color.

## Typography

The typography strategy relies on the Inter typeface to maintain a clean, highly legible, and professional interface across all screen sizes.

*   Display-lg (inferred): Used for hero headlines to establish immediate impact.
*   Headline-lg (inferred): Used for section headers.
*   Headline-md (inferred): Used for sub-headers within product feature sections.
*   Body-md (inferred): Standard body text for readability.
*   Label-md (inferred): Used for button labels and navigation items.

## Layout

The site utilizes a 6-column grid system for content alignment. Spacing follows a consistent multiplier based on a 4px base unit, ensuring rhythmic vertical flow between sections. The page structure follows this order: nav, hero, product-showcase, social-proof, features, manifesto, and footer. The hero composition features a centered headline and subhead with a primary CTA, supported by a large, high-fidelity product screenshot. The design is mobile-first, with navigation collapsing into a drawer on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to differentiate interactive cards from the background, employing subtle single-layer shadows across three levels. Elevation.sm (0 1px 2px) provides a light lift for small elements; elevation.md (0 4px 6px) defines card boundaries; elevation.lg (0 10px 15px) is reserved for modal or drawer overlays. These values are inferred based on the brand's clean, modern aesthetic.

## Shapes

A moderate border-radius is applied to components to balance friendliness with professional precision. The system uses a scale from 4px to 16px, with {rounded.md} (8px) and {rounded.lg} (12px) being the standard for cards and interactive containers.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {colors.primary} for the background and {typography.label-md} for text. They are designed for high-impact, imperative actions. Use the primary variant for the main conversion point and the secondary variant (transparent background with primary border) for secondary actions.

### Card
Cards utilize {rounded.md} or {rounded.lg} to maintain a soft, professional look. They are typically rendered on {colors.surface} with an {colors.outline} border. Use the elevated variant to create visual hierarchy when cards are placed over complex backgrounds.

### Input Field
Input fields feature a {rounded.sm} radius and {colors.outline} border. Upon focus, the border must transition to {colors.focus-ring} to provide clear accessibility feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Do not use {colors.secondary} for primary buttons. |
| Apply {typography.headline-lg} for hero sections only. | Avoid mixing {typography.body-md} with decorative fonts. |
| Use {colors.surface-container} for subtle background highlights. | Never use {colors.primary} on {colors.surface-container} without checking contrast. |
| Maintain {spacing.md} between card elements. | Avoid excessive use of shadows on flat UI elements. |
| Use {rounded.md} for all interactive cards. | Do not use {rounded.full} on standard content cards. |
| Ensure {colors.on-surface} is used for all body text. | Do not use {colors.error} for non-destructive actions. |
| Apply {input-field-focus} when interacting with forms. | Do not use default browser focus rings. |
| Use {typography.label-md} for button text. | Do not use {typography.display-lg} for navigation items. |

## Content Style

CTA labels are imperative and action-oriented, such as "Get Superhuman" or "Learn more." Keep labels concise to maintain the fast-paced brand tone.

Headings are benefit-driven and punchy. They focus on productivity outcomes and speed, avoiding fluff to ensure the value proposition is immediately clear.

Copy density is designed to be scannable. Use short paragraphs and frequent bulleted feature lists to break up information, ensuring the user can digest the content quickly.

## Imagery & Icons

The imagery style is a mix of high-fidelity product screenshots and abstract tonal illustrations. Product screenshots should be clear and show the interface in action, while illustrations are used to represent AI capabilities and abstract concepts. Logo lockups for social proof should remain minimal and monochrome to match the clean aesthetic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Superhuman, a minimal and bold productivity brand. Match its confident, fast-paced, and precision-focused tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{typography.headline-lg}`, `{rounded.md}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:`. Do not invent a ghost button, pill card, or any variant the spec does not list.
3. Apply the spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding, gap, and margin decisions; the base unit is 4px.
4. Follow the Elevation & Depth narrative: `{elevation.sm}` for small lifted elements, `{elevation.md}` for cards, `{elevation.lg}` for modals and drawers only. Do not layer multiple shadows.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every component generated.
- Implement hover, focus, and disabled states when the spec defines them — including `{input-field-focus}` border transitions and `{colors.focus-ring}` on interactive elements; never use default browser focus rings.
- Apply `{rounded.md}` to interactive cards and `{rounded.sm}` to input fields per the spec.
- Use `{colors.on-surface}` for all body text and `{typography.label-md}` for all button labels.
- Keep CTA copy imperative and concise, matching the Content Style section.

**Must NOT:**
- Invent colors, font weights, or radii absent from the spec.
- Use generic utility defaults when a brand token exists.
- Place `{colors.secondary}` on primary buttons or `{rounded.full}` on content cards.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter page structure (nav, hero, features, footer order) as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source exists, it overrides the spec.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; use `{colors.surface-dim}` for secondary containers and `{colors.surface-container}` for subtle highlights.
- For unspecified breakpoints, follow the mobile-first layout described in the spec with one breakpoint at 768px.