Style Guide
Breakpoints
Small
Breakpoint: ≥320px
Left/right margins: 20px
Gutter: 20px
Columns: 2
Medium
Breakpoint: ≥768px
Left/right margins: 30px
Gutter: 30px
Columns: 6
Large
Breakpoint: ≥1025px
Left/right margins: 80px
Gutter: 30px
Columns: 12
Extra Large
Breakpoint: ≥1280px
Left/Right Margins: 100px
Gutter: 30px
Columns: 12
Max-width page: 1280px
Vertical Spacing
Small
Large Monitor 50px, Desktop/laptop 30px, tablet 30px, mobile 30px
Medium
Large Monitor 100px, Desktop/laptop 50px, tablet 50px, mobile 50px
Large
Large Monitor 150px, Desktop/laptop 100px, tablet 100px, mobile 50px
X-Large
Large Monitor 200px, Desktop/laptop 150px, tablet 100px, mobile 50px
Overlapping layouts (vertical spacing between sections above/below. Measuring from edge to edge of containers)
Large Monitor 200px, Desktop/laptop 150px, tablet 100px, mobile 50px
Colors
Typography
font size, line height, letter-spacing
H1 header
(>1025px) 60px, 100%, -1px
(1024-768px) 50px, 100%, -1px
(
H2 header
(>1025px) 50px, 120%, -1px
(1024-768px) 40px, 120%, -1px
(
H3 header
(>1025px) 40px, 120%, -1px
(1024-768px) 30px, 120%, -1px
(
H4 header
(>1025px) 30px, 120%, -1px
(1024-768px) 24px, 120%, -1px
(
H5 header
(>768px) 21px, 140%, 0px
(
H6 header
(>768px) 18px, 140%, 0px
(
(>1025px) 58px, 100%, -1px
(1024-768px) 48px, 100%, -1px
(
(>1025px) 40px, 100%, -1px
(1024-768px) 30px, 120%, -1px
(
(>1025px) 18px, 140%, 0.5px
(1024-768px) 16px, 140%, 0.5px
(
(>1025px) 24px, 140%, 0px
(
Body, default
(all breakpoints) 16px, 150%, 0.5px
(all breakpoints) 14px, 150%, 0.5px
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 dolor at ante semper."
- John Doe
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.