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

  1. Felis eget velit aliquet sagittis id consectetur purus.
  2. Egestas sed sed risus pretium quam vulputate dignissim.
  3. Convallis posuere morbi leo urna molestie at elementum.
    • Vitae congue eu consequat ac felis donec.
    • Elementum tempus egestas sed sed risus.
  4. Quis enim lobortis scelerisque fermentum dui faucibus in. Scelerisque felis imperdiet proin fermentum. Lorem donecmassa sapien faucibus et.
  5. 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

  • icon-add0xe800
  • icon-align-left0xe801
  • icon-align-center0xe802
  • icon-apps-alt0xe803
  • icon-apps0xe804
  • icon-arrow-down-circle0xe805
  • icon-align-right0xe806
  • icon-arrow-down0xe807
  • icon-arrow-left-bottom0xe808
  • icon-arrow-left-circle0xe809
  • icon-arrow-left-top0xe80a
  • icon-arrow-right-bottom0xe80b
  • icon-arrow-left0xe80c
  • icon-arrow-right-circle0xe80d
  • icon-arrow-right-top0xe80e
  • icon-arrow-up-circle0xe80f
  • icon-arrow-right0xe810
  • icon-arrow-up0xe811
  • icon-back-left0xe812
  • icon-back-alt0xe813
  • icon-back-right0xe814
  • icon-checkbox-intermediate0xe815
  • icon-cancel0xe816
  • icon-checkbox0xe817
  • icon-chevron-down0xe818
  • icon-chevron-left0xe819
  • icon-chevron-right0xe81a
  • icon-chevron-up0xe81b
  • icon-circle0xe81c
  • icon-direction-left0xe81d
  • icon-direction-right0xe81e
  • icon-download0xe81f
  • icon-ellypsis-vertical0xe820
  • icon-ellypsis0xe821
  • icon-hamburger0xe822
  • icon-happy-face0xe823
  • icon-next-alt0xe824
  • icon-ok-circle0xe825
  • icon-ok0xe826
  • icon-play0xe827
  • icon-plus0xe828
  • icon-previous-alt0xe829
  • icon-radio-button-selected0xe82a
  • icon-radio-button0xe82b
  • icon-redo0xe82c
  • icon-rectangle0xe82d
  • icon-refresh0xe82e
  • icon-remove0xe82f
  • icon-stats0xe830
  • icon-return0xe831
  • icon-turn-left0xe832
  • icon-video0xe833
  • icon-turn-right0xe834
  • icon-undo0xe835
  • icon-chevrons-down0xe836
  • icon-chevrons-up0xe837
  • icon-chevrons-left0xe838
  • icon-chevrons-right0xe839
  • icon-search0xe83a
  • icon-twitter0xf309
  • icon-facebook0xf30c
  • icon-linkedin0xf318