Back to: Spectra 101: Get Started with Spectra
In this lesson, we’ll begin creating our example website with Spectra… starting with setting our website’s global brand styles.
Setting global brand styles in one place makes website development much faster, and it makes future design updates much easier!
Using global site settings, we’ll set our website’s colors, fonts, add our site logo, and set some basic layout defaults.
Color Codes Used in this Video:
Primary: #181835 ◼︎ (dark blue)
Accent: #F4571F ◼︎(orange)
Text: #1e242d ◼︎(black)
Main BG: #FFFFFF ◼︎(white)
Alt BG: #F9F7F5 ◼︎(beige)
Font Styles Used in this Video:
All
Font family: Montserrat
Font variants: 400, 400 italic, 600, 600 italic, 700, 700 italic, 900, 900 italic
All Headings
Font weight: 900
Transform: Uppercase
Body Copy
Font size: 16 pixels
Font weight: 400
Line height: 1.5 em
Bottom spacing: 1.5 em (24 pixels)
Heading 1 (H1)
Font size: 60 pixels
Line height: 1 em
Heading 2 (H2)
Font size: 40 pixels
Line height: 1.2 em
Heading 3 (H3)
Font size: 20 pixels
Line height: 1.4 em
Buttons
Font size: 15 pixels
Font weight: 600
Images Used in this Video:
Click to download a .ZIP archive containing the Spectra 101 Images