.webp)
Hubspot
CRM
No items found.
No items found.
No items found.
Visual identity
Hubspot — design reference
Source: https://www.hubspot.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Typography
font-family: var(--cl-font-family, "HubSpot Sans", sans-serif)— selectorbody,[data-cl-brand],body [lang],[data-cl-brand] [lang]font-family: "Zen Kaku Gothic New",sans-serif !important— selectorhtml[lang=ja] body,html[lang=ja] [data-cl-brand]font-family: var(--cl-font-family-display, "HubSpot Serif", serif)— selectorh1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-displayfont-family: var(--cl-font-family)— selector#global-nav-header[data-cl-brand=hubspot-2025] .global-nav-mobile-list-item-headingfont-size: 2em— selectorh1font-size: 1em— selectorprefont-size: 100%— selectorbutton,input,optgroup,select,textareafont-size: var(--cl-text-font-size)— selectorbody,[data-cl-brand],p,.cl-pfont-size: var(--cl-font-size-display-01)— selectorh1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-displayfont-size: var(--cl-font-size-display-02)— selectorh2.-secondary,h2.-display,.h2.-secondary,.h2.-display,.cl-h2.-secondary,.cl-h2.-display,h1.-secondary-small,h1.-display-small,.h1.-secondary-small,.h1.-display-small,.cl-h1.-secondary-small,.cl-h1.-display-smallfont-size: var(--cl-font-size-display-03)— selectorh3.-display,.h3.-display,.cl-h3.-displayfont-size: var(--cl-font-size-h1)— selectorh1,.h1,.cl-h1font-weight: var(--cl-text-font-weight)— selectorbody,[data-cl-brand],p,.cl-pfont-weight: var(--cl-font-weight-display-01)— selectorh1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-displayfont-weight: var(--cl-font-weight-display-02)— selectorh2.-secondary,h2.-display,.h2.-secondary,.h2.-display,.cl-h2.-secondary,.cl-h2.-display,h1.-secondary-small,h1.-display-small,.h1.-secondary-small,.h1.-display-small,.cl-h1.-secondary-small,.cl-h1.-display-smallfont-weight: var(--cl-font-weight-display-03)— selectorh3.-display,.h3.-display,.cl-h3.-displayfont-weight: var(--cl-font-weight-h1)— selectorh1,.h1,.cl-h1font-weight: var(--cl-font-weight-h1-small)— selectorh1.-small,.h1.-small,.cl-h1.-smallfont-weight: var(--cl-font-weight-h2)— selectorh2,.h2,.cl-h2font-weight: var(--cl-font-weight-h3)— selectorh3,.h3,.cl-h3line-height: 1.15— selectorbutton,input,optgroup,select,textarealine-height: var(--cl-text-line-height)— selectorbody,[data-cl-brand],p,.cl-pline-height: var(--cl-line-height-display-01)— selectorh1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-displayline-height: var(--cl-line-height-display-02)— selectorh2.-secondary,h2.-display,.h2.-secondary,.h2.-display,.cl-h2.-secondary,.cl-h2.-display,h1.-secondary-small,h1.-display-small,.h1.-secondary-small,.h1.-display-small,.cl-h1.-secondary-small,.cl-h1.-display-smallline-height: var(--cl-line-height-display-03)— selectorh3.-display,.h3.-display,.cl-h3.-displayline-height: var(--cl-line-height-h1)— selectorh1,.h1,.cl-h1line-height: var(--cl-line-height-h1-small)— selectorh1.-small,.h1.-small,.cl-h1.-smallline-height: var(--cl-line-height-h2)— selectorh2,.h2,.cl-h2letter-spacing: var(--cl-text-letter-spacing, normal)— selectorbody,[data-cl-brand],p,.cl-pletter-spacing: var(--cl-letter-spacing-display-01, normal)— selectorh1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-displayletter-spacing: var(--cl-letter-spacing-display-02, normal)— selectorh2.-secondary,h2.-display,.h2.-secondary,.h2.-display,.cl-h2.-secondary,.cl-h2.-display,h1.-secondary-small,h1.-display-small,.h1.-secondary-small,.h1.-display-small,.cl-h1.-secondary-small,.cl-h1.-display-smallletter-spacing: var(--cl-letter-spacing-display-03, normal)— selectorh3.-display,.h3.-display,.cl-h3.-displayletter-spacing: var(--cl-letter-spacing-h1, normal)— selectorh1,.h1,.cl-h1letter-spacing: var(--cl-letter-spacing-h1-small, normal)— selectorh1.-small,.h1.-small,.cl-h1.-smallletter-spacing: var(--cl-letter-spacing-h2, normal)— selectorh2,.h2,.cl-h2letter-spacing: var(--cl-letter-spacing-h3, normal)— selectorh3,.h3,.cl-h3
Colors and surfaces
color: var(--cl-text-color)— selector:root,[data-cl-brand],[data-cl-theme]color: var(--cl-color-text-01)— selector.cl-sectioncolor: var(--cl-anchor-color, var(--cl-color-link-01))— selectora,p>a,.cl-p>acolor: var(--cl-anchor-hover-color, var(--cl-color-hover-link-01))— selectora:focus-visible,a:hovercolor: var(--cl-anchor-pressed-color, var(--cl-color-pressed-link-01))— selectora:activecolor: var(--cl-color-hubspot-brand-01)— selector[data-cl-brand=hubspot-2025] h1.-brand::after,[data-cl-brand=hubspot-2025] .h1.-brand::after,[data-cl-brand=hubspot-2025] .cl-h1.-brand::aftercolor: var(--cl-nav-link-hover-color)— selector.global-nav-header .-dropdown-active .cl-navLinkbackground-color: rgba(0,0,0,0)— selectorabackground-color: var(--cl-color-container-01)— selector.global-nav-main[data-cl-fixed-element-is-fixed]background-color: var(--cl-color-text-01)— selector.global-nav-burger-btn-line,.global-nav-burger-btn-line::before,.global-nav-burger-btn-line::afterbackground-color: #3e5974— selectorbody:has(.global-nav-main)::afterbackground-color: var(--cl-color-hover-01)— selector.cl-tab-button:active,.cl-tab-button:hover,.cl-tab-button:focus-visiblebackground-color: var(--global-nav-tab-button-hover-background-color, var(--cl-color-background-03))— selector.global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button[aria-selected=true],.global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button:hover[aria-selected=true]background-color: #fcead7— selector.global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button:active[aria-selected=true]background-color: var(--cl-color-pressed-01)— selector.cl-round-button:active,.cl-roundButton:active
Components and layout
border-radius: 1rem— selector.global-nav-burger-btn-line,.global-nav-burger-btn-line::before,.global-nav-burger-btn-line::afterborder-radius: var(--cl-border-radius-container)— selector.cl-dropdown-menu,.cl-dropdown-menu.-caret,.global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button,.global-nav-card,.global-nav-header-sublinks .global-nav-header-sublinks-list-item-linkborder-radius: var(--cl-border-radius-medium)— selector.global-nav-card .global-nav-card-cta-text-linkborder-radius: 8px— selector.global-nav-header-ctaborder-radius: 0 0 .1875rem .1875rem— selector.global-nav-tab-dropdown-content-wrapperborder-radius: 50%— selector.cl-round-button,.cl-roundButtonborder-radius: 3px— selector.global-footer**nav-column.active>ul liborder-radius: 0— selector.wtm-evfc**card.cl-cardbox-shadow: 0 2px 4px rgba(33,51,67,.12)— selector.global-nav-main[data-cl-fixed-element-is-fixed]box-shadow: var(--global-nav-box-shadow, 0 2px 4px rgba(33, 51, 67, 0.12))— selector.global-nav-main .global-nav-main-innerbox-shadow: none— selector.global-nav-main .global-nav-main-innerbox-shadow: 0 0 0 1px var(--cl-card-border-color)— selector.global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button:hover,.global-nav-card:hover,.global-nav-header-sublinks .global-nav-header-sublinks-list-item-link:hoverbox-shadow: 0 1px 24px rgba(33,51,67,.12)— selector.global-nav-tab-dropdown-content-wrapperbox-shadow: 0 0 0 2px var(--cl-color-border-01)— selector.cl-card.-interactive:has(input[type=checkbox]:checked),.cl-card.-interactive:has(input[type=radio]:checked)max-width: min(100% - var(--cl-section-gutter)\*2,var(--cl-section-content-max-width))— selector.cl-section-contentmax-width: none— selector.cl-section-content .cl-section-contentmax-width: max-content— selector.global-nav-tab-dropdown-sectionmax-width: 100%— selector.global-nav-tab-dropdown-content-wrappermax-width: 242px— selector.global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-list-item.cl-tab-itemmax-width: 0— selector.global-nav-top-bar .global-nav-site-search:not(:focus-within) input.global-nav-site-search-inputmax-width: var(--global-nav-content-max-width, 1080px)— selector.global-nav-content-sectionmax-width: unset— selector.wf-page-header.-max-width-none .csol-section-wrapperpadding: 0— selectorbutton::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-innerpadding: .5rem 1rem— selector.global-nav-main .global-nav-main-innerpadding: 0 .5rem— selector.global-nav-cta-sticky-nav.-mobile-onlypadding: .5rem— selector.global-nav-header-sublinks .global-nav-header-sublinks-list-item-linkpadding: .75rem— selector.global-nav-cardpadding: .4rem— selector.global-nav-main-resources-gridpadding: 0 0 1rem .5rem— selector#global-nav-header[data-cl-brand=hubspot-2025] .global-nav-header-sublinks .global-nav-header-sublinks-title-wrapperpadding: var(--cl-button-padding)— selector.global-nav-header-ctagap: .75rem— selector.global-nav-main .global-nav-main-group.-mobile-onlygap: 1rem— selector.global-nav-main-group-cta,.global-nav-main .header-nav\_\_ctasgap: 28px— selector.global-nav-top-bar-groupgap: .5rem— selector.global-nav-card .global-nav-card-cta-text-linkgap: .25rem— selector.global-nav-card .global-nav-card-text-wrappergap: 2.5rem— selector.global-nav-header-contentgap: var(--global-nav-search-close-icon-size, 24px)— selector.global-nav-top-bar .global-nav-site-search:focus-withingap: 12px— selector.cl-carousel:not(.-use-container) .cl-carousel-controls.-bottomtransition: top 1s ease-out— selector.global-nav-skip-linktransition: top .1s ease-in— selector.global-nav-skip-link:focustransition: transform .3s ease-out— selector.global-nav-burger-btntransition: .3s ease-in-out— selector.global-nav-burger-menutransition: opacity .2s ease-out,visibility .3s— selector.global-nav-header .-is-dropdowntransition: opacity .2s ease-in,visibility 0s— selector.global-nav-header .-dropdown-active>.-is-dropdowntransition: var(--global-nav-dropdown-toggle-transition, transform 0.3s ease)— selector.global-nav-header .cl-navLink-submenu-toggle .cl-icontransition: text-underline-offset .3s ease-in-out— selector[data-cl-brand=hubspot-2025] .global-nav-card .global-nav-card-cta-text-link,.global-nav-card [data-cl-brand=hubspot-2025] .global-nav-card-cta-text-link
Responsive rules
(max-width: 568px)
(prefers-reduced-motion: reduce)
(width >= 900px)
(width >= 600px)
(width >= 1080px)
(width >= 768px)
(width < 600px)
(prefers-reduced-motion: no-preference)
(width <= 1220px)
(max-width: 1080px)
(prefers-reduced-motion:no-preference)
(width < 900px)
(width >= 1220px)
(width >= 1460px)
(hover:hover)
(width <= 275px)Source: https://www.hubspot.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.
https://www.hubspot.com/ — :root,[data-cl-brand=hubspot-2025]
--light-theme-accent-fill-01: #cfcccb;
--light-theme-accent-fill-02: #fcc6b1;
--light-theme-accent-fill-03: #fcc5be;
--light-theme-accent-fill-04: #b9cdbe;
--light-theme-accent-fill-05: #ece6d9;
--light-theme-accent-fill-06: #d7cdfc;
--light-theme-accent-fill-07: #b2e9eb;
--light-theme-accent-fill-08: #fbdbe9;
--light-theme-accent-decoration-01: #9b9897;
--light-theme-accent-decoration-02: #ffa581;
--light-theme-accent-decoration-03: #ffa499;
--light-theme-accent-decoration-04: #9cbaa4;
--light-theme-accent-decoration-05: #ccc0a3;
--light-theme-accent-decoration-06: #c4b4f7;
--light-theme-accent-decoration-07: #97dadc;
--light-theme-accent-decoration-08: #fcc3dc;
--light-theme-badge-brand-fill-01: #fcc6b1;
--light-theme-background-01: #fcfcfa;
--light-theme-background-02: #f8f5ee;
--light-theme-background-03: #f8f5ee;
--light-theme-background-accent-01: #b9cdbe;
--light-theme-background-accent-02: #d6c2d9;
--light-theme-background-accent-03: #fcc3dc;
--light-theme-background-footer-01: #1f1f1f;
--light-theme-beta-01: #7d53e9;
--light-theme-beta-background-01: #e5e1fa;
--light-theme-border-01: #1f1f1f;
--light-theme-border-02: rgba(0, 0, 0, 0.4705882353);
--light-theme-border-03: rgba(0, 0, 0, 0.1098039216);
--light-theme-border-brand-01: #ff4800;
--light-theme-border-highlight-01: #2f7579;
--light-theme-button-primary-text-color: #ffffff;
--light-theme-button-primary-fill-idle: #ff4800;
--light-theme-button-primary-fill-hover: #c93700;
--light-theme-button-primary-fill-pressed: #9f2800;
--light-theme-button-secondary-border: #ff4800;
--light-theme-button-secondary-border-hover: #c93700;
--light-theme-button-secondary-fill-idle: #ffffff;
--light-theme-button-secondary-fill-hover: #fcece6;
--light-theme-button-secondary-fill-pressed: #fcc6b1;
--light-theme-button-secondary-text-color-hover: #c93700;
--light-theme-button-secondary-text-color-pressed: #9f2800;
--light-theme-button-tertiary-fill-idle: #1f1f1f;
--light-theme-button-tertiary-fill-hover: rgba(0, 0, 0, 0.6196078431);
--light-theme-button-tertiary-fill-pressed: rgba(0, 0, 0, 0.4705882353);
--light-theme-button-tertiary-text-color: #ffffff;
--light-theme-checkmark-list-icon-brand-fill: #ff4800;
--light-theme-container-01: #ffffff;
--light-theme-container-02: rgba(255, 255, 255, 0.4588235294);
--light-theme-container-03: rgba(255, 255, 255, 0.4);
--light-theme-container-inverse-01: #1f1f1f;
--light-theme-disabled-01: rgba(0, 0, 0, 0.2);
--light-theme-disabled-02: rgba(0, 0, 0, 0.0196078431);
--light-theme-disabled-03: rgba(0, 0, 0, 0.0509803922);
--light-theme-divider-01: rgba(0, 0, 0, 0.1098039216);
--light-theme-error-01: #d9002b;
--light-theme-error-background-01: #fcc5be;
--light-theme-focus-01: #459195;
--light-theme-free-01: #2f7579;
--light-theme-free-background-01: #ccf4f5;
--light-theme-hover-01: rgba(0, 0, 0, 0.0509803922);
--light-theme-hover-02: rgba(0, 0, 0, 0.0588235294);
--light-theme-hover-03: #cfcccb;
--light-theme-hover-brand-01: #c93700;
--light-theme-hover-inverse-01: rgba(0, 0, 0, 0.8117647059);
--light-theme-hover-link-01: #1f1f1f;
--light-theme-hover-link-02: rgba(0, 0, 0, 0.6196078431);
--light-theme-hubspot-brand-01: #ff4800;
--light-theme-icon-01: #1f1f1f;
--light-theme-icon-02: #292929;
--light-theme-icon-on-color-01: #ffffff;
--light-theme-link-01: #1f1f1f;
--light-theme-link-02: #124548;
--light-theme-loading-primary-fill-active: #ff4800;
--light-theme-loading-primary-fill-inactive: #fcc6b1;
--light-theme-loading-secondary-fill-active: rgba(0, 0, 0, 0.2);
--light-theme-loading-secondary-fill-inactive: rgba(0, 0, 0, 0.1098039216);
--light-theme-neutral-01: #9b9897;
--light-theme-neutral-background-01: #cfcccb;
--light-theme-number-fill-active: #ff4800;
--light-theme-number-fill-inactive: #ffdbc1;
--light-theme-number-fill-statistic: #ff4800;
--light-theme-overlay-01: rgba(0, 0, 0, 0.8117647059);
--light-theme-play-button-fill-idle: #ff4800;
--light-theme-play-button-fill-hover: #c93700;
--light-theme-play-button-fill-pressed: #ffa766;
--light-theme-social-button-fill-idle: #292929;
--light-theme-social-button-fill-hover: rgba(0, 0, 0, 0.6196078431);
--light-theme-social-button-fill-pressed: rgba(0, 0, 0, 0.6196078431);
--light-theme-social-button-icon-color: #ffffff;
--light-theme-pressed-01: rgba(0, 0, 0, 0.0588235294);
--light-theme-pressed-02: rgba(0, 0, 0, 0.0784313725);
--light-theme-pressed-03: #9b9897;
--light-theme-pressed-brand-01: #9f2800;
--light-theme-pressed-inverse-01: rgba(0, 0, 0, 0.6196078431);
--light-theme-pressed-link-01: #1f1f1f;
--light-theme-pressed-link-02: rgba(0, 0, 0, 0.6196078431);
--light-theme-success-01: #00823a;
--light-theme-success-background-01: #bde7cb;
--light-theme-text-01: #1f1f1f;
--light-theme-text-02: rgba(0, 0, 0, 0.6196078431);
--light-theme-text-brand-01: #ff4800;
--light-theme-text-link-underline-01: #ff4800;
--light-theme-text-on-color-01: #ffffff;
--light-theme-text-placeholder-01: rgba(0, 0, 0, 0.4);
--light-theme-warning-01: #eeb117;
--light-theme-warning-background-01: #fbeece;
--dark-theme-accent-fill-01: #000000;
--dark-theme-accent-fill-02: #9f2800;
--dark-theme-accent-fill-03: #ac0020;
--dark-theme-accent-fill-04: #1b582a;
--dark-theme-accent-fill-05: #64593e;
--dark-theme-accent-fill-06: #5113ba;
--dark-theme-accent-fill-07: #1e5b5f;
--dark-theme-accent-fill-08: #800051;
--dark-theme-accent-decoration-01: #1c1c1c;
--dark-theme-accent-decoration-02: #c93700;
--dark-theme-accent-decoration-03: #d9002b;
--dark-theme-accent-decoration-04: #327142;
--dark-theme-accent-decoration-05: #7d7050;
--dark-theme-accent-decoration-06: #6431da;
--dark-theme-accent-decoration-07: #2f7579;
--dark-theme-accent-decoration-08: #a5016a;
--dark-theme-badge-brand-fill-01: #c93700;
--dark-theme-background-01: #042729;
--dark-theme-background-02: #093436;
--dark-theme-background-03: #093436;
--dark-theme-background-accent-01: #042729;
--dark-theme-background-accent-02: #46062b;
--dark-theme-background-accent-03: #25155e;
--dark-theme-background-footer-01: #1f1f1f;
--dark-theme-beta-01: #9778ec;
--dark-theme-beta-background-01: #6431da;
--dark-theme-border-01: #f8f5ee;
--dark-theme-border-02: rgba(255, 255, 255, 0.4);
--dark-theme-border-03: rgba(255, 255, 255, 0.0784313725);
--dark-theme-border-brand-01: #ff4800;
--dark-theme-border-highlight-01: #b9cdbe;
--dark-theme-button-primary-text-color: #ffffff;
--dark-theme-button-primary-fill-idle: #ff4800;
--dark-theme-button-primary-fill-hover: #c93700;
--dark-theme-button-primary-fill-pressed: #9f2800;
--dark-theme-button-secondary-border: #f8f5ee;
--dark-theme-button-secondary-border-hover: #f8f5ee;
--dark-theme-button-secondary-fill-idle: rgba(0, 0, 0, 0.1098039216);
--dark-theme-button-secondary-fill-hover: rgba(0, 0, 0, 0.2);
--dark-theme-button-secondary-fill-pressed: rgba(0, 0, 0, 0.4);
--dark-theme-button-secondary-text-color-hover: #f8f5ee;
--dark-theme-button-secondary-text-color-pressed: #f8f5ee;
--dark-theme-button-tertiary-fill-idle: #ffffff;
--dark-theme-button-tertiary-fill-hover: rgba(255, 255, 255, 0.8117647059);
--dark-theme-button-tertiary-fill-pressed: rgba(255, 255, 255, 0.6196078431);
--dark-theme-button-tertiary-text-color: #1f1f1f;
--dark-theme-checkmark-list-icon-brand-fill: #ff4800;
--dark-theme-container-01: #061c1d;
--dark-theme-container-02: rgba(0, 0, 0, 0.168627451);
--dark-theme-container-03: rgba(0, 0, 0, 0.4);
--dark-theme-container-inverse-01: #ffffff;
--dark-theme-disabled-01: rgba(255, 255, 255, 0.168627451);
--dark-theme-disabled-02: rgba(255, 255, 255, 0.0588235294);
--dark-theme-disabled-03: rgba(255, 255, 255, 0.0784313725);
--dark-theme-divider-01: rgba(255, 255, 255, 0.0784313725);
--dark-theme-error-01: #ff7b70;
--dark-theme-error-background-01: #d9002b;
--dark-theme-focus-01: #7aa485;
--dark-theme-free-01: #459195;
--dark-theme-free-background-01: #2f7579;
--dark-theme-hover-01: rgba(255, 255, 255, 0.0509803922);
--dark-theme-hover-02: rgba(255, 255, 255, 0.0588235294);
--dark-theme-hover-03: rgba(255, 255, 255, 0.0784313725);
--dark-theme-hover-brand-01: #ff7d4c;
--dark-theme-hover-inverse-01: rgba(255, 255, 255, 0.8117647059);
--dark-theme-hover-link-01: #f8f5ee;
--dark-theme-hover-link-02: rgba(255, 255, 255, 0.6196078431);
--dark-theme-hubspot-brand-01: #ff4800;
--dark-theme-icon-01: #f8f5ee;
--dark-theme-icon-02: #b6b1af;
--dark-theme-icon-on-color-01: #1f1f1f;
--dark-theme-link-01: #f8f5ee;
--dark-theme-link-02: #eef4f0;
--dark-theme-loading-primary-fill-active: #ff4800;
--dark-theme-loading-primary-fill-inactive: #fcc6b1;
--dark-theme-loading-secondary-fill-active: #f8f5ee;
--dark-theme-loading-secondary-fill-inactive: rgba(255, 255, 255, 0.4);
--dark-theme-neutral-01: #4d4c4c;
--dark-theme-neutral-background-01: #141414;
--dark-theme-number-fill-active: #ff4800;
--dark-theme-number-fill-inactive: #ffdbc1;
--dark-theme-number-fill-statistic: #ff4800;
--dark-theme-overlay-01: rgba(0, 0, 0, 0.8117647059);
--dark-theme-play-button-fill-idle: #ff4800;
--dark-theme-play-button-fill-hover: #c93700;
--dark-theme-play-button-fill-pressed: #9f2800;
--dark-theme-social-button-fill-idle: #f8f5ee;
--dark-theme-social-button-fill-hover: rgba(255, 255, 255, 0.8117647059);
--dark-theme-social-button-fill-pressed: rgba(255, 255, 255, 0.6196078431);
--dark-theme-social-button-icon-color: #1f1f1f;
--dark-theme-pressed-01: rgba(255, 255, 255, 0.0588235294);
--dark-theme-pressed-02: rgba(255, 255, 255, 0.0784313725);
--dark-theme-pressed-03: rgba(255, 255, 255, 0.1098039216);
--dark-theme-pressed-brand-01: #ffa581;
--dark-theme-pressed-inverse-01: rgba(255, 255, 255, 0.6196078431);
--dark-theme-pressed-link-01: #f8f5ee;
--dark-theme-pressed-link-02: rgba(255, 255, 255, 0.6196078431);
--dark-theme-success-01: #3cb769;
--dark-theme-success-background-01: #00823a;
--dark-theme-text-01: #f8f5ee;
--dark-theme-text-02: rgba(255, 255, 255, 0.6196078431);
--dark-theme-text-brand-01: #f8f5ee;
--dark-theme-text-link-underline-01: #ff4800;
--dark-theme-text-on-color-01: #1f1f1f;
--dark-theme-text-placeholder-01: rgba(255, 255, 255, 0.4);
--dark-theme-warning-01: #d39913;
--dark-theme-warning-background-01: #956309;https://www.hubspot.com/ — :root,[data-cl-brand=hubspot-2025],:root [data-cl-theme=light],[data-cl-brand=hubspot-2025] [data-cl-theme=light],:root [data-background=white],[data-cl-brand=hubspot-2025] [data-background=white],:root [data-background=off-white],[data-cl-brand=hubspot-2025] [data-background=off-white],:root .-white,[data-cl-brand=hubspot-2025] .-white,:root .-light,[data-cl-brand=hubspot-2025] .-light
--cl-color-accent-fill-01: var(--light-theme-accent-fill-01);
--cl-color-accent-fill-02: var(--light-theme-accent-fill-02);
--cl-color-accent-fill-03: var(--light-theme-accent-fill-03);
--cl-color-accent-fill-04: var(--light-theme-accent-fill-04);
--cl-color-accent-fill-05: var(--light-theme-accent-fill-05);
--cl-color-accent-fill-06: var(--light-theme-accent-fill-06);
--cl-color-accent-fill-07: var(--light-theme-accent-fill-07);
--cl-color-accent-fill-08: var(--light-theme-accent-fill-08);
--cl-color-accent-decoration-01: var(--light-theme-accent-decoration-01);
--cl-color-accent-decoration-02: var(--light-theme-accent-decoration-02);
--cl-color-accent-decoration-03: var(--light-theme-accent-decoration-03);
--cl-color-accent-decoration-04: var(--light-theme-accent-decoration-04);
--cl-color-accent-decoration-05: var(--light-theme-accent-decoration-05);
--cl-color-accent-decoration-06: var(--light-theme-accent-decoration-06);
--cl-color-accent-decoration-07: var(--light-theme-accent-decoration-07);
--cl-color-accent-decoration-08: var(--light-theme-accent-decoration-08);
--cl-color-badge-brand-fill-01: var(--light-theme-badge-brand-fill-01);
--cl-color-background-01: var(--light-theme-background-01);
--cl-color-background-02: var(--light-theme-background-02);
--cl-color-background-03: var(--light-theme-background-03);
--cl-color-background-accent-01: var(--light-theme-background-accent-01);
--cl-color-background-accent-02: var(--light-theme-background-accent-02);
--cl-color-background-accent-03: var(--light-theme-background-accent-03);
--cl-color-background-footer-01: var(--light-theme-background-footer-01);
--cl-color-beta-01: var(--light-theme-beta-01);
--cl-color-beta-background-01: var(--light-theme-beta-background-01);
--cl-color-border-01: var(--light-theme-border-01);
--cl-color-border-02: var(--light-theme-border-02);
--cl-color-border-03: var(--light-theme-border-03);
--cl-color-border-brand-01: var(--light-theme-border-brand-01);
--cl-color-border-highlight-01: var(--light-theme-border-highlight-01);
--cl-color-button-primary-text-color: var(--light-theme-button-primary-text-color);
--cl-color-button-primary-fill-idle: var(--light-theme-button-primary-fill-idle);
--cl-color-button-primary-fill-hover: var(--light-theme-button-primary-fill-hover);
--cl-color-button-primary-fill-pressed: var(--light-theme-button-primary-fill-pressed);
--cl-color-button-secondary-border: var(--light-theme-button-secondary-border);Source: https://www.hubspot.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.
| Property | Declared value | Selector |
|---|---|---|
| font-family | var(--cl-font-family, "HubSpot Sans", sans-serif) | body,[data-cl-brand],body [lang],[data-cl-brand] [lang] |
| font-family | "Zen Kaku Gothic New",sans-serif !important | html[lang=ja] body,html[lang=ja] [data-cl-brand] |
| font-family | var(--cl-font-family-display, "HubSpot Serif", serif) | h1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-display |
| font-family | var(--cl-font-family) | #global-nav-header[data-cl-brand=hubspot-2025] .global-nav-mobile-list-item-heading |
| font-size | 2em | h1 |
| font-size | 1em | pre |
| font-size | 100% | button,input,optgroup,select,textarea |
| font-size | var(--cl-text-font-size) | body,[data-cl-brand],p,.cl-p |
| font-size | var(--cl-font-size-display-01) | h1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-display |
| font-size | var(--cl-font-size-display-02) | h2.-secondary,h2.-display,.h2.-secondary,.h2.-display,.cl-h2.-secondary,.cl-h2.-display,h1.-secondary-small,h1.-display-small,.h1.-secondary-small,.h1.-display-small,.cl-h1.-secondary-small,.cl-h1.-display-small |
| font-size | var(--cl-font-size-display-03) | h3.-display,.h3.-display,.cl-h3.-display |
| font-size | var(--cl-font-size-h1) | h1,.h1,.cl-h1 |
| font-weight | var(--cl-text-font-weight) | body,[data-cl-brand],p,.cl-p |
| font-weight | var(--cl-font-weight-display-01) | h1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-display |
| font-weight | var(--cl-font-weight-display-02) | h2.-secondary,h2.-display,.h2.-secondary,.h2.-display,.cl-h2.-secondary,.cl-h2.-display,h1.-secondary-small,h1.-display-small,.h1.-secondary-small,.h1.-display-small,.cl-h1.-secondary-small,.cl-h1.-display-small |
| font-weight | var(--cl-font-weight-display-03) | h3.-display,.h3.-display,.cl-h3.-display |
| font-weight | var(--cl-font-weight-h1) | h1,.h1,.cl-h1 |
| font-weight | var(--cl-font-weight-h1-small) | h1.-small,.h1.-small,.cl-h1.-small |
| font-weight | var(--cl-font-weight-h2) | h2,.h2,.cl-h2 |
| font-weight | var(--cl-font-weight-h3) | h3,.h3,.cl-h3 |
| line-height | 1.15 | button,input,optgroup,select,textarea |
| line-height | var(--cl-text-line-height) | body,[data-cl-brand],p,.cl-p |
| line-height | var(--cl-line-height-display-01) | h1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-display |
| line-height | var(--cl-line-height-display-02) | h2.-secondary,h2.-display,.h2.-secondary,.h2.-display,.cl-h2.-secondary,.cl-h2.-display,h1.-secondary-small,h1.-display-small,.h1.-secondary-small,.h1.-display-small,.cl-h1.-secondary-small,.cl-h1.-display-small |
| line-height | var(--cl-line-height-display-03) | h3.-display,.h3.-display,.cl-h3.-display |
| line-height | var(--cl-line-height-h1) | h1,.h1,.cl-h1 |
| line-height | var(--cl-line-height-h1-small) | h1.-small,.h1.-small,.cl-h1.-small |
| line-height | var(--cl-line-height-h2) | h2,.h2,.cl-h2 |
| letter-spacing | var(--cl-text-letter-spacing, normal) | body,[data-cl-brand],p,.cl-p |
| letter-spacing | var(--cl-letter-spacing-display-01, normal) | h1.-secondary,h1.-display,.h1.-secondary,.h1.-display,.cl-h1.-secondary,.cl-h1.-display |
| letter-spacing | var(--cl-letter-spacing-display-02, normal) | h2.-secondary,h2.-display,.h2.-secondary,.h2.-display,.cl-h2.-secondary,.cl-h2.-display,h1.-secondary-small,h1.-display-small,.h1.-secondary-small,.h1.-display-small,.cl-h1.-secondary-small,.cl-h1.-display-small |
| letter-spacing | var(--cl-letter-spacing-display-03, normal) | h3.-display,.h3.-display,.cl-h3.-display |
| letter-spacing | var(--cl-letter-spacing-h1, normal) | h1,.h1,.cl-h1 |
| letter-spacing | var(--cl-letter-spacing-h1-small, normal) | h1.-small,.h1.-small,.cl-h1.-small |
| letter-spacing | var(--cl-letter-spacing-h2, normal) | h2,.h2,.cl-h2 |
| letter-spacing | var(--cl-letter-spacing-h3, normal) | h3,.h3,.cl-h3 |
| color | var(--cl-text-color) | :root,[data-cl-brand],[data-cl-theme] |
| color | var(--cl-color-text-01) | .cl-section |
| color | var(--cl-anchor-color, var(--cl-color-link-01)) | a,p>a,.cl-p>a |
| color | var(--cl-anchor-hover-color, var(--cl-color-hover-link-01)) | a:focus-visible,a:hover |
| color | var(--cl-anchor-pressed-color, var(--cl-color-pressed-link-01)) | a:active |
| color | var(--cl-color-hubspot-brand-01) | [data-cl-brand=hubspot-2025] h1.-brand::after,[data-cl-brand=hubspot-2025] .h1.-brand::after,[data-cl-brand=hubspot-2025] .cl-h1.-brand::after |
| color | var(--cl-nav-link-hover-color) | .global-nav-header .-dropdown-active .cl-navLink |
| background-color | rgba(0,0,0,0) | a |
| background-color | var(--cl-color-container-01) | .global-nav-main[data-cl-fixed-element-is-fixed] |
| background-color | var(--cl-color-text-01) | .global-nav-burger-btn-line,.global-nav-burger-btn-line::before,.global-nav-burger-btn-line::after |
| background-color | #3e5974 | body:has(.global-nav-main)::after |
| background-color | var(--cl-color-hover-01) | .cl-tab-button:active,.cl-tab-button:hover,.cl-tab-button:focus-visible |
| background-color | var(--global-nav-tab-button-hover-background-color, var(--cl-color-background-03)) | .global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button[aria-selected=true],.global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button:hover[aria-selected=true] |
| background-color | #fcead7 | .global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button:active[aria-selected=true] |
| background-color | var(--cl-color-pressed-01) | .cl-round-button:active,.cl-roundButton:active |
| border-radius | 1rem | .global-nav-burger-btn-line,.global-nav-burger-btn-line::before,.global-nav-burger-btn-line::after |
| border-radius | var(--cl-border-radius-container) | .cl-dropdown-menu,.cl-dropdown-menu.-caret,.global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button,.global-nav-card,.global-nav-header-sublinks .global-nav-header-sublinks-list-item-link |
| border-radius | var(--cl-border-radius-medium) | .global-nav-card .global-nav-card-cta-text-link |
| border-radius | 8px | .global-nav-header-cta |
| border-radius | 0 0 .1875rem .1875rem | .global-nav-tab-dropdown-content-wrapper |
| border-radius | 50% | .cl-round-button,.cl-roundButton |
| border-radius | 3px | .global-footer**nav-column.active>ul li |
| border-radius | 0 | .wtm-evfc**card.cl-card |
| box-shadow | 0 2px 4px rgba(33,51,67,.12) | .global-nav-main[data-cl-fixed-element-is-fixed] |
| box-shadow | var(--global-nav-box-shadow, 0 2px 4px rgba(33, 51, 67, 0.12)) | .global-nav-main .global-nav-main-inner |
| box-shadow | none | .global-nav-main .global-nav-main-inner |
| box-shadow | 0 0 0 1px var(--cl-card-border-color) | .global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-btn.cl-tab-button:hover,.global-nav-card:hover,.global-nav-header-sublinks .global-nav-header-sublinks-list-item-link:hover |
| box-shadow | 0 1px 24px rgba(33,51,67,.12) | .global-nav-tab-dropdown-content-wrapper |
| box-shadow | 0 0 0 2px var(--cl-color-border-01) | .cl-card.-interactive:has(input[type=checkbox]:checked),.cl-card.-interactive:has(input[type=radio]:checked) |
| max-width | min(100% - var(--cl-section-gutter)\*2,var(--cl-section-content-max-width)) | .cl-section-content |
| max-width | none | .cl-section-content .cl-section-content |
| max-width | max-content | .global-nav-tab-dropdown-section |
| max-width | 100% | .global-nav-tab-dropdown-content-wrapper |
| max-width | 242px | .global-nav-sidebar.cl-tabs[data-cl-tabs-orientation=vertical] .global-nav-sidebar-list-item.cl-tab-item |
| max-width | 0 | .global-nav-top-bar .global-nav-site-search:not(:focus-within) input.global-nav-site-search-input |
| max-width | var(--global-nav-content-max-width, 1080px) | .global-nav-content-section |
| max-width | unset | .wf-page-header.-max-width-none .csol-section-wrapper |
| padding | 0 | button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner |
| padding | .5rem 1rem | .global-nav-main .global-nav-main-inner |
| padding | 0 .5rem | .global-nav-cta-sticky-nav.-mobile-only |
| padding | .5rem | .global-nav-header-sublinks .global-nav-header-sublinks-list-item-link |
| padding | .75rem | .global-nav-card |
| padding | .4rem | .global-nav-main-resources-grid |
| padding | 0 0 1rem .5rem | #global-nav-header[data-cl-brand=hubspot-2025] .global-nav-header-sublinks .global-nav-header-sublinks-title-wrapper |
| padding | var(--cl-button-padding) | .global-nav-header-cta |
| gap | .75rem | .global-nav-main .global-nav-main-group.-mobile-only |
| gap | 1rem | .global-nav-main-group-cta,.global-nav-main .header-nav\_\_ctas |
| gap | 28px | .global-nav-top-bar-group |
| gap | .5rem | .global-nav-card .global-nav-card-cta-text-link |
| gap | .25rem | .global-nav-card .global-nav-card-text-wrapper |
| gap | 2.5rem | .global-nav-header-content |
| gap | var(--global-nav-search-close-icon-size, 24px) | .global-nav-top-bar .global-nav-site-search:focus-within |
| gap | 12px | .cl-carousel:not(.-use-container) .cl-carousel-controls.-bottom |
| transition | top 1s ease-out | .global-nav-skip-link |
| transition | top .1s ease-in | .global-nav-skip-link:focus |
| transition | transform .3s ease-out | .global-nav-burger-btn |
| transition | .3s ease-in-out | .global-nav-burger-menu |
| transition | opacity .2s ease-out,visibility .3s | .global-nav-header .-is-dropdown |
| transition | opacity .2s ease-in,visibility 0s | .global-nav-header .-dropdown-active>.-is-dropdown |
| transition | var(--global-nav-dropdown-toggle-transition, transform 0.3s ease) | .global-nav-header .cl-navLink-submenu-toggle .cl-icon |
| transition | text-underline-offset .3s ease-in-out | [data-cl-brand=hubspot-2025] .global-nav-card .global-nav-card-cta-text-link,.global-nav-card [data-cl-brand=hubspot-2025] .global-nav-card-cta-text-link |
Source: https://www.hubspot.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Evidence and limitations
- Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
- CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
- No inferred dark theme, semantic color roles or framework defaults have been added.
- 1760 custom-property declarations found; 784 relevant property declarations parsed.
Stylesheet sources
- https://www.hubspot.com/
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/207924262801/1791488881393/template_footer-core-critical.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/220201250349/1791488873711/template_homepage-2026.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/207928094053/1791488876593/template_footer-core-non-critical.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/194395071286/1787058035576/template_button.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/80992946022/1782303733728/template_section.min.css
- https://www.hubspot.com/hubfs/hub_generated/module_assets/1/220382832731/1788187313711/module_WTM_-_Expandable_Video_Feature_Carousel.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/194395071283/1784123277484/template_carousel.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/201641145442/1764770669082/template_csol-image.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/194395071292/1784123274384/template_lightbox.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/194395071322/1788350162170/template_card.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/194395071318/1768385548642/template_roundButton.min.css
- https://www.hubspot.com/hubfs/hub_generated/template_assets/1/194395071316/1784123276521/template_a11y.min.css