Hey

Hey

Email at its best, new from Basecamp.
Visit
Hey

Marketing Pages

0
No items found.
No items found.

๐Ÿ”’ Get SaaSFrame Pro to see 3 more marketing pages from Hey

Product Interfaces

17
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available

๐Ÿ”’ Get SaaSFrame Pro to see 14 more product intefaces from Hey

No items found.
No items found.

Visual identity

Hey โ€” design reference

Source: https://www.hey.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Typography

  • font-family: var(--font-family-moniker) โ€” selector body
  • font-family: var(--font-family-martian-mono) โ€” selector code, pre
  • font-family: var(--font-family-really-sans) โ€” selector .footer**header h4
  • font-size: var(--font-size) โ€” selector body
  • font-size: var(--font-size-large) โ€” selector .footer**header h4
  • font-size: var(--font-size-small) โ€” selector .footer**header p
  • font-size: var(--font-size-x-small) โ€” selector .footer**newsletter div p
  • font-size: var(--font-size-xx-small) โ€” selector .footer\_\_legal p
  • font-weight: 400 โ€” selector body
  • font-weight: 500 โ€” selector a
  • font-weight: 300 โ€” selector code, pre
  • font-weight: 900 โ€” selector .footer**header h4
  • line-height: 1 โ€” selector body
  • line-height: var(--line-height) โ€” selector body
  • line-height: 1.1 โ€” selector .footer**header h4
  • line-height: 1.6em โ€” selector .footer\_\_legal p
  • line-height: 1em โ€” selector .notification a
  • letter-spacing: -0.0125em โ€” selector body
  • letter-spacing: normal โ€” selector code, pre
  • letter-spacing: var(--letter-spacing) โ€” selector .footer**legal p
  • letter-spacing: -0.0175em โ€” selector .notification a

Colors and surfaces

  • color: var(--color-ink) โ€” selector body
  • color: var(--color-link) โ€” selector a
  • color: var(--color-blurple) โ€” selector .footer**links ul li a
  • color: var(--color-white) โ€” selector .footer\_\_links ul li a:focus, .footer**links ul li a:hover
  • color: #1d2d35 โ€” selector .nav**logo a svg

Components and layout

  • border-radius: 0.2em โ€” selector .footer**newsletter div p
  • border-radius: 2.1em โ€” selector .footer**links ul li a
  • border-radius: 1.2625em โ€” selector .nav**container
  • box-shadow: var(--box-shadow-nav) โ€” selector .nav**container
  • box-shadow: 0 0.1em 1.2em rgba(var(--rgb-background), 0.1), 0 0.2em 1.6em rgba(var(--rgb-background), 0.1), 0 0.3em 2.0em rgba(var(--rgb-background), 0.1) โ€” selector .signup div a
  • max-width: 100% โ€” selector img, source, video
  • padding: 0.375em 0.75em 0.3em 0.75em โ€” selector .footer**newsletter div p
  • padding: 0.6em 0.9em 0.5em 0.9em โ€” selector .footer**links ul li a
  • padding: 0.4em 0.6em 0.425em 0.6em โ€” selector .notification a
  • gap: 0.3em โ€” selector .nav\_\_buttons
  • transition: color var(--transition) โ€” selector a
  • transition: background var(--transition), color var(--transition) โ€” selector .footer\_\_links ul li a
  • transition: color var(--transition), text-decoration-color var(--transition), text-decoration-thickness var(--transition) โ€” selector .nav\_\_items li a

Responsive rules

(min-width: 64em) 
(prefers-color-scheme: dark) 
(hover: hover) 
(hover: hover) and (prefers-color-scheme: dark) 

Source: https://www.hey.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.

https://www.hey.com/assets/css/root.css?v=1.1.8 โ€” :root

