[03] Building the Design System

In this lesson we will build our design system for our website, to simplify the building process and guide us in styling our website's elements.

This lesson will cover:
✔︎ Configuring Site Settings
✔︎ Setting up Global Colors
✔︎ Setting up Global Global Fonts
✔︎ And much more!

Global Colors and Fonts used in this lesson:
COLORS:
Primary Color (rename: Grape) - 6759AA
Secondary Color (rename: Almond) - ffffff
Text Color (rename: Basil) - 3BBA97
Accent Color (rename: Raspberry) - EC465F

FONTS:
Primary Typography
Montserrat
Size: 65px
Weight: 800
Uppercase
Letter Spacing: -1

Secondary Typography
Montserrat
Size: 30px
Weight: 200
Transform: Uppercase
Line Height: 1
Letter Spacing: -1

Text Typography (rename - Body Text)
Montserrat
Size: 16px
Weight: 400

Accent Typography (rename: Button Text)
Montserrat
Size: 20px
Weight: 300
Transform: Uppercase
Letter Spacing: 0.8

+ Add Style
New Item #1 Typography (rename: Nav Menu)
Montserrat
Size: 16px
Weight: 400
Transform: Uppercase

+ Add Style
New Item #2 Typography (rename: Menu Titles)
Montserrat
Size: 25px
Weight: 800
Transform: Uppercase
Line Height: 1.2

Don’t forget to subscribe to our channel!

See also:
Everything you need to know about a Design System:
How To Create a Complete Web Design Style Guide (Plus Template)

Chapters:
00:00 - Intro
00:18 - Design System overview
3:04 - Set up Global Colors
3:55 - Set up Global Global Fonts

[coleford]

I just got started with Elementor and am loving how clear and concise these videos are. Thank you!

[FahdJeddah]

Best tutorial ever i found, made me understand Elementor easily

[vpd]

I'm really enjoying the course so far. Plus Aviva's voice is super hot, which just adds to my enjoyment 😊 I've been reading the comments and I realise some people here are completely new to UI and web design and are finding it hard keeping up. It's true that the course is not 100% newbie friendly and assumes prior knowledge of a few design concepts. Sorry, guys. To design for the web you kind of need to know how to design user interfaces, in Figma, Adobe XD, Sketch, or whatever programs people use out there. Elementor is just like one of these UI design programs except that you don't need to worry about coding whatever you're designing afterwards. It does that for you. It's also easy to use if you only take some time to study its interface and at least know how to drag widgets to the content area and configure them. Just stop watching the rest of the videos first and take as much time as you need to study Elementor's interface and dragging stuff to the content area and tweaking their styles. All the best!

[slimbellyman]

its good if elementor provide a default style guide page or a XD or Figma file to start the Design System based on Elementor Framework

[seriouspipes]

3:34 How did you magically hold the color swatch down and turn it to grape??

[DOA]

As much as I have appreciated the videos before (Thank You!) I think some users get thrown off at 1:00 with the file (I know we can use our own) but how did it get where it is. Did you add it using a widget and which widget was it?

[nedum]

I see you use Uppercase in the Primary Typography but it does not have the UPPERCASE look. It looks Capitalised instead. Mine looks UPPERCASE. How did you arrive at that @ 4:08? Thanks.

[susant]

Hello, and thanks for the great videos! I have two questions about lesson 3: 1) Your design system (created in Adobe XD) slides into the screen at 3:36 on the video. Is that actually being imported into Elementor, and if so, how do you do that? 2) Are you limited to the fonts available in the drop down for Global Fonts? I created my design system with some fonts that don't appear in the drop down. Thanks!

[Pcdigestmag]

really love the design system guide as this gives you a building block for how every section and parts of your site looks, feels and interact with the end user.. do you have a template to follow every time you build a site and can it be shared here. Thanks

[seriouspipes]

1:42 Were we psychicly supposed to know to have 4 headings ready? Or was that supposed to be a speed test to whip 4 headings into shape in a second or two? ... uh I failed

[tomhighsmith]

Take the course on Elementor, 'how do I create a course for beginners'. You are making great strides and talking about things that a beginner does not know.

[maazdev]

Should i learn Adobe XD as well ? or will the client provide me with the design ?

[katarzynastawarz]

I'm Polish. I learn it in English and German. Whew, I hope to create my own website 😅😃🖖

[atraincreative]

It seems there are already Global styles there from somewhere after installing a theme. I assume each theme comes with its own set of global styles, and it's up to us to edit those global styles or add our own in order to design using global styles, which is the "best practice."

[therealmarknelson]

Very confusing video. What widget do you bring over.

[RamirosLab]

I thought I knew everything about Element, and I was wrong. This is a great tutorial.

[muniraslam]

How I can practice "Building the Design System" ?

[currieburgess]

My "site settings" tab does not turn blue. Not sure why!

[lemoncitrus]

Why I couldn't found the monsterat font in Elementor?

[thecontentcoachkim]

This is great, but now I need to learn Adobe XD? I know UX skills are valuable but geez, I just want to make my website look good.