01 – Color Swatches

Orange

Orange
Tint 1

Orange
Tint 2

Red

Red
Tint 1

Red
Tint 2

Yellow

Yellow
Tint 1

Yellow
Tint 2

Green

Green
Tint 1

Green
Tint 2

Teal

Teal
Tint 1

Teal
Tint 2

Purple

Purple
Tint 1

Purple
Tint 2

Dark Blue

Dark Blue
Tint 1

Dark Blue
Tint 2

Blue

Blue
Tint 1

Blue
Tint 2

Light Blue

Light Blue
Tint 1

Light Blue
Tint 2

Light Blue
Tint 3

White

Black

Dark Black

Atreya Black

Very Dark Gray

Gray

Medium
Gray

Light
Gray


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: Termina (Heavy)
font-weight: 900
font-color: #343434

H1
Lorem ipsum

font-size: 48 px / 3 rem;
line-height: 57 px / 1.2 rem;
letter-spacing: -1 px;

font-family: Termina (Demi)
font-weight: 600
font-color: #545760

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: Termina (Bold)
font-weight: 700
font-color: #545760

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: Termina (Demi)
font-weight: 600
font-color: #545760

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: Termina (Bold)
font-weight: 700
font-color: #545760

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: Neue Haas Grotesk
Text Pro (Medium)
font-weight: 500
font-color: #343434

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: Termina (Demi)
font-weight: 600
font-color: #545760

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: Neue Haas Grotesk
Text Pro (Medium)
font-weight: 500
font-color: #545760

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: Neue Haas Grotesk
Text Pro (Roman)
font-weight: 400
font-color: #545760

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: Neue Haas Grotesk
Text Pro (Roman)
font-weight: 400
font-color: #545760

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: Neue Haas Grotesk
Text Pro (Roman)
font-weight: 400
font-color: #545760

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: Neue Haas Grotesk
Text Pro (Roman)
font-weight: 400
font-color: #8c939e

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: Neue Haas Grotesk
Text Pro (Roman)
font-weight: 400
font-color: #8c939e

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: Neue Haas Grotesk
Text Pro (Bold)
font-weight: 700
font-color: #343434

Pagination

1 2 3 4 5 6 7 8 9

font-size: 18 px / 1.125 rem;
line-height: 27 px / 1.5 rem;
letter-spacing: 20 px;

font-family: Termina (Demi)
font-weight: 600
font-color: #8c939e


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.
    1. Vitae congue eu consequat ac felis donec.
    2. 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.


04 – Button Styles – on white

Primary


Default

Secondary

Compact


04 – Button Styles – on dark

Primary


Default

Secondary

Compact


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