--rgb-black: 35, 28, 51;
--rgb-blurple: 85, 34, 250;
--rgb-canary: 255, 245, 202;
--rgb-canary-light: 255, 250, 229;
--rgb-cobalt: 0, 116, 228;
--rgb-coral: 249, 92, 92;
--rgb-coral-dark: 236, 67, 67;
--rgb-grey: 115, 108, 131;
--rgb-green: 41, 152, 80;
--rgb-green-light: 22, 186, 91;
--rgb-lavender: 213, 210, 255;
--rgb-lavender-light: 234, 232, 254;
--rgb-mint: 179, 244, 224;
--rgb-mint-light: 216, 249, 240;
--rgb-orange: 248, 121, 23;
--rgb-paper: 249, 247, 245;
--rgb-peach: 255, 229, 218;
--rgb-peach-light: 254, 242, 237;
--rgb-pink: 207, 111, 182;
--rgb-pink-light: 239, 218, 245;
--rgb-purple: 119, 0, 162;
--rgb-salmon: 236, 133, 128;
--rgb-sky: 182, 219, 255;
--rgb-sky-tint: 218, 237, 254;
--rgb-sky-light: 238, 248, 255;
--rgb-stone: 237, 234, 230;
--rgb-stone-light: 247, 244, 240;
--rgb-teal: 95, 221, 197;
--rgb-white: 255, 255, 255;
--rgb-yellow: 245, 214, 82;
--rgb-background: var(--rgb-white);
--rgb-ink: var(--rgb-black);
--rgb-link: var(--rgb-blurple);
--rgb-shadow: var(--rgb-black);
--rgb-surface: var(--rgb-white);
--color-black: rgb(var(--rgb-black));
--color-blurple: rgb(var(--rgb-blurple));
--color-canary: rgb(var(--rgb-canary));
--color-canary-light: rgb(var(--rgb-canary-light));
--color-cobalt: rgb(var(--rgb-cobalt));
--color-coral: rgb(var(--rgb-coral));
--color-coral-dark: rgb(var(--rgb-coral-dark));
--color-green: rgb(var(--rgb-green));
--color-green-light: rgb(var(--rgb-green-light));
--color-grey: rgb(var(--rgb-grey));
--color-lavender: rgb(var(--rgb-lavender));
--color-lavender-light: rgb(var(--rgb-lavender-light));
--color-mint: rgb(var(--rgb-mint));
--color-mint-light: rgb(var(--rgb-mint-light));
--color-orange: rgb(var(--rgb-orange));
--color-paper: rgb(var(--rgb-paper));
--color-peach: rgb(var(--rgb-peach));
--color-peach-light: rgb(var(--rgb-peach-light));
--color-pink: rgb(var(--rgb-pink));
--color-pink-light: rgb(var(--rgb-pink-light));
--color-purple: rgb(var(--rgb-purple));
--color-salmon: rgb(var(--rgb-salmon));
--color-sky: rgb(var(--rgb-sky));
--color-sky-tint: rgb(var(--rgb-sky-tint));
--color-sky-light: rgb(var(--rgb-sky-light));
--color-stone: rgb(var(--rgb-stone));
--color-stone-light: rgb(var(--rgb-stone-light));
--color-teal: rgb(var(--rgb-teal));
--color-white: rgb(var(--rgb-white));
--color-yellow: rgb(var(--rgb-yellow));
--color-hey-for-domains: rgb(var(--rgb-blurple));
--color-hey-for-you: rgb(var(--rgb-teal));
--color-background: rgb(var(--rgb-background));
--color-ink: rgb(var(--rgb-ink));
--color-link: rgb(var(--rgb-link));
--color-surface: rgb(var(--rgb-surface));
--background-blurple-cobalt: linear-gradient(
    135deg,
    var(--color-blurple) 0,
    var(--color-cobalt) 100%
  );
--background-blurple-salmon: linear-gradient(
    135deg,
    var(--color-blurple) 0,
    var(--color-salmon) 100%
  );
--background-canary-peach: linear-gradient(
    135deg,
    var(--color-canary) 0,
    var(--color-peach) 100%
  );
--background-coral-salmon: linear-gradient(
    135deg,
    var(--color-coral) 0,
    var(--color-salmon) 100%
  );
--background-mint-sky: linear-gradient(
    135deg,
    var(--color-mint) 0,
    var(--color-sky) 100%
  );
--background-peach-canary: linear-gradient(
    135deg,
    var(--color-peach) 0,
    var(--color-canary) 100%
  );
