Styling and web elements
https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Montserrat
https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Roboto
h1 : 42px, Montserrat bold, caps
h2 : 33px, Montserrat bold, caps
h3 : 20px, Montserrat Regular or bold, doesn’t need to be caps but typically is
.large-font : Larger body text elements like Lesson / Challenge titles = 20px Roboto bold
.small-font : Smallest copy elements (paragraph etc) = 15px Roboto Regular
STYLIZED PARAGRAPH ELEMENTS - BOLD, ITALICS, UNDERLINE, LINK
.small-font : Follow the weights described above. Utilize the weights available in those font families.
.link-drk : Link color for dark backgrounds(01868b)
.link-drk : Link color for light backgrounds(01868b)
.link-lght : Link color for dark teal BG (00c8d0)
.link-orng : Orange can also be used if variation is needed (fd751b)
buttons
.button1 :
text.button2 :
text.button3 :
text.button4 :
textThe width of these buttons can change to better fit text but I wouldn't alter the height.
Orange gradient is cf5300 (darker orange) to fd751b (lighter orange)
Teal gradient is 018489 (darker) to 01a8ae (lighter)
input fields
Input fields can be with or without an icon depending on the need. Any long forms, leave off the icons, but for quick name / email types...icons are better. Slight shadows can be added to the form field if it needs to stand out more.
drop downs, check boxes, radio buttons
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna arcu, dapibus non nibh eu, auctor molestie lacus. Nam varius nulla ut sem vehicula aliquam. Nunc in nisi et ligula accumsan elementum in sed libero.
Drop downs can be as wide as needed but it should only be as wide as your largest item plus 20px of padding on either side.
ordered and unordered lists
headers. can vary in size as needed, if even needed (h2, h3, whatever)
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
headers. can vary in size as needed, if even needed (h2, h3, whatever)
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
Change bullets to white if on a darker background. Same with the number on ordered list. Also, the bullet / numbered list copy can be the 15px paragraph style if it’s within body copy and making it match looks better