01 – Color Swatches

RelayiQ
Gradient

32064A

RelayiQ
Dark Blue

1c2856

RelayiQ
Blue

0053ae

RelayiQ
Teal

21d0b2

RelayiQ
Dark Gray

2b2d42

RelayiQ
Gray

555c68

RelayiQ
Light Gray

8d99ae

RelayiQ
Off White

edf2f4

RelayiQ
Dark Green

0b4f6c

RelayiQ
Green

2b9348

RelayiQ
Neon

00d900

RelayiQ
Azure

4361ee

RelayiQ
Light Blue

CAE7DF

RelayiQ
Artic Blue

4cc9f0

RelayiQ
Orange

ff4e4f

RelayiQ
Pink

f72585

RelayiQ
Purple

7209b7

RelayiQ
Indigo

3a0ca3


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: Noir Pro Bold
font-weight: 900
font-color: #2b2d42

H1
Lorem ipsum

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

font-family: Noir Pro Semi Bold
font-weight: 800
font-color: #2b2d42

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: Noir Pro Bold
font-weight: 900
font-color: #2b2d42

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: Noir Pro Semi Bold
font-weight: 800
font-color: #2b2d42

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: Nimbus Pro Sans Bold
font-weight: 800
font-color: #2b2d42

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: Nimbus Sans Bold
font-weight: 900
font-color: #2b2d42

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: Noir Pro Semi 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: Nimbus Sans Regular
font-weight: 800
font-color: #555c68

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: Nimbus Sans Regular
font-weight: 500
font-color: #555c68

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: Nimbus Sans Regular
font-weight: 500
font-color: #555c68

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: Nimbus Sans Regular
font-weight: 500
font-color: #555c68

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: Nimbus Sans Regular
font-weight: 500
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: Nimbus Sans Regular
font-weight: 500
font-color: #8c939e 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.


04 – Button Styles

Default Button Style

Normal

Hover

Compact Button Style

padding: 12px;

Hover

Secondary Button Style

padding: 12px 30 px;

Hover



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