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
- 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.
04 – Button Styles
Default Button Style
Normal
Hover
Compact Button Style
padding: 12px;
Hover
Secondary Button Style
padding: 12px 30 px;
Hover
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