HubSpot. Warm cream paper with a single orange spark.
- SaaS
- Light theme
- 10 colors
- 3 typefaces
HubSpot's design system is a warm, editorial enterprise aesthetic built on cream-paper canvases rather than stark white. A single vivid orange (#ff4800) serves as the sole chromatic accent — appearing in CTAs, icons, the logo sprocket, and even the period punctuation on the hero headline — while everything else stays in a carefully graded neutral scale from off-white to near-black. Typography pairs a custom sans (HubSpot Sans) for UI and body with a custom serif (HubSpot Serif) for headlines, a deliberate choice that signals editorial confidence over typical SaaS utility. Cards float on warm parchment with soft 16px corners and hairline borders rather than heavy shadows, and generous vertical breathing room between sections gives the whole site a calm, unhurried rhythm. The 2% colorfulness score is structural: orange is never decorative chrome, it's functional punctuation that always means "act here" or "this is HubSpot."
HubSpot design system
Brand1
Primary CTAs, logo sprocket, active nav states, functional icons, and the period punctuation on hero headlines — the sole chromatic accent in the entire system
Accent3
Soft accent surface behind orange elements, badge backgrounds, gentle warm highlight zones that echo the brand orange at low intensity
Dark featured sections, inverted text on cream, occasional deep-surface moments that break the warm palette with cool contrast
Decorative brand gradient spanning warm peach through orange into magenta — used sparingly on featured artwork and highlight washes
Neutrals6
High-contrast text on light surfaces, maximum-emphasis borders and icon fills
Primary body text, headings, card borders, hairline dividers — the structural near-black used everywhere a line or label needs weight
Muted secondary text inside buttons and controls where full Ink weight would feel heavy
Disabled-state borders, inactive list markers, low-emphasis icon fills
Alternating section backgrounds, navigation surface, soft-band separators that give the page a paper-stock warmth
Page background, card surfaces, button text, light dividers
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Pure Black on Sprout Orange
6.18 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
