{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#FCFCFA", "ink": "#1F1F1F", "ink_muted": "#616161", "accent": "#FF4800", "on_accent": "#FFFFFF", "accent_secondary": "#042729", "night": "#1F1F1F", "on_night": "#F8F5EE", "extras": [ { "name": "HubSpot orange (orange-08)", "hex": "#FF4800", "role": "brand accent: logo, primary button fill, secondary button border and text, text-link underline, check icons, active tab bar, the orange full stop", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Orange hover (orange-09)", "hex": "#C93700", "role": "primary button hover fill; secondary button hover border and text", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Orange pressed (orange-10)", "hex": "#9F2800", "role": "primary button pressed fill", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Orange tint (orange-03)", "hex": "#FCECE6", "role": "secondary button hover fill", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Orange light (orange-05)", "hex": "#FCC6B1", "role": "secondary button pressed fill; badge fill", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Neutral 13 / text-01", "hex": "#1F1F1F", "role": "all body and headline text on light grounds, tertiary button fill, footer ground, outline-button border on light", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "White", "hex": "#FFFFFF", "role": "nav, hero, What is HubSpot and logo-row ground; card fill; text on orange", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Cream 01 / background-01", "hex": "#FCFCFA", "role": "default page ground below the logo row (product grid, case studies, badges)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Cream 03 / text on dark", "hex": "#F8F5EE", "role": "text, outline border and logo on dark grounds (teal CTA band, footer headings); hero tile captions", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Teal 13 / dark background-01", "hex": "#042729", "role": "closing CTA band ground", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Teal 12 / dark background-02", "hex": "#093436", "role": "secondary dark ground (not on the homepage)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Agent band base", "hex": "#FCDED2", "role": "AI agents band base fill under its gradient", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Gradient peach", "hex": "#FFA581", "role": "AI agents band gradient stop (at 30% alpha); orange-06", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Gradient pink", "hex": "#FDBFDB", "role": "AI agents band gradient stop (at 30% alpha)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Gradient magenta", "hex": "#F939A6", "role": "AI agents band gradient stop (at 30% alpha)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Gradient blush", "hex": "#FBDFE9", "role": "AI agents band gradient stop (at 30% alpha)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Gradient shell", "hex": "#FBDDD0", "role": "AI agents band gradient stop (at 30% alpha)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Gradient orange", "hex": "#FF4900", "role": "AI agents band gradient stop (at 30% alpha)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Agent UI plum", "hex": "#5E043B", "role": "button fill inside the agent product mock images (magenta-12); appears only inside supplied images", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Teal 11 / link-02", "hex": "#124548", "role": "secondary link color (language menu)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Teal 08 / focus", "hex": "#2F7579", "role": "highlight border, free badge text", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Hairline", "hex": "#E3E3E3", "role": "what rgba(0,0,0,0.11) renders as on white: card borders, dashed card dividers, chip borders (draw it as rgba(0,0,0,0.11))", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Muted text", "hex": "#616161", "role": "what text-02 rgba(0,0,0,0.62) renders as on white: inactive tab labels", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Footer muted link", "hex": "#A5A5A5", "role": "what rgba(255,255,255,0.62) renders as on #1F1F1F: footer links", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Purple beta", "hex": "#7D53E9", "role": "beta label text (light theme beta-01)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Purple beta tint", "hex": "#E5E1FA", "role": "beta label fill", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Success green", "hex": "#00823A", "role": "success text", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Error red", "hex": "#D9002B", "role": "error text", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Warning yellow", "hex": "#EEB117", "role": "warning", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Sage accent", "hex": "#B9CDBE", "role": "accent background 01", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Lavender accent", "hex": "#D6C2D9", "role": "accent background 02", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Magenta accent", "hex": "#FCC3DC", "role": "accent background 03", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Neutral 08", "hex": "#676565", "role": "neutral mid gray", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Neutral 05", "hex": "#CFCCCB", "role": "inactive carousel dots, hover-03", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "Black", "hex": "#000000", "role": "pure black: round carousel button icons", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" } ] }, "typography": { "display": { "family": "Literata", "steal_family": "Literata", "weight": 320, "tracking": 0, "line_height": 1.1, "fallback_stack": "Literata, Georgia, \"Times New Roman\", serif", "real": "HubSpot Serif (HubSpot's own face, Book 300 and Medium 400-600 cuts; proprietary, not licensed for reuse)", "stand_in": true, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site": { "weight": 300, "size_px": "65 hero H1 desktop / 40 phone; 48 closing CTA H2 desktop / 40 phone; 40 section H2 desktop / 32 phone; 28 hero tile captions; 40 statistic numerals (Medium 500)", "line_height": "78px at 65 (1.2); 44px at 40 (1.1); 55.4px at 48 (1.154); 30.8px at 28 (1.1)", "tracking": "normal", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "optical_sizing": "auto (Literata opsz axis follows font-size; load the family with opsz: family=Literata:opsz,wght@7..72,200..900)" }, "body": { "family": "Onest", "steal_family": "Onest", "weight": 400, "tracking": 0, "line_height": 1.75, "fallback_stack": "Onest, \"Helvetica Neue\", Arial, sans-serif", "real": "HubSpot Sans (HubSpot's own face, Book 300-400 and Medium 500-600 cuts; proprietary)", "stand_in": true, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site": { "weight": "300 for running text (Book), 500 for headings, buttons, nav and labels (Medium)", "size_px": "16/28 body, 18/32 hero lead, 14/22 card list and eyebrows, 12/20 utility nav and footer links", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" } }, "mono": { "family": "JetBrains Mono", "steal_family": "JetBrains Mono", "weight": 400, "fallback_stack": "\"JetBrains Mono\", Menlo, monospace", "real": "none: the HubSpot site uses no monospace face", "stand_in": true, "prov": "inferred", "source": "no mono face is loaded on https://www.hubspot.com/ (2026-10-31)" }, "calibration": "Rendered on 2026-10-31 with the real HubSpot woff2 files (loaded locally for measurement only) against open candidates. Display: the hero line \"Build demand, win deals, and delight\" at 65px. HubSpot Serif Book 300 = 1078px wide. Literata 300 = 1106px (+2.6%), ink -3.8%; Literata 350 = +4.2% wide, ink +7.4%; so Literata 320 with -0.01em tracking lands within 1% on width and about +1% on ink. PT Serif matched width (-1.5%) but is static and reads too heavy and bookish; Newsreader and Source Serif 4 are too narrow-waisted and high-contrast. Body: \"HubSpot aligns marketing, sales, and service around your customer data,\" at 18px: HubSpot Sans Book (CSS weight 300) = 614px; Onest 400 = 612px (-0.3%), ink -4%; Public Sans 400 -1%, ink -3% but squarer. Medium: HubSpot Sans Medium 500 on a nav/button line = 364px; Onest 600 = 369px (+1.4%), ink -4.6%; Onest 550 lighter (-9.9% ink). So: site weight 300 -> Onest 400; site weight 500 -> Onest 600; HubSpot Serif 300 -> Literata 320 (-0.01em); HubSpot Serif 500 numerals -> Literata 480. Keep the site's sizes and line heights unchanged. Round 2 re-check (2026-10-31), with Literata's opsz axis loaded: at 65px, Literata 320 with font-optical-sizing auto and tracking 0 = 1085px (+0.6%), ink -13% (lighter, like the real Book cut). With -0.01em it drops to ~1062 and reads cramped: use tracking 0. 14px list text: HubSpot Sans Book = 287px for \"Turn scattered data into unified intelligence.\"; Onest 400 = 289 (+0.7%, so it wraps where HubSpot's does not) and Onest 400 at -0.1px = 282: use letter-spacing -0.1px for 14px text. 12px Medium footer links: Onest 500 matches width exactly (161 vs 161); Onest 600 is +1.2%: use Onest 500 for 12px links.", "weight_map": { "HubSpot Sans 300 (body, 16-18px)": "Onest 400, tracking 0", "HubSpot Sans 300 at 14px": "Onest 400, letter-spacing -0.1px", "HubSpot Sans 500 at 14-24px": "Onest 600", "HubSpot Sans 500 at 12px": "Onest 500", "HubSpot Serif 300": "Literata 320, optical sizing auto, tracking 0", "HubSpot Serif 500 (numerals)": "Literata 480" } }, "style": { "button_shape": "rounded", "button_note": "Buttons are 8px-radius rectangles with a 2px border (transparent on the solid primary). Primary: solid #FF4800, white text. Secondary on light: white fill, #FF4800 2px border and text. Outline on light (section headers): transparent fill, #1F1F1F 2px border and text. On dark: primary unchanged; secondary is a #F8F5EE 2px outline with #F8F5EE text. Three sizes: small 14/22 padding 8px 16px (42 tall), medium 16/28 padding 12px 24px (56 tall), large 18/32 padding 16px 40px (68 tall). Never pills.", "corners": "16px on cards, panels, the testimonial card and agent cards and their images; 8px on buttons; 4px on tagline chips; 0 on the hero photo tiles; 50% on round carousel controls", "linework": "1px rgba(0,0,0,0.11) solid card borders; 1px dashed rgba(0,0,0,0.11) dividers inside cards; a dotted 1px rule runs from a tagline chip to the section edge", "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", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, "voice": { "tone": [ "plain", "warm", "confident", "helpful", "human" ], "notes": [ "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": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "headline-stop", "kind": "guidance", "text": "Headlines and card captions end with a full stop; the hero and closing headlines set that stop in HubSpot orange #FF4800", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "capital-s", "kind": "guidance", "text": "Always write HubSpot with a capital S", "prov": "published", "source": "https://www.hubspot.com/partners/app/branding-guidelines", "also": [ "https://www.hubspot.com/providers/template/branding-guidelines", "https://www.hubspot.com/partners/promotion-guidelines" ] }, { "id": "no-hub-mashups", "kind": "banned_pattern", "text": "Never abbreviate or blend the name: no HubConnector, SyncSpot, HubSync, HubTheme or ThemeSpot style names", "prov": "published", "source": "https://www.hubspot.com/partners/app/branding-guidelines" }, { "id": "no-superlatives-partners", "kind": "guidance", "text": "Partner copy avoids unverifiable superlatives such as \"#1 agency\" or \"leading agency\"; HubSpot statistics must be verifiable by HubSpot", "prov": "published", "source": "https://www.hubspot.com/partners/promotion-guidelines" }, { "id": "referential", "kind": "guidance", "text": "Third parties use HubSpot only referentially (\"for HubSpot\", \"works with HubSpot\"), less prominent than their own name, with a non-affiliation disclaimer", "prov": "published", "source": "https://legal.hubspot.com/tm-usage-guidelines" }, { "id": "trademarks", "kind": "guidance", "text": "Product names carry their marks on the site: Marketing Hub®, Sales Hub®, Service Hub®, Content Hub™, Data Hub™, Revenue Hub™, Smart CRM™, Agent Hub™", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "em-dash", "kind": "guidance", "text": "Em dash with a space on both sides (\"customers — all on one platform\")", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "numbers-proof", "kind": "guidance", "text": "Proof is a published number with a plus sign: 306,000+ customers, 2,000+ integrations, \"Voted #1 in 526 G2 Reports\"", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "eyebrow-caps", "kind": "guidance", "text": "Only the small hero eyebrow and the customer-count label are set in capitals; everything else is sentence case", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" } ], "approved": { "phrases": [ "grow better", "crafted, not cobbled", "all on one platform", "Get a demo", "Get started free", "Learn more" ], "words": [ "customers", "platform", "grow", "delight", "connected" ] }, "banned": [ "#1 agency", "leading agency", "HubSync", "SyncSpot", "certified partner (for an app)" ], "is_not": [ "jargon-heavy enterprise speak", "hype superlatives without a source", "cute or jokey" ], "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "spec": { "source": "https://www.hubspot.com/", "how": "Measured from computed styles, CSS custom properties and screenshots of the live homepage at 1440 and 390 on 2026-10-31.", "provenance": "observed", "motion": [ { "name": "button-color", "duration_ms": 150, "easing": "linear", "use": "button background and text color on hover/press", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "text-link-underline", "duration_ms": 300, "easing": "ease-in-out", "use": "text-link underline offset change on hover", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "carousel-slide", "duration_ms": 300, "easing": "ease", "use": "agent carousel and hero phone carousel slide translate/scale", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "marquee", "duration": "continuous, linear infinite", "easing": "linear", "use": "customer logo row scrolls left continuously; a round pause button stops it", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, { "name": "integrations-cloud", "duration": "continuous", "easing": "linear", "use": "the integration icons drift diagonally inside their panel. Resting state = the supplied image", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "name": "hero-tile-video", "duration": "per clip", "easing": "n/a", "use": "each hero photo tile can play a short product animation; the resting state a screenshot shows is the photo only", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" } ], "icons": { "grid": "not published", "sizes": [ { "name": "product", "px": 24, "use": "product hub icons in cards" }, { "name": "chip", "px": 32, "use": "Agent Hub icon in a 66px chip" }, { "name": "ui", "px": 16, "use": "check, arrow, sparkle" } ], "stroke": "single-weight orange line icons with rounded ends (product hub icons)", "color": "#FF4800 on light; checks #FF4800", "rule": "one orange line icon per product; UI glyphs (chevrons, arrows) in #1F1F1F", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "signature": [ { "id": "orange-stop", "name": "The orange full stop", "where": "end of the hero H1 and the closing CTA H2", "spec": "the final \".\" of the headline is wrapped and colored #FF4800; the rest of the headline stays #1F1F1F (or #F8F5EE on teal)", "dont": "color whole words orange or add other punctuation color", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "serif-over-sans", "name": "Light serif headlines over a plain sans", "where": "every H1/H2 and the hero tile captions", "spec": "HubSpot Serif Book (300) for headlines at 40-65px, HubSpot Sans for everything else; headlines never bold", "dont": "set headlines in the sans or in bold", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "orange-actions", "name": "Orange is for action", "where": "buttons, link underlines, check icons, active tab bar, logo", "spec": "#FF4800 is used on interactive or brand marks only; grounds stay white, cream #FCFCFA, teal #042729 or #1F1F1F", "dont": "use orange as a section ground", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "tagline-chip", "name": "Tagline chip with a dotted rule", "where": "section headers (Powered by AI, Case Studies, the Agent Hub icon chip)", "spec": "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)", "dont": "use a filled colored pill", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "dashed-card", "name": "Bordered white cards with dashed inner rules", "where": "product grid, testimonial card", "spec": "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", "dont": "drop shadows or colored card fills", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "warm-gradient", "name": "Warm agent gradient band", "where": "the AI agents band only", "spec": "#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", "dont": "use it behind body text sections or on more than one band", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" } ], "page": { "source": "https://www.hubspot.com/", "date": "2026-10-31", "prov": "observed", "voices": "Two voices. The homepage (and so any landing page built from this spec) is plain product marketing: sentence-case declaratives with a full stop, two short balanced clauses, numbers as proof, \"Get a demo\" / \"Get started free\" as the only CTAs. The published guidance (trademark and partner branding pages) is legal and naming law: capital S in HubSpot, no altered or recolored logos, no Hub-mashup names. A landing page follows the homepage voice and this anatomy; the legal rules always hold.", "nav": { "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" ] } }, "sections": [ { "name": "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.\"" } }, { "name": "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" ] }, { "name": "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)" } }, { "name": "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." ] } }, { "name": "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" } }, { "name": "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" } }, { "name": "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." } }, { "name": "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)" ] }, { "name": "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)" }, "dark_ground": { "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)" }, "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.", "weights": "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_anchors": { "note": "Measured top y at 390 for every band and its first element. Use these as the single spacing model; band boundaries include the padding.", "rows": [ "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" ] } }, "bands": [ { "label": "Header", "ground": "#FFFFFF", "content": "utility row + logo, 4 menus, 2 small buttons", "desktop": "128px (52 + 76)", "phone": "58px: logo, Get a demo, hamburger", "anatomy": [ "hairline shadow under it" ] }, { "label": "Hero", "ground": "#FFFFFF", "content": "eyebrow, 2-line 65px serif H1, lead, 2 large buttons, centred", "desktop": "y 128-702", "phone": "y 58-~790; H1 6 lines at 40px", "anatomy": [ "orange full stop" ] }, { "label": "Hero photo tiles", "ground": "#FFFFFF", "content": "3 photo tiles with serif captions", "desktop": "y 702-1262, tiles 464x560", "phone": "carousel 278x300 + dots", "anatomy": [ "dark fade at the bottom of each tile" ] }, { "label": "What is HubSpot?", "ground": "#FFFFFF", "content": "H2 left, body right", "desktop": "y 1262-1486", "phone": "stacked", "anatomy": [] }, { "label": "Customer logo row", "ground": "#FFFFFF", "content": "caps label, rule, marquee, pause", "desktop": "y 1486-1636", "phone": "stacked", "anatomy": [] }, { "label": "Product platform grid", "ground": "#FCFCFA", "content": "sticky intro column + 10 product cards", "desktop": "y 1636-3192", "phone": "stacked cards", "anatomy": [ "dashed card dividers" ] }, { "label": "AI agents band", "ground": "#FCDED2", "content": "gradient band, header, 3 agent cards carousel", "desktop": "y 3192-4203", "phone": "one card at a time", "anatomy": [ "warm gradient" ] }, { "label": "Integrations panel", "ground": "#FCFCFA", "content": "white panel, heading + link left, icon cloud right", "desktop": "y 4203-4533", "phone": "icons on top, text below", "anatomy": [] }, { "label": "Case studies header", "ground": "#FCFCFA", "content": "chip + rule + outline button, H2 + body", "desktop": "y 4533-4773", "phone": "stacked", "anatomy": [] }, { "label": "Tabbed testimonial", "ground": "#FCFCFA", "content": "tabs, card with photo, quote, 2 stats", "desktop": "y 4773-5487", "phone": "stacked card", "anatomy": [] }, { "label": "G2 badges", "ground": "#FCFCFA", "content": "text + 6 badges", "desktop": "y 5487-5703", "phone": "2 rows of 3", "anatomy": [] }, { "label": "Closing CTA", "ground": "#042729", "content": "cream serif H2 + 2 buttons, left-aligned", "desktop": "y 5703-6038", "phone": "stacked", "anatomy": [ "orange full stop" ] }, { "label": "Footer", "ground": "#1F1F1F", "content": "link columns, social row, logo, legal", "desktop": "y 6038-6699", "phone": "accordion", "anatomy": [] } ], "layout": { "page_margin": { "desktop": 110, "phone": 16 }, "section_padding": { "desktop": 64, "phone": 32 }, "container_max": 1220, "hero_text_max": 1078, "columns": 12, "columns_phone": 1, "gutter": 24, "gutter_phone": 16, "card_gap": 24, "nav_height": 128, "note": "Measured on https://www.hubspot.com/ (2026-10-31) at 1440 and 390. Content column x 110-1330 (1220px) for every section except the full-bleed hero tiles (x 16-1424). Two-column section headers put the H2 at x 110 (436 wide) and the body at x 894 (436 wide). Section padding: 64px top/bottom on the hero, product grid, agents band, integrations (64/24) and closing CTA; 40px on What is HubSpot?, the logo row and badges (badges 96 bottom). Phone: 16px gutters, cards 358 wide.", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "type": [ { "role": "Hero H1", "id": "display-xl", "face": "HubSpot Serif", "size": { "desktop": 65, "phone": 40 }, "line_height": 1.2, "tracking_px": 0, "weight": 320, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "line_height_phone": 1.045, "site_weight": 300, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Book" }, { "role": "Closing CTA H2", "id": "display-l", "face": "HubSpot Serif", "size": { "desktop": 48, "phone": 40 }, "line_height": 1.154, "tracking_px": 0, "weight": 320, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 300, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Book" }, { "role": "Section H2", "id": "h2", "face": "HubSpot Serif", "size": { "desktop": 40, "phone": 32 }, "line_height": 1.1, "tracking_px": 0, "weight": 320, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "line_height_phone": 1.125, "site_weight": 300, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Book" }, { "role": "Statistic numeral", "id": "stat", "face": "HubSpot Serif", "size": { "desktop": 40, "phone": 40 }, "line_height": 1.1, "tracking_px": 0, "weight": 480, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 500, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Medium" }, { "role": "Hero tile caption", "id": "caption-serif", "face": "HubSpot Serif", "size": { "desktop": 28, "phone": 28 }, "line_height": 1.1, "tracking_px": 0, "weight": 320, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "line_height_phone": 1.125, "site_weight": 300, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Book" }, { "role": "Agent card title / integrations heading / G2 line", "id": "h3", "face": "HubSpot Sans", "size": { "desktop": 24, "phone": 24 }, "line_height": 1.417, "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 500, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Medium" }, { "role": "Footer heading (visible text)", "id": "h4", "face": "HubSpot Sans", "size": { "desktop": 14, "phone": 16 }, "line_height": 1.15, "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 500, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Medium" }, { "role": "Product card title / caps label", "id": "h5", "face": "HubSpot Sans", "size": { "desktop": 18, "phone": 18 }, "line_height": 1.556, "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 500, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Medium" }, { "role": "Hero lead", "id": "p-large", "face": "HubSpot Sans", "size": { "desktop": 18, "phone": 18 }, "line_height": 1.778, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 300, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Book" }, { "role": "Body", "id": "p-medium", "face": "HubSpot Sans", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.75, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 300, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Book" }, { "role": "Nav link / button medium", "id": "label-m", "face": "HubSpot Sans", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.75, "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 500, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Medium" }, { "role": "Card list / small text / eyebrow (caps)", "id": "p-small", "face": "HubSpot Sans", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.571, "tracking_px": -0.1, "weight": 400, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 300, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Medium (Medium for eyebrows and chips)" }, { "role": "Utility nav / footer links / copyright", "id": "micro", "face": "HubSpot Sans", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.667, "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "site_weight": 500, "note": "weight is the stand-in weight (Literata/Onest); site_weight is HubSpot's own CSS weight", "cut": "Medium" } ], "components": { "button_primary_on_light": { "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)", "states": { "hover": { "css": { "background-color": "#C93700" }, "prov": "observed" }, "pressed": { "css": { "background-color": "#9F2800" }, "prov": "observed" } }, "transition": "background-color .15s linear, color .15s linear", "text_style": "16/28 HubSpot Sans Medium (14/22 small, 18/32 large)", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)", "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" }, "button_secondary_on_light": { "fill": "#FFFFFF", "text": "#FF4800", "border": "2px solid #FF4800", "radius": 8, "padding": "same as primary", "example": "Get started free (173x56)", "states": { "hover": { "css": { "background-color": "#FCECE6", "color": "#C93700", "border-color": "#C93700" }, "prov": "observed" }, "pressed": { "css": { "background-color": "#FCC6B1", "color": "#9F2800" }, "prov": "observed" } }, "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)", "height": 56, "padding_x": 24, "font_size": 16, "weight": 600, "face": "body", "ring_px": 2, "ring": "#FF4800" }, "button_outline_on_light": { "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)", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "padding_x": 24, "font_size": 16, "weight": 600, "face": "body", "ring_px": 2, "ring": "#1F1F1F" }, "button_secondary_on_dark": { "fill": "none", "text": "#F8F5EE", "border": "2px solid #F8F5EE", "radius": 8, "padding": "12px 24px", "example": "Get started free on the teal CTA (173x56)", "states": { "hover": { "css": { "background-color": "rgba(0,0,0,0.2)" }, "prov": "observed" } }, "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)", "height": 56, "padding_x": 24, "font_size": 16, "weight": 600, "face": "body", "ring_px": 2, "ring": "#F8F5EE" }, "text_link": { "text": "#1F1F1F", "underline_color": "#FF4800", "note": "16/28 Medium (14/22 small); 2px #FF4800 underline, text-underline-offset 6px; hover changes the offset over 0.3s ease-in-out", "prov": "observed", "source": "https://www.hubspot.com/ CSS custom properties --hubspot-2025-* and --light-theme-*/--dark-theme-* (2026-10-31)" }, "arrow_link": { "text": "\"Learn more\" 14/22 Medium #1F1F1F, no underline, then a 16px right arrow 6px after", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "tagline_chip": { "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", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "product_card": { "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", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "row_heights": "desktop rows 266, 288, 246, 266, 266 (cards in a row equal)" }, "agent_card": { "fill": "#FFFFFF", "border": "none", "radius": 16, "padding": "24px 24px 32px", "image": "square, radius 16", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "size": "367x545 desktop (all three equal at rest), 342x520 phone; image 319 desktop, 294 phone" }, "testimonial_card": { "fill": "#FFFFFF", "border": "1px solid rgba(0,0,0,0.11)", "radius": 16, "padding": 24, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "tab": { "text": "#1F1F1F", "active": "#1F1F1F text, 4px solid #FF4800 bottom border", "inactive": "rgba(0,0,0,0.62), transparent border", "padding": "8px 16px 4px", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "note": "16/28 Medium; inactive rgba(0,0,0,0.62)" }, "round_control": { "fill": "#FFFFFF", "size": "48px arrows, 32px pause", "radius": 9999, "icon": "#000000", "shadow": "none", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "shape": "circle (border-radius 50%)" }, "check_list": { "icon": "16px #FF4800 check", "text": "14/22 300", "indent": 34, "gap": 6, "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" } }, "breakpoints": { "phone_max": 767, "note": "inferred: the site switches to the phone layout below 768px (not measured exactly)", "prov": "inferred" } }, "system": { "fixed": [ "#FF4800 orange", "light serif headlines", "capital S in HubSpot" ], "flex": "Section grounds can move between white, cream, teal and the warm gradient.", "traits": [ { "is": "warm", "not": "cute" }, { "is": "plain-spoken", "not": "jargon-heavy" }, { "is": "confident", "not": "boastful" }, { "is": "helpful", "not": "pushy" } ] }, "formats": [ { "format": "Landing page", "level": "full", "must": "serif 300 headline with orange full stop, orange primary + secondary buttons, bordered 16px cards on cream, teal closing CTA, #1F1F1F footer", "flex": "which sections, gradient band optional" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the logo. A light serif headline ending in an orange full stop over orange 8px buttons on warm white still reads as HubSpot." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Get a demo", "button": true, "button_fill": "#FF4800" }, "do_caption": "Orange for the action", "dont": { "ground": "#FF4800", "text": "Get a demo" }, "dont_caption": "Orange as a ground" } ], "make_it_yours": { "note": "Everything above transfers. These are HubSpot's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Helping millions of organizations grow better", "prov": "published", "source": "https://www.hubspot.com/our-story" }, "story": { "text": "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.)", "prov": "published", "source": "https://www.hubspot.com/our-story", "paraphrase": true }, "values": [ { "name": "Grow better", "text": "Growing better means aligning your own success with your customers' success (paraphrase).", "prov": "published", "source": "https://www.hubspot.com/our-story" }, { "name": "Crafted, not cobbled", "text": "Products and company built as one designed whole rather than stitched together (paraphrase).", "prov": "published", "source": "https://www.hubspot.com/our-story" } ] }, "positioning": { "statement": { "text": "The agentic customer platform that helps scaling businesses grow better.", "prov": "published", "source": "https://www.hubspot.com/newsroom" }, "category": { "text": "Agentic customer platform (CRM plus marketing, sales and service software)", "prov": "published", "source": "https://www.hubspot.com/newsroom", "also": [ "https://www.hubspot.com/ (2026-10-31)" ] }, "audience": { "text": "Scaling organizations, from startups and small businesses to enterprises, and their customer-facing teams", "prov": "published", "source": "https://www.hubspot.com/our-story" }, "problem": { "text": "Disconnected tools and data slow growing businesses down", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "promise": { "text": "Everything and everyone connected in one place, so growing a business is easier", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, "differentiators": [ { "text": "Every product sits on the same Smart CRM database", "prov": "published", "source": "https://www.hubspot.com/our-story" }, { "text": "AI agents built into the platform, grounded in customer data", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "text": "2,000+ App Marketplace integrations", "prov": "published", "source": "https://www.hubspot.com/newsroom" }, { "text": "Free tools and a free CRM as the way in (\"Get started free\")", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" } ], "alternatives": [ { "text": "Stitched-together point tools (\"crafted, not cobbled\" is the contrast)", "prov": "inferred", "source": "https://www.hubspot.com/our-story" } ] }, "messaging": { "taglines": [ { "text": "Grow better", "prov": "published", "source": "https://www.hubspot.com/our-story", "note": "Mission: helping millions of organizations grow better" }, { "text": "Build demand, win deals, and delight customers — all on one platform.", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "note": "homepage H1" }, { "text": "Make impossible growth feel impossibly easy, with HubSpot.", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "note": "homepage closing CTA" } ], "attributes": [ "connected", "AI-powered", "easy to use", "customer-first" ], "key_messages": [ "One platform for marketing, sales and service built on one customer data layer", "Built-in AI agents that work alongside your team" ], "boilerplate": { "text": "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.)", "prov": "published", "source": "https://www.hubspot.com/newsroom", "paraphrase": true }, "pillars": [ { "name": "One platform", "claim": "Marketing, sales, service, content, data and revenue on one platform around shared customer data.", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "proof": [ "p-hubs", "p-integrations" ] }, { "name": "AI you control", "claim": "Built-in AI agents (prospecting, data, customer) that work around the clock, grounded in your CRM data.", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "proof": [ "p-65" ] }, { "name": "Easy growth", "claim": "Growing a business is hard; HubSpot makes it easier and connects everyone in one place.", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "proof": [ "p-customers", "p-g2" ] } ], "proof_points": [ { "id": "p-customers", "kind": "stat", "text": "306,000+ customers worldwide", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "also": [ "https://www.hubspot.com/newsroom" ] }, { "id": "p-integrations", "kind": "stat", "text": "2,000+ integrations", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "p-g2", "kind": "award", "text": "Voted #1 in 526 G2 Reports (homepage figure on 2026-10-31; the About page shows 571)", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)", "also": [ "https://www.hubspot.com/our-story" ] }, { "id": "p-65", "kind": "stat", "text": "AI agents can resolve over 65% of customer inquiries (HubSpot's homepage claim)", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "p-hubs", "kind": "fact", "text": "Eight connected products: Marketing, Sales, Service, Content, Data and Revenue Hubs, Smart CRM and Agent Hub", "prov": "observed", "source": "https://www.hubspot.com/ (2026-10-31)" }, { "id": "p-revenue", "kind": "stat", "text": "Over $3.13 billion in 2025 revenue", "prov": "published", "source": "https://www.hubspot.com/newsroom" } ], "claim_boundaries": [ "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)" ] } } } }