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!
Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro