What is HubSpot's primary brand color?

HubSpot Orange at `#ff4800` is the brand voltage. The CSS variable `--cl-color-hubspot-brand-01` resolves to this exact hex, and so do `--color-brand01`, `--light-theme-button-primary-fill-idle`, `--light-theme-text-brand-01`, `--light-theme-text-link-underline-01`, `--light-theme-number-fill-active`, and `--light-theme-button-secondary-border` — 32 declared aliases pointing at one hex. It carries the filled primary CTA, the 1px stroke around the secondary CTA, the inline link underline color, and the active-state numeric fill on every statistic. Hover steps to `#c93700` (`--cl-color-button-primary-fill-hover`) and pressed to `#9f2800` (`--cl-color-button-primary-fill-pressed`). The system primary for text is `#1f1f1f` near-black, not orange — Orange never carries body copy.

What fonts does HubSpot use, and what should I substitute?

Two families. `HubSpot Serif Page Header Human` (with `HubSpot Serif` as fallback) carries the hero h1 at 80px / weight 500 / 95px line-height; the same serif drops to 48px and 40px for h2 / large h3. HubSpot Sans carries every other tier — 24px h3 / 18px subhead / 16px body / 14px secondary / 12px nav — at weight 300 for body and display, weight 500 for CTAs, h3 cards, and nav. Both are proprietary, served via `--cl-font-family-display` and `--cl-font-family`. The closest open substitutes are GT Sectra or Tiempos Headline for the serif and Inter at weight 300/500 for the sans. Note the unusual choice: the 7rem display tier (`--cl-font-size-display-01`) runs at weight 300, so the largest hero text is the lightest weight on the page.

Why does HubSpot use a cream page floor instead of white?

The cream (`#f8f5ee`, `--cl-color-background-02`, `--light-theme-background-03`) carries every interior section between the dark photographic hero band at the top and the `#1f1f1f` footer at the bottom. White (`#ffffff`, `--cl-color-container-01`) is reserved for the feature-card and product-hub tiles that lift off the cream floor — 33 background occurrences as a card surface, never as a page floor. The cream-to-white step is the system's primary depth cue, replacing the drop shadows other CRM marketing sites lean on. A second off-white at `#fcfcfa` (`--color-background-modal`) is the modal background, slightly cooler than the page cream.

Why does HubSpot put two orange buttons side-by-side?

The hero ships a paired CTA row: a filled `#ff4800` primary (`button-primary`) reading 'Get a demo' next to an orange-bordered, white-filled secondary (`button-secondary`) reading 'Get started free'. The CSS variable `--cl-color-button-secondary-border` resolves to `#ff4800` — the secondary inherits the brand voltage through its stroke rather than fading into a neutral ghost button. Both buttons use the same `8px` radius (`--cl-border-radius-medium`), the same `16px 40px` padding, and the same HubSpot Sans weight 500 label. Where most CRM marketing sites ship one solid primary plus a text-link secondary, HubSpot doubles the orange — one filled, one outlined — so both CTAs read as equally weighted brand actions.

Does HubSpot have a dark mode?

The marketing site does not ship a togglable dark theme, but it does ship two dark bands. The top photographic hero uses `#1f1f1f` background with `#f8f5ee` text (`--dark-theme-text-01`), and the footer uses the same `#1f1f1f` background (`--cl-color-background-footer-01`) for the entire site closing band. The full `--dark-theme-*` token set is declared (`--dark-theme-background-01: #042729`, `--dark-theme-text-01: #f8f5ee`) and powers HubSpot's product surfaces, but the public marketing page only invokes the dark tokens on the hero and footer. This DESIGN.md captures the dark band as `band-inverse` so you can render it, but no other component flips to a dark variant.

How do I use this DESIGN.md to build a React CRM marketing site?

Feed the file to Claude, Cursor, or any agent that reads structured tokens — the AI will reproduce HubSpot's pairing (cream page over photographic hero, dual Orange CTAs, body at weight 300) instead of a generic shadcn theme. You can also reference the 22 color tokens, 11 type styles, and 19 components directly: every value is a quoted hex or size you can paste into Tailwind config, CSS variables, or your own component library. Pair the spec with shadcn/ui primitives for fastest setup — the `8px` button radius and 1px brand-color stroke map cleanly to a `Button` variant pair.

HubSpot Design System

HubSpot's design system as a DESIGN.md file.

About HubSpot DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source hubspot.com

Marketing & CRM

HubSpot's customer-platform surface is the rare CRM marketing canvas that pairs a photographic hero band with a custom-cut editorial serif. The opening h1 runs `HubSpot Serif Page Header Human` at 80px / weight 500 / 95px line-height over a portrait photograph; below it, the page floor turns cream (`#f8f5ee`) and the rest of the system runs HubSpot Sans at light weights — 300 for body copy and the large display tier, 500 for CTAs, navigation, and h3 cards. The chromatic voltage is HubSpot Orange (`#ff4800`), and it appears in four exact roles — primary button fill, secondary button stroke, link underline, and active statistic-number fill — and nowhere else as a section background.

This DESIGN.md packages the spec into one machine-readable file. Inside: 22 color tokens grouped into one brand voltage (`#ff4800` orange with its `#c93700` hover and `#9f2800` pressed steps), the cream surface ladder (`#f8f5ee` page floor, `#ffffff` cards, `#fcfcfa` modal), the `#1f1f1f` near-black ink ladder, two accent decorations (the `#b9cdbe` Sage card tint, the `#d6c2d9` Lilac card tint), plus semantic success / warning / error tokens; 11 typography tokens running the custom serif at 80px / 48px / 40px display and HubSpot Sans at 24px / 18px / 16px / 14px / 12px; 4 corner radii anchored on the `16px` container default and the `8px` button rectangle; 9 spacing tokens; and 19 components including the dual orange CTA pair, the product-hub feature card, the dark hero band, and the cream stats card. Format follows the Google Labs DESIGN.md spec.

Feed the file to Claude, Cursor, or Copilot and the agent will reproduce HubSpot's pairing — Orange filled primary right next to Orange-bordered secondary, cream page floor never pure white, body type at weight 300 — instead of a generic shadcn theme. Reference the tokens directly inside Tailwind config, CSS variables, or your own component library. The discipline worth studying is the in-line dual-CTA: where most CRM marketing sites ship a single solid primary and a ghost or text-link secondary, HubSpot puts the orange-filled "Get a demo" right next to the orange-bordered "Get started free" on the same row, so the secondary inherits the brand voltage instead of fading into the page.

What makes it distinct

Single brand voltageHubSpot Orange (`#ff4800`) carries every primary CTA, every link underline, every active statistic number, and both secondary button strokes
Custom serif display`HubSpot Serif Page Header Human` runs the hero at 80px / weight 500 / 95px line-height while HubSpot Sans handles the entire 12–18px body scale
Cream page floor (`#f8f5ee`)the `--cl-color-background-02` token sits on every section between the dark hero band and the `#1f1f1f` footer, never pure white
Orange-bordered secondary CTAevery Get-started-free button ships with a 1px `#ff4800` stroke over white, paired in-line with the filled Orange primary
Body weight 300`--cl-font-weight-p-medium`, `--cl-font-weight-display-01`, and `--cl-font-weight-light` all resolve to 300, so paragraph copy and 7rem display tier share the same light weight

Live at hubspot.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

hubspot.com

Explore HubSpot

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

HubSpot design system FAQ

Common questions about HubSpot's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

HubSpot — official site

HubSpot's customer platform marketing surface, the source for every token in this spec.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.