Color System for HubSpot
Platform: HubSpot (https://www.hubspot.com/)
HubSpot is an AI-powered customer platform providing integrated software solutions, designed to help businesses grow by improving customer engagement and streamlining operations.
Brand voice & style
HubSpot's brand voice is professional, approachable, and informative, with a focus on engagement, thought leadership, and community building. Their style is visually appealing and consistent across platforms, using clean, modern design elements to enhance user interaction and convey their innovative, growth-oriented ethos.
Color Choices
Primary Color: Purple (#6A1B9A)
Secondary Color: Dark Denim (#005689)
Tertiary Color: Lime Green (#CDDC39)
System Colors: Coral (#FF6F61), Amber (#FFC107)
Color Meanings
Purple: Creativity, wisdom, and luxury, highlighting HubSpot's innovative solutions.
Dark Denim: Formality and sophistication, while lighter denim shades create a more casual and relaxed vibe.
Lime Green: Freshness, energy, and growth, emphasizing forward-thinking.
Coral and Amber (System Colors): Vitality and alertness for key notifications.
Color Usage
Primary Color (Purple): Call-to-action buttons, highlights.
Secondary Color (Dark Denim): Headers, footers.
Tertiary Color (Lime Green): Success messages, secondary buttons.
System Colors (Coral and Amber): Error messages, alerts.
Design Rationale
This color palette offers a fresh, sophisticated alternative, balancing creativity with professionalism. Purple signifies innovation, dark denim provides a calming influence, and lime green highlights growth, while coral and amber ensure critical information is prominent and attention-grabbing. These choices reflect HubSpot's commitment to creativity, growth, and user-centric design.
Reviews
1 review
Your effort to overhaul the Hubspot Color system is commendable. I like that you gave the design rationale some good consideration and shared the WCAG accessibility standards.
I think separately, the color choices work well given your design rationale, but may not work as well together. In your UI example, it seems the Hubspot logo has a different blue than what you defined in your color system. To improve this project, make sure to refine your current example to use your existing color system to make sure they work together, and also add some other examples. Hubspot has a lot of different user interface elements in their product, which you hinted at in your project description, make sure to highlight those choices you made with more examples with how they all tie together.
Overall this is a good effort with some room for improvement. Good job, Jackie.
You might also like
Entrant Accessible Signup and Login Forms
A/B Testing for Bumble's Onboarding Process
CJM x Mindspace case study - Ester Cinelli
Dark mode Main page
LUMÉRA - Checkout Flow
Tripit's Login and Sign Up Flow
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