--background-salmon-coral: linear-gradient(
    135deg,
    var(--color-salmon) 0,
    var(--color-coral) 100%
  );
--background-teal-mint: linear-gradient(
    135deg,
    var(--color-teal) 0,
    var(--color-mint) 100%
  );
--background-teal-sky: linear-gradient(
    135deg,
    var(--color-teal) 0,
    var(--color-sky) 100%
  );
--background-text-cobalt: var(--background-blurple-cobalt);
--background-text-salmon: var(--background-blurple-salmon);
--box-shadow-border: 0 0 0 2px rgba(var(--rgb-shadow), 0.08);
--box-shadow-card: 0 0 0 1px rgba(var(--rgb-shadow), 0.02),
    0 0.2em 1.6em -0.8em rgba(var(--rgb-shadow), 0.2),
    0 0.4em 2.4em -1.0em rgba(var(--rgb-shadow), 0.3),
    0 0.4em 0.8em -1.2em rgba(var(--rgb-shadow), 0.4),
    0 0.8em 1.2em -1.6em rgba(var(--rgb-shadow), 0.5),
    0 1.2em 1.6em -2.0em rgba(var(--rgb-shadow), 0.6);
--box-shadow-nav: 0 0 0 1px rgba(var(--rgb-shadow), 0.02),
    0 0.2em 1.2em -0.4em rgba(var(--rgb-shadow), 0.2),
    0 0.4em 2.0em -0.8em rgba(var(--rgb-shadow), 0.3),
    0 0.4em 0.4em -0.8em rgba(var(--rgb-shadow), 0.4),
    0 0.8em 0.8em -1.2em rgba(var(--rgb-shadow), 0.5),
    0 1.2em 1.2em -1.6em rgba(var(--rgb-shadow), 0.6);
--box-shadow-play: 0 0.2em 0.4em -0.2em rgba(var(--rgb-shadow), 0.2),
    0 0.4em 0.8em -0.4em rgba(var(--rgb-shadow), 0.4),
    0 0.6em 1.2em -0.6em rgba(var(--rgb-shadow), 0.6);
--box-shadow-play-hover: 0 0.3em 0.4em -0.2em rgba(var(--rgb-shadow), 0.3),
    0 0.5em 0.8em -0.4em rgba(var(--rgb-shadow), 0.4),
    0 0.7em 1.2em -0.6em rgba(var(--rgb-shadow), 0.5);
--box-shadow-video: 0 0.2em 2.4em -0.4em rgba(var(--rgb-shadow), 0.2),
    0 0.4em 3.2em -0.8em rgba(var(--rgb-shadow), 0.3),
    0 0.4em 1.6em -0.8em rgba(var(--rgb-shadow), 0.4),
    0 0.8em 2.0em -1.2em rgba(var(--rgb-shadow), 0.5),
    0 1.2em 2.4em -1.6em rgba(var(--rgb-shadow), 0.6);
