HEY

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.

19 swatches 15 light roles 15 dark roles heybasecampthirty-seven-signalsemailbrandyellowutility

Swatches

hey-yellow
#FFFF00
The defining HEY accent — a pure CSS-yellow used as a highlight throughout the product (think text-marker / "Screener" highlight bar). Loud by design.
hey-blue
#0088CC
The action blue captured from hey.com — used for links, primary buttons, and active-state affordance.
hey-blue-hover
#1A8AD5
Slightly brighter hover variant.
hey-blue-active
#176BAD
Pressed / active blue.
hey-white
#FFFFFF
Page canvas — pure white, no warm tint.
hey-near-white
#FCFCFC
Subtle elevated surface.
hey-grey-100
#F5F5F5
Hairline panel background.
hey-grey-300
#DDDDDD
Border and divider on light surfaces.
hey-grey-500
#888888
Tertiary text / inactive icon.
hey-grey-700
#555555
Secondary text.
hey-text
#333333
Body text on white canvas.
hey-heading
#222222
Heading and emphasis text on white.
hey-near-black
#1E1E1E
Deepest ink for high-contrast type and dark-mode canvas.
hey-success
#3C763D
Confirmation green — Bootstrap success-text heritage.
hey-success-bg
#DFF0D8
Success-state surface tint.
hey-error
#A94442
Error red — Bootstrap danger-text heritage.
hey-error-bg
#F2DEDE
Error-state surface tint.
hey-warning
#8A6D3B
Warning amber.
hey-warning-bg
#FCF8E3
Warning-state surface tint.

Mode role mappings

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

Provenance

Source
https://hey.com/
License
Proprietary — All Rights Reserved
Attribution
HEY and the HEY wordmark are trademarks of 37signals LLC / Basecamp. Palette values captured from the deployed stylesheet on hey.com on 2026-05-18 — the marketing site uses a deliberately minimal token surface (Bootstrap-era greys, a single accent yellow, and a primary action blue).
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 parent company's "Rework" / "Shape Up" operating philosophy extends visually into the deliberately utilitarian, system-font-driven brand presentation. HEY uses the system stack ("Lucida Grande", Helvetica, Arial) on the marketing site rather than a proprietary face. The bright Yellow (#FFFF00) is the brand's most distinctive single visual choice — used as a highlight throughout the product to aggressively redirect attention.