# HEY

> `hey@1.0.0`

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** · `hey@1.0.0` · 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** `(helvetica-neue@1.0.0)` | Proprietary — Linotype/Monotype; bundled with Apple OS | sans-serif |
| `body` | **Helvetica Neue** `(helvetica-neue@1.0.0)` | Proprietary — Linotype/Monotype; bundled with Apple OS | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `hey@1.0.0` from the encyclopedia.*