--font-family-martian-mono: 'Martian Mono', monospace;
--font-family-moniker: 'Moniker', sans-serif;
--font-family-really-sans: 'Really Sans Large', sans-serif;
--font-family-shantell: 'Shantell Sans', sans-serif;
--font-size: clamp(1.25rem, 2.225vw, 2rem);
--font-size-xxxx-small: 45%;
--font-size-xxx-small: 55%;
--font-size-xx-small: 65%;
--font-size-x-small: 75%;
--font-size-small: 85%;
--font-size-medium: 100%;
--font-size-large: 125%;
--font-size-x-large: 150%;
--font-size-xx-large: 200%;
--font-size-xxx-large: 220%;
--line-height: 1.4;
--space-neutral: 1.4em;
--space-small: 0.5em;
--space-medium: 1em;
--space-large: 2em;
--space-x-large: 3em;
--space-xx-large: 4em;
--space-xxx-large: 5em;
--space-xxxx-large: 6em;
--transition: 0.15s ease;
--transition-slow: 0.3s ease;
--transition-slower: 0.45s ease;
--font-size: clamp(1.375rem, 2.225vw, 2rem);
--font-size-xxx-large: 260%;
--rgb-canary: 60, 58, 61;
--rgb-canary-light: 51, 52, 59;
--rgb-grey: 165, 167, 169;
--rgb-lavender: 52, 61, 90;
--rgb-lavender-light: 43, 52, 82;
--rgb-mint: 72, 106, 97;
--rgb-mint-light: 69, 90, 96;
--rgb-paper: 27, 39, 51;
--rgb-peach: 83, 62, 25;
--rgb-peach-light: 55, 51, 38;
--rgb-pink-light: 59, 54, 71;
--rgb-sky: 40, 57, 79;
--rgb-sky-tint: 37, 53, 72;
--rgb-sky-light: 34, 48, 64;
--rgb-stone: 51, 60, 71;
--rgb-stone-light: 27, 39, 51;
--rgb-background: 23, 33, 43;
--rgb-ink: 236, 233, 230;
--rgb-link: 140, 133, 255;
--rgb-shadow: 0, 0, 0;
--rgb-surface: 32, 44, 56;
--background-teal-sky: linear-gradient(
      135deg,
      var(--color-teal) 0,
      rgb(182, 219, 255) 100%
    );
--background-text-cobalt: linear-gradient(
      135deg,
      rgb(134, 126, 255) 0,
      rgb(80, 162, 255) 100%
    );
--background-text-salmon: linear-gradient(
      135deg,
      rgb(134, 126, 255) 0,
      rgb(222, 137, 131) 100%
    );

https://www.hey.com/assets/css/bumper.css?v=1.1.8 โ€” .bumper\_\_container:before

--mask-image: linear-gradient(
    transparent,
    var(--color-black),
    transparent
  );

Source: https://www.hey.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.

PropertyDeclared valueSelector
font-familyvar(--font-family-moniker)body
font-familyvar(--font-family-martian-mono)code, pre
font-familyvar(--font-family-really-sans).footer**header h4
font-sizevar(--font-size)body
font-sizevar(--font-size-large).footer**header h4
font-sizevar(--font-size-small).footer**header p
font-sizevar(--font-size-x-small).footer**newsletter div p
font-sizevar(--font-size-xx-small).footer\_\_legal p
font-weight400body
font-weight500a
font-weight300code, pre
font-weight900.footer**header h4
line-height1body
line-heightvar(--line-height)body
line-height1.1.footer**header h4
line-height1.6em.footer\_\_legal p
line-height1em.notification a
letter-spacing-0.0125embody
letter-spacingnormalcode, pre
letter-spacingvar(--letter-spacing).footer**legal p
letter-spacing-0.0175em.notification a
colorvar(--color-ink)body
colorvar(--color-link)a
colorvar(--color-blurple).footer**links ul li a
colorvar(--color-white).footer\_\_links ul li a:focus, .footer**links ul li a:hover
color#1d2d35.nav**logo a svg
border-radius0.2em.footer**newsletter div p
border-radius2.1em.footer**links ul li a
border-radius1.2625em.nav**container
box-shadowvar(--box-shadow-nav).nav**container
box-shadow0 0.1em 1.2em rgba(var(--rgb-background), 0.1), 0 0.2em 1.6em rgba(var(--rgb-background), 0.1), 0 0.3em 2.0em rgba(var(--rgb-background), 0.1).signup div a
max-width100%img, source, video
padding0.375em 0.75em 0.3em 0.75em.footer**newsletter div p
padding0.6em 0.9em 0.5em 0.9em.footer**links ul li a
padding0.4em 0.6em 0.425em 0.6em.notification a
gap0.3em.nav\_\_buttons
transitioncolor var(--transition)a
transitionbackground var(--transition), color var(--transition).footer\_\_links ul li a
transitioncolor var(--transition), text-decoration-color var(--transition), text-decoration-thickness var(--transition).nav\_\_items li a

Source: https://www.hey.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Evidence and limitations

  • Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
  • CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
  • No inferred dark theme, semantic color roles or framework defaults have been added.
  • 142 custom-property declarations found; 120 relevant property declarations parsed.

Stylesheet sources