Ep. 33 - Elevate Your Theme Game with Elevate Team | Devs:After Dark
Brandon, Sacra, Vijay, and AJ built HubSpot's Elevate theme to replace Growth, wrestling with a 4,000-line settings file and adding dark-mode support late in development. The team worked three to four months of crunch to handle requests from multiple internal teams, and they built it as a reusable foundation for future themes.
Chapters
I told my girlfriend that I was going to be back on Developers After Dark, and she said, oh, you're going back on Daddy?
All right, everyone, welcome to Developers After Dark. Dark. We have a really, really special episode for everyone today because we're not only talking with people, but we're going to be talking about a particular thing in general here that everyone's going to want to either know about or know more about if you don't already know. But before we get into that and let everyone introduce themselves, what I'm going to do is do a couple of little bill pays real quick, and that is to make sure that everybody knows that the only website they're ever going to need to visit ever in their lifetime is going to be devsafterdarkpod.com. That's where you can see the back catalog of all of our episodes. You can see a little bit about what the show is about, and then you can watch any of the previous episodes. Even some of the people on our panel today have been on some of the previous episodes, and they can tell you how great it is. Or if they don't, we can edit it out. Um, also, what you'll also need to do is, uh, the one thing you're definitely going to want to do if you want to know about anything going on— we just had Last week we just got done with the inbound conference for HubSpot, and you're going to see videos about things that were talked about there. You're going to see videos, um, pretty much you can go through. There are a couple of videos too about like recaps of what's going on during the month in the developer community. There are how-tos. There's a really good video, and it just came up actually in a conversation, uh, not too long ago about, uh, hs-doctor, the CLI command. There's a whole video explaining that. So there's a lot going on there in the HubSpot Developers YouTube channel, and that's @HubSpotDevelopers, that you're gonna go wanna check out. It's not just us HubSpotters in there as well. There's videos from a lot of people from the community as well. So there's a lot of information there that you can kind of take in. You can get lost for an entire day in there, honestly. So go check that out when you have some time. And then if you want some instant updates, you're definitely gonna want to subscribe to the changelog, and that's gonna be developers.hubspot.com/changelog. One more time for Dennis, developers.hubspot.com/changelog.
You're—
I mean, you'll not only find out what's going on now, but there's also an upcoming category as well in the changelog where you'll be able to see what's coming up in the near future. Uh, last but not least, uh, we always like to say if you want to learn more, if you want to kind of upskill, uplevel, or whatever word you want to use, you're definitely going to want to go to academy.hubspot.com. There you're going to find quite a few courses and quite a few topics as well. Not just that too, but there's certifications that you can earn by taking some of the things on the Academy. I mean, you have things from social media marketing, SEO, there's a CMS for developers that's in there. There's— I think there's a 1 and a 2 that you can do as well. And I always like to say, for those that are listening that aren't HubSpotters or those that are actually in the marketplace, You get that little badge that you can kind of brag on your listings when you complete some of these certification categories. So that's always a really, really cool thing as like a little added bonus as well. So, but go take a look at that when you have some time as well. But without further ado, everyone's wondering, why are we here and why is there 3 guests? Well, what we're going to do today is we're going to talk about the Elevate theme. If you haven't seen it already, when you're in the CMS and you go to create a page, there is a theme in there that you'll see that you say to yourself, well, I didn't download that. Well, no, you didn't. That's because it's there for you and it's a great theme. And we're going to talk about the people who were instrumental in creating it. So without further ado, we can popcorn it around. Everybody, why don't you tell everyone who you are and what you do?
Sweet.
I can start us off. So pardon me, is my camera going all glitchy? Is it for anyone else? It's going pretty crazy. Yeah, it's going pretty wild. Yeah, yeah. Why don't we popcorn it a sec or just for a second?
I'll just—
let me just fix my camera real quick. popcorn to you and I'll be right back as I try to fix that.
Cool.
Sounds good, Brandon.
Okay.
Hi everyone. I'm— oh yeah, we can edit a little bit of this out. Hey everyone, I'm Sacra. I'm pronounced she/her. I am the designer on our lovely content assets team here at HubSpot. And yeah, I worked with, you know, all of our awesome team members to create Elevate last year. It's a huge thing. Big hit. And yeah, just really excited to get to talk to y'all. little bit more about it today. I don't know if I should mention anything else about me, but, um, but yeah, happy to popcorn it to Vijay.
Yeah, thank you. Uh, I'm Vijay. Uh, I'm still a senior software engineer at HubSpot.
Yes.
Uh, uh, yeah, I don't know, I've been working on a lot of cool stuff that we can't Talk about, but we can talk about it. That's what we're gonna chat about today.
I love it. Sweet.
Popcorn it back over to me, back to myself. Looks like my camera isn't going crazy anymore. So I'm Brandon. I've been at HubSpot for about 6 years. Been on CAT now for my majority of my time now, about 4 years on CAT doing stuff. Also working on some cool stuff that I probably can't talk about, but who knows? Maybe I'll slip up and let you know and you get a little sneak peek. We'll see what happens. Yeah, we're here to talk about Elevate, something that we did a lot of work on last year as a big initiative for everyone on CAT. So we're excited to let you know all about it best we can.
So now let's start out with this. Like, I mean, I've seen it, I've used it, and it is awesome. And so thanks everyone for coming. And yeah, no, what was there a particular thing that like made Elevate become a thing that you guys started to work on? Because like, um, was there a, I guess like, what is the, what, why did Elevate come about? Was there a particular thing in general where someone said like, we need to make Elevate to solve X?
Yeah, I can, I can warm us up and then, uh, I'll probably wanna pass, hand it over to Sakharov. You did some, you did some research for someone else on our team last year, sort of about, um, you know, doing some user research and stuff like that. Maybe you can give us a little insight into that. But I can at least start us off by saying that like, You know, before Elevate, all we had was Growth, the Growth theme. If anyone's familiar with the Growth theme, like it's a serviceable theme, but in 2025, it's 2024, it's looking pretty old. It's looking really old. It's looking a little, a little bedraggled even. The word growth, I think it's supposed to, it's supposed to like, it's supposed to indicate like, I'm going to grow my business. But now it kind of looks like a growth that you might have on your body. Like it's not, look, doesn't look good. You know what I mean? It doesn't look good. It's not fun to use. It's frustrating to work with. It gets the job done. Like you can, you can build your website on it. And there's people who've done some pretty cool things with Growth. You know, they have, They probably have some developers on their side helping them out to do it. But it is not fun to use if you're a marketer and you're like, oh, I'm gonna build my theme. You pick Growth, you're like, okay, I wanna style this. You get lost in the literal sauce of settings, theme settings, module settings. You're just like, where is my onions? You know, you can't find your ingredients. Like you're trying to find it and you're having a really hard time. So that's where we kind of were. And so the questions are had like, well, what can we do better? Because look at the marketplace. The marketplace, it's like turning out these beautiful themes left and right, and that's what people are using. So like, we were seeing that like Growth isn't having a lot of traffic, and all these marketplace themes, like, oh wow, they're just like, that's what people are going to. They go, they go to like create a new page and they see Growth and they say, oh, let me check the marketplace. Oh, look at all these. Look at these dozens of themes that look way better than whatever that was. And they'll just like, don't, they won't even use it. So, so Growth, the Growth was, um, you know, really wasn't getting a lot of traction. It was kind of difficult to use. And really needed, so we really wanted to sort of like bring ourselves at least into the 20th century with a new theme, which sort of led to sort of discussions about, yeah, maybe we can do something with Elevate. Fun backstory of Grow theme is that the Grow theme, when it was built, like, I think there was just, I wasn't there, so like I'm trying to use my memories on like what was there, but there wasn't, before the Grow theme, there was maybe like the boilerplate or there was something, maybe something really simple that was used. So They were asked, like the Katt team at the time was asked to make a theme and they like made the growth theme at like the same amount of time it took to make JavaScript, like 10 days. It was just like, there was no designer and they just like made the growth theme like in like a couple months with no designer. So they were doing their best to like kind of get this theme out the door. But again, they had, it just had a lot, it didn't really have that sort of like designer's mindset going into it, which was Elevate, which we'll talk about a lot more later in this chat about like the sort of really strong design mindset that went into the creation of Elevate. So yeah, that's a little backstory at least on Growth theme and why we wanted to get Elevate.
For sure.
And not even—
sorry, PJ.
Yeah, real quick before we get to the design, but like more backstory too, like not even, so like Growth got like cranked out, right? And then we also had like a bajillion other, like other themes that were basically like iterations on Growth, right? So we had like Barricade.
That's right. That's right.
I think there were at least 5 to 7 default. They, they were called like default themes.
That's right. That's right.
Yeah. Fair Play Sprout, maybe.
Yeah.
I'm trying to remember the names.
And they were geared towards like specific industries. Right. But then like our team in particular got sandwiched with like trying to maintain like, oh my gosh, 80 different themes at once. And, uh, you know, they were all kind of like growth, but like small. You know, iterations on it. So like if, you know, we realized that something was broken, we'd have to go and do it across like 3 different channels, which was horrible.
And we didn't, we didn't have Claude back then to help us. You know, Claude, no problem. Yeah, let's do that too for 2 seconds. But we had to go in there each file, right? Yeah, right, BJ, 100%.
Where did the, the maintenance part—
Was there a, um, oh, sorry, go ahead.
Oh, sorry, Nick. Yeah, I was just chiming into what BJ was saying, like the, um, the maintenance part was huge. And also to Brandon's point, like Just a lot of the experience debt that growth had created. So a lot of it was really about improving activation for our free and starter business builders who just really needed to launch these professionally great-looking sites pretty quickly and they lack the time and design resources to do that. So all that's to say, we really wanted to come out of the box with a really modern, stunning theme that also made setting up Um, of like a theme and like the maintenance of that, like a lot easier. Um, and yeah, just improve drop-off. I think it was taking users a lot, a long time to publish content with Growth Theme too. And now we've kind of, um, taken a look at, you know, how quickly they're able to get set up, um, with Elevate.
But yeah.
And I, something that I think is really important to, to like set before we like really get into meat and potatoes is that, you know, I think a lot of people might be envisioning design as just like a, um, you know, what you see is what you get, you know. It's just like the aesthetic appearance of like the site. And I think that something that is really apparent once you start like building is that there's this whole other aspect of design, right, that's like user interface, right? And on HubSpot, when you're building a theme, you're not only building the like end product of what you, what has turned into a website, right? But you're also building a marketing interface and like that interface has to be well thought out and well designed. And I think when it comes to like Growth and Barricade and these other themes that were, you know, they were like the pioneers of like what themes are, right? So like HubSpot was like, we got this new thing where layouts are old news. Like we're on themes now. And, you know, the team had to crank out a theme and, you know, they were just shooting in the dark in terms of like, well, this is what we think makes sense at the time. And, uh, I think after a couple of years of, you know, trials and tribulations, we've kind of, uh, figured out what we think makes like a good theme, both from a physical design standpoint and from a, uh, UI/UX, you know, marketing design standpoint. And, uh, Sakura has been a huge help when it comes to all that stuff. So we're super stoked that she was able to join the team.
So, so, so you're saying we're not going to go back to the old, like, one-to-one template to page that we had, like, way back in the day?
Absolutely not. Never again.
I love it too, because as someone who reviews the themes for the marketplace, like the principles and practices are the exact things I want the providers to do as well, as far as like layout, as far as like, uh, organization and things like that. So it's hugely, hugely appreciated, at least personally. But, um, I want to get— I want to start off by talking about the design. But before we do that, I, I do have one question. Is it's the The significant— the name Elevate, who, who came up with that? Was that a, uh, a group thing or did someone just— because I was curious where those came from, like Barricade and all those other ones. I, you know, I had always seen them, but I never knew like where they— the names originated from.
Yeah, I'm not sure where the other names came from, but at least for Elevate, for a long time we were calling it the new default theme. Um, but yes, we needed a real name. It doesn't have that ring to it.
Exactly.
Um, but we had actually—
And then the next one would become the new, new default.
New, new default. New default D2.
Yeah.
So it's gonna end up being like final, final, final.jpg.
Yeah. Underscore final.
Um, but yeah, we had actually like crowdsourced the name, like, um, with like a few other options. I think we had like Thrive up there, like Amplify, Rise, Forge, and like some other ones. Jason Rosa and Kat's Experimental Code Garden. Um, and expansion, but, um, I think like, yeah, we kind of took a poll in Content Hub Nexus and, you know, of the folks who voted, it seemed like Elevate came out kind of victorious. And I don't know, I'm curious what Brayden and Vijay think, but like in retrospect, it kind of seems fitting because we're like, we were really trying to elevate like the design of the assets and how folks were like managing themes, um, especially our out-of-the-box theme, and then take that to the next level. So it was kind of like a natural evolution from Growth to like Elevate. I don't know.
Growing. Yeah, I agree.
Who knows?
I agree. I remember, I remember going through the process where everyone's like just kind of tossing out names until I was like, and a lot of them had to do with like going up. We had like Ascent and Rise. Like it was all about like, you know, you're trying to grow. We had Growth, which again, they want to give the users like you're trying to grow your business and Elevate. I think, yeah, it really evokes that. Like, what am I? I'm elevating my business with this, with this tool. So it just has that good, it has that, um, that, that positive feeling. I did like, I will admit though, I did like Blurple theme. Blurple sounds cool. Sounds fun. Like I want to use the Blurple theme. You know what I mean? And that's one of the colors. Elevate uses. So I think they were getting called the purple theme for a bit too. But anyways, yeah, I think that we crowdsourced it amongst each other, and I think we kind of narrowed it down to one that sounded really good, and Elevate was it.
Little insider baseball, I'm glad everyone got the theme done at the time they did because, and I'm not gonna mention the provider 'cause it doesn't matter at this point, but someone had actually submitted a theme for the marketplace to get reviewed called Elevate. I was like, and at first, I think the team, your team hadn't finished it yet, but I knew of it. So I was like, I'm like, wait a minute, this isn't right. I'm like, that's not that one. I'm like, what's going on here? So I was like, yeah, no, sorry, you can't do that. And it's like, I couldn't tell them why. And I'm just like, that's a restricted, like inbound, it's a restricted name. And they didn't question it, but it was like, the timing was like really close because I'm— yeah, they almost edged out on that one. I would have had to have been like, you kind of got to change that name.
Sorry.
But no, it was funny because I saw that and I was like, wait a minute, that's not us. What is going on? And I literally just froze for a second. But let's jump right into the design because I am a huge fan of design. I started as a designer, a web designer, if that's what they called it at the time. And then moved into like coding, uh, slightly. So I have a really huge love for it. So I, I'm, I'm just curious, like, uh, especially just to start out, like the color palette, like was there, um, what was, what was the, the mindset behind that decision making for the color palette?
No, it's a good question, Nick. Also love to hear that you sort of made, yeah, your way into like engineering from design and the code side. Um, but yeah, with Elevate, the color palette was I don't know, you'll probably hear the term blurple a lot, but it was kind of meant to be like this hybrid of like, um, like, you know, a universal and like a safe classic fave blue. I feel like that's always, um, kind of like talked about as like a, a safe and like classic color to use. Um, and a lot of, you know, kind of evokes like a feeling of calm and like peace and things like that. 'Cause different colors hold different meanings, especially like across cultures and things like that. Um, and then also like a combination of blue with purple. So like a lot of cases, I feel like Maybe this is a personal preference thing, but I think the purple has been kind of emerging as like a new blue in some ways too. And so it kind of just like adds a little, little more, a little something different, like excitement and energy to the palette. We also did a little bit of like looked into some metrics around like some of our most common industries for HubSpot customers and digital marketing and advertising and like SaaS and like information technology tech was like pretty high in terms of numbers of customers across that industry. And so a blue, bluish purple seems pretty fitting and a safe kind of color for the tech SaaS space. Yeah. And a lot of brands and products use purple. You'll probably see Stripe has a flavor of the purple color. Discord has their own flavor of a bluish purple. WorkOS, Appcues. So you want to fast, techie businesses out there. And we really wanted to pick something that could help keep things clean and modern and timeless and all of that without getting too bland or dated quickly. So I was like, oh, are we gonna get sick of this in like a year or 2? Hopefully not. Hopefully not another new theme. But, you know, just kind of something that would kind of withstand time a little bit and provide that solid direction.
I love something you just touched on, and it's something that I don't often hear a lot of people think about unless they come from like an international type brand or like have worked with it is the color theory and the way that the colors are represented in multiple countries and multiple things. I don't think a lot of people take that into consideration as much, especially if they're just building like one-off sites for like a local business in my area, you know, things like that. But there's a big thing to that, right? Like certain colors in certain like areas of the world are like, are danger or, you know, when it's not danger in another country. And same with words and verbiage. So it's like, you have to keep these all top of mind. So I loved hearing that that was actually part of it was like, well, what about internationally when we talk about colors? What's that going to look like? Like that, that is fantastic to hear that in the backend that that was all stuff that was thought about.
Yeah, well, that's a good point, AJ, because like colors like red, you know, could symbolize danger in a lot of like UI contexts, but it's also good fortune in like Asia. It can also like be like, it's often used in the food industry too, because like apparently there's a correlation between like Being hungry, like McDonald's. Yeah, you'll see McDonald's using like for their brand a lot of like red. Wow, I didn't know that.
Interesting.
You know, and then with greens and things, it's like tricky because a lot of that is like nature or like environmental. So like just trying to take all of that into, you know, kind of account. And there are also a bunch of accessibility concerns with colors like yellow and orange. Those are really hard colors. So if I kind of left us with blue and purple a little bit, or like, you know, like a more neutral kind of like black and white or, you know, something like that, but, um, thought the blurple would give, uh, some more personality to like our assets.
Were there, were there any type of like, um, challenges that you were looking to solve, uh, with like, with design and UI, uh, with, with, with creating, uh, some of the stuff? Because I know there's things like, and I, and I've in that kind of like questionnaire that we kind of all, where we were throwing ideas in. There are some things about Elevate that I am just thrilled about, uh, from like a UI perspective and from a design perspective that I've actually seen like template providers start to incorporate themselves in their own themes, uh, uh, that they've submitted to the marketplace. So were there, were there specific challenges there that you were looking to solve with respect to like this kind of upgrade?
Yeah, that's a great question. Um, I'm curious. I'm sure like Vijay and Brandon have thoughts too, but something that we were really like focused on was like. Of course, like updating the outdated design because Growth did look pretty dated pretty quick. And then also like the cumbersome theme settings UX. So we provided like hundreds of like, you know, different settings. And a lot of that was like super overwhelming, especially for like small businesses who just don't really have time to get like super nitty-gritty right away. And they just want to get up and running really quick. And also like in the past, like with Growth theme, we would provide like a lot of like module level overrides, which often would contribute to like breaking patterns, you know, and kind of like making it harder to keep things like, um, consistent in the overall design. So, you know, with Growth, people were already starting off in a tough place and it was like really easy to make things look real bad, real fast. With Elevate, we were—
Oh, it's frozen.
No, no, no.
I thought it was—
She's frozen.
I thought it was me. I just like last one, last episode, my camera just died like halfway in the middle.
I don't know.
She was just saying that she I'm just asking.
That's gonna be what I use at the beginning.
Are you really gonna do that?
Is that what you're gonna do to me?
Really?
Okay.
Yeah, we're editing, see if she pops back on.
But yeah, well, that being said, I have a special surprise, uh, I don't have yet, but I will. I will be going my camera off for a little bit in like 15 minutes, and then I ever—
oh, you're gonna keep some of that for us?
Okay. Yeah, building it up, building it up.
Okay, okay, okay, okay.
This is gonna be hell on earth for AJ to edit. I love this.
Why this week, Dennis?
Right, right. Dennis picks a sabbatical month that it's just like, yeah, my camera's dying, all hell's breaking loose. I love this. This is good. This is, this is the way it should be though. And then, I mean, honestly, if this was live, I wouldn't even really care because I think this is what makes it fantastic, but Um, but no, we'll, let's, uh, we can, we can come back to, uh, I'll come back to the, um—
I can follow up on that question if you want.
Yeah, yeah, go for it.
Yeah, I can, yeah, yeah, I can follow up a little bit on there, 'cause you were talking about, so you're talking about like some of the challenges that we, that we had to face.
Yeah.
And we were like sort of building out the design. And I know, I know, Vijay, uh, we had a lot of back and forth. We had a lot of back and forth in this. And the, the word we'll use here is inheritance. I think we had, we had a lot, so much discussion around like, how are we gonna handle this in Elevate? And obviously there's a lot of different ways to do it, 'cause like, The growth theme was an inheritance nightmare. I mean, it was one of the biggest reasons, one of the things that caused so many people issues is like, I set this button color to be red and it's orange here. Why is it orange here? And it's because like, you know, button setting has orange here, but the theme setting had buttons orange and they're just not, they weren't interacting the proper way. And so one of the big challenges for Sapper and for like, from the developer side was like, how can we reduce the burden of inheritance? We still need to have some of it to some degree, but like, Right now we need to, right now it's bubbling down so far and then things are getting conflicted with module style fields. I mean, so the issue was, I said at the top, is like modules had a ton of style fields and then theme settings had every style, every field. What happened? Hello?
Is Brandon still talking?
I'm here.
Yeah.
You can see me.
Yeah. Oh, wow. Okay. My internet must also be going.
It might be StreamYard. I don't know. I think it might be StreamYard.
Brandon's a black box online.
No, no.
Everyone else is fine.
You can't hear me, BJ?
I won't talk.
Keep going, Brian. BJ's loading in. So love you, Dylan. And yeah, so, yeah, Zachary, what we picked up from you last time, we were talking about one of our favorite topics, which was inheritance of the different colors. So yeah, yeah, we had a ton of back and forth because with the Elevate theme, Elevate has its core color set, right? Here's the core colors. And how do we share those core colors now with like all of the different theme settings for forms, for buttons, for cards? How do we share those down without creating some crazy conflict where someone's like edited their, their card colors? And now is, is, and now it's like, is it broken now from the sort of like the, the, the main colors that we set up? And how is that interaction supposed to work for the user? How are they supposed to understand that? And I feel like we ended up coming to a, to a solid solution. We are trying to reduce the number of settings. For A, we're trying to reduce the number of settings. And B, we want to handle inheritance. And those 2 problems were like, had conflict with each other, 'cause like you have to have more settings if you wanna reduce inherit— like we need more settings to reduce inheritance, 'cause inheritance allows you to sort of like, oh, I can have less settings 'cause it's just gonna inherit from sort of like the parent of the, of the, the main color palette. So it's gonna inherit that way. But when you do that, you're, you have this sort of implicit connection that, that like might make it harder for the users to edit like individual. I wanna edit these cards to be like all like this. So I know my, my, my, my, you know, my 5 main colors this, but I want the card to be this. And we had sort of like making sure we can get that relationship. To be correct, to be proper, and also intuitive for the user to understand, right? They look at their main color palette. I see the colors. I go to my card. I see that it's inheriting initially from those colors. Now I can change it how I want, and I still have my palette accessible, but I have my custom edits here for this particular use case. And that feels usable for it with Elevate. Whereas before in the Grow theme, a user would edit some theme settings and go into the button and then not be able to control it as they expected. Because like module, either, either the theme settings were overriding. what was happening in the module or vice versa. You know what I mean? It was causing some conflicts of understanding. Eventually, like a lot of users, we're talking about through Growth, like they got sort of like the nuances, they sort of like taught themselves how to work within the system. And so they could do it. They could do whatever they needed to do to make happen. But you have a new user coming to Growth, they're like, they are lost within the first 15, 20 minutes and they're just done. They're like, I can't even create the most basic website here. I'm gonna go to the marketplace. I'm gonna go to a different platform completely. Because a lot of people, sorry, I'm just kind of going off right now. It's like a lot of people, like, they have access to internet, they know Squarespace exists, they know Wix exists, and they're like, what is, what is this HubSpot thing over here that, like, I see these great, I see these great, great sources and then I go to HubSpot, which I like being here. It's my CRM. It has all my data. But man, this website experience really doesn't feel great. And that, and that is a big pain point for users, you know?
Now that's a hard balance to try to As far as like when it comes to theme settings and modular settings, as far as, you know, overriding each other or inheriting from each other. Like I see that a lot with, uh, some of the themes that are submitted, right? When you're trying to review them for like just accuracy to make sure that their, their settings actually do what they're intended to do, right? And aren't broken. And you do see a lot of that where I'm, the suggestions that I make constantly to them are, you know, a user might want to change this. You kind of have them locked into this. And I'm like, This would drive me, I tell 'em this would drive me crazy. I'm like, you can't really lock 'em into this. So no, it's, uh, I, you know, kind of echoing off of AJ's sentiment. I'm really glad that that was something that was, you know, another thing that was in the forefront as far as like considerations for this.
Yeah. Uh, uh, and another highlight from one of the challenges, and I think one of our, like, uh, one of our PS resistances for Elevate theme was section colors, section backgrounds and section colors, because that allowed us to always provide the proper contrast. I mean, 'cause like it was possible with other things. So initially the first initial designs of theme settings for text was like heading has text, heading, like headings have text, paragraph has text. Like there was a bunch of different text settings. And we realized that like a user might set up a background to be black, but all their text settings are black. And now it doesn't work anywhere. It's all broken everywhere. And so we brought up the idea of section, like we knew, okay, how about section settings? Like for backgrounds and for fonts. And we were like, oh, we're gonna add like 25 more settings. Like we're trying to reduce settings. We're gonna add so many new settings to support this. But adding it solves so many problems for us. Allow, okay, cool. We can, we can have like, we have, now we have 4 different settings you can choose from. I want, I want section variant 1, which has this background and this text. And that's amazing for the user. I can always get a proper visible text with the right backgrounds in all these different places. I can swap between these 4 throughout my page, which gives me, which makes the user feel like they have a lot of options for background and text colors. Um, and it's very clear how these colors are gonna work. So I feel like that, that was an interesting problem for us cuz we're, while we're in the midst of trying to reduce settings, like one of the biggest issues is Grow has so many settings and now we are faced with, okay, cool, we wanna solve this problem of contrast. And if to do it, we can add 25 like settings to do it. Oh, and I feel a little bad, but we added it and like, oh wow, this is, now things are making sense. So it was, it, it, it was realizing that like, okay, settings aren't necessarily always the wrong choice. Um, and in this case it was the right choice to add more.
Yeah.
Yes. Yeah. At that point, because it was later on the development. I mean, that section colors and for the, for the text and backgrounds that didn't come at the beginning. Like we were already, we just had like headings and paragraphs. They have their own individual color settings. Backgrounds have their own situation. There was no section background colors actually initially. Um, so, so actually come to that conclusion was a big win, uh, for, for making Elevate work the way it does.
That's another thing theme providers, uh, in the marketplace do, uh, that constantly I'm having to like, I'm like, yeah, I'm sorry, this white font on the white background is going to be really, really hard to read. I was like, you might want to like, you know, try to— but I, one of the things I wanted to, uh, just kind of get some input, uh, from the team on is, um, one of the things that I, I loved when I was kind of just going through the settings was, uh, just the border, like border radius. Like I was in love with the fact that it was kind of structured as a 3-setting choice where, as opposed to like Because no one ever knows the right pixel number to put in.
Yeah.
And the fact that it was like that, to me, from like an end user's perspective, I was like, that was gold. That was gold. Was there, was there, was there, and this kind of, kind of leads into a different, uh, question as well, but was there a, um, was there kind of a list of like things, common things done wrong that people do or common problems people have that kind of led to some of those?
Enhancements? You know, I kind of think that aside from like things that like, you know, we realized with growth, you know, I was coming from like the developer side of the window for a long time. So I kind of came in with a whole bunch of opinions. And I think something that was interesting, and I feel like it was a process that we used, you know, quite a bit last year. In particular, whether or not it was related to just default assets or Elevate in general, was that like a lot of times we disagree. Like, you know, a lot of times, you know, people on our team are not all on the same team. You know, we're all on the same team.
Yeah, we're not all agreeing on the same path forward.
Yeah.
But a lot of times we have our own opinions and like the path that I chose for a long time was actually not the path that we took for Elevate. And, um, the path that I was kind of coming from on the developer side, which I think is actually a very common pitfall for developers, is that, uh, they like favor, favor flexibility, right? So like when I was building themes back before I was at HubSpot, um, I advocated heavily for like, I just want themes and modules that can do like everything, right? Because then I don't have to do developer-y things. I just— know how it's built, I can come in, change some settings. But the downside of that, especially when it comes to like the module design, is that, you know, when it comes to building out a page, you know, you gotta click 10 times to get, you know, something that you wanna set up. Right. And it might be structured very well. You know, you might have like a cool variant section, like with, you know, whatever settings you might imagine for whatever module you're building. But the reality is, is that it's gonna take a marketer, you know, 10 clicks if it's not, you know, the, the like base configuration for whatever they're looking for. And that is a really interesting problem to solve. And I don't know if we kind of spoke about it yet while my computer was wigging out, but it's very much tied to this, right? Is that like theme settings as a whole are really, really actually connected to module settings because if you do theme settings right, which I feel like is something that we did in Elevate. You know, you can then flow those things through to your modules so that if you spend, you know, you, you're essentially front-loading all of your like effort into creating settings, you know, you're front-loading all that to the beginning of the project. So that, you know, we're setting, you know, what brand colors we have, what typefaces are we using? You know, what's our light dark background? How does our car, how do our cards look on those things? But now when you do the thing that, you know, you're doing every day, which is building your websites, you're no longer like needing to select all of the colors and then be like, oh, are these saved colors the ones that are my brand colors? Or are these off? Why is this one here? That one looks a little bit wrong. You know, it's just a choice field that says, do you want Card A, B, C, or D, you know, however you— yeah. And it's like, it's always connected. So you go back to theme settings, you're like, I want to change what card C looks like, and it applies across the board.
Right. Um, that was always a, um, uh, when it came to like variations, that was always a problem that the, um, a lot of providers, like module providers and theme providers as well. I mean, because they're essentially one and the same. Um, but there was always this sort of, well, I'm gonna, I'm gonna create this thing, but I'm gonna give 'em a dropdown with 47 variations. And I'm like, I'm like, and then certain, like, and, and I'm just making up an arbitrary number, but there were some that had a lot. There were some that you would think like, you could do this, you know, and don't submit 3 modules. I mean, you could do this by making this a variation because it wasn't too, too crazy, right? As far as like what was being changed. But it was, uh, trying to help providers find that balance, I think, was always the hardest thing because you don't want to tell them no because you don't want to tell somebody how to develop something. It's like, I'm not, I'm not here to tell you how to code. I'm just here that you follow rule X, Y, and Z to get in the marketplace. But at a certain point you're like, okay, if you have 50 variations in a dropdown, I'm like, I don't even know what I'm looking at at a certain point. Right? So no, I think that that's—
Gotcha.
I don't envy Uh, having to solve that problem. But I mean, with the way Elevate works, it, whether it looks like you did, it really does, whether you think you did or not, it, it, it, it, there is, there is that type of like, I always call it choice paralysis, but I don't get that, you know, at all.
So.
That was one of the big, uh, like focus talking points for us as a, as a team was like, how, how do we really like, you know, like we were like Sakura, I think was saying earlier, like growth has a bajillion different settings. And like they can be edited everywhere.
Right.
And part of our whole thought process was like, how can we make, you know, this as simple and smooth as possible while still kind of toeing that line between like opinionated flexibility and like ease for a marketer? So you can still change a lot. However, we're like intentionally gating certain things so that we can't break 'em. And then, you know, that's just kind of how it works. And I think the end product, you know, is something that I think a lot of people should really like take into consideration with their custom themes is like, be opinionated, like have an opinionated product. And like, you think that creating something that's like uber, uber flexible is good for everybody, but I think for your average person, it's not. It's good for the people who like know how to use everything, but I think at the end of the day, people just want to click, drag, click maybe one more time, and like it's the way that they want it to be.
Yeah. And without putting any numbers on the table, I will say like we're looking at it like Elevate has had so much traction. It's been out for, we released it like October of last year, somewhere around there. It's been about a year out in the world. And it's doing well. Like it's definitely, it's definitely performing like it wants to. I had a slow sort of onboarding for it. One thing that really helped was sort of AI. We got onto the AI onboarding so users, like they can create their website with AI and they will use Elevate as sort of the source for it. So a lot of, a lot of new users are coming in like, oh yeah, lemme create my page with AI. And it uses Elevate as a source for that. So that was a huge like support help, help for getting the traction for Elevate. But yeah, Elevate's been doing really well. Obviously we're still doing a ton of work on Elevate. Elevate's getting a lot of traction. We're working on templates, working on sections, working on all kinds of other things. Can't say, hold my tongue there. But we're— so Elevate is definitely like a heavily developed theme. Like we, it's not like we made it, put it out there and like, okay, see you later. Thanks Elevate. Good job. We're working on it. I mean, we're working on it like daily. So it definitely has, it's getting a lot of traction and we're putting, we're still putting a lot of calories into it.
So. And now, now when you guys were building, sorry, Elevate, um, this isn't just standard HTML and Hubble, correct? You guys were using React, if I'm not mistaken.
Yeah, React.
Yeah.
So that's a, that's a, that's a fun, another fun fact about the Elevate development is Elevate is the first theme that is a unified, we'll call it a unified theme. Unified being we're unifying React and Hubble together in one. Not, I wouldn't necessarily call it a beautiful marriage, but it's a marriage. It's working. Um, the idea being that like there is some sort of there, I think, I do think that, um, and I think we, I think BJ kind of like attested there's pain points with having this mixed experience and no design manager. Okay. We're talking like, Developers live in the design manager, doing everything in the design manager. People are Elevate, like, hey, where's Elevate? I can't see it in the design manager. Like, you never will. And that's a big— that hurts, right? 'Cause like you, that you, you have this whole development flow, you know what you're doing. Hey, we released this brand new theme. Drop what you do, download an IDE and get ready to code. You know what I mean? That hurts. That hurts a little bit to have the unified theme experience. But anyways, yeah, so I'm getting ahead of myself. Yeah. I mean, right now the Elevate theme has React modules, but it has Hubble templates. Um, but they work together. They work together, uh, with Elevate.
Yeah. Yeah. Cause that's how we were just building and, uh, we, we, when we built the new developer site, we rely a lot on like the base code that you guys had done and basically picked apart a lot of what you guys did in Elevate to basically bring that to the developer site that's up right now. So thank you guys for building an awesome theme that I was able to—
Yeah.
We have, um, I love it.
Yeah, there's, um, go ahead, do it, perfect.
Uh, the cool thing, or like one of the other really cool things about React ties back to that last point I was making about like kind of connecting dots between things. And that's, you know, one of the biggest pain points, um, that I've experienced with building themes is like, how can I have, you know, like, uh, some kind of control and unification between like what shows up in fields as choices. Um, and like how those things are displayed in other places, or like, how does, how do I like tie options from theme settings to my modules?
Mm-hmm.
And with React, and I mean, just using, being able to use JavaScript in general, there's a lot of really cool ways now that you can You know, tie, you know, certain constants, certain variables to certain like features and import them and export them around so that you have like single sources of truth. Um, you know, some really cool things coming down the pipeline in a lot of different ways, um, that are making use of a lot of like the, the really slick features of, of React or that React brings to the table.
I, I, I'll say, I'll, I'll, I'll say this. I mean, I, I came from, when I came to the Cat, I didn't, I didn't really have any experience with like, uh, I, I had experience with HTML, but I never dealt with Hubble and I never worked on a CMS before. I didn't have any experience. I had very like JavaScript app experience. I came over here and I will say I don't love writing things in Hubble. It's not a fun time. I, you know, it's obviously serviceable. It gets the job done, whatever. But like writing in Dropscript, like kind of highlighting BJ's thing, it's like you have so much more control. I have a full, I have a fully fledged programming language now that I can work with. We're like, we have like Hubble has functions and filters. They do a pretty good job. They let you do a lot of things. But like, being able to use Dropscript, again, we can even, we can even use Dropscript in fields. It allows us to, like, again, we get code reuse. We have easy-to-read code. It's so, so much easier to follow for Hubble, 'cause like, we still have Hubble templates, so I'm sure you've read a Hubble template. Just read the scrolling through though. Maybe you got a 1,000-line file. Like, where is my code? We, we're putting comments in Hubble files so you can highlight like, oh, this is where we are. This is where you're at. Because it's just like a bracket. You get bracket overload when you're looking at a, uh, big Hubble file. So yeah, so Dropscript really gives us, uh, it gives us so much more power over Hubble. It gives us the full Full power of programming language.
Um, so yeah, I think, I think what BJ mentioned about like the commonality stuff too is what's been beautiful about it is, you know, like all of our modules have the same fields that are being used in them. And I literally, like, we just have a helper and it literally is, yeah, these are the style fields. Oh, here's your style group in the fields. Just load this in. And it's like, I only ever have to update one file, but it trickles down to all of my modules.
Yeah.
And update that file, which is, you know, years before, before I came to HubSpot, I worked as a HubSpot developer. And yeah, that was just unattainable at that time. And it was constant nightmare of, oh, all of our modules use the same text field. We're updating the text field to a text area.
Okay.
Go to every single module. Yeah.
That's replaced all those. Hope it works. Hope it works out.
Yeah. Yep.
Let me, let me ask this, and this might be a question for Sakura. I don't know. Uh, specifically, and who knows, maybe there, maybe this was, maybe this was easy. Maybe there wasn't a hard decision to make, but was there a, um, a balance? And I'll, and I'll explain why I'm asking this, but was there, was there a hard balance between like the aesthetics being chosen and the, and the, and the UI kind of like UX/UI experience? Because there are plenty of, and the reason why I ask this is because there are plenty of, um, uh, themes in the marketplace.
Yeah.
That when they try to do, uh, everything, let's say the best way to put it is they're trying to do everything. There's, oh yeah, you're gonna love this page because it's an about page that has the slider, the accordion, the, um, the masonry grid, the— and I'm just like, oh, I'm like, my friend, that is not going to work very well. I'm like, this is kind of like, this is a bit much. And it's like, there's always that like strive to try to Do too much, too many bells and whistles. Was there, um, was there a lot, I have a follow-up question too, but was there a lot of, was there a lot of struggle with that?
Oh, Nick, so glad you asked. Yes, many struggles. A lot of struggles. Yes. Like super hard. Um, and it's, it's great. And also really like tricky question cuz like that balance is a really hard one to strike, especially when we were working on Elevate cuz we really wanted to get like a good balance between like a design that was beautiful and sophisticated, but also at the same time, not overwhelming marketers with, or more creative generalist type folks who are not designers and developers, with a bunch of customization options and fields that they have to think about tweaking, sort of decision fatigue. What pixel value should this border radius be? What colors should this be? All the nitty-gritty stuff. So Yeah, super hard, hard questions for sure. And at times, like, I was always kind of like, like I was trying to not be super balanced being a designer and kind of wanting to do cool things with like gradients and stuff and knowing that like we have to like support or find a way to like incorporate that customization for marketers in like an easy and opinionated and intuitive way. So yeah, really hard balance to strike, honestly. I'm glad you asked the question.
No, no.
And I'm not laughing at— I'm not laughing at the answer. I just noticed what, what's going on on BJ's screen there, and I can't stop laughing.
BJ's screen? What do you mean?
I kept looking and I'm like, because on my, on my setup, it's over on my right screen and it's a little smaller, everybody. But like, I'm looking and I'm like, did he just put a wig on? Like, what did he just do?
Like, did he just shave completely? What's going on?
Yeah. I'm like, oh my God. But, um, it's nice to see you. Nice to see you.
Very nice to see you.
Um, no, that's the reason why I asked that question is because like a lot of, uh, a lot of developers try to, uh, and it's not intentional, but they try to overdo it. And my follow-up question too is like, how annoying was it to have the ecosystem quality team asked to review your theme like it was a theme for the marketplace? Oh, because I did that and I, and I, I believe I was, Trevor, I was, I think I, I think I was you that I was, that I talked to and I was like, Making like, I made a Loom cuz I was just like, oh, a new theme. I was like, I'll just review it.
Yeah.
Um, I thought it was really helpful. Like I, you know, I'm really curious like about like all the different things. So if you guys have like a really good, like you have insight into like all the different themes that folks submit in the marketplace and kind of like challenges that theme developers and partner, you know, um, partners run into like when they're creating, um, these themes. Um, one thing that came to mind was like color, cuz I know that like had come up a lot in the past. I think Fran and you were touching on it with sections, but like Something that we've observed is like, and Growth did this too, and I imagine like other themes, like sort of tying in like, you know, a primary brand color or secondary brand color with primary button styles or like a main section background style. And not every brand's like primary brand color is going to work really well as like a UI element or like in a big surface area, you know, if it's like a page background or something. So we really wanted to be like thoughtful about how we were thinking about colors. Love-hate relationship, you know, they're— they do so much at the same time. Like, we were really trying to be thoughtful about how we were thinking about like the sort of core color palette and how that would like trickle down into like how those actually get applied like on UI elements.
There are many, many Looms I had to make to show, uh, developers what their brand inheritance colors looked like when they inherited it into the theme. It was like— and I chose mine as magenta because it's stuck out the most. So the minute I loaded a theme, I was like, okay, I can tell exactly where my colors are being inherited. I couldn't tell you that even the amount of modules where it was just one big wall of magenta, like it was just the whole thing. And I'm like, okay, I'm like, hold on, we gotta, I'm like, let me explain. So I literally, we made a video and I think we took it down because I don't think that's a, it's, we removed that as a requirement for a theme. Like a theme can do it in the marketplace, but it's not, we used to like specifically require it. 'Cause we don't specifically require it, but I literally made a video just showing like, if you choose everything as your brand color, everything's going to be your brand color. Like, and like visually, because there was a lot of developers that said, well, I don't, oh, I didn't have a brand kit set up in mine, so I didn't even realize that. So it was like, there was a lot of, um, trying to like take what you guys were inherently thinking about and kind of say, hey developers, you should also be thinking this way as well because it makes an impact.
So.
That's, that's another reason why I'm just really, really, I'm just, I'm impressed because Elevate is just, it, it not just, it doesn't just tick off the boxes that are necessary, but the thought process that went behind it is exactly what like a lot of us internally who like work on themes or work like adjacent to themes kind of started to notice, especially with like, you know, providers themes specifically.
Right.
And your team thought that stuff through while making this. So it was kind of cool because it's like you didn't even have to ask. It was like they already know. I'm like, oh great, this is so cool.
So very, you know, Elevate adapts so well to different brand colors and everything. Anton thought that, uh, that BJ needed to adapt to some different brand colors. So, uh, this is from Anton. Poor BJ.
Wow.
Special delivery from John. That's how I crossed it.
No.
Wow.
Because he provided, because he provided, uh, uh, that wonderful new branding for, for BJ, I feel like I probably should, uh, call out, uh, just momentarily. No, not a sponsorship. Just a short sponsorship. We love it.
We love it.
I'm going to take off anyhow. As you can see, I am in full dad mode. I am on parental leave, so I am going to be—
Joy.
I hear her head singing.
I would spoil showing my daughter on screen. However, like many things at HubSpot, she's under NDA.
Well, wait. We'll wait for the full reveal then.
That's so awesome. It's good to see you.
Don't forget, John, you're parental leave.
You're only a couple hours away from us, so I mean, like, I expect deliveries at my door too.
Yeah, for sure.
Well, it might take a little longer. I'm not Amazon same day here.
That's fair.
That's fair. It took a whole week to get it to BJ, so that's awesome. Y'all have a great one.
Bye.
Later, John.
See ya.
That's awesome. I literally didn't know. I didn't even realize that that was going on for like 5 minutes. I was like staring off at my notes and then I just looked and I was like—
I thought you weren't noticing and that's when I started laughing to be like, how long is it gonna take him to notice?
No, I felt like a jerk too because you were answering the question and I was following along and I just was like, I honestly thought BJ put a wig on at first because like it's so small on my screen, the squares. I was like, what is he doing? I was like, that looks like John.
I will say that it was completely unplanned. Uh, I had messaged John earlier this week, uh, or last week during inbound because Anton said that he had something for me and, uh, I wasn't at inbound. So I was like, oh, well, I'll see if John can drop it off. John had messaged me on Monday and then turned his notifications off and then just messaged me like right when we were starting. And I was like, well, you can drop it off, leave it at the door. Uh, or I'm doing Dev After, I'm doing Daddy. So if you want, you know, feel free to like come on in and maybe you can just do like an impromptu hello. And, uh, there you have it. That, that is awesome.
I love that. Um, let me ask a question because there was one and I, we, we kind of answered it with the, with the color palette choice, but was there any, um, because like I know for me personally and I, and again, like I, I don't. The last thing I designed was probably the podcast website, and that was on the fly. The way I do it is not really traditional, but was there any sort of like, because I'm always fascinated with like inspirations in design itself, right? Because there's been plenty of times, and I don't even know if this site still exists, but there was like, you know, you have your like CSS Awards websites and things like that where I would just be for like hours just scrolling through just in awe of the really great design and usability and UI/UX of, um, you know, other people's work. Um, was there any type of like, and it doesn't even have to come from other people's work too. Like there's architecture, there's, you know, things out, out in the world and nature itself. Were there any particular inspirations that kind of helped drive the look and feel of Elevate?
That's a good question, Nick. Yeah, I, I, we looked at some of the things like you're talking about the awards with like 3 W's.
Yeah. Yeah.
Yeah.
Probably in Dribbble, you know, they're in those types of places out there. Um, which is awesome. We also ran a workshop initially for Elevate, um, where we asked like a bunch of participants on the team and across Content Hub teams to like put on their like SMB hats and just imagine they're like a small business owner, you know, for a particular industry, you know, a company in a particular industry. Um, looking for a new website theme and then like make some notes as to like what, you know, find a theme that they really liked out there, make notes as to like why they chose that theme. And then we kind of had folks vote on the top 4 favorites. And so we kind of took a little bit more of a process-based approach too to coming up with the look and feel for Elevate. Did a bit of affinity mapping to kind of synthesize and group some of those high-level takeaways. There were a bunch of themes, no pun intended, and insights about just how people were going about choosing a theme for their fictitious enough Like a fictional, like fictional fictitious business. Yeah. Um, and it's just choosing that theme. So we kind of sort of like took like those like insights and kind of came up with like high-level takeaways for like typography and color and like interactions and imagery too. Like, you know, pictograms, like, um, a lot of the images we have an elevator, like kind of custom design and a lot of them are SVGs. So we can do some cool like color magic with them too.
Nice.
Um, and explore more on that front down the line. So that's really hard for businesses, like finding like free, like SVG quality SVGs. Uh, and yeah, a lot of that we, we worked on, you know, things with like spacing and stuff. So that kind of helped ground a lot of that visual design side of the, like the design work, um, and UX work and yeah, like helped us create sort of that look and feel that you see today.
Oh, that's fantastic.
I love that.
Is there, um, Just kind of overall, are, are, are there particular things? Because there's other things too that I've, I, I've noticed in Elevate, and, and I'm, I'm gonna steal an answer, hopefully not one that, uh, somebody wants to, to throw out there, but like in the theme settings, the, I, the, uh, the iconography or the icons essentially, like in the theme settings, like in the groupings, I think are, I just, I feel like it adds something to it because like just from the, the UI perspective, like there's a lot of, depending on, you know, which theme you look at and depending on your opinion, there's There could be a lot of settings, right? There's, there's a good adequate amount. I like the way the icons kind of break up the monotony of things as far as the groupings, like the field groups. I've seen other providers just recently do the same thing in their themes. And I was just like, I've even, even commented. I was like, love what you're doing with the icons. You know, we're doing, we do the same thing now, you know, with our themes. Um, are there other things that you, um, because I want to make sure like anyone that listens to this or watches this. Um, is able to— I want to be able to put across like some of the really, really cool things that Elevate now does that, you know, a user may not be aware of. Because I mean, they've made— they maybe they've used a free one in the marketplace and things like that, which, you know, might suit some needs. But like there's things that Elevate does now, you know. Are there any other things? Because I want to make sure, like, I want to, I want to cover them all, you know.
Yeah, for sure. I'd love to cover them all. I feel like you touched on a good one, like so that we introduced those icons like in the main theme settings, um, like main panel page. And a lot of that was kind of meant to just help, you know, like if a marketer is running through like different settings, like they're like more easily able to tell like what a group of fields might do. Like, you know, you see a picture of a typeface, like, oh, maybe like that has something to do with fonts or, you know, working with typography for the theme. Um, you know, paintbrush maybe for colors or something like that. So, um, I think it's powerful to have that like icon plus text pairing. Sometimes it's hard to gauge just by text alone or just with a label. We lean a lot into, like, I'm curious what BJ and Brandon also think, but other cool things were, like, we leaned into visual choice fields a lot for those border—
Yep.
Out-of-the-box border radiuses, like, for shape and stuff. And just trying to get more visual with a lot of the fields too can really help versus just selects or like input fields or, you know, things like that. So just having a visual representation of like what a setting might look like on an element has been really helpful. And then we worked with the themes and modules team to create like these inline groupings. So you'll see—
Yep.
In Elevate, like when you drill into like fonts or colors, like a lot of the field settings are exposed by default. And so it's just a little easier to kind of like See like a color by default versus having to click in and see what like nested settings are. So like you can more quickly see them and just start making changes and see how that affects like your, your content on your page. And so there's like a stronger correlation and like link between them. Whereas before with Growth Theme, like we were kind of nesting all the settings. You just have to click in and see what things were where for all of them. And like at times you were even nesting things like 5 levels deep for Growth Theme.
Yep.
And now we're really trying to like Keep users from having to go through too much. 2 clicks.
2 clicks was our max.
Was our goal. Was our goal. If we need 3, maybe we can think about that, but like, we're really trying to like not, uh, have users drill in too, too much into settings.
It was like the inception of field groups, just like, yeah.
The, um, the themes module here is not represented, but they, they did do so much for us with, when you see theme settings, you see the icons and those inline field groupings are like a huge win. not just for like developer who's building it, but for also for us, you know, because I got— I, let's say, let's say I was developing themes on Growth. I was like, I'm gonna edit some theme settings, I'm gonna change them. I have— I'm gonna go confirm it. I gotta click, click, click, click. I'm clicking through, checking the setting. Like, even for me, like, there's a lot of— there's— there was— I had to do a ton of free clicks, uh, to have that experience. So it, it definitely cleans things up a ton. I mean, the fields JSON file is still going to be, you know, 3,000 lines long. It'll be chunky if it's in JSON and not, you know, and not like broken up into just like a drop— like, um, a JavaScript file, like Like maybe we'll one day eventually be able to do with React. It might actually be something that's available, but we haven't implemented it on Elevate, but we'll eventually be able to write the whole fields file in React, which is huge for like, you know, we're talking about reuse, reusing certain fields that are just duplicates, just like I said again and again, huge wins there. But, um, yeah, the, the, the inline field groups, I definitely want to call that out too, because that was a huge win for, for the visual, the visual experience of the theme settings. And our, yeah, our 2-click maximum, because even when you, even the problem still exists today on Elevate, where it's like, um, when you, when you start clicking in. Some breadcrumbs start getting generated at the top to where you are. And it was so, you could get so deep where like it had, they, the breadcrumbs added an ellipse. You had to click the ellipse to then see what other options there were that they were. And so people were getting lost. Like, where am I? Where even am I in these theme settings? 'Cause like, and also like everything was, when you click, so everything was nested. So like if, if there was a nested field group, it would create like a, a box to have arrow. You click on it and it would open like a new side panel. Okay. And so the side panels, like, I don't know if they, I can't quite remember now if they had like the headings like we have now, because themes modules did some stuff for us, like to add like, like big bolder headings on it. So like you have the inline field groups and they have a heading that says buttons. And then I mean, I'm going to take a look at it right now.
I'm just doing it from here.
Yeah. If you're on your theme editor, you click on fonts and then you click on headings. You can still see that you're on headings and you can very clearly see that you came from fonts, like all the breadcrumbs. Since we only have like a 2-click maximum, you could always see the entire like tree. Uh, where you're at. So a user's understanding where they are is much clearer, uh, in this new design.
Yeah. And, you know, like kind of related to all of this again, like, I think one of the like things that often gets overlooked when like building themes is like people want to jump right into like building. Like, I just, I want to build this thing and like, I, I know what I need and I can't stress enough, like. I think like if we were to like segment out the amount of time that we allocated to like each like piece that went into building like the entire theme that we have now, I think like, oh, I, I, I'm going to struggle putting a percentage to it, but like a significant portion of the time was just thinking about how we want people to interface with theme settings because it has such a big ripple effect.
Mm-hmm.
And like, not only how do we, cuz like how we structure, how you listeners structure, you know, like field settings, um, dictates how you maybe consume those variables. Like, are you using just Hubble? Are you using CSS variables? How do you pass all of that stuff through to your modules?
Yeah.
Um, how do you make it so that it's like extendable in the future? How do you make it so that it makes sense? How do you make it so you've got a 2-click maximum? How do you like organize these things in ways that make sense? Because to some, it's a little bit easier now, but to some degree, once you like, once people are using it, you, you, I mean, for us at least, we can't change it. Yeah.
Right.
Um, we have some flexibility now, right? Because you can like alias fields. So to some degree now, You can like take something that was nested and move it into like another nesting area or put it in a different group and it'll still map. But, you know, when we were kind of first creating Elevate, like that, like kind of wasn't a thing yet. And like, you know, like all of these, basically what I'm trying to say is that the more thought that you dedicate to putting into just theme settings alone. Um, is really gonna help you shape the rest of it. And I, like, Brandon can attest, 'cause I think you did the most work on field settings, but I mean, we kind of redid theme settings like at least 3 or 4 times in like different sections, probably more than that.
Well, I mentioned that the second, the section color edition, that, that was a later in the game edition like that. We had already developed all of the theme settings and where our question was, How do we handle this problem with colors that people are gonna set backgrounds? These text colors may not fit. What do we do? And we had to add sections. So when it came to the development side, we had to, we had to, like, I had to add those settings, then I had to, like, break apart, like, the connections to the previous ones to make it, to make it all work. And it was obviously totally worth the effort. But yeah, we, we, we, I, we now even towards, like, we're getting towards, like, the being wrapped up. I was also about to go on paternity leave before Elevate came out. Like, I, I have, the project was, like, due, like, a week before I was gonna go on paternity leave.
So.
Regardless, we got it through. But yeah, we were working on these things up to the end, like making some changes and adjustments and fixes. And again, one of the unfortunate natures of working with the fields.json file is like nightmarish to edit. Like, in terms of just like you're scrolling through, obviously I have, I have, you have an IDE, you can control find certain things, but you're doing a lot of scrolling and you're in, again, you're in bracket land. You're in deep bracket land again. And so just, yeah, the, uh, the Elevate theme settings file is, uh, Just about 4,000 lines long. Again, you're not, you're not honestly scrolling from top to bottom to find what you need, but it's big. It's a big file. And so you definitely have to keep a lot. You can, you definitely, when you're working on, like, you're doing development on a fields file, you can get a little bit like bracket fatigue. You're scrolling through, you're changing things. Like, did I change everything? You know what I mean? There's a lot of that going on. So, and a lot of, a lot of checking back and forth on the page.
So.
I'm gonna ask with the, with the amount of, because this is always another thing too that And again, a lot of my frames of reference is just providers in the, in the actual marketplace, uh, the template marketplace. But was there, um, how big of a debate was there for the, because one of the requirements, right, that we've always had and has changed over time has been like, you know, what constitutes a theme as far as like the amount of templates, right? What for, you know, like, and there was, uh, this was years back. Um, but you know, there was, there was constant discussions around like, Well, a theme should have this template, this template, this, and that's a theme. That's the bare minimum, right? Um, was there any type of like, uh, you know, deep conversations about like what would be the adequate amount of templates and modules and sections for, you know, for Elevate? Because I mean, the marketplace, you can have— it's, it's the, the rule of 50s, we call it 50-50-50. No more than 50 templates, no more than 50 modules, no more than 50 sections.
Mm-hmm.
Now, quite honestly, you'll never need that many. And some people have tried very unsuccessfully to make that a thing. But I get the question I have is just, was, how did that discussion go to try to determine like, what is the adequate amount of templates for Elevate module count for, you know, to try to cover?
Yeah. Yeah.
So again, you can't do everything, but you want to try to cover as much of the bases as you can.
Yeah, I can, I can start us off here and then you guys can kind of follow up, Chaiman. It's like, yeah, we definitely, we definitely had lots of meetings where we would talk about like what modules might be necessary. With templates, we have these big— I forget if it was Figma, I don't know what resource we were using, but we were looking at, okay, cool, here's what we have in Growth and here's what we think might be good. And we met up and we were giving stamps, like, yeah, this one looks good, this one looks good, maybe for that one. So we had this big discussion about what would be valuable to bring over, create the theme. I say bring over because look, even though we're trying to move on from Growth, Growth is still a known quantity. So what is good in Growth? Growth wasn't just Net terrible. Like, it definitely had some good ideas in there. So like, what do we wanna bring from that? And then like, what do we wanna bring in like just from the world around us that are like good ideas? I do wanna— so before I pass over to BJ Sucker, I do wanna highlight too, like Elevate was in a very weird spot because other teams wanted to get their paws on Elevate. They're like, wait, you got this new theme? And then like, so, so while we had our vision about like what we want to produce, other teams are like, I want you to produce this for me in Elevate. And I think BJ's got a— 'Cause he was one of the first guys. To break something brand net new, net new templates, right? Uh, BJ, with the—
Yeah.
Yeah. Yeah.
Um, I think what, what's interesting, and that's something I kind of wanted to call out too a little bit earlier, so I'm happy that you brought it up here, was that like, you know, Elevate wasn't technically a, like, you know, from our workflows down to various teams. Elevate wasn't like a top priority for us to focus on for the year. However, a lot of other teams had like new features that they were building out and those were top priority. And then we kind of got Elevate, you know, to work on and started from the ground up, but largely for that first like MVP. It was not driven by like what we wanted it to look like. And we had to push back quite a bit on like what we thought was gonna be good and moving too fast and like trying to really allocate our like time appropriately. And yeah, we ended up coming up, I think, with something that was really great and we advocated for ourselves quite a bit. But yeah, largely from that MVP process, the templates were driven by like, well, This team needs this template. I think from my standpoint, like bare, bare, bare bones is like a blank template, a blog template, and like maybe a homepage. But I think the reality is that a lot of like, it depends if you're a marketing agency versus a, you know, like a—
All business.
House team.
Yeah.
But I think that like, A lot of marketing agencies are what I worked with and they just want a blank template. You know, they're just gonna like, yep, I don't wanna have to delete stuff. If I build a template, uh, or if I build a page and I want it again, I'm just gonna clone it and then like change the copy.
Okay.
Um, so, you know, I think we're under a little bit of different working constraints than I think your typical agency or your typical marketplace provider. Because now, for instance, with like AI generation and stuff like that, a lot of like what the templates that we're building are based on, like, oh, like this other team's building this new platform. We wanna build something that supports that so that like Elevate naturally gets like the latest and greatest updates, like as soon as it kind of can. But yeah, I just wanted to prop shout out, like, Content assets team, people who are here.
Yeah.
Because I feel like we, and we built Elevate in what, like, it was fast.
I mean, there was lots of, it started, the discussion started in January, like actual, like we have now like a repo for it. It wasn't until like April or so. And then we started, it was, it was like a summertime, summertime project. I mean, we were cranking away once. I mean, there was, again, there was obviously there was a big lead up time, a lot of discussions and like, what are we gonna do? What are you gonna do? And now obviously we're finding out About other things that come. Honestly, 3, 4 months, like we built it, but we like, we did the actual coding of it. I mean, there was a lot of like some discussion before prior to that. But I want to just follow on BJ because I've gotten so much of Elevate was influenced by other teams too. Like we had Sakura who was like going through their designer or UX and these other teams were, well, I want 5 new landing pages. We didn't pay for 5 new landing pages. And those landing pages have modules you don't build yet. So you build those modules too. And then I want to say for BJ doing case studies, Case studies was a brand new template type. We never had case studies before. I want you to bring this brand new template type in your brand new theme.
Right.
And so they, and that was a, that was also a lot. And then the unified theme, it was in, it was brand new. So they're like, hey, we have this unified theme. Can you use it in Elevate? And we're like, yeah, sure. We'll use it in Elevate. So that, I mean, Elevate was in the center of a lot of, like, a lot of teams, like, who had, had work and stuff they wanted to sort of get into the world. And like Elevate was like the vehicle to bring it home. Um, so we were under that constraint as well. That was a big constraint for, and we made it happen. I mean, I'm not, I guess you're right, BD. Kudos to us. We got through it, we made it happen, and everything got delivered. I mean, Unified Themes is out there, Case Studies is out there, we got podcasts out there. I mean, there's a lot going on where teams are jumping in and throwing work on, and we got it all in. But that really kind of like, I think, and Sakur, you can let me know, that maybe things would've been a little different if like we were allowed to do it our way all the way.
I don't know.
I don't know. I think it's nice though, because like when you look at like what you guys have built, you can tell that A, like, as a developer using it, you can tell a developer put thought into it. 'Cause there's a lot of like modules and themes and stuff that I've hopped into over the years where it's like, okay, uh, architecture wasn't the forefront when, when doing this. And like, you can kind of see that in just like, even, and, and I told this to BJ when he first like came to HubSpot and like started working on stuff. Like, I was excited because he knew the exact knowledge that we all had in the community of like the things that were frustrating, the modules that were needed.
And like, Definitely.
Suddenly we're seeing gallery modules and stuff. And I'm like, this is what we've been asking for. Like, it was cool. It was nice to see. But I'm sorry, Zachary, I cut you off.
Go ahead.
Well, yeah, no worries, AJ. Yeah, we're always curious, um, what you guys, you know, observe in like the ecosystem. Um, to Braden's point, we have a lot of constraints we were working under. And like, I look back and I'm like, yeah, it was like 3 to 4 really like months of like real crunch time for us of like teams, you know, internal HubSpot product teams wanting us to also create new content types with Elevate, which was something we needed to still design and build out at the time. So it was like us juggling, like creating this new system and one that we were hoping would last for the long haul. Like I think something we were trying to, you know, avoid is Kat having to build another net new theme, you know, from the ground up in like a year or 2 and this getting dated again.
Mm-hmm.
Like we really wanted to future-proof a lot of these concepts. that we were, um, thinking about. And, um, now we're kind of at this point where like Elevate is sort of that foundation for us. And like many of like other work streams that are happening now, like we're exploring, you know, how might we introduce different presets, like different styles to Elevate, maybe to create some more variety. I also don't know how much I'm supposed to share. Yeah, you know, other things coming down the pipeline, but just, you know, using Elevate as sort of that Um, launch point for us, um, versus having to create a new theme to solve like similar problems, I guess. Um, so really kind of trying to work that in, um, with it. And yeah, was it, I don't know if it would have evolved differently had we not had the same time constraints. I think it would have been nice to, you know, reflect if I'm just like reflecting, but like, you know, maybe think a little more about section colors. So like that is a new thing with Elevate now where like that was kind of a little bit of a bet at the time. I remember Brandon, it was like, it happened so late in the game where we had already started building out theme settings and I was like, oh, and by the way, like we might want to take this into consideration because with Growth theme, it was like primarily a light background theme. Like there were no, you know, you didn't really have these dark sections with light text. And there are all these like accessibility considerations when you think about like dark section backgrounds, dark modes, you know, fully dark modes. So, um, we really wanted to put a lot of thought into that piece. Um, and it was a big bet. We were like, I think we need section telling, like colors and pairings so we can come out of the box. with like, we think these dark sections look really great with, you know, and we recommend it with this light text, um, that we're using in our color palette. And we didn't really have a mechanism to do that, like until we were working on Elevate.
No, I think that's awesome. Cause like that, cause really, and BJ, that's, uh, what you were talking about as far as like what the people, what people wanted, right? As far as like wanting to just build, right? Instead of having to go in and delete things. That was always a question that was always asked to me constantly by providers. It's like, well, how many, how many templates should I, should I put in this thing to make it sell? And I'm like, I, I'm like, I'm like, you're asking me a question there that has like multiple answers and none of them could be correct. Oh, you know, I'll be honest.
Right.
You know, and modules too, where it's like, well, maybe my, 'cause I remember like I'd get stuff like, well, my theme's not selling. Maybe I'll add like 10 more modules and it'll make it sell better. And I'm like, not necessarily. I'm like, maybe, you know, 'cause I don't want to say no. And then all of a sudden them get a sale next week and be like, I told you, it's like, There's a lot more factors that go into it, right? Then it's, it's, this is kind of a multifaceted sort of thing. But, um, yeah, but that was always, uh, that was always a struggle too for providers as well, was having to like decide what's the perfect amount. Now I'd get somewhere they would, it would barely be anything, right? And I'm like, I'm like, you got to give them some options here. I'm like, this is a bit, you know what I mean? You can't just like throw up a blank page, you know, there has to be some default content, right? Um, so, but, uh, but yeah, no, I, I really love the fact that, you know, there was a lot of, uh, gathering of feedback, uh, you know, with, with this as well, because yeah, a lot of people do have questions about that and it's, um, it's not an easy one to answer, but I mean, again, this is just me looking at Elevate. It, there's a lot there that gets solved by this theme and it's, uh, it's really good to see. It really is. Because again, you, when you review things, you get to see the best and the worst. And the absolute worst of things. And, you know, and it's not a knock against, you know, any provider in particular, but there is, there's a very vast scale, you know, and then you see Elevate come in and solve a lot of these problems that at least on the ecosystem quality team, like I've been like, it's just been like, what, AJ, like 4 or 5 years now I've been doing this. And it's like, I've seen almost every theme that's live, you know, at various stages. Right. A lot of these stages, as they've gotten to the point where they've gotten accepted, the pro— those problems are the problems that Elevate solves now right out of the bat. So that's, it's very, really cool to see because it gives, it's, and it's not like discouraging to people in the marketplace, but it gives like, it gives a concrete, solid example of like these, like these problems can be solved. And it's like kind of one of those things where I start to like show people, like even in like I'm very like big on like making Looms to show providers like how to do certain things and like creating a template page or creating a template with, um, Elevate, you know, and showing like, just showing them certain things where like, hey, if you did it like this, it might be a little bit easier, right? Like, especially with the icons and the other things. Like, those are some of the things that I've literally like referenced in feedback to providers to be like, if you want to make this easy on people, you might want to follow the lead of something that really does solve a problem.
Here, you know.
So, um, really, really do appreciate all the work all of you have done and all the other teams too. Like you said, there's, you know, a lot of teams that, um, put effort into this as well. So it's, it's one of those things where I can't thank all of you enough because it's, it's made my life easier and you didn't know it. So, um, yeah, it's nice. It's just one of those things for sure.
Oh, you know, and like, I think like to kind of Answer, pseudo-answer that question of like, what does it take to like make a good theme? And like, I think the reality is that like there's no shortcut to it, right? Like it's, the answer isn't more modules or more templates.
Mm-hmm.
Like this perfect blend of like, you know, marketing design. Like how is like the interface, is it the interface inside of HubSpot easy to use and understand? Do marketers have access to the theme settings that they need? Are those theme settings connected in an intuitive way to the rest of the theme, including modules, templates, et cetera? Like, do you have like comprehensive HubSpot functionality? Or at least to the market that you're trying to like build a theme for? And like from a technical standpoint, like is your Like, is your markup, what you're rendering on the page, like, is it up to, like, modern times? Like, is it accessible? You know, like, Elevate, um, has really great page speed out of, or like really great performance, page speed out of the gates. It has like really great accessibility. Like we put a lot of time into like making sure that like, you know, menus are like keyboard navigable, like screen reader friendly, making sure that You know, the like, uh, um, page translations, uh, stuff is like also accessible and like, you know, we put a lot of time into not just like building modules that are functional, but making sure that the modules that are included are like comprehensive.
Mm-hmm.
Um, so I think it's like, you know, this, this golden storm where like, you know, I, Get that in the wild. Not everybody has, you know, 3 months to build a theme, um, and can consistently be iterating on it the entire time. But I think that, you know, that is what makes a good theme is, you know, making sure that all of your bells and whistles are covered. So I think if you don't have like the amount of time to build this crazy big thing, like tone it back, make something small, functional, and like build on it. As opposed to, you know, trying to get everything that covers every use case out there.
Mm-hmm.
That's bril— no, brilliant, brilliant. I, and I think that's, that's very, very true. And you do see, like, even in, especially in the template marketplace, you do see the providers that are doing that, that do have like a really, really great product when they take that approach, right? It's just like it starts to scale and it starts to, with each iteration, just add more to it. Instead of just trying to throw everything together and try to solve every problem all at once with as much as you possibly can. It's, yeah, there's, there's, you can definitely tell the difference between the two. So no, I, I, I do appreciate that. Um, we are, we're gonna, we're running, uh, up against time. Was there any, was there any other thing, um, that you can think of that you wanna kind of like shout out with regards to Elevate or?
Hmm.
Let's see. Elevate's dope.
Use it.
It does. I mean, it passes the template marketplace, um, review. So I mean, that's, that, that carries some weight. That's, that's bragging rights. That's bragging rights.
Yeah. I mean, I, I, I guess, you know, a good, a good point to leave it, leave it on, at least from our side, is like Elevate is not going anywhere. Like, I like Sakuro saying, we can't like obviously give too many details about all the different like sort of like works in progress we certainly have going on, but like 2026 is going to see new change and more stuff come through Elevate. Elevate is definitely going to continue to serve as the vehicle that we made it into. And I think it's— so I think it's still going to get a lot of traction. Again, it's like I mentioned before, it already is getting a lot of that. And like, Elevate's going nowhere. It's going to continue to be developed on, enhanced, and sort of continue to be sort of like a vehicle for other teams to sort of like, hey, I have these ideas, I want this idea, can Elevate serve? And yeah, Elevate can serve, and it will.
Excellent. Well, I want to thank all of you for taking the time. It's literally when this first came out, when Elevate first came out and I was made, you know, we were aware of it. This was one of the things that myself and Dennis and AJ all kind of got together and said, we really want to talk with everyone involved in this because there was so much of it that we saw, whether it was just me looking at it or us just kind of like, hey, did you see what came out? Did you see this? Yeah, no, this is— did you see what they did here? Because I know I was bugging AJ about it all the time because I was like, Can we like make developers in the marketplace do this? Like, can we like, you know what I mean? There was just certain things where I was just like, this to me, it would make my life easier. But, uh, you know, selfishly, but, um, but yeah, no, uh, just a huge thank you because like the time and the effort and the kind of the, and, and I'm not, I'm, I'm not, I wasn't there, but like the conversations shows it, it, it, it absolutely shows in the work that's there and, and theme that's been created. So huge thank you to all of you because it really, it gets to be a nice shining example to show to providers, you know, just kind of the direction that they should be kind of going in when creating a theme just in general. So a huge thank you to all of you really.
Yeah. Huge thank you to you guys for having us on the podcast. Happy to chat Elevate or anything else anytime.
So yeah, no, I mean, like, BJ's already been on. So like, if either one of you want to like Like, we, this is, this is what we love to do, right? We love, I mean, we talk design theory, uh, you know, anything like all that stuff. Like we love to do the individual ones. We like to do the group ones like this. Like we are really trying to expand these conversations cuz I, I, they're just, they're huge. And like a lot of the developer community loves, loves listening to this. AJ just told me that somebody listens to it, uh, while they're walking their dog like every day. Like every time we have a new episode, this is like what they do to take a break. And I'm just like, Just like listening to me is taking a break. I was like, I feel bad for you. I'm like, that's horrible. But, um, but no, it's, uh, it, this, we love doing this and this is just kind of like, 'cause it's important for people to know this stuff really. I mean, like, yeah. Uh, and, and again, anyone listening or watching, I encourage you, like, if you've got the HubSpot CMS already, you, you should like be in there creating a page right now from that theme. Like it's, it's there. You don't have to do 2 clicks, right? It's, it's 2 clicks to do that actually. So I mean, like, we're already in there. We're already there.
Yeah.
So do that right away, and because you will not be disappointed in that. So, but once again, I want to thank all of you for coming on. It was fantastic. And I'm glad that we got to hear like some of the great things that Elevate can do, because once somebody gets their hands on this, I think it's going to be probably— I'm going to put some percentages up there— a good 85 or more percent, their solution is there. It's there, like right out of the box. What they need is there, right? So it's, it's just one of those things where we're really grateful for all of you. So thank you.
Yes, you got it.
We were going to end it with like playing Elevation by U2, but I think we would get kicked off with just by everywhere we posted this. So we'll probably just have to end it kind of boring and bland. I really wanted to, I really wanted to find a song that we could go out to, but I think everything would pretty much just get us like knocked off YouTube like instantly. So, but it is what it is. So thank you again, uh, for everyone listening. Please, you know, if you're watching this on YouTube or you're listening to this on Spotify, please follow, please subscribe, tell all of your friends, uh, you know, because, uh, without listeners like the community and other HubSpotters, we, you know, I don't think Steve would have us doing this much longer. But, um, but yeah, so thank you again and, uh, yeah, we'll see everyone next time.
Bye.
More from AJ
Ep. 32 - HubSpot Dev Site: An Origin Story with A.J. and Brooke | Devs:After Dark
