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 :

text

The 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

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)

1. 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
2. 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
3. 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