---
title: "HEY design system"
variant: extended
source: https://www.hey.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/hey-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# HEY · Design System

> Email reinvented with bold color and a human touch

**Theme:** light · **Industry:** productivity · **Source:** https://www.hey.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

HEY pairs oversized, gradient headlines with a warm paper-toned canvas to make an email-and-calendar product feel expressive and approachable. Product previews, testimonials, and a founder letter add proof and personality within a spacious, rounded layout.

## North star

Pair oversized, expressive gradient headlines with calm paper-toned space and clear product proof.

## Overview

The page balances a warm, near-white paper canvas with crisp white panels and occasional stone-colored section bands. Ink-colored copy anchors the layout, while Blurple appears in links, prominent calls to action, and gradient headline treatments. Mint and sky blue act as bright accents; coral adds warmth to gradients and select promotional details. Heavy display type gives the hero and feature headings a loud, friendly voice, contrasted by Moniker’s readable, slightly tight body copy. The main content sits in centered, constrained blocks, with generous vertical breathing room between product explanations. Rounded navigation, buttons, testimonial cards, and a floating product preview soften the otherwise structured page. The product interface is shown as imagery rather than competing with the text. A saturated Blurple calendar band creates a clear late-page shift before the bright, link-rich footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Electric Blurple | `#5522fa` | `--color-electric-blurple` | brand | Signature link and CTA color; also anchors the saturated calendar promotion band and headline gradients. |
| Deep Ink | `#231c33` | `--color-deep-ink` | neutral | Primary text and navigation color, providing high-contrast structure on light surfaces. |
| Fresh Mint | `#b3f4e0` | `--color-fresh-mint` | accent | Bright CTA fill paired with Blurple text; a small, high-visibility accent. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Navigation, hero panel, founder letter, and footer surfaces against the warmer canvas. |
| Warm Paper | `#f9f7f5` | `--color-warm-paper` | surface | Main page canvas and background for the long run of centered feature sections. |
| Soft Coral | `#ec8580` | `--color-soft-coral` | accent | Warm endpoint in vivid headline and CTA gradients, especially the calendar promotion. |
| Sky Blue | `#b6dbff` | `--color-sky-blue` | accent | Gradient accent in display treatments and testimonial-card imagery; not a dominant page background. |
| Cloud Blue | `#eef8ff` | `--color-cloud-blue` | semantic | Pale gradient stop within blue card treatments, primarily visible in testimonial and product-related visuals. |
| Soft Stone | `#edeae6` | `--color-soft-stone` | surface | Muted section band and quiet secondary button fill, most clearly used behind the calendar introduction. |

### Semantic aliases

`--color-canvas` → `#f9f7f5` (Warm Paper) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#edeae6` (Soft Stone) · `--color-text` → `#231c33` (Deep Ink) · `--color-accent` → `#b3f4e0` (Fresh Mint) · `--color-accent-2` → `#5522fa` (Electric Blurple) · `--color-accent-3` → `#b6dbff` (Sky Blue) · `--color-on-accent` → `#5522fa` (Electric Blurple)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#231c33` | `#f9f7f5` | 15.29:1 | AAA |
| `#231c33` | `#ffffff` | 16.34:1 | AAA |
| `#231c33` | `#edeae6` | 13.62:1 | AAA |
| `#b3f4e0` | `#f9f7f5` | 1.16:1 | fail |
| `#b3f4e0` | `#ffffff` | 1.24:1 | fail |
| `#b3f4e0` | `#edeae6` | 1.03:1 | fail |

### Gradients

