Style Guide
Breakpoints
Vertical Spacing
Colors
Typography
H1 header, display
(>1025px) 100px, 6.25rem/100%, -1px letter spacing
(1024-768px) 70px, 4.375rem/100%, -1px letter spacing
(<767px) 50px, 3.125rem/100%, -1px letter spacing
H1 header
(>1025px) 70, 4.375rem/100%, -1px letter spacing
(1024-768px) 60px, 3.75rem/100%, -1px letter spacing
(<767px) 40px, 2.5rem/100%, -1px letter spacing
H2 header
(>1025px) 60px, 3.75rem/100%, -1px letter spacing
(1024-768px) 50px, 3.125rem/120%, -1px letter spacing
(<767px) 30px, 1.875rem/120%, 0px letter spacing
H3 header
(>1025px) 40px, 2.5rem/120%, -1px letter spacing
(1024-768px) 30px, 1.875rem/120%, 0px letter spacing
(<767px) 24px, 1.5rem/120%
H4 header
(>1025px) 30px, 1.875rem/120%
(1024-768px) 24px, 1.5rem/120%
H5 header
(all breakpoints) 20px, 1.25rem/140%
H6 header
(all breakpoints) 16px, 1rem/150%
Body, large
(>1025px) 24px, 1.5rem/140%
(<1024px) 20px, 1.25rem/150%
Body
(all breakpoints) 16px, 1rem/150%
Body, bold
(all breakpoints) 16px, 1rem/150%
Body, small
(all breakpoints) 16px, 1rem/150%
Body, small
(all breakpoints) 16px, 1rem/150%
Bullet List (unordered)
- List item goes here
- Another list item goes here that wraps to two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.
- List item goes here
Bullet List (ordered)
- List item goes here
- Another list item goes here that wraps to two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.
- List item goes here
Block Quote Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui. Sed sodales pharetra nulla, in aliquet tellus. Morbi ultricies risus quam, et dignissim ipsum mattis id. Vivamus vestibulum nibh fermentum mauris aliquet, vitae tincidunt ante pellentesque. Integer malesuada posuere sagittis.
“Cras non lacinia augue. Quisque mauris arcu, facilisis luctus nibh sed, dapibus suscipit diam. Nam at ante semper, mattis quam ac, congue est. Nulla at nibh a nisl consequat suscipit quis id neque. Nunc interdum ipsum dolorat ante semper.”
John Doe
Red Ventures | Principle Engineer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui. Sed sodales pharetra nulla, in aliquet tellus. Morbi ultricies risus quam, et dignissim ipsum mattis id.