01 – Color Swatches
Gradient 1
45°
Gradient 1-1
#F9AC7A
Gradient 1-2
#D76D78
Gradient 1-3
#3C2A70
Gradient 2
45°
Gradient 2-1
#262261
Gradient 2-2
#2E3191
Gradient 2-3
#EE4036
Gradient 3
45°
Gradient 3-1
#0E4A7F
Gradient 3-2
#315070
Gradient 3-3
#DD6D26
Gradient 4
45°
Gradient 4-1
#00AEB0
Gradient 4-2
#2E3191
Gradient 4-3
#262261
Gradient 5
45°
Gradient 5-1
#272F6A
Gradient 5-2
#B02125
Gradient 5-3
#FBB92B
Gradient 6
45°
Gradient 6-1
#272F6A
Gradient 6-2
#B02125
Gradient 6-3
#FBB92B
Gradient 7
45°
Gradient 7-1
#42047E
Gradient 7-2
#324487
Gradient 7-3
#07F49E
Gradient 8
45°
Gradient 8-1
#03001E
Gradient 8-2
#5614B0
Gradient 8-3
#DBD65C
Gradient 9
45°
Gradient 9-1
#03001E
Gradient 9-2
#5614B0
Gradient 9-3
#DBD65C
Gradient 10
45°
Gradient 10-1
#0F2027
Gradient 10-2
#203A43
Gradient 10-3
#2C5364
Black
#000000
Black 2
#0071a1
Black 3
#222222
Gray 1
#373D3F
Gray 2
#707C80
Gray 3
#A7AFB2
Gray 4
#DADEDF
Gray 5
#D0D4DB
Gray 6
#8d99ae
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: Cera Pro Bold
font-weight: 900
font-color: #222222
H1
Lorem ipsum
font-size: 48 px / 3 rem;
line-height: 57 px / 1.2 rem;
letter-spacing: -1 px;
font-family: Cera Pro Bold
font-weight: 800
font-color: #222222
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: Cera Pro Bold
font-weight: 900
font-color: #222222
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: Cera Pro Bold
font-weight: 800
font-color: #222222
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: Cera Pro Bold
font-weight: 800
font-color: #222222
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: Arimo Bold
font-weight: 700
font-color: #222222
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: Cera Pro Bold
font-weight: 800
font-color: #2b2d42
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: Arimo Regular
font-weight: 400
font-color: #373d3f
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: Arimo Regular
font-weight: 500
font-color: #373d3f
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: Arimo Regular
font-weight: 500
font-color: #373d3f
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: Arimo Regular
font-weight: 500
font-color: #373d3f
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: Arimo Regular
font-weight: 500
font-color: #373d3f
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: Arimo Regular
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 Style
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