Project Overview
As the company’s web infrastructure scaled, HubSpot needed a foundational design system to drive visual consistency, improve team velocity, and support greater collaboration between designers, developers, and marketers.
Challenges
No unified design system across teams
With teams across the org working separately to create digital experiences, HubSpot lacked a centralized component library that could ensure brand consistency and reusability across properties. This lead to inefficiencies and inconsistencies, as different teams often spent design and development time producing their own components for similar use cases.
Growing content demands and page volume
The rapid growth of HubSpot’s website and blog meant that non-designers needed scalable building blocks to create brand-aligned pages without custom development.
Cross-functional handoff issues
Design-to-dev handoff was inconsistent, leading to delays, misinterpretation, and rework—especially on net-new components or high-traffic modules
Solutions
Structured a scalable design system from the ground up
Form + Function worked into HubSpot’s brand infrastructure team, aiding to build and structure the first iteration of HubSpot’s web component library. We helped conduct research into the structure and standards of design systems of other enterprise-level companies, and establish frameworks & governance for a scalable design system unique to HubSpot’s requirements.
Working closely with internal teams, we organized design assets into tiers:
-
- Foundations – Standardized color palettes, typography scales, spacing tokens, and accessibility rules
-
- Components – Reusable elements like buttons, form fields, and icons
-
- Modules – Reusable combinations of components that marketers & page editors could use to create pages without development support
Designed core components
We helped design and document many of the foundational components that became part of the library, ensuring they were clean, accessible, and extensible. This included building variations for different use cases and screen sizes.
Introduced documentation structure to support smooth handoff
To reduce friction between design and development, we helped to create a documentation format that made behavior, states, rules & styling crystal clear—reducing back-and-forth and improving implementation accuracy.
