In this lesson, I want us to spend just a little bit of time establishing a design foundation for our app so that everything that we build from here on out adheres to a coherent, consistent aesthetic, which is obviously going to make our app look a lot nicer, please our users, but it's also going to make our lives as builders, as developers, a lot easier as well.

Now, there's two primary methods that Bubble gives us for establishing this design foundation: styles and style variables.

Now, a style is simply a template look that you can apply to multiple elements. So if our primary button style here is a dark filled blue like this, we can then assign this style to multiple button elements throughout our application, and they will then inherit the style from that primary button style.

Now, if we change one of the properties of the style, like for example changing the background color to orange, then all of the elements that are assigned to the style will also have their background color changed.

So a style gives us a way to control the look of a particular element in one central place, which makes building our application much, much easier.

So you probably recall that when we added in our text element, we actually chose from one of these pre-built styles. So these are just styles that Bubble has shipped out of the box with your starting application, and you can find all of these if you go under the styles tab here in the sidebar.

This will then show you all the styles for all of the different elements that we have in our application.

So if I scroll down to text, you'll see here are all of those text styles once again. And over on the right-hand column, you see what is basically like a little properties window. So this is controlling what the properties are for this particular style.

We also have styles for all the other elements, like for example our button.

So we're using this filled light primary style as one of our button styles, and it is attached right now to the button that we have on the page. You can see that it is assigned here that style, filled light primary.

Now, if I go back to the styles tab and I say, hey, I actually want the background color here to be, you know, like a dark hot pink or something, then you can see that in the design canvas, this particular instance of the button has had its background color updated accordingly.

And I can even duplicate this a few times, change this again, and you see that all of the instances of that button have had that style assigned.

Now, you can always detach a style. So if I click here, detach style on this last button, it no longer has a style applied, and so whatever changes that I might make now to this button style won't apply to this button that has been detached from the style.

But what is handy is if you just want to make a slight deviation from a style for a particular element, like let's say this particular get started button, and I just wanted to have a larger font for whatever reason.

Well now you see that the style here is coming up as overridden, which means that you have at least one property, like the font size, which is applying to this particular button element only, but all of the other properties are still tied to the style.

So if I go and I change the style again, then you can see that its background color reflects those changes, but it maintains its overridden font size property.

So you have this relationship here where an element can inherit the properties of a particular style, but equally, styles can inherit properties from a couple of different types of what we call style variables: color variables and font variables.

And this gives us even more power in managing our design system.

So style variables, you can find again under the styles tab, and then underneath style variables, and then you've got your font section and your color section.

So let's start with the font.

We've got a default app font set here to this Inter font style, and you'll notice that inside of any of our styles that are pointing to a particular font, they're actually inheriting this app font.

I can override this and set this to be something totally different, which will of course be reflected in my buttons.

But really what I want to do, if I'm going to undo this, really what I want to do is be using just one, possibly two fonts throughout my entire application, and just setting them here within this app font section.

Because if I set this to be something new, let's set it as something interesting like this Irish Grover, well, you can see here that not only have these buttons changed, but also this text element has changed.

And the reason for that is because this text style, which I can inspect by just hitting edit style here from the text element — it's a little shortcut — this text style is also just inheriting the app font.

So in the same way as when we change a property within a style, all of the elements attached to that style will have that change reflected.

Equally, when we change a style variable like this app font, all of the styles which are attached to the app font will be changed as well.

And as a consequence, of course, all of the elements downstream that are attached to that style will look different as well.

So this style variable is a type of thing that we call a global variable in that it is accessible or has power over the entire application.

Now, what type of font shall you choose?

Well, this is obviously a topic that you can go very, very deep in, but really this is what it boils down to for most of us:

And the serif corresponds to this little sticky outy pointy thing that appears on the typeface, on the characters in the font.

And that's opposed to something that doesn't have the serif, which we call, very intelligently, sans serif — i.e., without a serif.

Now, pretty much the only time we should be using serif fonts is if we're doing so for effect, just like in some bold heading on a landing page.

Otherwise, it's sans serif that we want to go for pretty much every time.

It's a lot easier to read this on a digital screen than a serif font, and it's the established practice across all web and mobile design.

So what font do you choose?

Well, most of us are going to want to keep this pretty simple and use a font that's well established and supported by our users' devices.

And if you go to this URL, Google actually has a fantastic resource for finding these fonts.

So on Google Fonts, you can actually filter here by sans serif fonts, and pretty much all of these initial fonts that are going to come up here are very well-established, popular fonts.

And if you click on one of these, then you're going to see that it has lots of different what we call font weights as well — in other words, different degrees of boldness.

And this is what we want.

We want to have the flexibility to use our font in multiple different places, to have heavier weights where we might want to be showing some kind of headline, and thinner weights where we're maybe just showing some paragraph of text on the page.

Now, all the fonts that you find in Bubble are actually drawn from this Google Fonts library, so you should just be able to search in here and find a particular font in order to assign it as your app font.

Now, you always do have the option to add multiple font variables.

So you might want to have something like a display font that perhaps you show in certain parts of your application, and you can use a tool like Font Pair to see what types of fonts might go well together.

But on mobile design, this is really not common, so I would recommend that you just stick with one app font like this.

And then, for example, in your text fonts, you could utilize what is already being done for these headings out of the box, which is utilizing different font weights for different headers.

So this first heading has a 700 font weight, which makes it quite bold, as does heading two and heading three.

But as we start going down, heading four, five, and six have a smaller font weight to deemphasize them.

And then you'll find that the body text has an even smaller font weight.

So you can use a combination of font weights and font sizes in order to make one font behave differently in different contexts — to appear more prominent in some contexts like for a heading than in others like for a paragraph of text.

So that's font styles.

