HubSpot Design System Deep Dive

1. Brand Overview

HubSpot’s design language is exactly what you’d expect from a mature SaaS company in the B2B space — confident, approachable, and meticulously controlled. Every pixel feels intentional. This isn’t a “fun startup” palette or an “enterprise beige” corporate template. It’s somewhere in between: a warm, energetic brand color anchored by serious typography and high-contrast neutrals.

The vibe: direct and professional, but human enough to avoid feeling sterile. The orange (#ff4800) is the heartbeat — it’s everywhere you expect action, from primary CTAs to brand marks. It’s not shy. HubSpot wants you to notice clickable things. Around that, they keep a clean scaffold of off-whites (#f8f5ee) and deep grays (#1f1f1f), letting the orange pop without visual clutter.

Philosophically, this system leans on predictability. The same radius values repeat across buttons, cards, and inputs. Spacing sticks to an 8px grid. Typography uses a tight range of weights (300, 400, 500) so hierarchy is clear but not jarring. Even the link styles are predictable: underline in most cases, orange accents for emphasis.

Who’s this for? Designers building dashboards, marketing pages, and product UIs where brand cohesion matters. There’s nothing experimental here — the design language is built for scale. If you pick up their tokens, you can apply them to anything from a signup form to a complex CRM table and it will still “feel HubSpot.”

I like that they avoid overusing shadows. Depth comes from contrast and borders rather than drop shadows, which keeps interfaces crisp and lightweight. That choice also helps performance and keeps the visual style consistent across dark and light contexts.

Bottom line: HubSpot’s design system is a toolkit for consistency and clarity. Sharp enough for enterprise credibility, warm enough to be friendly. And every choice they’ve made — from the orange CTA to the serif page headers — reinforces that balance.

2. Color System

2.1 Primary Colors

The main brand color is #ff4800 (RGB 255, 72, 0). This is pure “HubSpot Orange.” Psychologically, orange conveys energy, enthusiasm, and friendliness. It’s less aggressive than red but more urgent than yellow. Competitors like Salesforce lean on blues (trust, stability), while HubSpot’s orange signals action and approachability.

When used as a primary button background, it demands attention without overpowering. It works well against both light (#f8f5ee) and dark (#1f1f1f) backgrounds. Accessibility-wise, white text on #ff4800 passes WCAG AA easily for normal text.

Secondary color from semantic tokens is rgba(0, 0, 0, 0.11) — a soft, translucent black used for borders and dividers. It’s functional, not decorative.

2.2 Complete Palette

2.3 Color Relationships

• Contrast: Primary orange on white — high contrast. White text on orange — passes WCAG AA for normal text. Gray text (#1f1f1f) on off-white (#f8f5ee) — borderline for small text but acceptable for headings.
• Dark Mode: Not explicitly defined here, but the palette contains dark neutrals and off-whites that could invert cleanly.
• Functional Colors: Error (#d9002b), success (#00823a), warning (#eeb117) are saturated enough to stand alone. Their background counterparts are muted for non-intrusive states.

2.4 Usage Guide

• Works: Orange (#ff4800) for primary buttons, paired with white text. Off-white backgrounds with dark gray text for body copy. Blue (#005fcc) for focus outlines.
• Avoid: Overlapping multiple accent fills — too much pastel will dilute hierarchy. Don’t use warning yellow (#eeb117) for anything non-warning; it’s functional.
• Combinations: Orange CTAs stand out best against off-white/light gray surfaces. Dark gray text on white is fine; on orange, switch to white for readability.

3. Typography

3.1 Font Families

HubSpot uses HubSpot Serif and HubSpot Sans — custom brand fonts. The sans stack often falls back to Lexend Deca, LexendDeca, Helvetica Neue, helvetica, arial. Google Fonts source includes Lato (likely for body or utility text). Variable fonts are supported.

Serif is reserved for large, humanistic headers (“HubSpot Serif Page Header Human”), giving marketing pages a distinct voice. Sans is used for UI, body copy, and smaller headings.

3.2 Type Scale

3.3 Hierarchy

Hierarchy comes from size jumps (80px → 48px → 40px for headings) and weight shifts. They avoid ultra-bold weights — max is 500, giving a softer hierarchy. Serif headers are visually distinct from sans UI labels, so marketing and product interfaces feel different but related.

Line heights are tight in large headings (1.10–1.19) and looser in body/link text (1.57–1.78) for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. They also use occasional 4px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, and rare odd values like 3.2px.

4.2 Layout

Breakpoints: multiple — 450px, 544px, 568px, 570px, 575px, 600px, 694px, 768px, 800px, 850px, 900px, 966px, 970px, 1080px, 1150px, 1152px. They clearly target a wide range of devices with fine-grained adjustments.

5. Visual Elements

Border Radius

Values: 0px, 4px, 6px, 8px, 16px, 42px, 50%.

• 0px — flat edges (tables)
• 4px — inputs, badges
• 6px — rare spans
• 8px — buttons, switches
• 16px — buttons, cards
• 42px — specific CTA
• 50% — round buttons, avatars

Shadows

Minimal use. Examples:

• rgba(33, 51, 67, 0.12) 0px 1px 24px 0px
• rgba(33, 51, 67, 0.12) 0px 2px 4px 0px
• Rare heavier: rgba(0, 0, 0, 0.28) 0px 8px 28px 0px

6. Components

6.1 Buttons

They repeat core states across variants: default, hover, active, focus.

Primary Button (#ff4800 background):

• Default: bg #ff4800, white text, 8px radius, padding 8px 16px, border 2px transparent.
• Hover: bg white 90%, text var(--cl-color-text-01), boxShadow 0 0 0 1px var(--cl-card-border-color).
• Active: bg var(--cl-color-hover-01), text var(--cl-color-text-01).
• Focus: boxShadow rgba(0, 127, 255, 0.5) 0px 0px 0px 2px.

Tertiary Outline:

• Default: transparent bg, dark text, border 2px solid #1f1f1f.
• Hover: same hover behavior as primary.
• Active: bg var(--cl-color-hover-01).
• Focus: same focus style.

Round Carousel Control:

• Default: semi-transparent white bg, black text, radius 50%.
• Hover: white 90% bg.

6.2 Links

Variants:

• Dark text (#1f1f1f) underlined.
• White text underlined.
• Orange text (#ff4800) no underline by default.
• Off-white text underlined.

Hover: Always underline; color changes via var(--cl-anchor-hover-color).

6.3 Forms

Search input:

• Default: transparent bg, dark text, 4px radius, padding 3.2px 8px.
• Focus: outline 2px solid var(--cl-color-focus-01).

6.4 Cards

Border combos include dashed top borders and light rgba(0,0,0,0.11) outlines. Shadows are rare.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #ff4800;
  --color-secondary-border: rgba(0,0,0,0.11);
  --color-dark-gray: #1f1f1f;
  --color-off-white: #f8f5ee;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #808080;
  --color-blue: #005fcc;
  --color-deep-teal: #2f7579;
  --color-warning: #eeb117;
  --color-error: #d9002b;
  /* Typography */
  --font-serif: "HubSpot Serif", serif;
  --font-sans: "HubSpot Sans", Lexend Deca, Helvetica Neue, helvetica, arial;
  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 50%;
  /* Shadows */
  --shadow-md: rgba(33, 51, 67, 0.12) 0px 1px 24px 0px;
}

8. AI Coding Assistant Prompt

# HubSpot Design System Specification

System Prompt:
You are a HubSpot design expert. Build UIs matching their visual language exactly.

Brand Context:
HubSpot’s visual language balances warm, energetic brand color with restrained, high-contrast neutrals. Typography is split between humanistic serif for marketing headlines and clean sans for product UI. Spacing is on an 8px grid, with consistent radii and minimal shadows.

## Colors
- Primary: #ff4800 — CTAs, primary buttons, key actions
- Secondary Border: rgba(0,0,0,0.11) — borders, dividers
- Dark Gray: #1f1f1f — primary text
- Off-white: #f8f5ee — page background
- White: #ffffff — cards, modals
- Black: #000000 — icons
- Blue: #005fcc — focus outlines
- Warning: #eeb117 — alerts
- Error: #d9002b — error states
- Success: #00823a — success states

## Typography
- Serif Headings: "HubSpot Serif", serif
- Sans UI: "HubSpot Sans", Lexend Deca, Helvetica Neue, helvetica, arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 80px | 500 | 1.19 | Marketing hero |
| H2 | 48px | 500 | 1.15 | Section headings |
| H3 | 40px | 500 | 1.10 | Subheadings |
| Body | 16px | 400 | 1.15–1.75 | Body copy |
| Button | 14px | 500 | 1.15 | UI buttons |
| Caption | 12px | 500 | 1.67 | Labels

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 3px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 96px.
Use multiples of 8px for layout gaps, button padding, card spacing.

## Border Radius
- none: 0px — tables
- sm: 4px — inputs, badges
- md: 8px — buttons
- lg: 16px — cards
- full: 50% — round buttons, avatars

## Shadows & Depth
Minimal shadows. Use `rgba(33, 51, 67, 0.12) 0px 1px 24px` for elevated cards.

## Components

### Primary Button
```css
.btn-primary {
  background: #ff4800;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-weight: 500;
  font-size: 14px;
}
.btn-primary:hover {
  background: rgba(255,255,255,0.9);
  color: var(--cl-color-text-01);
  box-shadow: 0 0 0 1px var(--cl-card-border-color);
}
.btn-primary:focus {
  box-shadow: rgba(0,127,255,0.5) 0px 0px 0px 2px;
}

Secondary Button

.btn-secondary {
  background: transparent;
  color: #1f1f1f;
  border: 2px solid #1f1f1f;
  padding: 12px 24px;
  border-radius: 8px;
}

Input Field

.input-search {
  background: transparent;
  color: #1f1f1f;
  border-radius: 4px;
  padding: 3.2px 8px;
}
.input-search:focus {
  outline: 2px solid var(--cl-color-focus-01);
}

Layout & Responsive Rules

Breakpoints: 450px, 544px, 568px, 575px, 600px, 694px, 768px, 800px, 850px, 900px, 966px, 970px, 1080px, 1150px, 1152px.

Interaction Rules

• 150ms ease for hover/focus transitions
• Focus indicators: 2px solid focus color
• Disabled: 50% opacity

DO

• Use only palette colors
• Keep spacing multiples of 8px
• Use serif only for large headings
• Maintain consistent border-radius per component type

DON'T

• Invent new colors
• Mix shadows with borders inconsistently
• Use bold weights above 500
• Break the 8px grid

---

## 9. Summary

**TL;DR** — HubSpot’s design system is warm, structured, and predictable. Orange CTAs, restrained typography, and an 8px grid keep everything consistent from marketing to product UI.

**Brand Keywords**:
- warm-structured
- enterprise-friendly
- grid-disciplined
- typography-driven
- minimal-depth