
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.
font-family: var(--font-family-moniker) โ selector bodyfont-family: var(--font-family-martian-mono) โ selector code,
prefont-family: var(--font-family-really-sans) โ selector .footer**header h4font-size: var(--font-size) โ selector bodyfont-size: var(--font-size-large) โ selector .footer**header h4font-size: var(--font-size-small) โ selector .footer**header pfont-size: var(--font-size-x-small) โ selector .footer**newsletter div pfont-size: var(--font-size-xx-small) โ selector .footer\_\_legal pfont-weight: 400 โ selector bodyfont-weight: 500 โ selector afont-weight: 300 โ selector code,
prefont-weight: 900 โ selector .footer**header h4line-height: 1 โ selector bodyline-height: var(--line-height) โ selector bodyline-height: 1.1 โ selector .footer**header h4line-height: 1.6em โ selector .footer\_\_legal pline-height: 1em โ selector .notification aletter-spacing: -0.0125em โ selector bodyletter-spacing: normal โ selector code,
preletter-spacing: var(--letter-spacing) โ selector .footer**legal pletter-spacing: -0.0175em โ selector .notification acolor: var(--color-ink) โ selector bodycolor: var(--color-link) โ selector acolor: var(--color-blurple) โ selector .footer**links ul li acolor: var(--color-white) โ selector .footer\_\_links ul li a:focus,
.footer**links ul li a:hovercolor: #1d2d35 โ selector .nav**logo a svgborder-radius: 0.2em โ selector .footer**newsletter div pborder-radius: 2.1em โ selector .footer**links ul li aborder-radius: 1.2625em โ selector .nav**containerbox-shadow: var(--box-shadow-nav) โ selector .nav**containerbox-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 amax-width: 100% โ selector img,
source,
videopadding: 0.375em 0.75em 0.3em 0.75em โ selector .footer**newsletter div ppadding: 0.6em 0.9em 0.5em 0.9em โ selector .footer**links ul li apadding: 0.4em 0.6em 0.425em 0.6em โ selector .notification agap: 0.3em โ selector .nav\_\_buttonstransition: color var(--transition) โ selector atransition: background var(--transition),
color var(--transition) โ selector .footer\_\_links ul li atransition: color var(--transition),
text-decoration-color var(--transition),
text-decoration-thickness var(--transition) โ selector .nav\_\_items li a(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.
| Property | Declared value | Selector |
|---|---|---|
| font-family | var(--font-family-moniker) | body |
| font-family | var(--font-family-martian-mono) | code,
pre |
| font-family | var(--font-family-really-sans) | .footer**header h4 |
| font-size | var(--font-size) | body |
| font-size | var(--font-size-large) | .footer**header h4 |
| font-size | var(--font-size-small) | .footer**header p |
| font-size | var(--font-size-x-small) | .footer**newsletter div p |
| font-size | var(--font-size-xx-small) | .footer\_\_legal p |
| font-weight | 400 | body |
| font-weight | 500 | a |
| font-weight | 300 | code,
pre |
| font-weight | 900 | .footer**header h4 |
| line-height | 1 | body |
| line-height | var(--line-height) | body |
| line-height | 1.1 | .footer**header h4 |
| line-height | 1.6em | .footer\_\_legal p |
| line-height | 1em | .notification a |
| letter-spacing | -0.0125em | body |
| letter-spacing | normal | code,
pre |
| letter-spacing | var(--letter-spacing) | .footer**legal p |
| letter-spacing | -0.0175em | .notification a |
| color | var(--color-ink) | body |
| color | var(--color-link) | a |
| color | var(--color-blurple) | .footer**links ul li a |
| color | var(--color-white) | .footer\_\_links ul li a:focus,
.footer**links ul li a:hover |
| color | #1d2d35 | .nav**logo a svg |
| border-radius | 0.2em | .footer**newsletter div p |
| border-radius | 2.1em | .footer**links ul li a |
| border-radius | 1.2625em | .nav**container |
| box-shadow | var(--box-shadow-nav) | .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) | .signup div a |
| max-width | 100% | img,
source,
video |
| padding | 0.375em 0.75em 0.3em 0.75em | .footer**newsletter div p |
| padding | 0.6em 0.9em 0.5em 0.9em | .footer**links ul li a |
| padding | 0.4em 0.6em 0.425em 0.6em | .notification a |
| gap | 0.3em | .nav\_\_buttons |
| transition | color var(--transition) | a |
| transition | background var(--transition),
color var(--transition) | .footer\_\_links ul li a |
| transition | color 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.