HubSpot

HubSpot's visual system evokes a reliable, professional ecosystem with a warm, energetic core. It combines a clean, spacious light theme with strong, structured typography. Muted background tones provide a subtle backdrop for card-based content, while a vibrant orange serves as the primary accent, signaling action and branding. The overall impression is one of clarity and approachable efficiency. Always use Marketing Orange (#ff4800) for primary call-to-action buttons, ensuring a consistent visual cue for interaction. Apply a 16px border-radius to all content cards and larger badge elements to maintain a soft, approachable aesthetic. Utilize Ink Black (#1f1f1f) for main body text and prominent headings to optimize readability against light backgrounds. Employ HubSpot Serif Page Header Human at 80px, weight 500 for hero section headlines to create impactful, authoritative messaging. Maintain a clear visual hierarchy by using Canvas White (#fcfcfa) as the dominant background color for content areas, contrasting it with the footer's Ink Black (#1f1f1f). Separate content sections with ample vertical spacing, defaulting to a 24px section gap for comfortable visual rhythm. When outlining interactive elements, use Ink Black (#1f1f1f) for borders to create subtle definitions without heavy shadows. Do not introduce new saturated primary colors; only Marketing Orange (#ff4800) and Accent Violet (#0000c5) serve chromatic roles. Avoid using harsh shadows; rely on clear background separation or subtle borders for element distinction instead. Do not deviate from the specified typographic hierarchy; specific serif and sans-serif fonts have designated roles for headlines and body text. Do not use generic gray buttons; if an action is not primary, use a ghost button style with Ink Black text on a transparent background. Do not use less than 8px border-radius for buttons; 8px is the minimum for interactive elements. Avoid dense, information-heavy blocks without sufficient padding; ensure cards have at least 32px horizontal and 24px vertical padding. Do not place body text directly on a highly saturated background; always ensure a high contrast ratio against Canvas White (#fcfcfa) or similar light neutrals, typically using Ink Black (#1f1f1f).