Superhuman

Difficulty:
Company
Superhuman Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryPrompt

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryPrompt

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Superhuman is the speed-obsessed email suite grown into an AI productivity suite that works everywhere. Its style leans premium: a deep purple gradient hero (#1b1938) against a white content body, Super Sans VF with non-standard weight stops (460–700), display headlines compressed to 0.96 line-height, understated warm-cream buttons (#e9e5dd) instead of loud CTAs, and lavender (#cbb7fb) as the single soft accent.

DeveloperVibrant

Prompt Template

Base Template
Design a Superhuman-inspired interface. - Deep purple gradient hero (#1b1938) contrasting against a predominantly white content body; - Super Sans VF variable font with non-standard weight stops (460, 540, 600, 700) — sits between conventional weight categories; - Ultra-tight display line-height (0.96) creating compressed, powerful headlines; - Warm Cream (#e9e5dd) buttons instead of bright/saturated CTAs — understated luxury; - Lavender Purple (#cbb7fb) as the singular accent color — a soft, approachable purple. Colors: #1b1938, #cbb7fb, #292827, #714cb6 with #1b1938 accent.

Variant Prompts

📱 Mobile
Design a mobile app with Superhuman aesthetics. Use Superhuman color identity with #1b1938 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Superhuman style. Use Superhuman color identity with #1b1938 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Superhuman design language. Use Superhuman color identity with #1b1938 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Superhuman visual identity. Use Superhuman color identity with #1b1938 accents. Compelling, conversion-focused.

Usage Examples

Superhuman App

Web
Build a web app with Superhuman design language and #1b1938 color system.

Superhuman Dashboard

Dashboard
Create a dashboard using Superhuman style with data visualization and modern typography.

✅ Best For

  • Developer
  • Email and efficiency power tools
  • Keyboard-first professional UIs

❌ Avoid For

  • Touch-first casual apps
  • Playful colorful consumer products

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download