Small
Breakpoint: >320px
Left/right margins: 20px
Gutters: 20px
Columns: 2
Style Guide
View moreBreakpoints
Medium
Breakpoint: >768px
Left/right margins: 30px
Gutters: 30px
Columns: 6
Large
Breakpoint: >1024px
Left/right margins: 80px
Gutters: 30px
Columns: 12
Extra Large
Breakpoint: >1280px
Left/right margins: 100px
Gutters: 30px
Columns: 12
Max width page: 1280px
Vertical Spacing
Small
Extra Large 30px, Large 30px, Medium 30px, Small 30px
Medium
Extra Large 50px, Large 50px, Medium 50px, Small 50px
Large
Extra Large 100px, Large 100px, Medium 100px, Small 50px
X-Large
Extra Large 150px, Large 150px, Medium 100px, Small 50px
Colors
$Blue/300
#002140
$Blue/200
#0052A1
$Blue/100
#6BA6FF
$Red/300
#9B2019
$Red/200
#DD2D23
$Red/100
#FF534A
$Teal/300
#057F75
$Teal/200
#07B6A7
$Teal/100
#09CCC2
$Gray/300
#292A2B
$Gray/200
#525456
$Gray/100
#6B6D70
$Tan/300
#F1ECD8
$Tan/200
#FAFAEF
$Tan/100
#FDFDF7
$Light Gray/300
#E2EBF2
$Light Gray/200
#E9F0F6
$Light Gray/100
#F7FBFF
Typography
H1 header
(≥1280px) 130px, 7.222rem/90%
(>1025px) 72px, 4rem/100%
(1024-768px) 64px, 3.556rem/100%
(<767px) 40px, 2.222rem/100%
H2 header
(≥1280px) 64px, 3.556rem/100%
(>1025px) 48px, 2.667rem/120%
(1024-768px) 48px, 2.667rem/120%
(<767px) 30px, 1.667rem/120%
H3 header
(>1025px) 36px, 2rem/120%
(1024-768px) 30px, 0.889rem/120%
(<767px) 24px, 1.333rem/120%
H4 header
(all breakpoints) 21px, 1.167rem/120%
H5 header
(all breakpoints) 18px, 1rem/140%
H6 header
(all breakpoints) 16px, 0.889rem/140%
Body, large
(>1025px) 30px, 1.667rem/140%
(<1024px) 21px, 1.167rem/140%
Body
(all breakpoints) 18px, 1rem/150%
Body, small
(all breakpoints) 16px, 0.875/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
“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
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.