- `linear-gradient(135deg, rgb(182, 219, 255) 0px, rgb(238, 248, 255) 100%)`
- `linear-gradient(135deg, rgb(85, 34, 250) 0px, rgb(236, 133, 128) 100%)`
- `linear-gradient(135deg, rgb(95, 221, 197) 0px, rgb(182, 219, 255) 100%)`
- `linear-gradient(135deg, rgb(236, 133, 128) 0px, rgb(249, 92, 92) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Moniker | `--font-body` | webfont | 400, 500, 700 | Body copy, navigation, links, buttons, and supporting text | DM Sans |
| Really Sans Large | `--font-display` | webfont | 850, 900 | Display headlines and major section headings | Baloo 2 |

- **Moniker:** Use a friendly sans with restrained, slightly tight tracking; weights span regular to bold, with title case and sentence case.
- **Really Sans Large:** Very heavy rounded display face; use for bold, compact headline lines, not long-form copy.

### Type scale — Perfect Fourth (ratio ≈ 1.365, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 83px | 900 | 1.1 | 0 | — | Really Sans Large | Oversized hero headline and standout promotional display copy. |
| h1 | 48px | 850 | 1.1 | 0 | — | Really Sans Large | Primary hero heading. |
| h2 | 40px | 850 | 1.2 | 0 | — | Really Sans Large | Major section and campaign headings. |
| h3 | 27px | 400 | 1.4 | -0.012em | — | Moniker | Feature titles and prominent supporting headings. |
| h4 | 24px | 400 | 1.45 | -0.012em | — | Moniker | Smaller secondary headings and content-card titles. |
| body | 17.5px | 400 | 1.45 | -0.012em | — | Moniker | Feature descriptions, testimonial copy, and explanatory paragraphs. |
| caption | 14.5px | 500 | 1 | -0.012em | — | Moniker | Small labels, notes, and supporting metadata. |
| button | 21px | 500 | 1 | -0.012em | — | Moniker | Primary and secondary CTA labels. |
| nav | 21px | 500 | 1 | -0.012em | — | Moniker | Top navigation labels and footer navigation links. |
| link | 17.5px | 500 | 1.45 | -0.012em | — | Moniker | Inline editorial, product, and supporting calls to action. |

OpenType features in use: `"case", "liga"`, `"case", "liga", "ss04"`, `"c2sc", "smcp"`.

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 3, 4, 7, 10, 11, 12, 16, 19, 21, 32, 34, 40, 45, 64 px.
- Section rhythm 45px · element gap 45px · card padding 45px · max content width 768px.

The page uses centered content blocks with a measured page max width of 768px, while major panels and promotional bands read as broader horizontal surfaces. Hero content is center aligned, combining three small testimonial cues, a large headline, supporting copy, CTA, and a product preview. The long feature sequence keeps a single-column editorial rhythm with generous measured section and element gaps. Testimonials form a multi-column card cluster; the footer is denser and more link-heavy. Alternating paper, white, and stone surfaces add pacing without heavy dividers.

## Shape & elevation

- Radius: button `9999px` · card `26px` · media `50%` · nav `9999px` · link `9999px` · xs `26px` · pill `9999px`
- Shadow `xl` (card): `rgba(35, 28, 51, 0.1) 0px 25.6px 12.8px -25.6px, rgba(35, 28, 51, 0.15) 0px 38.4px 25.6px -38.4px, rgba(35, 28, 51, 0.2) 0px 51.2px 38.4px -51.2px`
- Shadow `xl-2` (button): `rgba(35, 28, 51, 0.1) 0px 11.52px 11.52px -11.52px, rgba(35, 28, 51, 0.2) 0px 17.28px 17.28px -17.28px, rgba(35, 28, 51, 0.3) 0px 23.04px 23.04px -23.04px`
- Shadow `xl-3` (other, card): `rgba(35, 28, 51, 0.02) 0px 0px 0px 1px, rgba(35, 28, 51, 0.2) 0px 6.4px 51.2px -25.6px, rgba(35, 28, 51, 0.3) 0px 12.8px 76.8px -32px, rgba(35, 28, 51, 0.4) 0px 12.8px 25.6px -38.4px, rgba(35, 28, 51,`
- Shadow `xl-4` (nav): `rgba(35, 28, 51, 0.02) 0px 0px 0px 1px, rgba(35, 28, 51, 0.2) 0px 6.4px 38.4px -12.8px, rgba(35, 28, 51, 0.3) 0px 12.8px 64px -25.6px, rgba(35, 28, 51, 0.4) 0px 12.8px 12.8px -25.6px, rgba(35, 28, 51,`
- Shadow `xl-5` (other): `rgba(35, 28, 51, 0.2) 0px 6.4px 12.8px -6.4px, rgba(35, 28, 51, 0.4) 0px 12.8px 25.6px -12.8px, rgba(35, 28, 51, 0.6) 0px 19.2px 38.4px -19.2px`
- Shadow `xl-6` (card): `rgba(35, 28, 51, 0.02) 0px 0px 0px 1px, rgba(35, 28, 51, 0.1) 0px 4.8px 38.4px -19.2px, rgba(35, 28, 51, 0.2) 0px 9.6px 57.6px -28.8px, rgba(35, 28, 51, 0.3) 0px 9.6px 19.2px -28.8px, rgba(35, 28, 51,`
- Motion: standard transition `0.15s ease` on interactive elements.

Layering is a defining detail: the floating pill navigation, hero panel, testimonial cards, and founder letter lift gently from the canvas with soft, deep ink-tinted shadows. Cards use generous rounded corners, while the founder letter is comparatively crisp. Borders are not a dominant organizing device; surface contrast and spacing separate most content.

## Imagery

The hero centers a large email-interface preview beneath the headline, with the interface softened by a vivid purple-to-coral overlay. User testimonials appear as compact, pale blue cards with small avatar portraits; these illustrations and product mockups provide color without changing the underlying palette. The founder letter uses a restrained document-like presentation with a signature and portrait. Imagery supports product proof and human credibility rather than filling every section.

## Components

### Floating pill navigation

White rounded navigation bar with compact links, a muted sign-in pill, and a vivid trial CTA; it floats above the page with a soft shadow.

### Hero headline and CTA

Center-aligned oversized heavy headline uses a Blurple-to-coral gradient above dark supporting copy and a pill-shaped trial action.

### Product preview

Large email-interface visual sits beneath the hero CTA, framed as a rounded product panel with an overlaid play control.

### Testimonial cards

Multi-column cluster of short quotes on rounded pale blue cards, with small author portraits and dark, readable copy.

### Centered feature copy

Single-column feature sections use large gradient headings, concise centered explanatory text, and substantial vertical separation.

### Founder letter

A white, document-like letter panel presents long-form copy, a signature, and founder identification with subtle lift from the paper canvas.

### Calendar campaign band

Full-width Blurple section contrasts with the paper canvas, featuring mint-to-blue display text, white support copy, and a coral CTA.

### Link-rich footer

Bright white closing area combines a newsletter signup, many rounded pastel navigation chips, help link, and compact credits.

### Measured component styles

- **Primary button** (“HEY CLI”): background #b3f4e0 · text #5522fa · radius 43.68px · padding 12.5px 18.7px 10.4px 18.7px · 500 20.8px Moniker
- **Secondary button** (“Ryan Hoover”): background #ffffff · text #231c33 · radius 20.88px · padding 4.3px 15.8px 4.3px 4.3px · 500 14.4px Moniker · shadow rgba(35, 28, 51, 0.1) 0px 11.52px 11.52px -11.52px, rgba(35, 28, 51, 0.2) 0px 17
- **Link** (“@jasonfried”): transparent background · text #5522fa · radius 0px · padding 0px · 500 17.6px Moniker
- **Input**: transparent background · text #231c33 · radius 0px · padding 0px 0px 0px 21.6px · 400 24px Moniker
- **Card** (“Just got a demo of HEY with @jasonfried.”): transparent background · text #231c33 · radius 25.6px · padding 44.8px · 400 32px Moniker · shadow rgba(35, 28, 51, 0.1) 0px 25.6px 12.8px -25.6px, rgba(35, 28, 51, 0.15) 0px 38.4
- **Navigation item** (“Features AI Agents & CLI New! Calendar F”): transparent background · text #231c33 · radius 0px · padding 0px · 400 32px Moniker

## Do

- Use Warm Paper as the dominant page canvas.
- Reserve Deep Ink for readable text and navigation.
- Use Electric Blurple for links and high-priority actions.
- Set major headlines in a heavy rounded display face.
- Keep feature copy centered and short.
- Separate content with generous vertical breathing room.
- Use rounded cards and soft shadows for product proof.

## Don't

- Do not make every section a saturated color band.
- Do not use gradients as a substitute for text hierarchy.
- Do not crowd the hero with multiple competing actions.
- Do not use pale accent colors for essential body text.
- Do not flatten the floating navigation and cards into the canvas.
- Do not turn feature explanations into dense multi-column prose.

## Agent prompt

Build a new HEY-style productivity page with a Warm Paper (#f9f7f5) canvas, Deep Ink (#231c33) copy, and Clean White (#ffffff) panels. Use Electric Blurple (#5522fa) for links and primary actions; reserve Fresh Mint (#b3f4e0), Sky Blue (#b6dbff), and Soft Coral (#ec8580) for selective accents and gradients. Make the hero centered, with a heavy rounded display headline, concise supporting text, one clear pill CTA, and a product preview. Use a readable humanist sans for body and navigation. Keep content blocks constrained and spacious, with centered feature sections, rounded testimonial cards, and subtle ink-tinted shadows. Include one vivid promotional band and a bright footer with compact pill-like links. Preserve generous whitespace and strong contrast.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero inside a broad white panel, with a three-part testimonial cue, headline, CTA, and product preview. | Primary trial CTA, Product demo play control, Social proof above headline | Oversized gradient headline, Rounded white panel, Floating pill navigation |
| 2 | stats | Short centered heading and supporting sentence on the paper canvas. | Social-proof transition | Centered heading, Minimal text block |
| 3 | testimonials | Multi-column quote-card cluster within a centered content area. | Peer validation, Inline quote links | Pale blue cards, Small avatar portraits, Soft card shadows |
| 4 | feature-split | Single centered heading and short explanation with ample vertical whitespace. | Explain inbox workflow | Gradient feature heading, Centered copy |
| 5 | feature-split | Centered feature heading followed by a compact explanatory paragraph. | Explain inbox organization | Gradient heading, Single-column text |
| 6 | feature-split | Centered title and description on the main light canvas. | Explain transaction sorting | Gradient heading, Open whitespace |
| 7 | feature-split | Centered feature copy with a large gap before the following section band. | Explain newsletter browsing | Gradient heading, Centered paragraph |
| 8 | feature-split | Centered text on a muted stone-colored horizontal band. | Introduce calendar product | Stone section band, Centered link and copy |
| 9 | feature-split | Short centered heading and paragraph on the warm paper canvas. | Summarize benefits | Centered heading, Editorial summary |
| 10 | other | Long-form letter presented in a centered white document panel. | Founder storytelling, Brand rationale | Document-like white panel, Signature and portrait, Soft shadow |
| 11 | cta | Full-width vivid campaign band with centered headline, supporting text, and CTA. | Secondary product CTA | Electric Blurple background, Mint-to-blue display text, Coral CTA |
| 12 | footer | Bright footer with centered newsletter signup, dense rows of pill links, and compact credits. | Newsletter signup, Help destination, Site navigation | White background, Pastel navigation chips, Compact footer credits |

## Source CSS custom properties (selected)

```css
--rgb-background: 255, 255, 255;
--rgb-shadow: 35, 28, 51;
--rgb-surface: 255, 255, 255;
--color-black: rgb(35, 28, 51);
--color-blurple: rgb(85, 34, 250);
--color-canary: rgb(255, 245, 202);
--color-canary-light: rgb(255, 250, 229);
--color-cobalt: rgb(0, 116, 228);
--color-coral: rgb(249, 92, 92);
--color-coral-dark: rgb(236, 67, 67);
--color-green: rgb(41, 152, 80);
--color-green-light: rgb(22, 186, 91);
--color-grey: rgb(115, 108, 131);
--color-lavender: rgb(213, 210, 255);
--color-lavender-light: rgb(234, 232, 254);
--color-mint: rgb(179, 244, 224);
--color-mint-light: rgb(216, 249, 240);
--color-orange: rgb(248, 121, 23);
--color-paper: rgb(249, 247, 245);
--color-peach: rgb(255, 229, 218);
--color-peach-light: rgb(254, 242, 237);
--color-pink: rgb(207, 111, 182);
--color-pink-light: rgb(239, 218, 245);
--color-purple: rgb(119, 0, 162);
--color-salmon: rgb(236, 133, 128);
--color-sky: rgb(182, 219, 255);
--color-sky-tint: rgb(218, 237, 254);
--color-sky-light: rgb(238, 248, 255);
--color-stone: rgb(237, 234, 230);
--color-stone-light: rgb(247, 244, 240);
--color-teal: rgb(95, 221, 197);
--color-white: rgb(255, 255, 255);
--color-yellow: rgb(245, 214, 82);
--color-hey-for-domains: rgb(85, 34, 250);
--color-hey-for-you: rgb(95, 221, 197);
--color-background: rgb(255, 255, 255);
--color-ink: rgb(35, 28, 51);
--color-link: rgb(85, 34, 250);
--color-surface: rgb(255, 255, 255);
--background-blurple-cobalt: linear-gradient(
    135deg,
    rgb(85, 34, 250) 0,
    rgb(0, 116, 228) 100%
  );
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/hey-com