---
version: alpha
name: HubSpot
description: A warm sand-cream canvas carrying a confident serif-meets-sans pairing — a humanist serif for the big editorial headlines, a clean sans for everything else — anchored by the unmistakable HubSpot Sprocket orange that fills every primary button. Marketing software that reads as warm, editorial, and grown-up.

colors:
  # Surface / canvas
  background: "#f8f5ee"        # the signature warm sand-cream canvas
  surface: "#ffffff"           # white cards floating on the cream
  surface-dark: "#1f1f1f"      # near-black photographic / inverted sections

  # Ink / text
  ink: "#1f1f1f"               # near-black headlines and body
  ink-secondary: "#4a4a4a"     # supporting copy
  ink-muted: "#808080"         # captions, metadata, helper text
  on-dark: "#ffffff"           # text on orange CTA and dark sections

  # Brand accent — the singular HubSpot Sprocket orange
  primary: "#ff4800"           # the orange that fills every primary button
  primary-hover: "#c93700"     # hover / pressed orange
  primary-strong: "#9f2800"    # deepest pressed orange
  on-primary: "#ffffff"

  # Secondary accent — deep navy
  navy: "#15295a"              # secondary buttons, link accents, footer
  navy-link: "#124548"         # teal-leaning link tone

  # Decorative pastel tints (the editorial accent family)
  tint-coral: "#ffa499"        # accent decoration / illustration
  tint-lilac: "#c4b4f7"        # accent decoration
  tint-aqua: "#97dadc"         # accent decoration
  tint-pink: "#fcc3dc"         # accent decoration
  tint-sage: "#9cbaa4"         # accent decoration

  # Borders
  border: "#e6e2d9"            # warm hairline dividers and card edges
  border-strong: "#cfcabd"     # input and outline-button borders

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#213343"       # was rgba(33,51,67,0.12) — Google format requires hex

typography:
  display-hero:
    fontFamily: "HubSpot Serif, Georgia, Times New Roman, serif"
    fontSize: 65px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.5px
  display:
    fontFamily: "HubSpot Serif, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.4px
  heading:
    fontFamily: "HubSpot Serif, Georgia, Times New Roman, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "Lexend, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.42
    letterSpacing: 0px
  body-large:
    fontFamily: "Lexend, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.78
    letterSpacing: 0px
  body:
    fontFamily: "Lexend, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0px
  body-small:
    fontFamily: "Lexend, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0px
  label:
    fontFamily: "Lexend, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  button:
    fontFamily: "Lexend, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0px
  nav-link:
    fontFamily: "Lexend, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Lexend, -apple-system, system-ui, sans-serif"
    fontSize: 12.8px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.navy}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.navy}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  link:
    textColor: "{colors.navy-link}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.navy}"

  badge:
    backgroundColor: "{colors.tint-coral}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# HubSpot Design System

## Overview

HubSpot's redesigned site leads with a move that instantly separates it from the sea of cool, blue-grey SaaS marketing pages: the canvas is a warm sand-cream (`{colors.background}` = `#f8f5ee`), and the headlines are set in a **serif**. Not a decorative display serif — a confident, humanist book serif at medium weight (`{typography.display-hero}`, 500) that gives lines like "AI knows a lot about the world" the cadence of an editorial feature rather than a software pitch. On the warm paper, that serif reads as intelligent and grown-up, the visual equivalent of a brand that wants to be taken seriously as a thinker, not just a tool.

Underneath the serif, everything operational switches to a clean geometric sans (`{typography.body}`) at light-to-regular weight with a notably open line-height (1.75). The pairing is the whole personality: serif for the ideas, sans for the instructions. Body copy frequently runs at weight 300, which keeps long marketing paragraphs feeling light and unhurried against the dense serif headlines. The hierarchy is built on the contrast between the two faces as much as on size.

And then the stamp: HubSpot Sprocket orange (`{colors.primary}` = `#ff4800`). It is one of the most recognizable colors in B2B software, and HubSpot spends it carefully — it fills the primary call-to-action ("Get a demo," "Get started free") and almost nothing else, glowing against the cream like a struck match. A deep navy (`{colors.navy}`) handles secondary actions and footer chrome, and a family of soft pastel tints (coral, lilac, aqua, pink, sage) appears only in illustration and decorative accents. Photographic hero sections go full near-black (`{colors.surface-dark}`) with the navigation inverted on top. The overall impression is warmth plus authority: editorial serif, sand-paper calm, and one unmistakable orange doing all the pointing.

