---
version: alpha
name: Hey
description: Light design system extracted from www.hey.com (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12).
colors:
  background: "#F9F7F5"
  surface: "#FFFFFF"
  on-surface: "#231C33"
  primary: "#5522FA"
  stone: "#EDEAE6"
  mint: "#B3F4E0"
  sky: "#B6DBFF"
  salmon: "#EC8580"
  on-primary: "#FFFFFF"
  background-dark: "#1B2733"
  on-surface-dark: "#ECE9E6"
  surface-dark: "#202C38"
  primary-dark: "#5522FA"
typography:
  display-lg:
    fontFamily: Really Sans Large
    fontSize: 83.2px
    fontWeight: 900
    lineHeight: 1.1
  headline-md:
    fontFamily: Really Sans Large
    fontSize: 40px
    fontWeight: 850
    lineHeight: 1.2
  title-md:
    fontFamily: Really Sans Large
    fontSize: 48px
    fontWeight: 850
    lineHeight: 1.1
  body-md:
    fontFamily: Moniker
    fontSize: 17.6px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.012em
  body-sm:
    fontFamily: Moniker
    fontSize: 14.4px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.012em
  label-md:
    fontFamily: Moniker
    fontSize: 17.6px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: -0.012em
rounded:
  md: 25.5px
  full: 9999px
spacing:
  xxs: 3px
  xs: 4.5px
  sm: 7px
  md: 9.5px
  lg: 10.5px
  xl: 11px
  2xl: 12.5px
  3xl: 16px
  4xl: 18.5px
  5xl: 21px
  6xl: 21.5px
  7xl: 25.5px
  8xl: 32px
  9xl: 33.5px
  container: 1376px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    padding: 16.6px
    height: 45.8px
    typography: "{typography.label-md}"
  card:
    rounded: 25.6px
    padding: 44.8px
  input:
    rounded: 0px
    padding: 0px
    height: 43.2px
---

# Hey

> Extracted from [https://www.hey.com/](https://www.hey.com/) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy.

## Overview

Hey uses a light canvas (#F9F7F5) with a palette led by #5522FA. Type is set in **Moniker**, **Really Sans Large** (display), with 17.5px body text. Layout: 1376px container, top-static+transparent navigation, 7 sections. Built with hotwire, cloudflare.

## Colors

Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter.

| Token | Hex | OKLCH | Role | Share of paint | CSS variable |
|---|---|---|---|---|---|
| `background` | `#F9F7F5` | 0.977 0.003 67.8 | bg | 39.9% | `--color-paper` |
| `surface` | `#FFFFFF` | 1 0 0 | surface | 37.3% | `--color-surface` |
| `on-surface` | `#231C33` | 0.246 0.044 297.1 | text | 9.8% | `--color-ink` |
| `primary` | `#5522FA` | 0.498 0.28 279.7 | accent | 6.8% | `--color-link` |
| `stone` | `#EDEAE6` | 0.938 0.006 75.4 | other | 3.4% | `--color-stone` |
| `mint` | `#B3F4E0` | 0.918 0.071 173.7 | other | 1.7% | `--color-mint` |
| `sky` | `#B6DBFF` | 0.877 0.064 247.8 | other | 0.67% | `--color-sky` |
| `salmon` | `#EC8580` | 0.727 0.127 23.6 | other | 0.38% | `--color-salmon` |

Sparse chromatic highlights (not accents): `#EC8580` (`--color-salmon`).

Contrast: text on background 15.29:1, accent 6.56:1.

Gradients in use: `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%)`.

The site responds to `prefers-color-scheme: dark`; the `-dark` tokens hold the dark-mode roles.

## Typography

| Family | Role | Weights | Share of text | Source |
|---|---|---|---|---|
| **Moniker** | body | 400, 500, 700 | 71.3% | webfont |
| **Really Sans Large** | display | 850, 900 | 28.4% | webfont |

Declared in `@font-face` but not used to paint text on this page: Shantell Sans, Martian Mono. Don't treat these as the page's fonts.

Scale (px): 14.5, 17.5, 20.5, 21, 24, 27, 32, 40, 48, 83. Effective ratio ≈ 1.215 (close to a minor third). Body 17.5px at line-height 1.45; display 83.2px with tracking 0em. Headings are sentence case. On a 390px viewport the body is 11px and display 44px.

## Layout

Spacing has no reliable single base unit; the most used steps are 3, 4.5, 7, 9.5, 10.5, 11, 12.5, 16, 18.5, 21, 21.5, 25.5, 32, 33.5px. Sections open with about 136px of space before their first line of text. Content sits in a 1376px container. Text density 0.139 (text area / page area).

Section order (desktop). Kinds below the review threshold are shown as *section*:

1. **faq** (81px, bg #FFFFFF)
2. **hero** — “We finally fixed your email calendar!” (2538px, bg #FFFFFF)
3. **section** — “Screen emails like you screen your calls” (2864px, bg #F9F7F5)
4. **section** — “The Feed is for your casual, whenever reads” (3033px, bg #F9F7F5)
5. **section** (1125px, bg #FFFFFF)
6. **section** — “HEY has a calendar now!” (827px, bg #5522FA)
7. **footer** (967px, bg #FFFFFF)

## Elevation & Depth

Style: layered. Most used shadows:

- `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`
- `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`
- `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, 0.5) 0px 25.6px 38.4px -51.2px, rgba(35, 28, 51, 0.6) 0px 38.4px 51.2px -64px`

## Shapes

Dominant corner radius is a full pill; radii in use: 25.5px, pill. Borders: none.

## Components

- **button-primary**: backgroundColor `#5522FA`, textColor `#FFFFFF`, rounded `9999px`, padding `16.6px 21.3px`, height `45.8px`, fontFamily `Moniker`, fontSize `20.8px`, fontWeight `500` (e.g. “Try HEY free”)
- **card**: rounded `25.6px`, padding `44.8px`, shadow `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)`
- **input**: rounded `0px`, height `43.2px`, padding `0px 0px`

## Do's and Don'ts

- Do reserve `#5522FA` for primary actions and highlights; it covers only 6.8% of the painted page.
- Do set body copy in Moniker at 17.5px / 1.45.
- Do use Really Sans Large only for display sizes, not for body text.
- Don't introduce font weights beyond 400, 500, 700, 850, 900.
- Do keep corners at pill for most controls.
- Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets.

## Provenance

Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `color.accent_strategy`, `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.base`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.