# HubSpot: brand book and build spec

HubSpot's 2025 identity pairs one hot orange (#FF4800) with warm neutrals and a light serif headline face, so a busy CRM suite reads calm and friendly. The published rules are legal and naming law (trademark and partner pages); the visual system here is measured from the live site.

From unfairly.ai/brand-guidelines/hubspot, checked 2026-10-31. Unofficial study; not affiliated with HubSpot.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Calm, warm neutrals and a light serif do the talking; orange is reserved for what you can click. Based on: A crowded software category; restraint plus one recognisable orange makes HubSpot feel approachable and unmistakable.

## Purpose

Mission: Helping millions of organizations grow better (published; https://www.hubspot.com/our-story)

Story: Founded in 2006 by MIT graduate students Brian Halligan and Dharmesh Shah, who saw buyers wanted helpful information rather than interruptions, and built HubSpot around inbound marketing; it grew into a connected customer platform now led by CEO Yamini Rangan. (Paraphrase.) (published)

| Value | What it means in the work | Source |
|---|---|---|
| Grow better |  | published: https://www.hubspot.com/our-story |
| Crafted, not cobbled |  | published: https://www.hubspot.com/our-story |

## Fixed and flexible

Never changes:
- #FF4800 orange
- light serif headlines
- capital S in HubSpot

The one thing that varies: Section grounds can move between white, cream, teal and the warm gradient.

## Positioning

- **Statement**: The agentic customer platform that helps scaling businesses grow better. (published)
- **Category**: Agentic customer platform (CRM plus marketing, sales and service software) (published)
- **Audience**: Scaling organizations, from startups and small businesses to enterprises, and their customer-facing teams (published)
- **Problem**: Disconnected tools and data slow growing businesses down (observed)
- **Promise**: Everything and everyone connected in one place, so growing a business is easier (observed)
- **Differentiators**: Every product sits on the same Smart CRM database; AI agents built into the platform, grounded in customer data; 2,000+ App Marketplace integrations; Free tools and a free CRM as the way in ("Get started free")
- **Alternatives**: Stitched-together point tools ("crafted, not cobbled" is the contrast)

## Messaging

Boilerplate (published): HubSpot is the agentic customer platform that helps businesses grow better: AI-powered hubs for marketing, sales and service on a Smart CRM, with 2,000+ App Marketplace integrations, a community and HubSpot Academy. (Paraphrase of the newsroom boilerplate.)

Taglines:
- Grow better
- Build demand, win deals, and delight customers — all on one platform.
- Make impossible growth feel impossibly easy, with HubSpot.

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| One platform | Marketing, sales, service, content, data and revenue on one platform around shared customer data. | Eight connected products: Marketing, Sales, Service, Content, Data and Revenue Hubs, Smart CRM and Agent Hub; 2,000+ integrations | observed |
| AI you control | Built-in AI agents (prospecting, data, customer) that work around the clock, grounded in your CRM data. | AI agents can resolve over 65% of customer inquiries (HubSpot's homepage claim) | observed |
| Easy growth | Growing a business is hard; HubSpot makes it easier and connects everyone in one place. | 306,000+ customers worldwide; Voted #1 in 526 G2 Reports (homepage figure on 2026-10-31; the About page shows 571) | observed |

They never claim:
- Customer counts and G2 counts change; print the number HubSpot publishes on the day and say where
- Never call a third-party product a HubSpot product or imply endorsement (trademark guidelines)

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Build demand, win deals, and delight customers — all on one platform." | homepage H1 | https://www.hubspot.com/ |
| "Growing a business is hard. HubSpot makes it easier." | homepage product section | https://www.hubspot.com/ |

## Voice

Tone words: plain, warm, confident, helpful, human.

Traits:
- warm, but not cute (published)
- plain-spoken, but not jargon-heavy (published)
- confident, but not boastful (published)
- helpful, but not pushy (published)

- The homepage voice: short declaratives in sentence case that end with a full stop, often two clauses balanced ("AI you control. Results you can trust.").
- The brand frames growth as hard and HubSpot as the thing that makes it easier; it speaks to the reader as "you" and "your teams".
- Second person, present tense, everyday verbs (connect, grow, win, delight, close). Em dashes with spaces either side.
- Its long-running motto is "grow better": success aligned with the customer's success (About Us page).

Rules a copy check enforces:
- Sentence case headlines
- Headlines and card captions end with a full stop; the hero and closing headlines set that stop in HubSpot orange #FF4800
- Always write HubSpot with a capital S
- Never abbreviate or blend the name: no HubConnector, SyncSpot, HubSync, HubTheme or ThemeSpot style names
- Partner copy avoids unverifiable superlatives such as "#1 agency" or "leading agency"; HubSpot statistics must be verifiable by HubSpot
- Third parties use HubSpot only referentially ("for HubSpot", "works with HubSpot"), less prominent than their own name, with a non-affiliation disclaimer
- Product names carry their marks on the site: Marketing Hub®, Sales Hub®, Service Hub®, Content Hub™, Data Hub™, Revenue Hub™, Smart CRM™, Agent Hub™
- Em dash with a space on both sides ("customers — all on one platform")
- Proof is a published number with a plus sign: 306,000+ customers, 2,000+ integrations, "Voted #1 in 526 G2 Reports"
- Only the small hero eyebrow and the customer-count label are set in capitals; everything else is sentence case

Their words: customers, platform, grow, delight, connected.
Never: #1 agency, leading agency, HubSync, SyncSpot, certified partner (for an app).

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| HubSpot orange | #FF4800 | accent | logo, buttons, links, checks |
| Ink | #1F1F1F | ink | all text on light, footer ground |
| White | #FFFFFF | paper | top bands, cards |
| Cream 01 | #FCFCFA | surface | lower page ground |
| Cream 03 | #F8F5EE | on_night | text and logo on dark |
| Teal 13 | #042729 | accent_secondary | closing CTA band |
| Agent blush | #FCDED2 | extra | AI agents gradient band base |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | HubSpot Serif | Proprietary (HubSpot). Stand-in: Literata (SIL OFL 1.1) | Literata | Literata, Georgia, "Times New Roman", serif |
| body | HubSpot Sans | Proprietary (HubSpot). Stand-in: Onest (SIL OFL 1.1) | Onest | Onest, "Helvetica Neue", Arial, sans-serif |
| mono | JetBrains Mono |  | JetBrains Mono | "JetBrains Mono", Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-xl-* | HubSpot Serif | 65px | 40px | 1.2 | 0px | 320 |
| Closing CTA H2 | --text-display-l-* | HubSpot Serif | 48px | 40px | 1.154 | 0px | 320 |
| Section H2 | --text-h2-* | HubSpot Serif | 40px | 32px | 1.1 | 0px | 320 |
| Statistic numeral | --text-stat-* | HubSpot Serif | 40px | 40px | 1.1 | 0px | 480 |
| Hero tile caption | --text-caption-serif-* | HubSpot Serif | 28px | 28px | 1.1 | 0px | 320 |
| Agent card title / integrations heading / G2 line | --text-h3-* | HubSpot Sans | 24px | 24px | 1.417 | 0px | 600 |
| Footer heading (visible text) | --text-h4-* | HubSpot Sans | 14px | 16px | 1.15 | 0px | 600 |
| Product card title / caps label | --text-h5-* | HubSpot Sans | 18px | 18px | 1.556 | 0px | 600 |
| Hero lead | --text-p-large-* | HubSpot Sans | 18px | 18px | 1.778 | 0px | 400 |
| Body | --text-p-medium-* | HubSpot Sans | 16px | 16px | 1.75 | 0px | 400 |
| Nav link / button medium | --text-label-m-* | HubSpot Sans | 16px | 16px | 1.75 | 0px | 600 |
| Card list / small text / eyebrow (caps) | --text-p-small-* | HubSpot Sans | 14px | 14px | 1.571 | -0.1px | 400 |
| Utility nav / footer links / copyright | --text-micro-* | HubSpot Sans | 12px | 12px | 1.667 | 0px | 500 |

## Layout

Measured on https://www.hubspot.com/: Measured from computed styles, CSS custom properties and screenshots of the live homepage at 1440 and 390 on 2026-10-31..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 110px | 16px |
| Section padding | 64px | 32px |
| Container max width | 1220px | full |
| Hero text width | max 1078px | full |
| Grid columns | 12 | 1 |
| Gutter | 24px | 16px |
| Card gap | 24px | 24px |
| Navigation height | 128px | 128px |

Breakpoints from HubSpot's CSS: px.

Homepage bands, top to bottom (observed):
1. Header
   - Desktop: 128px (52 + 76)
   - Phone: 58px: logo, Get a demo, hamburger
   - hairline shadow under it
2. Hero
   - Desktop: y 128-702
   - Phone: y 58-~790; H1 6 lines at 40px
   - orange full stop
3. Hero photo tiles
   - Desktop: y 702-1262, tiles 464x560
   - Phone: carousel 278x300 + dots
   - dark fade at the bottom of each tile
4. What is HubSpot?
   - Desktop: y 1262-1486
   - Phone: stacked
5. Customer logo row
   - Desktop: y 1486-1636
   - Phone: stacked
6. Product platform grid
   - Desktop: y 1636-3192
   - Phone: stacked cards
   - dashed card dividers
7. AI agents band
   - Desktop: y 3192-4203
   - Phone: one card at a time
   - warm gradient
8. Integrations panel
   - Desktop: y 4203-4533
   - Phone: icons on top, text below
9. Case studies header
   - Desktop: y 4533-4773
   - Phone: stacked
10. Tabbed testimonial
   - Desktop: y 4773-5487
   - Phone: stacked card
11. G2 badges
   - Desktop: y 5487-5703
   - Phone: 2 rows of 3
12. Closing CTA
   - Desktop: y 5703-6038
   - Phone: stacked
   - orange full stop
13. Footer
   - Desktop: y 6038-6699
   - Phone: accordion

## Page anatomy

How HubSpot's own landing pages are built, part by part (observed; https://www.hubspot.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: Two-row white header. Utility row (52px): language, High Contrast toggle, Customer Support, Contact Sales at left; search icon, Log in, About at right. Main row (76px): orange HubSpot logo, four menus, then two buttons at right. Phone: one 58px row with logo, a small orange Get a demo and a hamburger.
- ground: #FFFFFF; a faint shadow/hairline under the whole header at y 128 (render as box-shadow 0 1px 0 rgba(0,0,0,0.11))
- height: 128px desktop (utility 0-52, main 52-128); 58px phone
- border: bottom 1px rgba(0,0,0,0.11) look
- logo: variant full HubSpot wordmark with the sprocket "o", orange #FF4800; px 100x28; position desktop x 110, y 76 (vertically centred in the main row); phone x 16, y 14; file https://www.hubspot.com/hubfs/WBZ%202025%20Rebrand/HubSpot%20Logo/HubSpot%20Logo%20Zip/HubSpot%20Logos_2025.zip (HubSpot_Logo_Primary.svg)
- utility: labels left English (globe icon + chevron),High Contrast (toggle-switch icon),Customer Support (chat icon),Contact Sales (person icon); labels right search (magnifier icon),Log in,About (chevron); size 12px/20px Medium (500), #1F1F1F; icons 16px; left items at x 113, 225, 361, 518; right items: search x 1158, Log in x 1203, About x 1270; vertical centre y 26
- links: count 4; labels Products, Solutions, Pricing, Resources; dropdowns Products, Solutions and Resources carry an 18px chevron-down 6px after the label; Pricing has none; size 16px/28px; weight 500 (Medium); color #1F1F1F; alignment left group after the logo: Products x 254, Solutions x 374, Pricing x 496, Resources x 576 (about 32px between groups); in the captured resting state Resources is underlined (1px #1F1F1F, 4px offset)
- actions:
  - Get a demo: small primary button, #FF4800 fill, white 14/22 Medium, padding 8px 16px, 2px transparent border, radius 8px, 113x42 at x 1059, y 69
  - Get started free: small secondary button, #FFFFFF fill, 2px #FF4800 border, #FF4800 14/22 Medium text, radius 8px, 142x42 at x 1188 (16px after the demo button), y 69
- sticky: the main row sticks on scroll (not visible in a full-page capture)
- phone: shows logo 100x28 at x 16, y 14; Get a demo small primary 113x42 at x 213, y 8; 40x40 hamburger: three #1F1F1F bars 36px wide and 3px thick with rounded ends, 8px apart (the glyph fills the box; never thin 22px bars) at x 334, y 9; no utility row; menu full-height sheet with the menus as rows (not captured); cta Get a demo stays in the bar
- weights note: Every weight in the page anatomy is HubSpot's own CSS weight (300 = Book, 500 = Medium). Render them with typography.weight_map: anatomy 300 sans = Onest 400; anatomy 500 sans = Onest 600 (Onest 500 at 12px); anatomy 300 serif = Literata 320 (opsz auto, tracking 0). The type table lists the stand-in weights directly.
- phone page anchors:
  - header 0-58
  - hero 58-825: eyebrow text 130, H1 154-411 (6 lines), lead 438-556, buttons 601 and 685 (294x68)
  - hero tiles 825-1205: tile 278x300 at 825, arrows and dots row at 1163
  - What is HubSpot? 1205-1485: H2 text 1260, body 1325 (5 lines)
  - logo row 1485-1763: label box 1509 (x 40, 310x56, right border), marquee below, pause centred
  - product grid 1763-5193: chip 1778, H2 ~1850 (3 lines), body 1979, buttons ~2111 and ~2195 (358x68), first card 2319, last card ends 5153
  - AI agents band 5193-6359: chip 5258, button ~5333, H2 5418, body 5519, card 5705 (342x520), arrows 6265
  - integrations 6359-6895: panel 6399-6839 (358x440)
  - case studies header 6895-7223: chip 6910, button 6965, H2 7046, body 7147
  - testimonial 7223-8177: tabs 7225, card 7280-8162
  - G2 badges 8177-8499
  - closing CTA 8499-8923: padding 36 top, 40 bottom; H2 8535-8708, buttons 8747 and 8827
  - footer 8923-9669: first accordion heading 8940
- build order: Header, hero, hero photo tiles, What is HubSpot?, customer logo row, product platform grid, AI agents band, integrations panel, case studies header, tabbed testimonial, G2 badges, closing CTA, footer. Exactly these sections in this order; no announcement bar.

**Hero**
- summary: Centred white hero: a small caps eyebrow, a two-line 65px light serif headline ending in an orange full stop, a two-line lead, and two large buttons. Directly under it (no gap, section y 702) a full-bleed row of three tall photo tiles with serif captions on a dark fade.
- desktop: section y 128-702 (574 tall), #FFFFFF, padding 64px 0; column split one centred column; vertical anchors eyebrow text y 226 (box 224-246); H1 line 1 y 254-332 spans x 181-1259 (1078 wide), line 2 y 332-410 spans x 232-1194 (962 wide); lead line 1 y 439 (614 wide, x 413), line 2 y 471 (478 wide, x 481); buttons y 538-606; text max width H1 box 1078px (x 181-1259), breaks after "delight"; lead 614px (x 413-1027), breaks after "customer data,"; cta size Get a demo 183x68 at x 510; Get started free 220x68 at x 710 (17px gap); both large: 18/32 Medium, padding 16px 40px, radius 8px, 2px border; h1 calibration Literata 320, font-optical-sizing auto, letter-spacing 0, 65/78: line 1 renders about 1080px (x ~180-1260). Never negative tracking on headlines.
- phone: order eyebrow, H1, lead, two stacked buttons, then the photo-tile carousel; alignment centred text; hero content column is 294px wide (x 48-342), NOT 358: 48px side insets; sizes section starts y 58 under the nav with 72px to the eyebrow: eyebrow text y 130 (one line, 280 wide, x 55); H1 40px/41.8px, 6 lines, y 154-411, lines about 262-288 wide; lead 18/32 300, 4 lines, y 438-556; buttons 294x68 each at x 48: Get a demo y 601, Get started free y 685 (16px gap); hero section ends y 825 where the tile carousel starts; never never make the phone hero buttons full-bleed 358px; never start the eyebrow higher than y 120
- at rest: static: photos only in the tiles (the product animation videos inside each tile are animation only; do not draw them). The chat launcher bubble and the "Hi there" chat popup are a third-party widget: leave them out.
- media: tiles desktop band y 702-1262: three photo tiles 464x560 at x 16, 488, 960 (8px gaps, 16px outer margin), radius 0, object-fit cover. Each tile has an overlay linear-gradient(188deg, rgba(58,61,59,0) 28.2%, #1F1F1F 94.49%) and a caption in HubSpot Serif 28px/30.8px 300 #F8F5EE, left-aligned, positioned absolute at left 32px, bottom 32px, width 400px with NO extra right padding; every caption sets in exactly 2 lines (text block about 370-395 wide, top y 1166); captions All your customer data, right at your fingertips.,Marketing, sales, and service, finally on the same page.,AI you control. Results you can trust.; files https://www.hubspot.com/hs-fs/hubfs/hero-home-img1.webp,https://www.hubspot.com/hs-fs/hubfs/hero-home-img2.webp,https://www.hubspot.com/hs-fs/hubfs/hero-home-img3.webp; tiles phone a carousel: band y 825-1205; one 278x300 tile centred (x 56) with the neighbours peeking 40px at each edge (8px gaps); caption 28/31.5 300 in 4 lines; under it a row with a chevron-left (x 40), three 10px dots (active #1F1F1F, others #CFCCCB) centred, chevron-right (x 330), y 1170; the resting carousel shows tile 1 (All your customer data...) in the centre with tile 3 peeking left and tile 2 peeking right; caption inset 24px, 4 lines
- type: eyebrow HubSpot Sans 14/22 500 uppercase #1F1F1F; H1 HubSpot Serif 65/78 300 #1F1F1F, last "." #FF4800; lead HubSpot Sans 18/32 300 #1F1F1F centred
- cta: primary + secondary pair, primary left
- proof: none in the hero; the logo row follows two bands later
- copy: eyebrow HubSpot Agentic Customer Platform (CSS uppercase); h1 Build demand, win deals, and delight / customers — all on one platform.; lead line 1 HubSpot aligns marketing, sales, and service around your customer data,; lead line 2 so your teams and AI always know what customers need.; buttons Get a demo,Get started free

**What is HubSpot?**
- summary: Two-column intro on white: a 40px serif H2 at left, a 4-line body paragraph at right.
- ground: #FFFFFF
- desktop: band y 1262-1486; content starts 70px below the band top (H2 text y 1332, body text y 1338), 40px bottom padding; left H2 "What is HubSpot?" x 110, width 436, 40/44 300, 1 line, top y 1334; right body 16/28 300 #1F1F1F at x 894, width 436, 4 lines, top y 1334
- phone: band y 1229-1461; stack H2 32/36 300 at x 16 then body 16/28 300 (5 lines) 24px below; gutters 16px
- anatomy:
  - No eyebrow, no button
  - The two columns align at the top; the body column starts at x 894 (right edge 1330)
- copy: h2 What is HubSpot?; body 4 lines at 436px: one sentence saying HubSpot brings your teams, tools, AI and customer data together on one platform so every customer interaction drives growth; then three short real sentences: "Marketing generates better leads. Sales wins more deals. Customers stick around."

**Customer logo row**
- summary: A two-line caps label, a 1px vertical divider, then a continuously scrolling row of five grey-free full-color customer logos with a round pause button at the far right.
- ground: #FFFFFF
- desktop: band y 1486-1636, padding 40px 0; label "TRUSTED BY 306,000+ CUSTOMERS WORLDWIDE" HubSpot Sans 18/28 500 uppercase #1F1F1F, 2 lines (break after "CUSTOMERS"), text x 110 y 1536, inside a 329x56 box (x 110-439, y 1533) whose RIGHT border is the divider: 1px solid rgba(0,0,0,0.11), 56px tall; marquee logos 142x70 each (object-fit contain, about 16px apart) from x ~460 to x 1290, faded at both edges with a 10% white gradient; order eBay, DoorDash, Reddit, Tripadvisor, Eventbrite, repeating; resting capture shows Reddit, Tripadvisor, Eventbrite, eBay, DoorDash; pause 32x32 white round button with a #000000 pause glyph at x 1298, y 1545
- phone: band y 1485-1723, padding 24px 16px; stack label LEFT-aligned at x 40 (never centred), same 310x56 box with its 1px right border at x 350; then the marquee row (two logos visible, 142x70) below; then the 32px pause button centred
- anatomy:
  - Logos keep their own brand colors (Reddit orange, Tripadvisor black, Eventbrite orange, eBay multicolor, DoorDash red)
  - Supplied files: customer-logo-*.svg

**Product platform grid**
- summary: Cream band. Left: a sticky column with a "Powered by AI" chip and dotted rule, a 3-line 40px serif H2, a 4-line body and a medium button pair. Right: ten white bordered cards in two columns, one per product.
- ground: #FCFCFA
- desktop: band y 1636-3192, padding 64px 0 (content y 1700-3128); left column x 110-509 (399 wide), sticky; chip y 1708 (138x32) with a 1px dotted rgba(0,0,0,0.11) rule from the chip end to x 509 at the chip mid-line; H2 "Growing a business is hard. HubSpot makes it easier." 40/44 300, 3 lines, y 1780-1912; body 16/28 300, 4 lines, y ~1936-2048; buttons y 2088: Get a demo 140x56 (x 110), Get started free 173x56 (x 266, 16px gap), medium size 16/28 Medium, padding 12px 24px; grid x 533-1330: 2 columns of 387px (col 1 x 533, col 2 x 943; 23px gap), 24px row gap. Cards in a row are EQUAL height (grid align-items stretch). Row tops and heights: row 1 y 1700, 266 tall; row 2 y 1990, 288; row 3 y 2302, 246; row 4 y 2572, 266; row 5 y 2862, 266; grid ends y 3128, band ends y 3192. The left column is sticky; its button row is at y 2088.; order Marketing Hub®, Sales Hub® | Service Hub®, Content Hub™ | Data Hub™, Revenue Hub™ | Smart CRM™, Agent Hub™ | Small Business Bundle, AEO (Beta)
- phone: band y 1763-5153; stack chip + dotted rule, H2 32/36 300 (3 lines), body (4 lines), then two full-width medium-tall buttons (358x68 large size), then the ten cards one per row, 358 wide, 24px apart, same internal anatomy (padding 28px); cards 358 wide at x 16, 24px apart; heights follow content: 246, 288, 288, 266, 288, 246, 246, 266, 218, 266 (first card top y 2319)
- anatomy:
  - Card: #FFFFFF, 1px solid rgba(0,0,0,0.11), radius 16px, no shadow, padding 32px 32px 24px
  - Card header row: 24px orange line icon, 10px gap, title HubSpot Sans 18/28 500 #1F1F1F with ® or ™ as a superscript; Small Business Bundle and AEO (Beta) have no icon
  - 16px under the header: 1px dashed rgba(0,0,0,0.11) divider (card inner width 321)
  - 16px under it: a list of 1-2 items, each a 16px #FF4800 check icon then 14/22 300 #1F1F1F text indented 34px from the card content edge, 6px between items
  - Then 16px space, another dashed divider, 16px space, then "Learn more" 14/22 Medium #1F1F1F followed by a 16px right arrow (no underline)
  - List copy per card is HubSpot's product copy (see the reference); keep each item to one short sentence
  - Card list text is 14/22 with letter-spacing -0.1px in Onest 400 (measure 287px after the 34px indent) so items wrap exactly where HubSpot's do; never let rows grow past the stated heights: rows are fixed at 266, 288, 246, 266, 266
  - "AEO (Beta)" is plain title text, same 18/28 Medium #1F1F1F as the other titles: no badge, no purple
- components:
  - product_card
  - tagline_chip
  - button_primary_on_light
  - button_secondary_on_light
- copy: chip Powered by AI; h2 Growing a business is hard. HubSpot makes it easier. (3 lines: "Growing a business is / hard. HubSpot makes / it easier."); body 4 lines: Disconnected tools and data slow you down; HubSpot connects everything and everyone in one place (paraphrase; keep it 4 lines at 399px); cards Marketing Hub®: Attract and convert the right leads. | Run campaigns, personalize content, and track it all.,Sales Hub®: Generate quality leads and close deals, faster. | Automate prospecting, manage pipeline, and accelerate revenue growth.,Service Hub®: Streamline and scale support to serve customers faster. | Drive retention with actionable insights and customer health scores.,Content Hub™: Create content that clicks with your audience. | Build pages, publish content across channels, and stay on brand.,Data Hub™: Turn scattered data into unified intelligence. | Combine, clean, and activate customer data across every tool.,Revenue Hub™: Make it easy for customers to pay you. | Send quotes, collect payments, and manage subscriptions.,Smart CRM™: All your customer data in one place. | Keep your data clean, connected, and actionable.,Agent Hub™: Deploy and manage AI agents across the platform. | Build new agents tailored to your business, powered by your data.,Small Business Bundle: The Starter edition of each product, at one low price.,AEO (Beta): See where your brand shows up in AI results. | Get recommendations to improve your visibility.; copy source https://www.hubspot.com/ (product card lines as published, 2026-10-31; Service and Data lines shortened)

**AI agents band**
- summary: Full-width warm gradient band: an icon-only chip with a dotted rule running to an outline "Explore Agent Hub" button, a 2-line serif H2 at left and a 3-line body at right, then a carousel of three white agent cards with round arrows and a pause button.
- ground: #FCDED2 + warm gradient (signature warm-gradient)
- desktop: band y 3192-4203, padding 64px 0 (content x 118-1322); header icon chip 66x66 at x 118, y 3264 (white, 1px rgba(0,0,0,0.11), radius 16px, padding 16px, Agent Hub icon 32px orange); dotted rule from x 200 to x 1110 at y 3297; outline button "Explore Agent Hub" 196x56 at x 1126, y 3269 (transparent fill, 2px #1F1F1F border, 16/28 Medium #1F1F1F, radius 8px); h2 "Built-in AI agents that work for you 24/7." 40/44 300, 2 lines, x 118, width 436, y 3370; body 16/28 300 at x 886, width 436, 3 lines, y 3370; carousel resting state as captured: three EQUAL cards, each 367x545, tops level at y 3522, bottoms level at y 4067, at x 166, 537 and 907 (3-4px gaps); no scaling, no vertical offset. Only the centre card shows a "Learn more" text link. Round white 48px arrow buttons (chevrons #000000) at x 118 and x 1274, y 3771 overlap the outer card edges; a 32px white round pause button centred at x 704, y 4107; card white, radius 16px, no border, padding 24px 24px 32px; top image 319x319, radius 16px; title HubSpot Sans 24/34 500 centred 24px below the image; description 16/28 300 centred, 2 lines; centre card adds "Learn more" 16/28 Medium with a 2px #FF4800 underline offset 6px; order at rest Prospecting Agent (left), Data Agent (centre, with Learn more), Customer Agent (right)
- phone: band y 5193-6359; stack icon chip + dotted rule; Explore Agent Hub outline button centred under the chip row (y ~5333); H2 32/36 300 in 2 lines at x 24 (y 5418); body 16/28 in 4 lines (y 5519); then one 342x520 card (x 24, image 294x294) with chevron buttons below and a pause button; the resting phone card is Customer Agent (x 24)
- anatomy:
  - The images are HubSpot product-UI crops on cream (supplied agent-*.webp/png); place them, never redraw
  - Card titles: Prospecting Agent, Data Agent, Customer Agent
- copy: h2 Built-in AI agents that work for you 24/7.; body 3 lines at 436px: AI agents are always-on teammates; they can resolve over 65% of customer inquiries, speed up the sales pipeline, and flag accounts showing interest (paraphrase; 65% is HubSpot's published claim); cards Prospecting Agent: Spot buying signals, source contacts, and launch personalized outreach — instantly.,Data Agent: Know which accounts are ready to buy and why.,Customer Agent: Resolve inquiries, take action in your CRM, and hand off with full context.

**Integrations panel**
- summary: A single wide white panel: a 2-line 24px Medium heading and an orange-underlined text link on the left half; a cloud of tilted app icons (Slack, Zapier, Google Ads, Mailchimp, Shopify, Gmail) clipped by the panel on the right half.
- ground: #FCFCFA band; panel #FFFFFF
- desktop: band y 4203-4533, padding 64px 0 24px; panel x 110-1330, y 4267-4509 (1220x242), 1px solid rgba(0,0,0,0.11), radius 16px, overflow hidden; left heading "Works with the tools you already use. 2,000+ integrations." HubSpot Sans 24/34 500 #1F1F1F, 2 lines, x 191 (80px inset), width 561, top y 4340; link "See all app integrations" 16/28 Medium #1F1F1F with a 2px #FF4800 underline (offset 6px) at y 4424; right place integrations-cloud-desk.png (1218x480 = 609x240 at 2x) filling the right half of the panel: x 720-1329, y 4268-4508, no extra framing
- phone: band y 6399-6839; panel 358x440 at x 16: the icon image integrations-cloud-phone.png (712x400 = 356x200 at 2x) at the top of the panel, then the heading 24/34 500 in 3 lines starting about 250px below the panel top at x 49 (32px inset), then the link 24px below
- anatomy:
  - Icons are tilted about 15 degrees and drift diagonally in the live page; the resting state is the supplied capture
- copy: heading Works with the tools you already use. 2,000+ integrations. (2 lines desktop, break after "use."); link See all app integrations

**Case studies header**
- summary: Section header: a "Case Studies" chip with a dotted rule to an outline "See all case studies" button, a 2-line serif H2 at left and a 2-line body at right.
- ground: #FCFCFA
- desktop: band y 4533-4773, padding 64px 0 0; header chip "Case Studies" 101x32 at x 110, y 4609 (white, 1px rgba(0,0,0,0.11), radius 4px, padding 4px 8px, 14/22 Medium); dotted rule to x 1110; outline button "See all case studies" 197x56 at x 1133, y 4597; h2 "Remarkable results for every size business." 40/44 300, 2 lines, x 110, width 436, y 4685; body 16/28 300, x 894, width 436, 2 lines, y 4685
- phone: band y 6895-7199; stack chip, H2 32/36 300, body, then the outline button full width (358x56)
- anatomy:
  - Same header pattern as the AI agents band, with a text chip instead of an icon chip
- copy: chip Case Studies; h2 Remarkable results for every size business. (2 lines); body 2 lines: scale your business with HubSpot; the proof is in customers' success (paraphrase); button See all case studies

**Tabbed testimonial**
- summary: Three text tabs (Enterprise active with a 4px orange bar), then one wide white card: photo left, quote, name, title and an orange-underlined link right, then two serif statistics split by a vertical rule.
- ground: #FCFCFA
- desktop: band y 4773-5487 (container y 4813-5463); tabs centred row at y 4815: Enterprise (x 506, 110 wide), Mid-Sized Business (x 616, 176), Small Business (x 791, 143); 16/28 Medium, padding 8px 16px 4px, 44 tall; active #1F1F1F with a 4px solid #FF4800 bottom border; inactive rgba(0,0,0,0.62) with a transparent bottom border; card x 110-1330, y 4891-5431 (1220x540), white, 1px solid rgba(0,0,0,0.11), radius 16px, padding 24px; photo testimonial-unipart.png at x 135, y 4916, 600x394 (radius 0, cover), left column; the quote column starts 40px right of it at x 775; quote 16/28 300 #1F1F1F at x 775, width 514, 5 lines from y 4940; name "Adam Jones" 16/28 500 at y 5104; title 14/22 300 at y 5132; "Read full case study" 16/28 Medium with 2px #FF4800 underline at y ~5160; stats y 5334-5407: two equal columns (x 135 and x 745, 561 wide) split by a 1px rgba(0,0,0,0.11) vertical rule; numeral HubSpot Serif 40/44 Medium 500 centred ("12", "5"); description 14/24.5 300 centred under it
- phone: band y 7223-8162; stack tabs scroll horizontally (Enterprise first, third tab clipped at the edge); card 358 wide with padding 24px: photo full width (310x200, radius 0), quote 7 lines, name, title, link, then statistic 1, a horizontal 1px rule, statistic 2, all centred
- anatomy:
  - Desktop photo: 600x394 at card x+25, y+25; quote, name, title and link stacked in the right column (x 775, 514 wide) top-aligned with the photo + 24px
  - The statistics are the case study's published numbers: 12 (months for the pipeline to grow from millions to billions) and 5 (point increase in NPS)
- components:
  - tab
  - testimonial_card
- copy: tabs Enterprise,Mid-Sized Business,Small Business; quote A first-person customer quotation in curly quotes, 5 lines at 514px desktop (7 phone), four sentences. It opens: "HubSpot took the time to understand our business needs fully." The rest praises pre-sales support, side-by-side implementation and a commitment met (paraphrase; full quote on the source page).; name Adam Jones; title Director of Business Development, Unipart; link Read full case study; stats 12 — months for the pipeline to grow from millions to billions,5 — point increase in net promoter score (NPS); source https://www.hubspot.com/; never never turn the quote into third-person narration; never shorten the title to the company name; other tabs Mid-Sized Business and Small Business tabs hold other customer stories not captured here; at rest only Enterprise shows. Build the tabs; the inactive panels can stay empty.

**G2 badges**
- summary: A 24px Medium line "Voted #1 in 526 G2 Reports" at left and six 80px G2 award shields in a row at right.
- ground: #FCFCFA
- desktop: band y 5487-5703, padding 40px 40px 96px; text HubSpot Sans 24/34 500 #1F1F1F at x 150, y 5550, 1 line; badges six 80x80 PNGs at x 538, 642, 746, 850, 954, 1058 (24px gaps), y 5527
- phone: band y 8177-8499, padding 24px 16px 64px; stack text centred 24/34 500 (1 line), then badges in 2 rows of 3 (80px, about 26px apart), centred
- anatomy:
  - Badge order: Leader (Small Business), Most Implementable, Best Relationship (Small Business), Easiest Admin (Enterprise), Best Results (Mid-Market), Best Usability (Enterprise)

**Closing CTA**
- summary: Dark teal band: a 2-line 48px serif headline in cream ending with an orange full stop, then a primary and a cream outline button.
- ground: #042729
- desktop: band y 5703-6038, padding 64px 0; h2 "Make impossible growth feel impossibly easy, with HubSpot." HubSpot Serif 48/55.4 300 #F8F5EE, left-aligned, x 110, 2 lines (breaks before "HubSpot"), y 5767-5878; final "." #FF4800; buttons y 5918: Get a demo 140x56 (#FF4800, white text) at x 110; Get started free 173x56 at x 274 (24px gap): transparent/dark fill rgba(0,0,0,0.11), 2px #F8F5EE border, #F8F5EE text; medium size
- phone: band y 8499-8923, padding 36px 16px 40px; stack H2 40/41.8 300 in 4 lines at x 16 (y 8535-8708); buttons full width 358x56 at y 8747 and 8827 (24px gap)
- anatomy:
  - Left-aligned, unlike the centred hero
- copy: h2 Make impossible growth feel impossibly easy, with / HubSpot.; buttons Get a demo,Get started free

**Footer**
- summary: #1F1F1F footer: five link groups in four columns (Popular Features spans two link columns, then a vertical rule), a social icon row between two hairlines, the cream HubSpot logo, a copyright line and an underlined legal row.
- ground: #1F1F1F, padding 48px 32px
- anatomy:
  - Columns (desktop, y 6093): Popular Features (x 110, links in two sub-columns at x 110 and x 362), then a 1px rgba(255,255,255,0.2) vertical rule at x ~597 spanning y 6085-6410, then Free Tools (x 650), Company (x 877), Customers (x 1103) with Partners stacked under Customers (y 6221)
  - Headings: the visible text is HubSpot Sans 14px Medium #F8F5EE (14/16.1; text box 17px tall at y 6092) — NOT 22px; links 12px/28.8px Medium rgba(255,255,255,0.62), 33px row pitch, no underline
  - Popular Features col A: All Products and Features, HubSpot AEO, Free Meeting Scheduler App, Email Tracking Software, AI Content Writer, AI Website Generator, Email Marketing Software, Lead Management Software, AI Prospecting Agent | col B: Free Website Builder, Free Landing Page Builder, Free Online Form Builder, Free Chatbot Builder, Free Live Chat Software, Marketing Analytics, Breeze Assistant, Free Web Hosting
  - Free Tools: See All Free Business Tools, AEO Grader, AI Search Sensor, Make My Persona, Email Signature Generator, Free Business Templates, Software Comparisons Library, Website Templates, Connector for Claude
  - Company: About Us, Careers, Management Team, Board of Directors, Investor Relations, Blog, Sustainability, AI Instructions, Contact Us
  - Customers: Customer Support, Join a Local User Group | Partners: All Partner Programs, Solutions Partner Program, Technology Partner Program, HubSpot for Startups, Affiliate Program
  - Social row at y ~6480 (about 50px under the last link): two 1px rgba(255,255,255,0.4) hairlines from x 110 to ~465 and ~975 to 1330, with seven 24px icons centred between them in rgba(255,255,255,0.62): Facebook, Instagram, YouTube, X, LinkedIn, Reddit, TikTok (about 58px apart)
  - Logo: cream #F8F5EE HubSpot wordmark 100x28 centred at y 6546; copyright "Copyright © 2026 HubSpot, Inc." 12/20 Medium rgba(255,255,255,0.62) centred at y 6594; legal row text y 6622
  - Legal row centred: Legal Center | Privacy Policy | Security | Website Accessibility | Manage Cookies | [privacy-choices toggle icon] Your Privacy Choices; 14px Medium #F8F5EE underlined, separated by 1px rgba(255,255,255,0.4) vertical bars 16px tall
  - Footer height 661 at 1440 (y 6038-6699)
  - Popular Features sub-column B starts at x 362 (re-measured from the 1440 capture after round 3; sub-column A is 252px wide).
- phone: Accordion: Popular Features, Free Tools, Company, Customers, Partners as 55px rows (16px Medium #F8F5EE, first heading text y 8940, chevron-right at the right edge, 1px rgba(255,255,255,0.2) dividers); then 7 social icons in a row; App Store and Google Play badges side by side (black, white outline); cream logo centred; copyright; legal links wrapping in 3 centred lines
- logo: https://www.hubspot.com/hubfs/WBZ%202025%20Rebrand/HubSpot%20Logo/HubSpot%20Logo%20Zip/HubSpot%20Logos_2025.zip (HubSpot_Logo_Cream.svg)

**On dark grounds**
- secondary button: transparent/rgba(0,0,0,0.11) fill, 2px #F8F5EE border, #F8F5EE text, radius 8px
- link: #F8F5EE with a 2px #FF4800 underline
- muted text: rgba(255,255,255,0.62)
- hairline: rgba(255,255,255,0.0784) dividers; rgba(255,255,255,0.4) borders
- logo variant: cream #F8F5EE wordmark (HubSpot_Logo_Cream from the newsroom zip)

## Components

- **button primary on light** (observed): fill #FF4800, text #FFFFFF, border 2px solid transparent, radius 8, padding 12px 24px (medium); 8px 16px small; 16px 40px large, height 56, example Get a demo (140x56), transition background-color .15s linear, color .15s linear, text style 16/28 HubSpot Sans Medium (14/22 small, 18/32 large), padding x 24, font size 16, weight 600, face body, sizes small 42 tall: 14/22, padding 8px 16px; medium 56: 16/28, 12px 24px; large 68: 18/32, 16px 40px
  - hover (observed): background-color #C93700
  - pressed (observed): background-color #9F2800
- **button secondary on light** (observed): fill #FFFFFF, text #FF4800, border 2px solid #FF4800, radius 8, padding same as primary, example Get started free (173x56), height 56, padding x 24, font size 16, weight 600, face body, ring px 2, ring #FF4800
  - hover (observed): background-color #FCECE6, color #C93700, border-color #C93700
  - pressed (observed): background-color #FCC6B1, color #9F2800
- **button outline on light** (observed): fill none, text #1F1F1F, border 2px solid #1F1F1F, radius 8, padding 12px 24px, height 56, example Explore Agent Hub (196x56), See all case studies (197x56), padding x 24, font size 16, weight 600, face body, ring px 2, ring #1F1F1F
- **button secondary on dark** (observed): fill none, text #F8F5EE, border 2px solid #F8F5EE, radius 8, padding 12px 24px, example Get started free on the teal CTA (173x56), height 56, padding x 24, font size 16, weight 600, face body, ring px 2, ring #F8F5EE
  - hover (observed): background-color rgba(0,0,0,0.2)
- **text link** (observed): text #1F1F1F, underline color #FF4800. 16/28 Medium (14/22 small); 2px #FF4800 underline, text-underline-offset 6px; hover changes the offset over 0.3s ease-in-out
- **arrow link** (observed): text "Learn more" 14/22 Medium #1F1F1F, no underline, then a 16px right arrow 6px after
- **tagline chip** (observed): fill #FFFFFF, border 1px solid rgba(0,0,0,0.11), radius 4, padding 4px 8px, text 14/22 Medium #1F1F1F, optional 16px icon 8px before, icon only 66x66, radius 16, padding 16, 32px icon, rule 1px dotted rgba(0,0,0,0.11) from the chip to the section edge or the section button, 16px clear on each side
- **product card** (observed): fill #FFFFFF, border 1px solid rgba(0,0,0,0.11), radius 16, padding 32px 32px 24px, divider 1px dashed rgba(0,0,0,0.11), size 387 wide desktop, 358 phone, row heights desktop rows 266, 288, 246, 266, 266 (cards in a row equal)
- **agent card** (observed): fill #FFFFFF, border none, radius 16, padding 24px 24px 32px, image square, radius 16, size 367x545 desktop (all three equal at rest), 342x520 phone; image 319 desktop, 294 phone
- **testimonial card** (observed): fill #FFFFFF, border 1px solid rgba(0,0,0,0.11), radius 16, padding 24
- **tab** (observed): text #1F1F1F, active #1F1F1F text, 4px solid #FF4800 bottom border, inactive rgba(0,0,0,0.62), transparent border, padding 8px 16px 4px. 16/28 Medium; inactive rgba(0,0,0,0.62)
- **round control** (observed): fill #FFFFFF, size 48px arrows, 32px pause, radius 9999, icon #000000, shadow none, shape circle (border-radius 50%)
- **check list** (observed): icon 16px #FF4800 check, text 14/22 300, indent 34, gap 6

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-color | linear | 150ms | button background and text color on hover/press | observed |
| text-link-underline | ease-in-out | 300ms | text-link underline offset change on hover | observed |
| carousel-slide | ease | 300ms | agent carousel and hero phone carousel slide translate/scale | observed |
| marquee | linear |  | customer logo row scrolls left continuously; a round pause button stops it | observed |
| integrations-cloud | linear |  | the integration icons drift diagonally inside their panel. Resting state = the supplied image | observed |
| hero-tile-video | n/a |  | each hero photo tile can play a short product animation; the resting state a screenshot shows is the photo only | observed |

## Icon tokens

Grid not published, stroke single-weight orange line icons with rounded ends (product hub icons) (observed).
| Name | Size | Use |
|---|---|---|
| product | 24px | product hub icons in cards |
| chip | 32px | Agent Hub icon in a 66px chip |
| ui | 16px | check, arrow, sparkle |

## Signature moves

### The orange full stop

Where: end of the hero H1 and the closing CTA H2.
Do: the final "." of the headline is wrapped and colored #FF4800; the rest of the headline stays #1F1F1F (or #F8F5EE on teal).
Don't: color whole words orange or add other punctuation color.

### Light serif headlines over a plain sans

Where: every H1/H2 and the hero tile captions.
Do: HubSpot Serif Book (300) for headlines at 40-65px, HubSpot Sans for everything else; headlines never bold.
Don't: set headlines in the sans or in bold.

### Orange is for action

Where: buttons, link underlines, check icons, active tab bar, logo.
Do: #FF4800 is used on interactive or brand marks only; grounds stay white, cream #FCFCFA, teal #042729 or #1F1F1F.
Don't: use orange as a section ground.

### Tagline chip with a dotted rule

Where: section headers (Powered by AI, Case Studies, the Agent Hub icon chip).
Do: white chip, 1px rgba(0,0,0,0.11) border, radius 4px (16px for the icon-only chip), padding 4px 8px, 14/22 Medium; a 1px dotted rgba(0,0,0,0.11) line runs from the chip to the far edge (or to the section button on the right).
Don't: use a filled colored pill.

### Bordered white cards with dashed inner rules

Where: product grid, testimonial card.
Do: white fill, 1px solid rgba(0,0,0,0.11), radius 16px, no shadow; 1px dashed rgba(0,0,0,0.11) dividers between header, list and link.
Don't: drop shadows or colored card fills.

### Warm agent gradient band

Where: the AI agents band only.
Do: #FCDED2 base under linear-gradient(257deg, rgba(251,221,208,.3) -32.4%, rgba(255,165,129,.3) -3.42%, rgba(255,73,0,.3) 23.87%, rgba(251,223,233,.3) 50.46%, rgba(253,191,219,.3) 79.15%, rgba(249,57,166,.3) 103.64%); renders pink at the left, peach-orange at the right.
Don't: use it behind body text sections or on more than one band.

## Messaging: rules

The homepage sells one idea: everything on one platform around shared customer data, with AI agents built in. Proof is numeric and current (306,000+ customers, 2,000+ integrations, #1 in 526 G2 reports).

Why it works: A broad suite needs one simple frame; "one platform" does that job.

- Lead with the outcome (demand, deals, delighted customers), then the platform
- Back claims with the number HubSpot publishes that day

Sources: https://www.hubspot.com/, https://www.hubspot.com/newsroom, https://www.hubspot.com/our-story

## Voice: rules

Plain, warm sentence-case declaratives that end with full stops, often two short balanced clauses. Second person. Em dashes with spaces.

Why it works: It reads like a helpful colleague, matching the "grow better" mission.

|  |  |
|---|---|
| Headline case | sentence |
| Headline end | full stop, orange on hero and closing CTA |

- Sentence case, full stop on headlines
- Capital S in HubSpot (published)
- No Hub-mashup names (published)
- Don't Unverifiable superlatives in partner copy (published)

Sources: https://www.hubspot.com/, https://www.hubspot.com/partners/app/branding-guidelines, https://www.hubspot.com/partners/promotion-guidelines

## Logo: rules

A wordmark with the sprocket as the "o". The 2025 newsroom zip ships two versions: Primary (orange #FF4800) and Cream (#F8F5EE). The site uses orange on white and cream on the dark footer.

Why it works: The sprocket is the recognizable mark ("big, orange, pretty recognizable" in HubSpot's words).

|  |  |
|---|---|
| Versions | Primary orange, Cream (newsroom zip 2025) |
| Clear space | not published |
| Minimum size | not published |
| Site size | 100x28 in nav and footer (observed) |

- Use only current, unmodified logo files
- Keep the original colors and proportions
- Partners use partner badges, not the company logo, unless approved
- Don't Change the logo color
- Don't Photoshop or modify the logo
- Don't Use old versions
- Don't Use the sprocket as a letter in another word
- Don't Add words directly around the logo
- Don't Overlap the logo with shapes or photos
- Don't Translate the marks
- Don't Skew or distort proportions

Sources: https://legal.hubspot.com/tm-usage-guidelines, https://www.hubspot.com/partners/app/branding-guidelines, https://www.hubspot.com/newsroom, https://www.hubspot.com/hubfs/WBZ%202025%20Rebrand/HubSpot%20Logo/HubSpot%20Logo%20Zip/HubSpot%20Logos_2025.zip

## Color: rules

One hot orange (#FF4800) for action and the logo on neutral grounds: white, a near-white cream #FCFCFA, near-black #1F1F1F text and footer, and a deep teal #042729 for the closing band. A 16-step token scale exists for orange, teal, cream, neutral, sage, lavender, magenta, purple, yellow, green and red.

Why it works: Orange stays rare so every button reads; warm neutrals keep it friendly rather than corporate.

|  |  |
|---|---|
| Accent | #FF4800 |
| Ink | #1F1F1F |
| Page | #FCFCFA |
| Dark | #042729 |

- Orange for buttons, links, checks and the logo; never a section ground
- Body text #1F1F1F, never pure black
- Dark grounds: teal #042729 for CTAs, #1F1F1F for the footer; text on dark is cream #F8F5EE
- Don't Recolor the logo (published)

Not published: Brand color names, ratios and contrast rules are not published; values come from the site CSS tokens.

Do and don't:
- Do: "Get a demo". Orange for the action
- Don't: "Get a demo". Orange as a ground

Sources: https://www.hubspot.com/, https://legal.hubspot.com/tm-usage-guidelines

## Typography: rules

Two proprietary faces from the 2025 rebrand: HubSpot Serif (light Book 300 for every headline) and HubSpot Sans (Book 300 for text, Medium 500 for UI). Stand-ins: Literata 320 and Onest 400/600, calibrated by rendered width and ink.

Why it works: A light serif headline gives warmth and editorial calm over a friendly geometric-humanist sans.

|  |  |
|---|---|
| Headline | HubSpot Serif Book 300 (Literata 320) |
| Text | HubSpot Sans Book 300 (Onest 400) |
| UI | HubSpot Sans Medium 500 (Onest 600) |

- Headlines in the serif at weight 300, sentence case
- Sans for body, buttons, nav, labels
- Caps only for the small eyebrow and logo-row label
- Don't Bold serif headlines
- Don't Serif body text

Sources: https://www.hubspot.com/

## Graphic elements: rules

The orange full stop, tagline chips with dotted rules, white bordered 16px-radius cards with dashed inner dividers, and one warm pink-to-peach gradient band.

Why it works: Small, repeatable marks make pages recognisable without the logo.

|  |  |
|---|---|
| Card radius | 16px |
| Button radius | 8px |
| Chip radius | 4px |

- One gradient band per page at most
- Cards: border, no shadow
- Don't Drop shadows
- Don't Colored card fills

Sources: https://www.hubspot.com/

## Iconography: rules

Each product has an orange single-weight line icon (24px in cards); UI glyphs are thin and dark.

|  |  |
|---|---|
| Product icon | 24px orange line |
| Grid | not published |

- Orange line icon per product
- Checks in orange
- Don't Filled multicolor icons for HubSpot products

Sources: https://www.hubspot.com/

## Illustration: rules

No drawn illustration on the homepage; product UI crops (agent chats, property dialogs) on cream cards stand in for it.

Why it works: Showing the product is the illustration.

|  |  |
|---|---|
| Style | product UI on cream, 16px radius |

- Use real product UI crops with rounded corners
- Don't Generic 3D illustrations

Sources: https://www.hubspot.com/

## Photography: rules

Warm, natural-light candid portraits of people at work: shallow depth of field, cafe and office interiors with plants and lamps, earthy palette, subjects looking down at work or smiling off-camera.

|  |  |
|---|---|
| Ratio | 464x560 tiles (0.83) |
| Overlay | 188deg fade to #1F1F1F |

- Real people mid-task, warm light
- Tall crops (about 4:5) with captions on a dark bottom fade
- Don't Posed stock smiles at the camera

Sources: https://www.hubspot.com/

## Motion: rules

Motion is ambient and functional: marquee logos, a drifting integrations cloud, carousels at 300ms ease, buttons at 150ms linear.

|  |  |
|---|---|
| Button | 150ms linear |
| Carousel | 300ms ease |

- Every looping motion gets a pause control
- Don't Decorative motion on text

Sources: https://www.hubspot.com/

## Interface and layout: rules

1220px content column at 110px margins; two-column headers (H2 left, body right at 894); white top half, cream lower half, teal and charcoal at the end.

- Section padding 64px
- Two-column header pattern for every section

Not published: Grid spec not published.

Sources: https://www.hubspot.com/

## Rules: rules

- Write HubSpot with a capital S
- Use the HubSpot name only referentially, less prominent than your own
- Keep logo colors and proportions
- Don't Combine HubSpot marks with your name or logo
- Don't Use "inbound"/"unbound" event names
- Don't Register domains with HubSpot marks
- Don't Use HubSpot marks in ad creative

Sources: https://legal.hubspot.com/tm-usage-guidelines, https://www.hubspot.com/partners/app/branding-guidelines, https://www.hubspot.com/partners/promotion-guidelines, https://www.hubspot.com/providers/template/branding-guidelines

## Campaigns

### 2025 brand refresh (2025)

New logo files (HubSpot Logos_2025), HubSpot Sans and Serif, and the 2025 token scale on the site

How the system shows: orange #FF4800 logo and buttons, light serif headlines, warm cream grounds (observed)
Why it works: warmer and calmer than the previous coral-and-slate look (inferred)
Channels: web, logo, type. Source: https://www.hubspot.com/hubfs/WBZ%202025%20Rebrand/HubSpot%20Logo/HubSpot%20Logo%20Zip/HubSpot%20Logos_2025.zip

## Applications

| Format | What | Source |
|---|---|---|
| Partner badges | Tier and certified-app badges partners may not alter | https://www.hubspot.com/partners/app/branding-guidelines |

## By format

A landing page follows the homepage anatomy and voice. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | full | serif 300 headline with orange full stop, orange primary + secondary buttons, bordered 16px cards on cream, teal closing CTA, #1F1F1F footer | which sections, gradient band optional |

## Checks before anything ships

- **Logo hidden**: Cover the logo. A light serif headline ending in an orange full stop over orange 8px buttons on warm white still reads as HubSpot.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is HubSpot's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Brand color names, proportions and contrast rules: not published (site tokens only).
- Logo clear space and minimum size: not published.
- Typography rules and type scale: not published (measured from the site).
- Photography, illustration, icon and motion guidelines: not published (observed).
- Voice and tone guide: not published publicly (observed from the site).
- The internal Creative Solutions style guide and Brandfolder vendor kit are private.

Logos and reference images belong to HubSpot. Look at them on HubSpot's own pages; don't reuse them.