One platform
Marketing, sales, service, content, data and revenue on one platform around shared customer data. Observed
The system
Fixed, everywhere
- #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.
Source: hubspot.com
How loud each format gets
Silent
Quiet
Calm
Warm
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes 1 checks
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.
Strategy
The agentic customer platform that helps scaling businesses grow better. Published
AI you control
Built-in AI agents (prospecting, data, customer) that work around the clock, grounded in your CRM data. Observed
Easy growth
Growing a business is hard; HubSpot makes it easier and connects everyone in one place. Observed
Build demand, win deals, and delight customers — all on one platform.
Growing a business is hard. HubSpot makes it easier.
Full spec
- For Published
- Scaling organizations, from startups and small businesses to enterprises, and their customer-facing teams
- Problem Observed
- Disconnected tools and data slow growing businesses down
- Promise Observed
- Everything and everyone connected in one place, so growing a business is easier
- Mission Published
- Helping millions of organizations grow better
Proof behind each pillar
- One platform. Eight connected products: Marketing, Sales, Service, Content, Data and Revenue Hubs, Smart CRM and Agent Hub
- One platform. 2,000+ integrations
- AI you control. AI agents can resolve over 65% of customer inquiries (HubSpot's homepage claim)
- Easy growth. 306,000+ customers worldwide
- Easy growth. Voted #1 in 526 G2 Reports (homepage figure on 2026-10-31; the About page shows 571)
Story Published
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.)
Values
Category. Agentic customer platform (CRM plus marketing, sales and service software) Published
Why them
- Every product sits on the same Smart CRM database Published
- AI agents built into the platform, grounded in customer data Observed
- 2,000+ App Marketplace integrations Published
- Free tools and a free CRM as the way in ("Get started free") Observed
Instead of
Stitched-together point tools ("crafted, not cobbled" is the contrast)
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 Published
Build demand, win deals, and delight customers — all on one platform. Observed
Make impossible growth feel impossibly easy, with HubSpot. 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)
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).
Source: hubspot.comhubspot.com/newsroomhubspot.com/our-story
Personality and voice
warmbut not cute
plain-spokenbut not jargon-heavy
confidentbut not boastful
helpfulbut not pushy
It reads like a helpful colleague, matching the "grow better" mission.
Full spec
- 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
plainwarmconfidenthelpfulhuman
Plain, warm sentence-case declaratives that end with full stops, often two short balanced clauses. Second person. Em dashes with spaces.
- Sentence case, full stop on headlines
- Capital S in HubSpot (published)
- No Hub-mashup names (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).
Their words
customersplatformgrowdelightconnected
Never
#1 agencyleading agencyHubSyncSyncSpotcertified partner (for an app)
Source: hubspot.comhubspot.com/our-story
- Don’t Unverifiable superlatives in partner copy (published)
| Headline case | sentence |
|---|---|
| Headline end | full stop, orange on hero and closing CTA |
Source: hubspot.comhubspot.com/partners/app/branding-guidelineshubspot.com/partners/promotion-guidelines
Logo
Logo files described and linked from the newsroom; on Steal the org keeps its own logo.
The sprocket is the recognizable mark ("big, orange, pretty recognizable" in HubSpot's words).
Full spec
- 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
| Versions | Primary orange, Cream (newsroom zip 2025) |
|---|---|
| Clear space | not published |
| Minimum size | not published |
| Site size | 100x28 in nav and footer (observed) |
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.
Source: legal.hubspot.com/tm-usage-guidelineshubspot.com/partners/app/branding-guidelineshubspot.com/newsroomhubspot.com/hubfs/WBZ%202025%20Rebrand/HubSpot%20Logo/HubSpot%20Logo%20Zip/HubSpot%20Logos_2025.zip
Color
Get a demo
Get a demo
Orange stays rare so every button reads; warm neutrals keep it friendly rather than corporate.
Full spec
- 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)
| Accent | #FF4800 |
|---|---|
| Ink | #1F1F1F |
| Page | #FCFCFA |
| Dark | #042729 |
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.
Not published: Brand color names, ratios and contrast rules are not published; values come from the site CSS tokens.
Typography
Grow better
A light serif headline gives warmth and editorial calm over a friendly geometric-humanist sans.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| HubSpot Serif | Proprietary (HubSpot). Stand-in: Literata (SIL OFL 1.1) | ||
| HubSpot Sans | Proprietary (HubSpot). Stand-in: Onest (SIL OFL 1.1) |
- 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
| Headline | HubSpot Serif Book 300 (Literata 320) |
|---|---|
| Text | HubSpot Sans Book 300 (Onest 400) |
| UI | HubSpot Sans Medium 500 (Onest 600) |
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.
Source: hubspot.com
Graphic elements
Do the final "." of the headline is wrapped and colored #FF4800; the rest of the headline stays #1F1F1F (or #F8F5EE on teal).
The orange full stop · end of the hero H1 and the closing CTA H2
Do HubSpot Serif Book (300) for headlines at 40-65px, HubSpot Sans for everything else; headlines never bold.
Light serif headlines over a plain sans · every H1/H2 and the hero tile captions
Do #FF4800 is used on interactive or brand marks only; grounds stay white, cream #FCFCFA, teal #042729 or #1F1F1F.
Orange is for action · buttons, link underlines, check icons, active tab bar, logo
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).
Tagline chip with a dotted rule · section headers (Powered by AI, Case Studies, the Agent Hub icon chip)
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.
Bordered white cards with dashed inner rules · product grid, testimonial card
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.
Warm agent gradient band · the AI agents band only
Specimens use sample copy, not HubSpot’s.
Small, repeatable marks make pages recognisable without the logo.
Full spec
- One gradient band per page at most
- Cards: border, no shadow
- Don’t Drop shadows
- Don’t Colored card fills
| Card radius | 16px |
|---|---|
| Button radius | 8px |
| Chip radius | 4px |
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.
Source: hubspot.com
Iconography
Each product has an orange single-weight line icon (24px in cards); UI glyphs are thin and dark.
Full spec
- Orange line icon per product
- Checks in orange
- Don’t Filled multicolor icons for HubSpot products
| Product icon | 24px orange line |
|---|---|
| Grid | not published |
Source: hubspot.com
Illustration
Showing the product is the illustration.
Full spec
- Use real product UI crops with rounded corners
- Don’t Generic 3D illustrations
| Style | product UI on cream, 16px radius |
|---|
No drawn illustration on the homepage; product UI crops (agent chats, property dialogs) on cream cards stand in for it.
Source: hubspot.com
Photography
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.
Full spec
- 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
| Ratio | 464x560 tiles (0.83) |
|---|---|
| Overlay | 188deg fade to #1F1F1F |
Source: hubspot.com
Motion
Motion is ambient and functional: marquee logos, a drifting integrations cloud, carousels at 300ms ease, buttons at 150ms linear.
Full spec
- Every looping motion gets a pause control
- Don’t Decorative motion on text
| Button | 150ms linear |
|---|---|
| Carousel | 300ms ease |
Source: hubspot.com
Interface & layout
The page, band by band
Hero photo tiles
What is HubSpot?
Customer logo row
Product platform grid
AI agents band
Integrations panel
Tabbed testimonial
G2 badges
Buttons
Full spec
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.
Measured from hubspot.com's Measured from computed styles, CSS custom properties and screenshots of the live homepage at 1440 and 390 on 2026-10-31..
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 110px | 16px |
| Section padding | 64px | 32px |
| Hero text width | max 1078px, centered | full width |
| Card gap | 24px | 24px |
| Navigation | 128px | 128px |
Type, at size
Hero H1
HubSpot Sans · 65px (phone 40) · line 1.2 · weight 320
Closing CTA H2
HubSpot Sans · 48px (phone 40) · line 1.154 · weight 320
Section H2
HubSpot Sans · 40px (phone 32) · line 1.1 · weight 320
Statistic numeral
HubSpot Sans · 40px · line 1.1 · weight 480
Hero tile caption
HubSpot Sans · 28px · line 1.1 · weight 320
Agent card title / integrations heading / G2 line
HubSpot Sans · 24px · line 1.417 · weight 600
Footer heading (visible text)
HubSpot Sans · 14px (phone 16) · line 1.15 · weight 600
Product card title / caps label
HubSpot Sans · 18px · line 1.556 · weight 600
Hero lead
HubSpot Sans · 18px · line 1.778 · weight 400
Body
HubSpot Sans · 16px · line 1.75 · weight 400
Nav link / button medium
HubSpot Sans · 16px · line 1.75 · weight 600
Card list / small text / eyebrow (caps)
HubSpot Sans · 14px · line 1.571 · tracking -0.1px · weight 400
Utility nav / footer links / copyright
HubSpot Sans · 12px · line 1.667 · weight 500
- Motion
- Short, linear UI transitions (0.15s background and color on buttons, 0.3s ease underline-offset on text links, 300ms ease carousel slides); marquees and the integrations cloud drift continuously
- Buttons
- rounded
Page anatomy
How HubSpot’s own landing pages are built, observed on hubspot.com, 2026-10-31. The full measurements are in spec.md.
- Navigation
- 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.
- Hero
- 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.
- What is HubSpot?
- Two-column intro on white: a 40px serif H2 at left, a 4-line body paragraph at right.
- Customer logo row
- 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.
- Product platform grid
- 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.
- AI agents band
- 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.
- Integrations panel
- 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.
- Case studies header
- 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.
- Tabbed testimonial
- 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.
- G2 badges
- A 24px Medium line "Voted #1 in 526 G2 Reports" at left and six 80px G2 award shields in a row at right.
- Closing CTA
- 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.
- Footer
- #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.
Source: hubspot.com
In use
2025 brand refresh · 2025
warmer and calmer than the previous coral-and-slate look (inferred) Our reading
Full spec
A landing page follows the homepage anatomy and voice.
- 2025 brand refresh. New logo files (HubSpot Logos_2025), HubSpot Sans and Serif, and the 2025 token scale on the site hubspot.com/hubfs/WBZ%202025%20Rebrand/HubSpot%20Logo/HubSpot%20Logo%20Zip/HubSpot%20Logos_2025.zip
| Format | What they did | Source |
|---|---|---|
| Partner badges | Tier and certified-app badges partners may not alter | hubspot.com/partners/app/branding-guidelines |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | 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 |
Rules
Do
- 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
- Use "inbound"/"unbound" event names
- Register domains with HubSpot marks
- Use HubSpot marks in ad creative
Source: legal.hubspot.com/tm-usage-guidelineshubspot.com/partners/app/branding-guidelineshubspot.com/partners/promotion-guidelineshubspot.com/providers/template/branding-guidelines
Steal this kit
Your name and logo, HubSpot’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What HubSpot doesn’t publish
- 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.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with HubSpot.