Here is my landing page and I'm really pleased with what Bubble AI has generated for me.

But my brand color is a little bit different and my typography style is also slightly different to what's been generated, so let's change that.

The first thing I'm going to do is head over to the Styles Tab and then I'm going to click on Style variables.

Now I can see a font section here and if I scroll across to the right hand side, I can see that Lato has been chosen as my default font. So what does this mean? It means that across the app, whenever I use text, the default selected style will be Lato.

Now we can get way more granular than this such as setting Heading styles, Body styles, Caption styles and we'll get into that, but for now I'm just going to set my app wide, default font to something different.

Let's go with Inter, a nice clean font that I use for many of my projects. I'll scroll down, I can see a colors section and the first eight colors provide quite a comprehensive set that I can use throughout my app, such as my primary color, a primary contrast, we have a default text color, we have some background colors. Then we have our semantic colors that provide really good feedback to a user such as this button might delete data, it's called destructive, or this little alert notification is green because it's a success, or we have orange for an alert.

Scrolling down, we have some color variables and this is not something that you need to be too concerned about at the moment, but later on we're going to come back and adapt some of these to our liking.

But for now I have set my font and I'm going to change my primary color to something a bit different. I'm just going to scroll across and then I'm going to choose a dark green. With that, I'm going to head back to the Design tab.

Okay, so the differences were subtle, but if I click across to this text, we can now see that we have an app font of Inter. Now earlier on, I mentioned that we can get more granular with text styling so let's see how this is done.

So in the property inspector, we can see that we have a weight which I can change to say, semi bold or say, medium. We have the size which I can change to make larger or smaller. We also have color, alignment, bold, italic, and underscore and then we have line spacing which is more relevant for paragraph text.

Now if I scroll slightly up, you can see that it says Style Heading 1 (Overridden), I'm going to click into Edit style and let's see what options we have there. So it looks like we have similar options. Now what is the difference between changing the settings here versus changing them on the canvas. If everything is attached to a style, all of your text elements, well you have this single location to change once and that will propagate across your entire app.

So we're going to follow best practices by making any updates to elements via text or inputs or buttons from the Styles tab. So what I'm going to do is set this to 54, semi bold, and I'm going to change the letter spacing to -1 so it's slightly tighter. Now because our Heading 1 is showing on a blue background, I'm actually going to change the color to this particular color variable, which is called primary contrast.

Let's go back to the Design tab and there we go, I'm happy with this as a Heading 1 style. If I scroll down, I can see that this is a Body 16 but it's being overridden. That's because some of these styles have been manually changed by Bubble AI which is totally fine. You can override your styles the way you want. But I actually want to make sure that initially it is set to Body 16 and you can see that that is a different style.

So let's go back into Edit style and I'm going to choose center, I'm going to make it white, and that's all I want to do for now. Heading back and there we go.

Now, there is no limit to how many styles we can set, I prefer to actually keep a minimal set of styles for text—heading one to heading six and then two or three bodies and then if I need a light or a dark mode, that's when I do actually overwrite the style in the property inspector to change it to light and dark.

Let's now talk about color because earlier on I changed my brand color. So how would I apply my brand color to this hero section? Well in the property inspector, I can see that we have a background color and I can manually change that to any color I like. Naturally, I'd want that to be my brand color so I select green and there we go— that's our brand color. Now, don't be too concerned with the light and dark shades because we are in the editor view. Bubble is actually showing me where padding exists and we're going to get onto padding real soon.

If I click onto this Get Started button, I can actually override the style if I like to make it for instance a black color but actually what I would do is head into my edit style for the filled live primary button and change the color there.

So go ahead, experiment with typography, experiment with color, see what you come up with. Have fun with it and remember the single source of truth of styles— always use styles where you can!