How To Create A Design System For Oxygen

hey this is Elijah with the oxygen team and in this video we're gonna look at how to create a design system a design system is an important set of rules and constraints for your website design now some design systems are incredibly extensive we're not gonna go that far but what we are gonna do is show you a quick way to establish and display things like colors spacings for padding and margin typography rules border radius and box shadows now oxygen gives you a lot of tools to go ahead and set these up in the settings so we will be talking about that as well but we'll also be setting up a page called design system that will give us a quick visual reference of these rules that we are establishing so let's jump over to pages and I already have a page here created called design system so I'm gonna click Edit with oxygen now that we're inside of oxygen we're gonna set up four different sections basically section one we'll go ahead and add it here and we're gonna add a heading and we'll call this colors and then let's add another section and this section is going to be for spacing and another section this one's going to be for typography and then our final section will be for box shadow and border radius these are the four basic categories we're going to work with in this specific design system these are usually enough to get you a nice set of rules for a nice consistent design and if you're really not a designer establishing these rules very early on can help you to maintain the consistency throughout the build of your site so let's go up and let's start with colors we're gonna use a couple of tools to grab some color palettes but I like to have a way to display these so let's go ahead and just create a div we're gonna set it to stack child elements horizontally and then let's add another div and we'll add some styles to this we'll go to advanced size and spacing well it's with to something like 200 height 200 and then we're gonna go to borders and set the border radius to 50% to make it a circle and then you can see if we go to advanced background now we can set the background color the circle to display the color but first we have to decide what colors we want now there are a few different places I like to go to generate color palettes but one of my favorites is called PA LX and I'm just gonna jump over to a new tab and paste this URL in it's PA LX dot J X in blk comm which is just a nightmare to have to explain on a microphone but I will make sure I have a link in the description of this video so what this does is it takes a base color and it generates all the different shades you need for your design and normally you only need probably these top two here but to determine our base color let's go back into oxygen and let's just pick a color we like and I usually default either to like a pinkish red or a purple or something like that let's go down here maybe something like that okay so let's grab that base color and let's jump over to PA LX paste that in and then click update now this is gonna give us a bunch of shades that we can use and you may not need them all but it is a good idea to have these available and one cool part is it generates saturated greys for you which are kind of nice because saturating your Grays with your base color can make them a little less lifeless so now we just have to decide which colors we want and throw them into our global styles so let's grab a couple of these Gray's let's grab the very dark one and we'll grab maybe gray four and then gray zero for a very very light so let's do those first we'll jump over here and here's where oxygen comes in we have a lot of global settings that let you kind of establish your design system by default so that it doesn't have to be done so manually later on so we're go to manage settings global Styles colors you can add a new color set here but I'm just going to use the default global colors folder because we have any callers in there yet it's a blank slate so let's jump over here and let's grab gray 9 as our very dark gray and we're gonna add a color I'm gonna call it dark gray and we'll paste that in and then let's jump over here and let's grab grey 4 as kind of a mid gray copy that hex code jump over add another color call it mid gray and paste it in and then let's add another one over here let's add I think I want Gray's 0 it's almost white so we'll have to be has to be a little bit careful about how you use some of these light gray but it is nice to have several shades and in a lot of cases I'll actually go ahead and copy all of these over now I don't end up using all of them but they are handy to have directly an oxygen that way if you decide well Gray's zeros to light you don't have to go switch it out you just have all the shades available next we're gonna grab our base color here this pink I usually ignore the rest of these colors now I think if you're a designer you probably could use these with the base color in a way that would look great but I'm really not a designer so I am not brave enough to try to incorporate those other colors so we're gonna go up here and we're gonna again grab the pink 9 and we'll add that in we'll call it dark pink and then we're gonna grab may as well stick with our pattern will grab pink for kind of a lighter shade go over here and call this mid pink and drop it in and then let's grab one more shade of pink and I don't think I want to go all the way white because we already have this gray up here so I think I just want to go very light pink but not as close to the white as we went on the Grays so let's jump over here and we'll call this light pink okay so that's a really good starting color palette and it's also the key again for non-designers is a safe color palette we know pretty much all these colors go together so establishing these colors early on really help us lay because they limit the decisions we can make and they limit the mistakes we can make so let's jump over here to this little div we created and we'll just go ahead and establish these with the colors that we've picked first let's add some spacing here so let's grab this div Vance size and spacing let's just add eight pixels of margin okay and all right now let's duplicate that and go to the background and change the color we're gonna list our Gray's here first and then advanced background we're gonna do light gray which pretty much blends in with the background we can actually change the background color of this section a little bit if we want so it doesn't all blend in so much said it's kind of a very light gray because we don't want to clash with these colors that we have but we do want to be able to see these very light shades so now that we have our gray is we can actually go ahead and just duplicate this div let's add some margin on top space it out a little bit and then we'll set these to our pink hues so we'll go to the dark one and then advanced background go to the middle one and advanced background and we'll go to the lightest one all right so these colors are all registered in oxygen so you're not going to need to grab them off the page but what this does is it creates kind of a visual story of your overall design so at a glance you can look at this page and see the colors you're using the spacing all these things and actually if you're doing this at the very beginning of a build or before your entire site is designed and you plan on handing things over to a designer you could actually give them this design system to work off of so that they work within the constraints you've established now let's move on to the spacing section so spacing is going to be basically our padding's and our margins now the increments you use are up to you but I like to stick to an eight point increment so we're we're going eight 16 32 pixels etc the reason for this is that some retina displays have 2x and 3x scaling and the eight-point system really scales very well on those types of displays whereas other increments might not scale so well you might end up with some half pixels which can result in blurring and things just not looking how you want so I like to use an 8 pixel increment it just makes it really easy it's easy to remember how far up and down to go but as part of the design system I like to go ahead and basically just jot those things down now when talking spacing we can set up one thing in our oxygen settings which will make this a lot easier and that's the default padding for sections so these have a default top padding of 75 pixels bottom of 75 left and right of 20 and we can change this default by going in to manage settings we'll go back to global styles and we go to sections here and in our case since we're using an 8 pixel increment I'm gonna set these top and bottom padding's to 64 pixels and left and right I'm gonna go ahead and go to 16 and we'll go ahead and save that now all of our sections by default will have consistent padding that works with our 8 pixel increment now I like to just write down a few different spacings that we might use so we'll click Add and we're gonna make just a list type of situation here this is going to be our container div and then we're just gonna add some text here we're gonna start with our smallest increment here 8 pixels great and then let's just add some size and spacing some padding there let's add 8 pixels left and right and then we're just gonna duplicate this text element a few times to get the increments we want we're gonna set the div to stack horizontally we're gonna go 8 16 pixels 32 pixels 64 pixels so this gives us our basic increments now what I've done in the past is I've established what each increment should be used for for instance a pixels might be for elements that are closely related 16 pixels might be for elements that are related but not super closely 32 pixels for unrelated elements and 64 pixels for things that shouldn't be close to anything else then it's up to you if you want to go that far what establishing those scenarios does is it makes your decision-making process much easier when you're actually building the site you don't have to sit there and wonder well should I use 8 or 16 or whatever you know based on the elements that you're spacing what you should use now let's just add one more here because sometimes you need a really big gap so I'm going to add 128 pixels and again this isn't set up in the rules or anything this is just a visual reference for us so when we're designing we can pop over to this page and be like oh yeah we're using an 8 pixel system and these are what I should stick to now let's move on to typography so typography is one of those things that is so critically important but if it's done right you probably don't notice it if it's done wrong you probably can't notice anything else so it's a very subtle art but having good typography is really really important and the thing I usually start with on typography is my heading font and my text font both of which can be defined in oxygens global settings so to find a good pair of fonts I almost always use google fonts but there's a website called font pair Co I'm gonna jump over there and this gives you pairs of fonts that look nice together and I'm not really a typography master so making these kinds of decisions is a little difficult having a list like this that's been prepared for me is very convenient so I usually just scroll through and find something that kind of fits the vibe of the site that I'm working on so here is fire uh sans and Meriwether let's just do that so those are both google fonts so we go in here to manage settings go back to global styles go to fonts and we're going to do fire us and in Merryweather great so even our design system is already starting to look a little better now that we have some nice fonts in use the other thing regarding typography we can do in oxygens settings is we can set up our heading sizes I usually like to go a little bit bigger on the h1 so set that to 42 what are you 36 on this and then these h3 3 H 4 are fine I rarely use h3 h4 but you might so you you want to determine the sizes font weight and line height colors all these things here in the global settings and I usually like to set my heading color to one of my global colors like our dark grey there or our dark pink that actually looks kind of nice so we'll do that and then for font weight it's a good idea to only use a couple of different font weights because it can get pretty messy if you start changing them a lot I like to use 600 for my heavy fonts and then just default for the ones that I don't want to be so heavy now there are times where you're heading might want to be a little bit lighter maybe not that light but if it's on like a dark background or something and it's you'd set it to white it might look nice to lower the weight so make sure you figure out what weight you want to use and we'll go ahead and jot those down here in a minute the other thing that's really important is setting your heading line height I like to set it to about 1.2 so that the line height for the headings is not super big so now that we have these rules we can go in here and add a heading and we'll call this h1 and that's 42 pixels weight 600 and then we'll duplicate that and we'll set this to h2 and this is gonna be 36 pixels and it's still weight 600 because these settings in the global styles headings menu are all inherited downward so it's 36 pixels weight 600 and this is h2 now Kate that and we'll go to H three and that's gonna be h3 and it is 24 pixels and actually now that I'm looking at it this is another benefit of this that's way too big of a jump between those so let's set that back up to something like maybe 28 or maybe 30 to 32 looks pretty good so we'll set that to 32 and we'll say here 32 pixels and again we don't have to type out what these things are because it's all set in the settings but for the sake of a quick glance and seeing what your overall design system is especially if you're sharing it with someone else this is really really handy I rarely use anything smaller than an h3 so I'm not gonna go beyond that here but if you do feel free to list all your headings out now the other thing we're probably gonna want to do is just and say what font we're using so we're gonna say heading font it's gonna be fire uh sans perfect and then let's just add some spacing here and again we're using an 8 pixel increment so we added 16 pixels of spacing there and it will add some below this too because we're about to jump into text font so let's add a text element and we'll just say text actually body font I think is how its defined here and actually we can go back here and in not fonts but in body text we can define some rules here as well for typography so 16 is usually the minimal size that you want to go with on a body font the rest these settings are probably good but I probably would set this to maybe our dark gray there for the color so we'll go and delete this text element we'll just add a new one real quick and we'll say text font it's gonna be Merryweather and then duplicate that and text size 16 pixels and font weight 400 okay so now at a glance we have our typography settings here as well so weird colors spacing typography now we're on to the final section which is box shadow and border radius so oxygen has a pretty incredible class system so what you can do is you can set up these really cool systems of classes that are easily accessible by just typing them in and they kind of autocomplete you can click the one you want now setting up that kind of a class system is probably a whole separate video but two things I almost always like to set up is a class for box shadow and a class for border radius that's because it's just way quicker to add them as a class rather than going in and fiddling with the settings so let's just add a div here set it to horizontal and then let's add another div and let's go to advanced size and spacing set it to 200 by 200 and this will be our box shadow div so let's add a class to it we'll call it box shadow now you can prefix this if you want but most sites I just have one box shadow class so I just add one called box shadow because that's easy to remember and then for my shadows what I like to do is a little different than probably what you're used to because you can totally go to advanced effects box shadow and create a shadow here but I like fancy shadows so I like to go to a website called rum AF slash shadows and this lets you generate multi-layered shadows you can bring down the layers you can adjust final transparency final vertical distance all of these things and get a really really nice natural-looking shadow because it layers all these different shadows with different values so let's bring these layers down and then you just copy the CSS go back over to oxygen and with your box shadow class selected go to advanced custom CSS and just paste that in and then what I like to do is within this div let's go back here make sure you're not changing settings on box-shadow aside from adding the custom CSS because you you don't want to mess with that you don't want to like set this to a certain width or something because then everything you try to add a shadow to will have that width so let's go back to the ID and let's go to layout and let's make sure everything is going to be centered and then let's add just a little text element that shows our class box shadow perfect let's add some spacing below this heading spacing below this one too just doing a little bit of last-minute cleanup here and then back down here so now we have our box shadow class and we have a visual representation of what applying that class is going to do so now let's duplicate this and we're on the ID so we're gonna add some spacing to the left hand side well I'd say 32 pixels a margin and then we're gonna want to get rid of that class because this is gonna be for our border radius and our class is going to be called rounded corners and now let's add that class rounded corners to this div and then let's go to advanced borders and let's set it to something like I don't know 4 pixels now sometimes you'll want something like 4 pixels and 8 pixels for different situations actually I'm gonna go with 8 pixels but usually one border radius is enough for most cases and then you can kind of adjust it as needed but usually stick with this main class you've set up because then your border radius will always be consistent now let's go back to the div ID and we need to set the background color to something else let's do this dark purple and then go back up here and let's double check that border because it looks like it did not take oh I put pixels in there which I do not need to do because the unit's already added now let's save and let's change this text color to something lighter like our like right here okay so let's save and look at the front end close this guy out and jump up here so now if we go to our website slash design system that's usually where I put them we have our colors that we want which of course you probably add a few more shades here you have your spacing you have your typography and you have your shadow and border-radius classes now back to these classes let's say we were building a page and we'll just add another section below this and let's say we added a div with background color of something like this and size in space when we want it to be a hundred percent width and then we added a heading in there and set the color to like grey now we're in design mode right we have these elements we want to make them look good so we know that we need to add some spacing to the div so we go in and we go to size and spacing and we know we're using an eight pixel system because we have it listed up here so let's do 32 pixels on all sides and let's change this to design system and then say we want to add a box shadow to this instead of going into the settings and changing it there we're just gonna go up to the classes and type shadow and guess what there it is at it we've got our shadow and then we want to add our rounded corners we'll do the same thing except for type rounded or corners and we'll see the suggested class great now we can add say a text element and we can change the color of it and of course we have our colors now the other thing we probably will use sometimes is pure white but we can also use this light gray and because we know what spacing to use we can add say 16 pixels here and just like that because we've established our design system no hard choices had to be made there we knew exactly what to do and exactly how to do it without having to sit there and rack our brains about what kind of spacing you use what kind of font to use etc everything's set up for us now of course design systems can go way way deeper than this but this is kind of the baseline that I've found is necessary for me personally to achieve really nice consistency in my designs so again this is Elijah with the oxygen team and that's how to set up a quick and easy design system for use in your oxygen site builds thank you for watching

Channel: Oxygen

Views: 20,236

Keywords: oxygen builder, WordPress, design system, design consistency

Id: ELZTCMWbP7U

Length: 24min 27sec (1467 seconds)

Published: Sun Jun 14 2020