**Key Characteristics:**
- Warm sand-cream canvas (`{colors.background}` = `#f8f5ee`) — editorial, never cool white
- A humanist **serif** for display headlines (`{typography.display-hero}`) — the signature, anti-SaaS move
- Clean geometric sans (Lexend-class) for all body and UI (`{typography.body}`), often at weight 300
- Open body line-height (1.75) keeps long marketing copy light against dense serif heads
- Hierarchy built on the serif/sans contrast as much as on size
- HubSpot Sprocket orange (`{colors.primary}`) reserved strictly for the primary CTA — glowing against the cream
- Deep navy (`{colors.navy}`) for secondary actions and footer chrome
- A family of soft pastel tints (`{colors.tint-coral}` etc.) only in illustration and decoration
- Near-black photographic hero sections (`{colors.surface-dark}`) with inverted nav
- Warm hairline borders (`{colors.border}`) for structural separation
- Moderate radii: 8px on buttons (`{rounded.md}`), 16px on cards (`{rounded.lg}`), pill for tags

## Colors

### Surface & Canvas
- **Sand Cream** (`{colors.background}`): The signature warm canvas — editorial, never cool white.
- **White** (`{colors.surface}`): Cards float on the cream for contrast.
- **Near-Black** (`{colors.surface-dark}`): Photographic and inverted hero sections; the nav bar.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Headlines and body — `#1f1f1f`.
- **Charcoal** (`{colors.ink-secondary}`): Supporting paragraph copy.
- **Muted Grey** (`{colors.ink-muted}`): Captions, metadata, helper text.

### Brand Accent
- **Sprocket Orange** (`{colors.primary}`): The singular stamp — fills the primary CTA and almost nothing else.
- **Orange Hover / Strong** (`{colors.primary-hover}`, `{colors.primary-strong}`): Hover and pressed states.

### Secondary Accent & Decoration
- **Navy** (`{colors.navy}`, `{colors.navy-link}`): Secondary buttons, link accents, footer chrome.
- **Pastel Tints** (`{colors.tint-coral}`, `{colors.tint-lilac}`, `{colors.tint-aqua}`, `{colors.tint-pink}`, `{colors.tint-sage}`): The editorial accent family — illustration and decoration only, never CTAs.

