How Brand Colors Influence Your HubSpot Theme's Aesthetics & Usability

Everyone, this is Nick over HubSpot, and today I wanted to talk to you about how brand colors impact the aesthetics of your theme when you're developing it for the Template Marketplace. Now, you're probably asking yourself, Nick, why is that even important? Well, number one, it's important because it's a requirement. Number two, it's important because it directly impacts the usability of your theme when it comes to customers building pages, interacting with the theme settings, or just interacting with your theme overall. Let's take a look at the requirement. Currently, to be accepted into the Template Marketplace as a theme, you have to, at a minimum, have two color fields that must inherit colors from the account's brand settings. Now, what does that mean? Brand settings, meaning settings that are within your brand kit. Now, for those of you who are unfamiliar with what a brand kit is or how it works, what I have here is my test portal. Inside of the test portal, let's assume I'm a customer. What I have here is I have a brand kit set up for my company. Let's say I sell widgets, and this is my company's brand kit. Now, you'll find the brand kits under the account setup, account details, and then you'll see up at the top here, you've got the branding tab. That's where your brand kits will live. Now, for mine, I have my HS test kit, which again, is my test kit for my fictitious company. So within that, I'm going to specifically focus on the colors, because brand kits are used throughout HubSpot, But I want to focus in on the colors and how inheriting those colors into your theme affect the esthetics, which then affect how the customer interacts with the theme. So under the colors tab here, what I have is I have a primary color selected, a magenta color. So for my widget company, its primary color is magenta. Now, you can always add more colors to this brand kit and you can take them away, but you have to have a primary color here. So with that set, let me show you how this particular color, when it's inherited into the theme, affects the aesthetics and affects how the user interacts with your theme. So what I have here is, I have my test developer portal. What I've done is I've made a copy of the boilerplate and I've renamed it. Super awesome. And I'm looking currently right now at the fields JSON file. So what I've done is I've made one edit to this file on line 738 here. What I've done is I've changed the forms title background to the brand settings primary color. So that is the magenta that I showed you in the previous tab. So now at this point you're probably saying, okay Nick, cool, you know how to edit a text. That's really great. What does this do and why is this a potential problem? Well, let me show you what changing this setting actually does to your theme. Now it's important to note too that in this example in the forms, the background color is now set to the magenta. But if you go a little bit further down, you'll notice the text color is set to my themes secondary font color. Right, that's this line here, 761. That's going to be important in a second and I'm going to show you why. Let's take a look at what this looks like in the actual theme settings when you go to edit them. So what I've done is I've taken a common module, the form, and I've dragged it onto a page that I've created with the homepage template in my theme. As you can see, that background color comes through perfectly right, there's the magenta. But what you're also going to see is the title that sits on top of that background color is also magento. Now this is where that, where I showed you on the the title font. Why this is important because what happens right now in my particular theme is that secondary color for the global fonts pulls from the primary and my primary pulls from the brand settings primary color. So again, that magenta that I referenced in the previous tab, so what that does is for the end user creates magenta text on top of magenta background, which creates a poor user experience when someone drags this in for the first time as a form form, let's say it looks like something's missing. It looks like there is no title. It just looks like one big blob of magenta. Now this doesn't just apply to themes. When you're developing individual modules, you can fall into the same problem. So the reason I bring this up is because it, it really is important as a both a module or theme developer to really take the time and plan out where you're going to inherit these brand colors because it does have a direct impact on the end user when they go to use your theme, whether that's dragging the modules in. Like in this case, if you're dragging in a common form module, you're going to get this magenta on magenta or when it comes to just editing the theme settings alone. Because what happens is, let's say I overuse the primary color within my theme and I start applying it to multiple multiple color options. What you'll end up getting at a certain point is a page of just full magenta and as default content for when a user first makes a page from your template, you want to give them a really good example of what that template can do or what that template is and the aesthetics that that template can provide. If you set everything to one solid color like that, it really does take away from the work that you've done. So I do suggest that when you're developing a theme for the Template Marketplace that inheriting the brand colors to that theme plan it out just a little bit, test it out, create a brand kit within your developer portal so you can see the impact that those colors and where they're being inherited from, what they'll do for the end user at the end of the day. So I hope this helps and best of luck in theme developing. Thanks. Bye Bye.