In Bubble, we have the ability to set styles on basically all visual elements that you can see, be it groups, buttons, text, iconography as well as inputs, images, links, basically everything that you can see.

And it's really good practice to use styles because we begin to build in a more modular approach where we have a single source to be able to adapt app-wide styling.

Let's jump in!

So let's create a style for this button and I can see that there is already a style so I'm going to detach the style because I want to create a brand new one.

I'm going to click back on the drop down and scroll down to the bottom and go create new style. I'm going to call this primary. Okay, and with that, the style is attached to the element on the canvas but I am going to click on edit style because I'd like to change some properties.

Now I've actually set a new brand color for my app and that is this purple, but what I'd like to do is have a purple button with a white icon and white text so I'm going to choose white for that. For the font color, I'm also going to choose white. Background style will be flat color and then this is where I'm going to set my brand color.

There's some other settings down here such as the Border style if we like one, the thickness of the border, the roundness of the corners, and the color of the border. I'm actually going to remove that for now because I just want a nice simple button. We have more options such as the style transition or hover effects which we'll look at soon, but for now this is very aligned with the brand I'm looking to create.

Let's go back to the Design tab and there we go, here is our primary attached style, we can see from the dropdown.

If I had to grab myself another button drop it on the canvas. I could say Learn more and I can change this to anything that I'd like. I could just dig through to see what particular styles work for me.

My primary looks pretty good. So now we have a primary button style, which is very quick to set up, and then we also have a secondary button style based on the outline light primary.

I'm going to quickly delete this button by pressing backspace and I'm just going to dig through and have a look at some of my text as well. So key features I see it's an overridden style, if I wanted to I can make this say, medium and a bit smaller just to see what it looks like, maybe 32, maybe the letter spacing should be -1. Okay, I kind of like that so I'm going to go into my Heading 2 and adapt the style to be 532, - 1 letter spacing. I'm going to change to medium, 32, Center aligned, and -1.

Fantastic, I'm happy with my Heading 2. Heading back to the Design tab, we now have key features that looks really good.

This is another place where I'd set the same style so we see we have a Heading 2 (Overridden). I'm just going to reselect Heading 2 and there we go, we have just adapted the style.

I'm going to have a quick look to see what this does and maybe we can just override the color here to save some time. There we go.

This button doesn't look quite right to me, so I'm going to select it and choose my primary button that I created earlier. That looks really good.

So you can see that I did a little bit of exploration before I went into the Styles tab just to see how the Bubble AI generated designs really work with sort of the color and typography that I had in mind.

Last thing I'm going to do is look at maybe a matching purple, so for this the technique I would use is select my primary purple and then look for a different shade of that purple, something that would work well on the background, something really light. How about that?

Let's look at some other element styles. I'm going to click on my drop down to see if we have potentially, what we could do actually, let's scroll up and see if we have some logins. Here is a popup here. Let's have a look at this input style so if I change overridden back to the standard and then click back, I kind of like that but I do want to change a few things. So I would want my placeholder color to be a little bit darker than it is because I can't really see where it says type here. What I'm going to do is change the weight to 500 and then maybe make the roundness a bit softer, so eight. Let's have another look.

Now the border thickness is two, I'm going to set that to one, and I'm pretty happy with that. And because I've done a bit of work here, I have two options: I can either go in and edit the standard style or I can detach the style and create a new one. But why don't we just edit the standard style?

Okay let's scroll up, so I think I had medium 500. My placeholder color was darker. My border around this was eight and lastly the width was 1.

If we head back, we can now click on the next input below and simply select it. And there we go, that is really really consistent and actually I prefer the design and I'm happy that now I'm giving my own input to the look and feel of these particular designs.

Why don't we continue with this popup? Let's change this Log in to Horizon to our Heading 2 and let's change this login button to our primary.

Fantastic! Really happy with the progress made.

So now that you have a grasp on styles, open your app, jump into the Styles tab, and start practicing with generating styles with things like buttons and inputs and various containers available to you.

I hope you had fun!