01 – Color Swatches
Gradient 1
Gradient 1-1
#07af9a
Gradient 1-2
#00ccb3
Gradient 1-3
#04665a
Gradient 2
Gradient 2-1
#022f48
Gradient 2-2
#0078bb
Gradient 2-3
#005280
Gradient 3
Gradient 3-1
#ff4e20
Gradient 3-2
#ffca23
Gradient 3-3
#ff7548
Gradient 4
Gradient 4-1
#8187ef
Gradient 4-2
#5e76eb
Gradient 4-3
#535f70
Gradient 5
Gradient 5-1
#cdefeb
Gradient 5-2
#e2edec
Gradient 5-3
#f1f1f2
Gradient 6
Gradient 6-1
#f0f5ff
Gradient 6-2
#e0e1ff
Gradient 6-3
#ffeeba
Gradient 7
45°
Gradient 7-1
#9aacb6
Gradient 7-2
#ccd5da
Gradient 7-3
#e6eaed
Gradient 8
45°
Gradient 8-1
#97df20
Gradient 8-2
#b443bb
Gradient 8-3
#3b9ab4
Gradient 9
45°
Gradient 9-1
#8c9ace
Gradient 9-2
#5f6db4
Gradient 9-3
#212d5e
Gradient 10
45°
Gradient 10-1
#fffb45
Gradient 10-2
#8bffea
Gradient 10-3
#ffad91
Black
#000000
Black 2
#0071a1
Black 3
#222222
Gray 1
#404b54
Gray 2
#6a7985
Gray 3
#dedede
Gray 4
#d8e2e1
Gray 5
#d0d4db
Gray 6
#9198a3
Off White
#edf2f4
White
#ffffff
02 – Headings & Paragraphs
Display
Lorem ipsum
font-size: 56 px / 3.5 rem;
line-height: 61 px / 1.1 rem;
letter-spacing: -1 px;
font-family: Franklin Gothic
font-weight: 700
font-color: #00263a
H1
Lorem ipsum
font-size: 48 px / 3 rem;
line-height: 57 px / 1.2 rem;
letter-spacing: -1 px;
font-family: Franklin Gothic
font-weight: 700
font-color: #00263a
H2
Lorem ipsum dolor sit
font-size: 40 px / 2.5 rem;
line-height: 48 px / 1.2 rem;
letter-spacing: -1 px;
font-family: Franklin Gothic
font-weight: 700
font-color: #00263a
H3
Lorem ipsum dolor sit
font-size: 36 px / 2.25 rem;
line-height: 43 px / 1.2 rem;
letter-spacing: -1 px;
font-family: Franklin Gothic
font-weight: 700
font-color: #00263a
H4
Lorem ipsum dolor sit amet
font-size: 32 px / 2 rem;
line-height: 40 px / 1.25 rem;
letter-spacing: 0 px;
font-family: Franklin Gothic
font-weight: 700
font-color: #00263a
H4 – Title
Lorem ipsum dolor sit amet eiusmod
font-size: 32 px / 2 rem;
line-height: 40 px / 1.25 rem;
letter-spacing: 0 px;
font-family: Franklin Gothic
font-weight: 700
font-color: #00263a
H5
Lorem ipsum dolor sit amet eiusmod
font-size: 24 px / 1.5 rem;
line-height: 32 px / 1.333 rem;
letter-spacing: 0 px;
font-family: Franklin Gothic
font-weight: 700
font-color: #00263a
H5 – Title
Lorem ipsum dolor sit amet eiusmod
font-size: 24 px / 1.5 rem;
line-height: 32 px / 1.333 rem;
letter-spacing: 0 px;
font-family: Calluna Sans
font-weight: 400
font-color: #022f48
Subhead / XLarge Paragraph
Lorem ipsum dolor sit amet consectetur adipiscing elit
sed do eiusmod tempor incididunt ut labore et dolore
font-size: 21 px / 1.333 rem;
line-height: 27 px / 1.333 rem;
letter-spacing: 0 px;
font-family: Calluna Sans
font-weight: 500
font-color: #022f48
Large Paragraph
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pellentesque diam volutpat commmodo sed egestas egestas.
font-size: 18 px / 1.125 rem;
line-height: 27 px / 1.5 rem;
letter-spacing: 0 px;
font-family: Calluna Sans
font-weight: 500
font-color: #022f48
Paragraph
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Pellentesque diam
volutpat commmodo sed egestas egestas fringilla. Enim neque volutpat.
font-size: 16 px / 1 rem;
line-height: 24 px / 1.5 rem;
letter-spacing: 0 px;
font-family: Calluna Sans
font-weight: 500
font-color: #022f48
Caption
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Pellentesque diam volutpat commmodo
sed egestas egestas fringilla. Enim neque volutpat.
font-size: 14 px / 0.875 rem;
line-height: 17 px / 1.25 rem;
letter-spacing: 0 px;
font-family: Calluna Sans
font-weight: 500
font-color: #022f48
Label
Title Case
font-size: 14 px / 0.875 rem;
line-height: 17 px / 1.25 rem;
letter-spacing: 0.5 px;
text-transform: capitalize;
font-family: Calluna Sans
font-weight: 500
font-color: #373d3f font-color: #ffffff (50%)
Nav / Footer
font-size: 14 px / 0.875 rem;
line-height: 17 px / 1.25 rem;
letter-spacing: 0.5 px;
text-transform: capitalize;
font-family: Nimbus Sans Bold/Regular
font-weight: 500
font-color: #2b2d42
Pagination
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
(Current page #f18a00)
font-size: 18 px / 1.125 rem;
line-height: 27 px / 1.5 rem;
letter-spacing: 20 px;
font-family: Nimbus Sans Bold/Regular
font-weight: 500
font-color: #21d0b2
03 – List Styles
Bullet List Style
- Nibh cras pulvinar mattis nunc sed blandit libero.
- Porttitor rhoncus dolor purus non enim praesent.
- Hac habitasse platea dictumst quisque sagittis purus.
- Luctus accumsan tortor posuere ac ut.
- Molestie nunc non blandit massa enim nec dui. Magna acplacerat vestibulum lectus mauris ultrices eros in. Portalorem mollis aliquam ut porttitor leo a diam.
- Mauris in aliquam sem fringilla ut morbi tincidunt. Vitaeturpis massa sed elementum tempus egestas sed.
- Gravida arcu ac tortor dignissim convallis aenean et tortor.
Numbered List Style
- Felis eget velit aliquet sagittis id consectetur purus.
- Egestas sed sed risus pretium quam vulputate dignissim.
- Convallis posuere morbi leo urna molestie at elementum.
- Vitae congue eu consequat ac felis donec.
- Elementum tempus egestas sed sed risus.
- Quis enim lobortis scelerisque fermentum dui faucibus in. Scelerisque felis imperdiet proin fermentum. Lorem donecmassa sapien faucibus et.
- Sed viverra tellus in hac habitasse platea dictumst.
Check List Style
- Nibh cras pulvinar mattis nunc sed blandit libero.
- Porttitor rhoncus dolor purus non enim praesent.
- Hac habitasse platea dictumst quisque sagittis purus.
- Luctus accumsan tortor posuere ac ut.
- Molestie nunc non blandit massa enim nec dui. Magna ac placerat vestibulum lectus mauris ultrices eros in. Porta lorem mollis aliquam ut porttitor leo a diam.
- Mauris in aliquam sem fringilla ut morbi tincidunt. Vitae turpis massa sed elementum tempus egestas sed.
- Gravida arcu ac tortor dignissim convallis aenean et tortor.
Arrow List Style
- Nibh cras pulvinar mattis nunc sed blandit libero.
- Porttitor rhoncus dolor purus non enim praesent.
- Hac habitasse platea dictumst quisque sagittis purus.
- Luctus accumsan tortor posuere ac ut.
- Molestie nunc non blandit massa enim nec dui. Magna ac placerat vestibulum lectus mauris ultrices eros in. Porta lorem mollis aliquam ut porttitor leo a diam.
- Mauris in aliquam sem fringilla ut morbi tincidunt. Vitae turpis massa sed elementum tempus egestas sed.
- Gravida arcu ac tortor dignissim convallis aenean et tortor.
04 – Button Styles
Default Button Style
Compact Button Style
Secondary Button Styles
Tabbed Content #1
Tabbed content paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut arcu eros. Nam arcu nisl, ultricies ac mauris vel, bibendum iaculis metus. In hac habitasse platea dictumst.
- Tabbed content list item one
- Tabbed content list item two
- Tabbed content list item three
- Tabbed content list item four
Tabbed Content #2
Tabbed content paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut arcu eros. Nam arcu nisl, ultricies ac mauris vel, bibendum iaculis metus. In hac habitasse platea dictumst.
- Tabbed content list item one
- Tabbed content list item two
- Tabbed content list item three
- Tabbed content list item four
Tabbed Content #3
Tabbed content paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut arcu eros. Nam arcu nisl, ultricies ac mauris vel, bibendum iaculis metus. In hac habitasse platea dictumst.
- Tabbed content list item one
- Tabbed content list item two
- Tabbed content list item three
- Tabbed content list item four
Tabbed Content #4
Tabbed content paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut arcu eros. Nam arcu nisl, ultricies ac mauris vel, bibendum iaculis metus. In hac habitasse platea dictumst.
- Tabbed content list item one
- Tabbed content list item two
- Tabbed content list item three
- Tabbed content list item four
04 – Line Icon Style