W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
HEY
HEY is an opinionated email-and-calendar product authored by Basecamp / 37signals — the brand voice is anti-trend, utility-first, and deliberately confrontational about email conventions ("Imbox," "The Feed," "Paper Trail," "Screener" as reframings of inbox conventions). The visual identity matches: pure-white canvas, near-black body type, a single bright Yellow (#FFFF00) used as a screaming highlight, and a Bootstrap-era action blue (#0088CC). Typography is the system stack — Lucida Grande, Helvetica, Arial — never a proprietary face. HEY's design is a statement against design-trend conformity.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/hey/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/hey/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
HEY
HEY is an opinionated email-and-calendar product authored by Basecamp / 37signals — the brand voice is anti-trend, utility-first, and deliberately confrontational about email conventions ("Imbox," "The Feed," "Paper Trail," "Screener" as reframings of inbox conventions). The visual identity matches: pure-white canvas, near-black body type, a single bright Yellow (#FFFF00) used as a screaming highlight, and a Bootstrap-era action blue (#0088CC). Typography is the system stack — Lucida Grande, Helvetica, Arial — never a proprietary face. HEY's design is a statement against design-trend conformity.
Tags: hey, basecamp, thirty-seven-signals, email, brand, yellow, utility, opinionated
Atoms
Palette
HEY · [email protected] · Proprietary — All Rights Reserved
HEY's brand palette, captured from the live marketing site (hey.com) where the design system is deliberately utilitarian: pure white page canvas (#FFFFFF), near-black body text (#222222), a bright Bootstrap-era link blue (#0088CC) for action affordance, and HEY's famous bright Yellow (#FFFF00) used as a deliberately loud highlight throughout the product. HEY is authored by Basecamp / 37signals — the design language inherits their opinionated, anti-trend, utility-first stance.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Helvetica Neue ([email protected]) |
Proprietary — Linotype/Monotype; bundled with Apple OS | sans-serif |
body |
Helvetica Neue ([email protected]) |
Proprietary — Linotype/Monotype; bundled with Apple OS | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
hey-yellow |
HEY Yellow | #FFFF00 |
hey-blue |
HEY Blue | #0088CC |
hey-blue-hover |
HEY Blue Hover | #1A8AD5 |
hey-blue-active |
HEY Blue Active | #176BAD |
hey-white |
HEY White | #FFFFFF |
hey-near-white |
HEY Near White | #FCFCFC |
hey-grey-100 |
HEY Grey 100 | #F5F5F5 |
hey-grey-300 |
HEY Grey 300 | #DDDDDD |
hey-grey-500 |
HEY Grey 500 | #888888 |
hey-grey-700 |
HEY Grey 700 | #555555 |
hey-text |
HEY Text | #333333 |
hey-heading |
HEY Heading | #222222 |
hey-near-black |
HEY Near Black | #1E1E1E |
hey-success |
HEY Success | #3C763D |
hey-success-bg |
HEY Success Background | #DFF0D8 |
hey-error |
HEY Error | #A94442 |
hey-error-bg |
HEY Error Background | #F2DEDE |
hey-warning |
HEY Warning | #8A6D3B |
hey-warning-bg |
HEY Warning Background | #FCF8E3 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
hey-white |
#FFFFFF |
surface |
hey-grey-100 |
#F5F5F5 |
surface-elevated |
hey-near-white |
#FCFCFC |
text-primary |
hey-text |
#333333 |
text-secondary |
hey-grey-700 |
#555555 |
text-tertiary |
hey-grey-500 |
#888888 |
primary |
hey-blue |
#0088CC |
primary-hover |
hey-blue-hover |
#1A8AD5 |
accent |
hey-yellow |
#FFFF00 |
accent-hover |
hey-yellow |
#FFFF00 |
warning |
hey-warning |
#8A6D3B |
warning-hover |
hey-warning |
#8A6D3B |
error |
hey-error |
#A94442 |
success |
hey-success |
#3C763D |
border |
hey-grey-300 |
#DDDDDD |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
hey-near-black |
#1E1E1E |
surface |
hey-grey-700 |
#555555 |
surface-elevated |
hey-grey-500 |
#888888 |
text-primary |
hey-white |
#FFFFFF |
text-secondary |
hey-grey-300 |
#DDDDDD |
text-tertiary |
hey-grey-500 |
#888888 |
primary |
hey-blue-hover |
#1A8AD5 |
primary-hover |
hey-blue |
#0088CC |
accent |
hey-yellow |
#FFFF00 |
accent-hover |
hey-yellow |
#FFFF00 |
warning |
hey-warning |
#8A6D3B |
warning-hover |
hey-warning |
#8A6D3B |
error |
hey-error |
#A94442 |
success |
hey-success |
#3C763D |
border |
hey-grey-700 |
#555555 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
hey-white |
#FFFFFF |
on-identity |
hey-heading |
#222222 |
primary |
hey-blue |
#0088CC |
primary-hover |
hey-blue-hover |
#1A8AD5 |
accent |
hey-yellow |
#FFFF00 |
accent-hover |
hey-yellow |
#FFFF00 |
mark |
hey-heading |
#222222 |
highlight |
hey-yellow |
#FFFF00 |
success |
hey-success |
#3C763D |
warning |
hey-warning |
#8A6D3B |
error |
hey-error |
#A94442 |
background |
hey-white |
#FFFFFF |
surface |
hey-grey-100 |
#F5F5F5 |
text-primary |
hey-text |
#333333 |
text-secondary |
hey-grey-700 |
#555555 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
HEY Text (#333333) on HEY White clears AAA at ~12.6:1. HEY's product is reading-dense by design (long email threads, paper-trail receipts); the AAA contrast target reflects the product's deliberate emphasis on extended-reading comfort.
colorChoice → roles.colors.accent
- allowed: hey-yellow
- forbidden: hey-blue, hey-blue-hover, hey-success, hey-warning
HEY Yellow (#FFFF00) is THE brand accent — the screaming highlight that defines the product's visual fingerprint. Substituting any other hue erases the brand's most distinguishing visual choice. The Yellow is used aggressively as a text-highlight / attention-redirect throughout HEY.
forbiddenTreatment → logo
- treatments: stretched, rotated, drop-shadow, gradient-fill, on-busy-photo, decorative-typography
HEY's wordmark is rendered as plain, system-font-flavored type — no gradient fills, no decorative treatments, no drop-shadows. The brand's whole point is anti-decoration; a treated HEY mark contradicts the brand's stated values.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
HEY Blue (#0088CC) on HEY White clears AA at ~5.3:1 — the product uses #0088CC for both link affordance and primary button fills; staying above AA is non-negotiable on the reading-dense product surface.
contextRestriction → roles.colors.accent
- forbiddenContexts: body-text, large-surface-fill
- allowedContexts: highlight, emphasis, attention-redirect
HEY Yellow (#FFFF00) is a highlight — used as a thin text-marker stripe or a small badge. Using it as a body-text color (no contrast against white) or as a full-page background (visual assault) inverts the brand's deliberate "loud but contained" use of the hue.
compositionConstraint → roles.colors.accent
- pairsWith: hey-heading, hey-near-black, hey-text
- doesNotPairWith: hey-white, hey-blue
HEY Yellow is only legible on a dark text foreground (no contrast against white). Pairing it adjacent to HEY Blue creates a primary-color competition that destabilizes the single-accent rule.
⚠️ warning (1)
enumMembership → typography.body.fontFamily
- allowed: Lucida Grande, Lucida Sans Unicode, Helvetica Neue, Helvetica, Arial, Verdana, system-ui, -apple-system, BlinkMacSystemFont
HEY deliberately uses the OS system-font stack — Lucida Grande on macOS, Helvetica / Arial / Verdana as fallbacks — rather than a proprietary or web-hosted face. Introducing a custom typeface (Inter, Söhne, etc.) breaks the brand's intentional system-aesthetic stance.
💡 recommendation (1)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.3
HEY uses the same system-font family for headings and body — hierarchy is signaled by size and weight rather than family-switching. A 1.3× minimum heading-to-body size ratio preserves hierarchy when one family does all the work.
Provenance
- Source: https://hey.com/about
- License:
Proprietary — All Rights Reserved - Attribution: HEY, the HEY wordmark, Basecamp, and 37signals are trademarks of 37signals LLC. Brand colors and identity guidance documented here are derived from hey.com and hey.com/about, captured on 2026-05-18.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://hey.com on 2026-05-18; no public brand guide located. HEY is authored by Basecamp / 37signals — the visual restraint and system-font choice are intentional brand decisions inherited from the parent company's operating philosophy. The bright Yellow (#FFFF00) is the brand's single most distinguishing visual choice — used aggressively as a highlight throughout the product. No proprietary typeface; the marketing site renders in the system stack ("Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif).
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by HEY
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
HEY
A clear hierarchy in HEY's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
HEY
[email protected]font · heading
Helvetica Neue
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Helvetica Neue
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ hey-yellow #FFFF00 accent-hover
→ hey-yellow #FFFF00 background
→ hey-white #FFFFFF error
→ hey-error #A94442 highlight
→ hey-yellow #FFFF00 identity
→ hey-white #FFFFFF mark
→ hey-heading #222222 on-identity
→ hey-heading #222222 primary
→ hey-blue #0088CC primary-hover
→ hey-blue-hover #1A8AD5 success
→ hey-success #3C763D surface
→ hey-grey-100 #F5F5F5 text-primary
→ hey-text #333333 text-secondary
→ hey-grey-700 #555555 warning
→ hey-warning #8A6D3B Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Helvetica Neue prose
→ body Helvetica Neue Palette mode mappings (from hey)
Light mode (15 roles)
accent
→ hey-yellow accent-hover
→ hey-yellow background
→ hey-white border
→ hey-grey-300 error
→ hey-error primary
→ hey-blue primary-hover
→ hey-blue-hover success
→ hey-success surface
→ hey-grey-100 surface-elevated
→ hey-near-white text-primary
→ hey-text text-secondary
→ hey-grey-700 text-tertiary
→ hey-grey-500 warning
→ hey-warning warning-hover
→ hey-warning Dark mode (15 roles)
accent
→ hey-yellow accent-hover
→ hey-yellow background
→ hey-near-black border
→ hey-grey-700 error
→ hey-error primary
→ hey-blue-hover primary-hover
→ hey-blue success
→ hey-success surface
→ hey-grey-700 surface-elevated
→ hey-grey-500 text-primary
→ hey-white text-secondary
→ hey-grey-300 text-tertiary
→ hey-grey-500 warning
→ hey-warning warning-hover
→ hey-warning Rules (8 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA HEY Text (#333333) on HEY White clears AAA at ~12.6:1. HEY's product is reading-dense by design (long email threads, paper-trail receipts); the AAA contrast target reflects the product's deliberate emphasis on extended-reading comfort.
colorChoice roles.colors.accent allowed hey-yellow forbidden hey-blue, hey-blue-hover, hey-success, hey-warning HEY Yellow (#FFFF00) is THE brand accent — the screaming highlight that defines the product's visual fingerprint. Substituting any other hue erases the brand's most distinguishing visual choice. The Yellow is used aggressively as a text-highlight / attention-redirect throughout HEY.
forbiddenTreatment logo treatments stretched, rotated, drop-shadow, gradient-fill, on-busy-photo, decorative-typography HEY's wordmark is rendered as plain, system-font-flavored type — no gradient fills, no decorative treatments, no drop-shadows. The brand's whole point is anti-decoration; a treated HEY mark contradicts the brand's stated values.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA HEY Blue (#0088CC) on HEY White clears AA at ~5.3:1 — the product uses #0088CC for both link affordance and primary button fills; staying above AA is non-negotiable on the reading-dense product surface.
contextRestriction roles.colors.accent forbiddenContexts body-text, large-surface-fill allowedContexts highlight, emphasis, attention-redirect HEY Yellow (#FFFF00) is a highlight — used as a thin text-marker stripe or a small badge. Using it as a body-text color (no contrast against white) or as a full-page background (visual assault) inverts the brand's deliberate "loud but contained" use of the hue.
compositionConstraint roles.colors.accent pairsWith hey-heading, hey-near-black, hey-text doesNotPairWith hey-white, hey-blue HEY Yellow is only legible on a dark text foreground (no contrast against white). Pairing it adjacent to HEY Blue creates a primary-color competition that destabilizes the single-accent rule.
warning · 1 rule
enumMembership typography.body.fontFamily allowed Lucida Grande, Lucida Sans Unicode, Helvetica Neue, Helvetica, Arial, Verdana, system-ui, -apple-system, BlinkMacSystemFont HEY deliberately uses the OS system-font stack — Lucida Grande on macOS, Helvetica / Arial / Verdana as fallbacks — rather than a proprietary or web-hosted face. Introducing a custom typeface (Inter, Söhne, etc.) breaks the brand's intentional system-aesthetic stance.
recommendation · 1 rule
fontPairing typography.heading requires body minSizeRatio 1.3 HEY uses the same system-font family for headings and body — hierarchy is signaled by size and weight rather than family-switching. A 1.3× minimum heading-to-body size ratio preserves hierarchy when one family does all the work.
Provenance
- Source
- https://hey.com/about
- License
Proprietary — All Rights Reserved- Attribution
- HEY, the HEY wordmark, Basecamp, and 37signals are trademarks of 37signals LLC. Brand colors and identity guidance documented here are derived from hey.com and hey.com/about, captured on 2026-05-18.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://hey.com on 2026-05-18; no public brand guide located. HEY is authored by Basecamp / 37signals — the visual restraint and system-font choice are intentional brand decisions inherited from the parent company's operating philosophy. The bright Yellow (#FFFF00) is the brand's single most distinguishing visual choice — used aggressively as a highlight throughout the product. No proprietary typeface; the marketing site renders in the system stack ("Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif).