` with `cite` attribute when applicable ### Reduced Motion - Honored across the site - Flywheel rotation, card hover lift: disabled - Scroll-triggered reveals: opacity-only - Hover state changes preserve color, drop motion ## 10. Responsive Behavior ### Breakpoints | Tier | Min-width | Use | |---|---|---| | mobile | 0–639px | Single-column, stacked Hub cards | | tablet | 640–1023px | 2-column feature grid | | desktop | 1024–1279px | Full 12-column with 3-up Hub grid | | wide | 1280px+ | Container caps at 1240, generous gutters | ### Touch Targets Minimum 44×44px on mobile. Primary CTA scales padding from `14px 24px` (desktop) to `16px 28px` (mobile) for 52px+ tap area — the coral button is on-brand even at touch sizes. Form inputs grow to 48px height on mobile. ### Collapsing Strategy - **Hero display**: 88px → 64px → 48px → 36px down the cascade — HubSpot Sans scales aggressively - **Hub product grid**: 5-col → 3-col → 2-col → 1-col - **Customer story grid**: 3-col → 2-col → 1-col - **Top nav**: full mega-dropdown → hamburger drawer at <1024px (drawer keeps coral CTA pinned at bottom) - **Section vertical rhythm**: 120px → 80px → 64px - **Pricing tier table**: 4-col side-by-side → 1-col stacked accordion on mobile ### Image Behavior - Illustrations: SVG-based, scale infinitely; coral + teal accents remain crisp - Product mockups: aspect-ratio 16:10, `object-fit: contain`, lazy-loaded - Avatars: 48×48px circular for testimonial cards, 32×32px for blog author bylines - Customer logos: monochrome navy-slate grey, height-locked at 32–40px in the social-proof rows ### Container Queries HubSpot uses container queries on the Hub product cards — when a card narrows below 280px, the icon shifts from top-left to inline with the title, and the body copy truncates to 2 lines with ellipsis. ## 11. Content & Voice ### Tone **Patient-teacher-with-a-methodology-to-sell.** HubSpot talks to small-to-mid-market business owners, marketers, and salespeople who want to grow their company but don't have a CMO yet. The voice is warm, evangelical about inbound methodology, content-craft-forward, and consistently second-person. "Grow better" rather than "Maximize revenue". "Free CRM" is the protected phrase — it appears more than any other CTA across the entire site. The voice has been refined since 2006 around the *Inbound Marketing* book (Halligan & Shah) and is documented in HubSpot's internal style guide. The brand is famously content-marketing-forward — the HubSpot blog publishes more long-form than most media companies, and the academy has trained hundreds of thousands of marketers on the inbound methodology (which conveniently maps to HubSpot products). ### Microcopy Patterns - **Button verbs**: "Get free CRM", "Get started free", "Get a demo", "Talk to sales", "Start free or get a demo" - **Empty states**: "No contacts yet — let's import your first list." (Inviting, action-oriented.) - **Errors**: "Something didn't work. Mind trying that again?" (Conversational, not technical.) - **Success**: "Saved." / "Sent." (Past tense. Confidence.) - **Loading**: "Pulling your data…" (Verb in progress, sets expectation.) - **Confirmations**: "All set." / "You're in." (Brief, friendly.) - **Inbound-method nudges**: "Want help? Take the free Inbound Course →" (academy callout woven into product flow) ### CTA Verb Conventions HubSpot's CTA hierarchy is famously consistent: **"Get started free"** as primary across hero, pricing, footer; **"Get a demo"** as secondary for higher-touch sales paths; **"Talk to sales"** for enterprise. The word "free" appears in primary CTAs constantly — the freemium CRM is the entire growth flywheel. For content surfaces: **"Read the guide"**, **"Take the free course"**, **"Download the ebook"**, **"Watch the demo"**. ### Empty States Empty states get the patient-teacher voice: "No deals in your pipeline yet — let's add your first." Often paired with a 30-second video tutorial or an academy link. HubSpot's empty states **always teach something** — they're the inbound methodology in microcosm. ## 12. Dark Mode & Theming HubSpot's marketing site is **light-only** — no global dark variant offered. The product UI (HubSpot CRM dashboard, Marketing Hub editor) ships its own theming with a limited dark surface, but the marketing canvas commits to the off-white + coral + navy-slate palette as part of the brand commitment. HubSpot uses the slate `#2e3338` and deep navy `#213343` bands as dark inversion devices for testimonial walls and footers — composition rhythm, not preference. The token swap inside any dark band: ```yaml colors-inverted: bg: '#2e3338' surface: '#3a4046' surface-2: '#4a5159' text: '#f5f8fa' # near-white, preserves voice text-muted: '#cbd6e2' text-soft: '#7c98b6' brand: '#FF7A59' # coral unchanged border: '#516f90' # mid-navy border on dark ``` A full dark marketing canvas would shift HubSpot from "approachable inbound teacher" to "developer-tool serious" — breaking the entire brand argument. The off-white canvas is doing too much brand work to drop. ## 13. Lineage & Influences HubSpot's design system is **one of the most distinctive in B2B SaaS** specifically because it leans into warmth where almost every peer leans cold. Where Salesforce runs cobalt blue + crisp grotesque to project enterprise gravitas, where Intercom runs cobalt blue + tight humanist sans to project technical sophistication, HubSpot runs **coral-orange + warm off-white + round humanist sans** to project "we are your friendly inbound marketing teacher". The 2006-founding methodology (the *Inbound Marketing* book by Brian Halligan and Dharmesh Shah) is encoded directly into every visual decision. The signature move is the **`#FF7A59` coral-orange** as a surgical accent — not used as a full canvas (the way Mailchimp uses its Cavendish yellow), but as the consistent CTA + accent + flywheel-logo color that threads through every band. The off-white `#fcfcfa` canvas (warmer than `#fff`, cooler than cream) does most of the brand work — it lets pure-white card surfaces lift gently without requiring heavy shadows, and it ties the page to the warm coral accent rather than the cold blue most B2B chooses. The typography is **HubSpot Sans / HubSpot Sans / Avenir-class humanist sans** — round terminals, tall x-height, friendly construction. This is the deliberate counter-move against the "Inter SaaS" homogeneity that dominates the industry. HubSpot Sans (proprietary, custom-tuned for screen rendering) carries the same friendliness as Mailchimp's Cooper Light serif but in sans form — both brands found a way to escape Inter/Söhne without losing legibility. The closest design siblings are **Mailchimp** (peer/sister B2B SMB marketing tool with the same warm-friendly playbook), **Drift** (marketing-automation peer with coral / orange accents and round humanist sans), and **Intercom** (B2B SaaS adjacent, though Intercom runs cobalt blue rather than coral). The contrast is sharpest against **Salesforce** — HubSpot's entire visual identity is positioned as "we are not Salesforce", and the warmth of coral + off-white versus Salesforce's enterprise blue is the longest-running brand argument in CRM. The deeper lineage runs through **2010s warm-humanist B2B SaaS** — Mailchimp's chunky-friendly playbook proved that B2B could be warm, and HubSpot built the coral + humanist sans + content-marketing-heavy formula on top of that proof. By 2026, the discipline has aged extraordinarily well — HubSpot looks both contemporary and timeless, and the coral remains one of the most-recognized brand colors in B2B SaaS. **Named Influences** - **Mailchimp** ([mailchimp.com](https://mailchimp.com)) — Peer/sister B2B SMB marketing tool; proved warm-friendly works in B2B and the closest design sibling for tone, content-craft, and approachable-SMB voice - **Intercom** ([intercom.com](https://www.intercom.com)) — B2B SaaS adjacent; humanist sans and customer-conversation-first positioning that shares HubSpot's friendly-technical register - **Salesforce** ([salesforce.com](https://www.salesforce.com)) — Enterprise CRM competitor; HubSpot's entire warm coral + off-white playbook is positioned in deliberate contrast to Salesforce's enterprise cobalt blue - **Drift** ([drift.com](https://www.drift.com)) — Marketing-automation peer; shares the coral/orange accent direction and round humanist sans family, often confused with HubSpot at a glance ## 14. Do's and Don'ts ### Do - Keep the coral-orange at exactly `#FF7A59`; even a 5% drift toward `#ff5c35` shifts the brand from "inviting" to "urgent" - Hold the off-white canvas at `#fcfcfa`; pure white reads as generic B2B SaaS - Use HubSpot Sans / HubSpot Sans / Avenir-class humanist sans on every level — round terminals are the brand - Keep navy-slate `#33475b` as the body color — never pure black, never cool grey - Use coral as a surgical accent (CTAs, flywheel, illustrations) — not as a full canvas band - Reach for soft navy-tinted shadows `rgba(51,71,91, ...)` rather than generic black - Lift Hub product cards on hover with `translate-y(-2px)` + shadow upgrade — that's the signature interaction - Use the 5-color brand system (coral, navy, teal, yellow, violet) for Hub product associations - Place the "Get started free" CTA in every major section — the freemium CRM is the entire growth motor - Set body type at 17px / 1.6 line-height — content-marketing readability is the floor - Use 96–120px section vertical rhythm — content-dense-but-comfortable, not poster-spacious - Anchor every page with an academy or content callout — inbound methodology is always one scroll away ### Don't - Substitute Inter / Söhne / Helvetica for the humanist sans family; tight grotesques break the friendly inbound voice - Use coral as a full background band; the brand is "coral as accent on warm white", not "coral canvas" - Apply pure black to body text; navy-slate `#33475b` is the protected pair - Drop body type below 16px — 17 is the content-marketing readability floor - Use sharp 0px corners on cards or buttons; the soft 6–12px radius is the approachable B2B signature - Use cool grey on the canvas; the off-white is warm-tilted and cool grey breaks the palette - Apply heavy borders (2px+) instead of soft shadows — the depth language is shadow, not border weight - Use coral on body text — coral fails AA contrast on the warm canvas; coral is for backgrounds and large UI only - Drop the inbound flywheel illustration in favor of an abstract gradient; the flywheel is brand-load-bearing - Add a "Talk to sales" CTA without also offering a "Get started free" option; the freemium path is non-negotiable - Use Mailchimp's zero radius — that's a print-poster signature that doesn't translate to inbound B2B - Use Salesforce-style cobalt blue accents anywhere; that's the brand HubSpot is positioned against ## 15. Agent Prompt Guide ### Quick Color Reference ``` bg: #fcfcfa (warm off-white canvas) surface: #ffffff (card surface, pure white) bg-cream: #fef8f3 (peach callout band) bg-dark: #2e3338 (slate testimonial band) text: #33475b (navy-slate body) text-muted: #516f90 brand: #FF7A59 (coral-orange — the entire identity) brand-deep: #ff5c35 (hover state) accent: #33475b (navy-slate = secondary brand) accent-teal: #00bda5 (flywheel + success) border: #cbd6e2 (1px navy hairline) ``` ### Example Component Prompts 1. *"Create a HubSpot-style warm hero: off-white `#fcfcfa` background, HubSpot Sans 700 at 88px navy-slate `#33475b` headline reading 'Grow better with HubSpot.' tracked at -0.03em, HubSpot Sans 400 22px lead subhead in navy-slate below, coral CTA `#FF7A59` bg with white HubSpot Sans 600 16 label saying 'Get started free' at 6px radius with soft coral-tinted shadow on hover."* 2. *"Design a HubSpot Hub product card: white bg, 12px radius, 1px `#eaf0f6` border, soft navy-tinted shadow `0 4px 16px rgba(51,71,91,0.08)`, 32px padding. 48×48 coral-tinted icon top-left, HubSpot Sans 600 26 title in navy-slate, body in HubSpot Sans 400 17, bottom-row 'Learn more →' ghost coral button. Card lifts on hover with translate-y -2px + shadow upgrade."* 3. *"Build a HubSpot testimonial card: white bg, 12px radius, soft shadow, 40px padding. 24px HubSpot Sans 400 quote in navy-slate `#33475b`, 64×64 round customer avatar with name in HubSpot Sans 600 15 and company role in HubSpot Sans 400 14 muted navy below. Company logo in monochrome navy at 32px height bottom-right."* 4. *"Compose a HubSpot cream callout band: full-bleed peach `#fef8f3` background, 96px vertical padding, navy-slate HubSpot Sans 600 44 headline, navy HubSpot Sans 400 19 body, coral CTA `#FF7A59` block with white label saying 'Take the free course'. Eyebrow above headline in HubSpot Sans 700 12 / 0.12em ALL CAPS in muted navy reading 'HUBSPOT ACADEMY'."* 5. *"Create a HubSpot pricing tier card: white bg, 12px radius, 40px padding. Middle tier gets 2px solid coral `#FF7A59` border + `0 6px 20px rgba(255,122,89,0.15)` coral-tinted shadow + coral pill badge 'Most popular' top-right. HubSpot Sans 600 28 tier name, HubSpot Sans 700 56 price in navy-slate with /mo HubSpot Sans 400 17 muted, feature list with coral check icons, primary coral CTA 'Get started free' at bottom."* 6. *"Design a HubSpot inline email capture: horizontal layout, white input on left with 1px `#cbd6e2` navy hairline border 6px radius, coral submit button on right matching height saying 'Subscribe', placeholder 'your@company.com' in `#7c98b6`. Focus state: input border becomes coral with 3px coral-tinted halo."* ### Iteration Guide 1. **Start with the coral exactness.** If `#FF7A59` is approximated as `#ff5c35` or `#ff6b3d`, force back to exact. The hex is non-negotiable — drift reads as Drift, not HubSpot. 2. **Warm the canvas.** If background is `#ffffff`, swap to `#fcfcfa`. The off-white is doing significant brand work — pure white reads as generic B2B SaaS. 3. **Swap to navy-slate body.** If body type is `#000000` or cool grey, swap to `#33475b`. The navy-slate ties everything back to the inbound flywheel color story. 4. **Soften the radius.** If buttons or cards are 0px or 16px+, force to 6px (buttons) or 8–12px (cards). The moderate radius is the approachable-B2B signature. 5. **Swap to humanist sans on display.** If hero copy is rendering in Inter / Söhne / Helvetica, swap to HubSpot Sans 700. The round terminals carry the friendly inbound voice. 6. **Replace borders with shadows.** If cards lean on 2px borders for depth, swap to 1px hairline + soft navy-tinted shadow. HubSpot depth is shadow-led, not border-led. 7. **Add the Hub product card grid.** If the page lacks the 3- or 5-up Marketing/Sales/Service/CMS/Operations row, add it — it's the central visual unit of HubSpot homepage. 8. **Thread coral through every band.** If the page reads as monochrome navy/white, find the CTA / accent moment in each section and apply coral. Coral as surgical accent in every band is the rhythm. --- *Theme-toggle audit: score=0, signals=[none]*