### Borders & Shadow
- **Warm Hairline** (`{colors.border}`) / **Warm Border** (`{colors.border-strong}`): Dividers, card edges, input outlines.
- **Shadow Tint** (`{colors.shadow-soft}`): Opaque stand-in for the cool-tinted soft shadow (original was rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: **HubSpot Serif** — a humanist book serif at medium weight. Loadable substitute: **Georgia** (named after the brand serif in the stack).
- **Body & UI**: **HubSpot Sans** — a clean geometric sans. Loadable substitute: **Lexend** (a close geometric-humanist Google Font matched to weight and openness).
- **Weights**: serif headlines at 500; body ranges 300 (light) to 500 (medium), leaning light for long copy.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 65px / 500 — the serif marquee headline |
| `display` | 48px / 500 — large serif section titles |
| `heading` | 40px / 500 — serif feature headings |
| `heading-sub` | 24px / 500 — sans sub-section headings |
| `body-large` | 18px / 300 / line-height 1.78 — lead paragraphs |
| `body` | 16px / 400 / line-height 1.75 — standard body |
| `body-small` | 14px / 400 — dense supporting copy |
| `label` | 14px / 500 — UI labels |
| `button` | 16px / 500 — button text |
| `nav-link` | 16px / 500 — top navigation |
| `caption` | 12.8px / 300 — metadata, helper text |

### Principles
- **Serif for ideas, sans for instructions**: the two-face pairing is the core of the brand voice.
- **Lean light**: body frequently runs at weight 300 with an open 1.75 line-height — relaxed, editorial.
- **Medium-weight serif**: headlines are 500, never heavy — confident without shouting.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. Generous vertical rhythm (`{spacing.6xl}` = 128px) separates major marketing sections; component internals stay compact (`{spacing.md}`–`{spacing.xl}`).

### Grid & Container
- Max content width: ~1280px, centered
- Common pattern: full-bleed photographic or illustrated hero, then alternating text/visual feature rows on the cream
- Card grids (product, pricing, resource) sit as white surfaces on the sand canvas

### Whitespace Philosophy
- **The cream is the calm**: the warm canvas sets an unhurried, editorial pace
- **Generous breathing room**: large vertical gaps and open line-heights keep dense marketing pages legible
- **Cards as objects**: white surfaces float on the sand, separated by space and warm hairlines

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, warm hairline `{colors.border}` only | Section bands, most page content |
| Subtle (Level 1) | `0 2px 4px` at ~12% (`{colors.shadow-soft}`) | Resting cards, chips |
| Card (Level 2) | `0 1px 24px` at ~12% (`{colors.shadow-soft}`) | Floating cards, the chat widget |
| Elevated (Level 3) | `0 8px 28px` at ~28% black | Modals, the HubBot panel |
| Focus Ring | 2px `{colors.primary}` ring | Focused inputs and interactive elements |

**Shadow Philosophy**: HubSpot's shadows are soft and slightly cool-tinted (`{colors.shadow-soft}`, a desaturated navy rather than pure black), which keeps floating cards from feeling harsh against the warm canvas. Elevation is modest — most of the page is flat, with warm hairlines doing the structural work — and reserved for genuinely floating elements like the chat widget and modals.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Tight controls, small tags |
| `md` | 8px | Buttons, inputs — the default interactive radius |
| `lg` | 16px | Cards, panels, larger surfaces |
| `pill` | 9999px | Pills, tags, avatars, round icon buttons |

The system is moderately rounded: a tidy 8px on buttons scaling to 16px on cards, with full pills reserved for tags and round controls. Friendly and modern without tipping into playful.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Sprocket orange (`{colors.primary}`) fill, white text, 8px radius. The main CTA, glowing against the cream. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, navy (`{colors.navy}`) text, 8px radius. Hover fills the cream `{colors.background}`.
- **`button-outline`** — Cream fill, near-black text, warm hairline outline. Neutral tertiary action.

### Cards
- **`card`** / **`card-elevated`** — White surface on the cream canvas, 16px radius. The elevated variant carries the soft cool-tinted shadow and roomier 32px padding.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` warm outline, 8px radius. **`input-focus`** adds a 2px orange ring (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Near-black (`{colors.surface-dark}`) bar with white links over photographic heroes; the orange CTA persists at the right.

### Accent & Links
- **`link`** — Navy-teal text (`{colors.navy-link}`), darkening to `{colors.navy}` on hover.
- **`badge`** — Coral-tint (`{colors.tint-coral}`) fill, near-black text, pill radius — for product and category tags.

## Do's and Don'ts

### Do
- Use the warm sand-cream canvas (`{colors.background}` = `#f8f5ee`) — never cool white for the page
- Set display headlines in a humanist serif (`{typography.display-hero}`) — the signature anti-SaaS move
- Pair serif headlines with a clean sans (`{typography.body}`) at light weight for body copy
- Reserve Sprocket orange (`{colors.primary}`) strictly for the primary CTA — it's the one stamp
- Use deep navy (`{colors.navy}`) for secondary buttons and footer chrome
- Keep the pastel tints (`{colors.tint-coral}` etc.) in illustration and decoration, never on CTAs
- Give body copy an open 1.75 line-height (`{typography.body}`) for an editorial, unhurried feel
- Use a soft, cool-tinted shadow (`{colors.shadow-soft}`) for genuinely floating elements only

### Don't
- Don't set the page background to cool white — the warm cream is the brand
- Don't use a sans for the big headlines — the serif is the personality
- Don't spend the orange (`{colors.primary}`) on anything but the primary CTA; preserve its stamp value
- Don't bring pastel tints into buttons or links — they belong in illustration
- Don't make body copy heavy or tightly leaded; it leans light (300) with open line-height
- Don't scatter heavy shadows; the page is mostly flat, separated by warm hairlines
- Don't over-round; the system tops out at 16px on cards, with pills only for tags

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; serif hero scales 65px → ~36px; nav collapses to a hamburger; cards stack full-width |
| Tablet | 640–1023px | Two-column feature rows begin; cards sit in 2-up grids |
| Desktop | 1024–1279px | Full layout; alternating text/visual feature rows |
| Large | ≥1280px | Max ~1280px container, centered; generous section padding (`{spacing.6xl}`) |

### Touch Targets
- Buttons run ~44px tall with `12px 24px` padding — comfortable for thumbs
- Nav links carry generous vertical padding in the mobile drawer

### Collapsing Strategy
- **Navigation**: full horizontal nav → hamburger drawer on mobile; the orange CTA persists
- **Hero**: serif headline scales down; photographic background crops to focal region; text and visual stack
- **Type**: serif display drops from 65px toward ~36px; body stays at 16px with open line-height
- **Spacing**: section padding compresses from ~128px toward ~64px

### Image Behavior
- Full-bleed photographic heroes crop to the focal region on narrow widths; illustrated decoration scales down; card grids reflow to fewer columns

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Sand Cream (`{colors.background}` = `#f8f5ee`)
- Surface: White (`{colors.surface}`)
- Text: Near-Black (`{colors.ink}` = `#1f1f1f`)
- Brand accent: Sprocket Orange (`{colors.primary}` = `#ff4800`)
- Secondary: Navy (`{colors.navy}`)
- Border: Warm Hairline (`{colors.border}`)
- Primary CTA: Sprocket Orange (`{colors.primary}`), hover `{colors.primary-hover}`

### Example Component Prompts

- "Create a hero on warm sand-cream (`{colors.background}` = `#f8f5ee`) with a 65px near-black (`{colors.ink}`) headline in a humanist serif (HubSpot Serif / Georgia), weight 500, a 18px light body paragraph (`{typography.body-large}`, weight 300) in a clean sans, and a Sprocket-orange primary button (`{colors.primary}` fill, white text, `{rounded.md}` radius)"
- "Build a primary button: Sprocket orange (`{colors.primary}`) fill, white text (`{typography.button}`), `{rounded.md}` radius, `12px 24px` padding; hover deepens to `{colors.primary-hover}`"
- "Create a secondary button: white fill, navy (`{colors.navy}`) text, `{rounded.md}` radius; hover fills the cream (`{colors.background}`)"
- "Create a feature card: white surface (`{colors.surface}`) on the cream canvas, `{rounded.lg}` radius, soft cool-tinted shadow (`0 1px 24px` at ~12% via `{colors.shadow-soft}`), warm hairline (`{colors.border}`) edge, 32px padding"
- "Build an inverted hero nav: near-black bar (`{colors.surface-dark}`) with white links (`{typography.nav-link}`) over a photographic background, with an orange 'Get a demo' button (`{colors.primary}`) pinned right"
- "Render a category badge: coral-tint (`{colors.tint-coral}`) fill, near-black (`{colors.ink}`) text, pill radius (`{rounded.pill}`), `4px 12px` padding"

### Iteration Guide

1. Start on the warm sand-cream canvas (`{colors.background}` = `#f8f5ee`). If your page is cool white, stop — the warmth is the brand.
2. Set the big headlines in a serif (`{typography.display-hero}`). If they're a sans, you've lost the signature.
3. Pair the serif with a clean light-weight sans (`{typography.body}`) for everything operational.
4. Sprocket orange (`{colors.primary}`) is the only saturated CTA color. Navy (`{colors.navy}`) handles secondary actions.
5. Keep pastel tints in illustration and decoration only — never on buttons or links.
6. Give body copy an open 1.75 line-height and lean light (300) for the editorial feel.
7. Separate with warm hairlines (`{colors.border}`) before reaching for shadow; reserve the soft cool-tinted shadow for floating elements.
8. Keep radii moderate: `{rounded.md}` (8px) on buttons, `{rounded.lg}` (16px) on cards, pills for tags.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by HubSpot. Brand names and trademarks belong to their respective owners.