Then you've got color styles, and these behave in exactly the same way, where you have a whole bunch of color variables here that you get out of the box with your new Bubble application.

And these style variables are actually attached already to your styles.

So you see here that this font color is actually attached to this text font variable, which you can find if you go into style variables again.

You see you've got this text color variable here, which is set to this color.

Now, if I was to change this — and just before you change any of these, make sure you copy the hex code to your keyboard because once you change it, the undo button here will not be able to revert it back.

But you see here that I've changed it to this pink color.

And if I look now at my text style for this body 16, you'll see that it also is now updated to that same color.

And of course, any elements that I use in my application that have that style attached will appear in the corresponding color.

So I'm just going to change this back to what it was.

So whenever you go to assign a color in the application, you've got this swatch, this grid here of different colors that you can choose.

And these are all the color variables here.

Now, some of these — everything here from primary down to alert — are variables that are already mapped to the default styles that you get in your application for all kinds of different elements like inputs, icons, and more.

And then you have all of these other colors in the application which you can use in different contexts.

And all I'm going to do for my application, and something that you may want to do for your app too, is reassign these primary color variables to have it match an aesthetic that I've decided would be good for my application.

Now, there are obviously countless ways where you can get inspiration for the aesthetic of your application.

One really great tool to call out is Mobbin, which allows you to view the designs for over a thousand different real-life, in-production applications.

But all we're going to do today is use one really simple tool called UI Colors.

I'll leave a link to this in the description for the video, and this is just going to let you, if you start from a particular color, it's just going to generate a whole spectrum of colors for you that we can then copy and paste into our Bubble app.

I'm actually going to use this color here, and you can see at a glance how this color might be reflected in different kinds of elements.

Now, all I'm going to do here is I'm just going to choose one of these mid colors as my primary color, which is going to be used in all of my buttons.

And I'm going to copy that and I'm just going to set this as my primary color here, making sure to get rid of the extra hex code if it pastes that in.

And what you'll see here is that any elements that are mapped to this primary color style, like this icon, or more importantly our buttons — I need to reassign this because I was changing this when I was demonstrating to you — will then have their color, of course, reflected accordingly.

And then all I'm going to do is for this primary 10 through 80, I'm just going to assign those to a selection of the colors that I see here.

That's just going to give me a bunch of flexibility as we go about building our application.

And we might need to tweak some of our designs.

I can just choose from this preset list of colors that I have added.

So I'm going to start with the darkest one here — that's going to become my primary 80.

Then I'm going to grab the lightest one — that's going to be my primary 10.

And then we don't necessarily need to add all of these.

If we wanted to, we could create more color variables down the bottom here, but we don't necessarily need that many.

So I'm going to skip the 100 and make this 200 my primary 20.

The 300 is going to be my primary 30.

The 400 primary 40.

I'm going to skip the 500 because we already assigned that to my primary color here.

So the 600 here will become my primary 50.

700 primary 60.

800 primary 70.

And we'll just skip the 900.

This is probably enough flexibility, and we can always tweak this later on should we wish.

Now, you don't have to do it this way.

Color variables give you a huge amount of flexibility.

As I mentioned, you could create your own down the bottom.

But for most of us, especially if we're new to Bubble, this is going to be more than enough to get us going.

And so now, if we go back to our homepage for a minute, and I just get rid of some of these dummy elements that I created, we've got this login button here which is set to one of the default styles, but it doesn't quite look good, sort of blends in with the background.

So what I can always do is just choose from one of the existing color variables, choose this primary contrast, which is just a white, and that's just going to make it look better on the background there.

What I'll also do, so we can get this view finished like our reference image here, is focus on this bottom section right here where we seem to have a text element next to a button.

So what I can do is, with my button login selected, I can just right-click on this group elements in a row container.

And if I just get a text element here and just place that inside of this new group and set the color here to be white, change what the text says, and then just set this button login here to fit its width to content.

If you remember from the last video, what we have here is a group that is extending the full width that it has available.

It is in stretch mode.

I want to change it to shrink instead, so I'm going to tick fit width to content so it hugs the content inside.

And then I'm just going to set it to be aligned in the middle.

I'm going to add a little bit of gap spacing between the two elements, which is this column gap setting.

The row gap would be if we had more elements here.

Then the row gap is what will apply between each of these rows, but since we're not having enough content to wrap around, if I just go and undo all of this, the column gap is all we need to care about right now.

And then the last thing, super quick, is that we've got this logo here in our reference image.

So we can do this by grabbing an image element.

And as we did for the background, we can upload an image.

So I've got this logo that I've prepared earlier.

And then under the layout tab, note how the aspect ratio is one by one.

That's going to keep it as a square image.

But ours definitely doesn't need to be that big.

So I'm going to set it to be 80 pixels wide, which will also mean that it's 80 pixels high.

We need to center it in the view.

And then I actually want it up here in this little sky section, and it's stacked down here at the bottom.

So if you're following along, try to see if you can figure this out for yourself.

This is related to the layout settings that we learned in the last lesson, specifically our home view here, which of course is not scrollable.

And if you look at the container alignment, it's pushing all of its children elements to the bottom of itself, and it's got two children elements — the image and group bottom — so they're both being pushed down to the bottom.

What we actually want is for them to be spread apart equally to the edges.

So we actually want to use this space between.

That's going to push these two elements to opposite ends, one to the top, one to the bottom.

And if we preview this on Bubble Go, I think it looks pretty good.

So we got the basics of a design system here.

And as we go about building out the rest of our application, we are just going to be organically building out our library of styles.

But since we've established what our color and font variables are, this is going to make our lives a lot easier.

But enough design, let's get into the meat of making this actually interactive.

In the next lesson, we're going to actually learn how we navigate between different screens, different views in our application.

See you there.