---
version: alpha
name: HEY landing-page reference
description: A bold email-and-calendar page with a floating pill navigation, chunky
  gradient headlines, a rounded white hero card, purple-to-coral calls to action and
  a long illustrated product argument.
colors:
  primary: '#5522FA'
  surface: '#F9F7F5'
  on-surface: '#231C33'
  secondary: '#FFFFFF'
  accent: '#B3F4E0'
typography:
  headline-sample:
    fontFamily: '"Really Sans Large", sans-serif'
    fontSize: 83.2px
    fontWeight: 900
    lineHeight: 91.52px
  secondary-sample:
    fontFamily: '"Really Sans Large", sans-serif'
    fontSize: 40px
    fontWeight: 850
    lineHeight: 48px
  mobile-heading-sample:
    fontFamily: '"Really Sans Large", sans-serif'
    fontSize: 44px
    fontWeight: 900
    lineHeight: 48.4px
  paragraph-sample:
    fontFamily: Moniker, sans-serif
    fontSize: 27.2px
    fontWeight: 400
    lineHeight: 38.08px
    letterSpacing: -0.34px
---

# HEY landing-page reference

## Overview

Observed at https://www.hey.com/ on 2026-09-19 at 1440px desktop and 390px mobile widths. A bold email-and-calendar page with a floating pill navigation, chunky gradient headlines, a rounded white hero card, purple-to-coral calls to action and a long illustrated product argument. This is an independent visual reference, not an official brand specification.

## Colors

Tokens are measured CSS colors. The visible headline and hero action also use a purple-to-coral gradient; the exact gradient stops were not sampled. The H1 parent reports dark text while the painted lettering is gradient-filled.

## Typography

The first measured headline sample uses "Really Sans Large", sans-serif at 83.2px, weight 900, line height 91.52px and tracking normal. The YAML records this sample, a secondary heading, a mobile heading and a substantial paragraph where available. These are observed elements, not an invented universal scale. Font-family declarations are measured; exact glyph rendering depends on font availability and licensed assets.

## Layout

Float a rounded white navigation bar above a large white hero card on an off-white canvas. Put star-rated short quotes above a huge gradient headline, a heavy black subheading, pill trial action and tinted video preview. Continue with a testimonial grid, sequential email-feature explanations and screenshots, calendar demonstration, an editorial letter, a purple closing banner and compact footer.

Navigation simplifies to logo and MENU. The hero is an inset rounded card with approximately 40px text margins from the viewport edge. The heading becomes 44px/48.4px and the subheading 25px/30px, forming a dense centered vertical stack. The video preview remains below the trial action. No horizontal document overflow was detected at either inspected width. Intermediate breakpoints and full mobile scroll behavior were not visually reviewed. Section spacing and component arrangements are visual observations rather than an exhaustive measured spacing scale.

## Elevation & Depth

Soft broad shadows lift the navigation pill, hero card and screenshot windows. Large rounded white surfaces stand above the warm neutral background. Exact shadow values were not measured.

## Shapes

Use pill actions and navigation, generous card corner rounding, small stars and annotation-like screenshot details. Gradient typography is the key decorative treatment. Radius descriptions are visual estimates.

## Components

Preserve the strong headline/subheading weight contrast with lighter supporting text. Do not apply the gradient to all paragraphs or invent interactions from the static video preview. The desktop overview supplies the section ordering; the mobile evidence supplies only the inspected opening composition. Video previews and animation frames are static captured states, not a specification for playback.

## Do's and Don'ts

- Do preserve the reference-specific hierarchy, imagery and responsive ordering described above.
- Do maintain legibility when adapting the palette or replacing fonts.
- Don't infer hover, focus, open-menu or form-validation states: those interactions were not exercised.
- Don't treat a single capture as a complete animation or carousel specification.