01 – Color Swatches
Cloud
Revolution
Gradient
45°
Cloud Revolution Blue 1
#0acffe
Cloud Revolution Blue 2
#007aff
Cloud Revolution Yellow
#ffcc00
Cloud Revolution Orange 1
#ff9500
Cloud Revolution Orange 2
#fb5607
Cloud Revolution Orange 3
#ff2d55
Cloud Revolution Green 1
#00aa1c
Cloud Revolution Green 2
#0f7a31
Cloud Revolution Blue 3
#4361ee
Cloud Revolution Blue 4
#3f37c9
Cloud Revolution Blue 5
#3a0ca3
Cloud Revolution Purple 1
#ae35cc
Cloud Revolution Purple 2
#7209b7
Cloud Revolution Purple 3
#560bad
Cloud Revolution Gray 1
#efeff1
Cloud Revolution Gray 2
#d1d8e0
Cloud Revolution Gray 3
#a5b1c2
Cloud Revolution Gray 4
#778ca3
Cloud Revolution Gray 5
#4b6584
Cloud Revolution Gray 6
#384c63
02 – Headings & Paragraphs
Display
Lorem ipsum
font-size: 56 px / 3.5 rem;
line-height: 61 px / 1.1 rem;
letter-spacing: -0.5 px;
font-family: Facundo (Bold)
font-weight: 700
font-color: #384c63
H1
Lorem ipsum
font-size: 48 px / 3 rem;
line-height: 57 px / 1.2 rem;
letter-spacing: -0.5 px;
font-family: Facundo (Bold)
font-weight: 700
font-color: #384c63
H2
Lorem ipsum dolor sit
font-size: 40 px / 2.5 rem;
line-height: 48 px / 1.2 rem;
letter-spacing: -0.5 px;
font-family: Facundo (Bold)
font-weight: 700
font-color: #384c63
H3
Lorem ipsum dolor sit
font-size: 36 px / 2.25 rem;
line-height: 43 px / 1.2 rem;
letter-spacing: -0.5 px;
font-family: Facundo (Bold)
font-weight: 700
font-color: #384c63
H4
Lorem ipsum dolor sit amet
font-size: 32 px / 2 rem;
line-height: 40 px / 1.25 rem;
letter-spacing: -0.5 px;
font-family: Facundo (Bold)
font-weight: 700
font-color: #384c63
H5
Lorem ipsum dolor sit amet eiusmod
font-size: 24 px / 1.5 rem;
line-height: 32 px / 1.333 rem;
letter-spacing: -0.5 px;
font-family: Facundo Bold
font-weight: 700
font-color: # 384c63
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.5 px;
font-family: Facundo Regular
font-weight: 700
font-color: #4b6584
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.5 px;
font-family: Facundo Regular
font-weight: 700
font-color: #4b6584
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.5 px;
font-family: Facundo Regular
font-weight: 700
font-color: #4b6584
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.5 px;
font-family: Facundo Regular
font-weight: 700
font-color: # 384c63
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: 700
font-color: #373d3f font-color: #778ca3
Metadata
Month Date, Year (November 6, 2020)
Author Full Name (John Smith)
font-size: 14 px / 0.875 rem;
line-height: 17 px / 1.25 rem;
letter-spacing: 0.5 px;
text-transform: capitalize;
font-family: Facundo Regular
font-weight: 700
font-color: # 4b6584
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: Facundo (Bold)
font-weight: 700
font-color: #384c63
Pagination
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
(Current page #f18a00)
font-size: 24 px / 1.5 rem;
line-height: 32 px / 1.333 rem;
letter-spacing: 20 px;
font-family: Facundo (Bold)
font-weight: 700
font-color: #a5b1c2
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;
normal –> Hover
Secondary Button Style
padding: 12px 30px;
Normal –> Hover
04 – Line Icon Style