taobao.com
taobao.com · 31 minutes ago
SaveUnofficial A style guide made by SiteStyleGuide from hubspot.com’s public web pages. Not affiliated with or endorsed by HubSpot. The real site is hubspot.com ↗
Unofficial style guide
HubSpotstyle guide
HubSpot’s website (hubspot.com) uses HubSpot Sans for its headings and body text. Its palette is led by Orange Red (#FF4800), Cadet Blue (#459195) and Sienna (#C93700), with #1F1F1F text on #FCFCFA. Captured from the live site on 4 November 2026.
- Website
- hubspot.com
- Typefaces
- HubSpot Sans, HubSpot Serif, Zen Kaku Gothic New
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 4 Nov 2026 · added by @sitestyleguide
https://www.hubspot.com/
Screenshot
hubspot.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- HubSpot | Software & Tools for your Business - Homepage
- ● 55 / 60 characters
- Meta description
- HubSpot's customer platform includes all the marketing, sales, customer service, and CRM software you need to grow your business.
- ● 129 / 160 characters
- Site name
- HubSpot
- og:title
- HubSpot | Software & Tools for your Business - Homepage
- og:description
- HubSpot's customer platform includes all the marketing, sales, customer service, and CRM software you need to grow your business.
- Language
- en
- Theme colour
- #FF7A59
In search results
HubSpothttps://www.hubspot.com/
HubSpot | Software & Tools for your Business - Homepage
HubSpot's customer platform includes all the marketing, sales, customer service, and CRM software you need to grow your business.
When shared
hubspot.com
HubSpot | Software & Tools for your Business - Homepage
HubSpot's customer platform includes all the marketing, sales, customer service, and CRM software you need to…
Logo & favicons
Found as: schema.org logo. SVG, 1913 × 542.
Logo
On white
On black
On Orange Red
Favicons
1 found-
288 px · PNG
shortcut icon
HubSpot | Software & Tools for your Business - Homepage
Light browser tab
HubSpot | Software & Tools for your Business - Homepage
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#1F1F1F) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- Near Black 29.8%
- White 24%
- Orange Red 8.2%
- Warm Off White 7.8%
- Cadet Blue 5.6%
- Cool Off White 3.6%
- Sienna 3.1%
- Medium Blue 2.7%
- Dark Red 2.2%
- Midnight Blue 2.2%
- Peach Puff 2%
- Crimson 2%
- Powder Blue 1.8%
- Light Blue 1.8%
- Teal 1.8%
- Dark Slate Grey 1.6%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 88
- On text
- —
- On white
- 16.48:1 AAA
Text, background, border · :root, body
-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 16.48:1 AAA
- On white
- —
Background, border · .cl-round-button, body
-
Warm Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 1 4 3
- On text
- 15.14:1 AAA
- On white
- 1.09:1 Fail
Background, text · --hubspot-2025-cream-03, --hubspot-2025-neutral-03
-
Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 2 0 1
- On text
- 15.58:1 AAA
- On white
- 1.06:1 Fail
Used · --hubspot-2025-lavender-01, --hubspot-2025-lavender-02
Colours
Brand colours and accents, most used first-
Orange Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 72 100 0
- On text
- 4.85:1 AA
- On white
- 3.40:1 AA large
Graphic, text, background · [data-cl-brand=hubspot-2025] h1.-brand::after, --hubspot-2025-orange-08
-
Cadet Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 54 3 0 42
- On text
- 4.50:1 AA
- On white
- 3.66:1 AA large
Border · --hubspot-2025-teal-08, .a11y-contrast-toggle:focus-visible
-
Sienna
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 73 100 21
- On text
- 3.16:1 AA large
- On white
- 5.21:1 AA
Background · --hubspot-2025-orange-09, --light-theme-button-primary-fill-hover
-
Medium Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 86 94 0 31
- On text
- 1.35:1 Fail
- On white
- 12.20:1 AAA
Used · --cl-button-background, --cl-button-hover-color
-
Dark Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 75 100 38
- On text
- 2.18:1 Fail
- On white
- 7.56:1 AAA
Used · --hubspot-2025-orange-10, --light-theme-button-primary-fill-pressed
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 58 78 0 71
- On text
- 1.04:1 Fail
- On white
- 17.09:1 AAA
Used · --hubspot-2025-purple-14, --hubspot-2025-purple-15
-
Peach Puff
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 21 30 1
- On text
- 10.87:1 AAA
- On white
- 1.52:1 Fail
Graphic · --hubspot-2025-orange-05, --light-theme-accent-fill-02
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 80 15
- On text
- 3.13:1 AA large
- On white
- 5.27:1 AA
Text, graphic, border · --hubspot-2025-red-09, .cl-input-error-text
-
Powder Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 10 0 7 20
- On text
- 9.84:1 AAA
- On white
- 1.67:1 Fail
Background · --hubspot-2025-sage-05, .wf-elevated-cta.-accent-1
-
Light Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 21 8 0 0
- On text
- 13.22:1 AAA
- On white
- 1.25:1 Fail
Used · --cl-button-hover-background, --a11y-contrast-toggle-background-color
-
Teal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 61 3 0 53
- On text
- 3.09:1 AA large
- On white
- 5.33:1 AA
Used · --hubspot-2025-teal-09, --light-theme-border-highlight-01
-
Dark Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 90 5 0 84
- On text
- 1.04:1 Fail
- On white
- 15.82:1 AAA
Background · --hubspot-2025-teal-13, .cl-modal-main:has(.cl-modal-header.-dark)
Gradients
-
linear-gradient(, 10%,transparent 100%)
-
linear-gradient(, 10%, transparent 100%)
-
linear-gradient(to right,,transparent)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
HubSpot Sans
Aa
300
Aa
600
HubSpot Sans
Self-hosted · weights 300, 400, 500, 600 · headings, buttons, body · shown in a stand-in if you don’t have it
Aa
300
Aa
600
HubSpot Serif
Self-hosted · weights 300, 400, 500, 600 · headings · shown in a stand-in if you don’t have it
Aa
300
Aa
700
Zen Kaku Gothic New
Self-hosted · weights 300, 400, 500, 700 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
2.5rem · 40 px / 1.04545455
weight 300 · HubSpot Serif
HubSpot
Heading 2
2rem · 32 px / 1.125
weight 300 · HubSpot Serif
HubSpot | Software & Tools for your Business - …
Heading 3
1.5rem · 24 px / 1.41666667
weight 500 · HubSpot Sans
HubSpot | Software & Tools for your Business - …
Heading 4
1.375rem · 22 px / 1.45454545
weight 500 · HubSpot Sans
HubSpot | Software & Tools for your Business - …
Heading 5
1.125rem · 18 px / 1.55555556
weight 500 · HubSpot Sans
HubSpot | Software & Tools for your Business - …
Heading 6
1rem · 16 px / 1.75
weight 500 · HubSpot Sans
HubSpot | Software & Tools for your Business - …
Body
1rem · 16 px / 1.75
weight 300 · HubSpot Sans
HubSpot's customer platform includes all the marketing, sales, customer service, and CRM software you need to grow your business.
Paragraph
1rem · 16 px / 1.75
weight 300
HubSpot's customer platform includes all the marketing, sales, customer service, and CRM software you need to grow your business.
Small
80%
HubSpot's customer platform includes all the marketing, sales, customer service, and CRM software you need to grow your business.
Button
100% / 1.15
none
Get started
Link
.875rem · 14 px / 2.4
weight 500
Read more about HubSpot
Sizes in use
Most common across the site- 56pxline 1.14285714 · 4 rules
- 40pxline 1.04545455 · 3 rules
- 32pxline 1.125 · 2 rules
- 22pxline 1.45454545 · 3 rules
- 18pxline 1.55555556 · 9 rules
- 16pxline 1.75 · 23 rules
- 14pxline 1.57142857 · 20 rules
- 12pxline 1.66666667 · 10 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Corner radius
- 50% · 13×
- 8px · 12×
- 16px · 6×
- 4px · 5×
- 48px · 2×
- inherit · 2×
Shadows
- 0 0 0 1px transparent
- 0 2px 4px rgba(33, 51, 67, 0.12)
- 0 0 0 1px rgba(0, 0, 0, 0.4705882353)
- 0 0 0 2px #1f1f1f
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
568
1080
On a scale of 0 to 1440 px.
Content widths (max-width)
1030 px
712 px
436 px
370 px
368 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 55 characters, short enough to show in full in search results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does HubSpot use?
- HubSpot’s website uses three typefaces: HubSpot Sans (headings and body text), self-hosted; HubSpot Serif, self-hosted; Zen Kaku Gothic New, self-hosted.
- What are HubSpot’s brand colours?
- The main colours on hubspot.com are Orange Red (#FF4800), Cadet Blue (#459195), Sienna (#C93700), Medium Blue (#180BB1), Dark Red (#9F2800) and Midnight Blue (#1F1049).
- What colour is HubSpot’s text and background?
- Body text is #1F1F1F on a #FCFCFA background.
- Where is HubSpot’s logo from?
- The logo shown in this guide was found on hubspot.com’s homepage. For official logo files and usage rules, check HubSpot’s own brand or press page.
- Is this HubSpot’s official style guide?
- No. SiteStyleGuide made it from hubspot.com’s public web pages on 4 November 2026, and isn’t affiliated with HubSpot. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
hubspot-com-tokens.css
/* hubspot.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/hubspot.com) */
:root {
/* Colours */
--text: #1F1F1F;
--background: #FCFCFA;
--colour-near-black: #1F1F1F;
--colour-white: #FFFFFF;
--colour-warm-off-white: #F8F5EE;
--colour-cool-off-white: #FCF7FC;
--colour-orange-red: #FF4800;
--colour-cadet-blue: #459195;
--colour-sienna: #C93700;
--colour-medium-blue: #180BB1;
--colour-dark-red: #9F2800;
--colour-midnight-blue: #1F1049;
--colour-peach-puff: #FCC6B1;
--colour-crimson: #D9002B;
--colour-powder-blue: #B9CDBE;
--colour-light-blue: #CAEBFF;
--colour-teal: #2F7579;
--colour-dark-slate-grey: #042729;
--gradient-1: linear-gradient(, 10%,transparent 100%);
--gradient-2: linear-gradient(, 10%, transparent 100%);
--gradient-3: linear-gradient(to right,,transparent);
/* Typefaces */
--font-headings: 'HubSpot Sans', sans-serif;
--font-buttons: 'HubSpot Sans', sans-serif;
--font-body: 'HubSpot Sans', sans-serif;
--font-other: 'Zen Kaku Gothic New', sans-serif;
/* Type scale */
--text-h1: 2.5rem;
--leading-h1: 1.04545455;
--text-h2: 2rem;
--leading-h2: 1.125;
--text-h3: 1.5rem;
--leading-h3: 1.41666667;
--text-h4: 1.375rem;
--leading-h4: 1.45454545;
--text-h5: 1.125rem;
--leading-h5: 1.55555556;
--text-h6: 1rem;
--leading-h6: 1.75;
--text-body: 1rem;
--leading-body: 1.75;
--text-p: 1rem;
--leading-p: 1.75;
--text-small: 80%;
--text-button: 100%;
--leading-button: 1.15;
--text-a: .875rem;
--leading-a: 2.4;
/* Shape */
--radius-1: 50%;
--radius-2: 8px;
--radius-3: 16px;
--radius-4: 4px;
--radius-5: 48px;
--radius-6: inherit;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 568px;
--breakpoint-2: 1080px;
--max-width-1: 1030px;
--max-width-2: 712px;
--max-width-3: 436px;
--max-width-4: 370px;
--max-width-5: 368px;
}
{
"site": "hubspot.com",
"source": "https://sitestyleguide.com/hubspot.com",
"text": "#1F1F1F",
"background": "#FCFCFA",
"colours": [
{
"name": "Near Black",
"hex": "#1F1F1F",
"rgb": [
31,
31,
31
]
},
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Warm Off White",
"hex": "#F8F5EE",
"rgb": [
248,
245,
238
]
},
{
"name": "Cool Off White",
"hex": "#FCF7FC",
"rgb": [
252,
247,
252
]
},
{
"name": "Orange Red",
"hex": "#FF4800",
"rgb": [
255,
72,
0
]
},
{
"name": "Cadet Blue",
"hex": "#459195",
"rgb": [
69,
145,
149
]
},
{
"name": "Sienna",
"hex": "#C93700",
"rgb": [
201,
55,
0
]
},
{
"name": "Medium Blue",
"hex": "#180BB1",
"rgb": [
24,
11,
177
]
},
{
"name": "Dark Red",
"hex": "#9F2800",
"rgb": [
159,
40,
0
]
},
{
"name": "Midnight Blue",
"hex": "#1F1049",
"rgb": [
31,
16,
73
]
},
{
"name": "Peach Puff",
"hex": "#FCC6B1",
"rgb": [
252,
198,
177
]
},
{
"name": "Crimson",
"hex": "#D9002B",
"rgb": [
217,
0,
43
]
},
{
"name": "Powder Blue",
"hex": "#B9CDBE",
"rgb": [
185,
205,
190
]
},
{
"name": "Light Blue",
"hex": "#CAEBFF",
"rgb": [
202,
235,
255
]
},
{
"name": "Teal",
"hex": "#2F7579",
"rgb": [
47,
117,
121
]
},
{
"name": "Dark Slate Grey",
"hex": "#042729",
"rgb": [
4,
39,
41
]
}
],
"fonts": [
{
"name": "HubSpot Sans",
"stack": "'HubSpot Sans', sans-serif",
"weights": [
300,
400,
500,
600
],
"source": "Self-hosted"
},
{
"name": "HubSpot Serif",
"stack": "'HubSpot Serif', serif",
"weights": [
300,
400,
500,
600
],
"source": "Self-hosted"
},
{
"name": "Zen Kaku Gothic New",
"stack": "\"Zen Kaku Gothic New\", sans-serif",
"weights": [
300,
400,
500,
700
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run hubspot.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/hubspot.com" title="HubSpot style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to HubSpot’s
Captured from hubspot.com on 4 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by HubSpot; this guide describes the public website for reference.