01 – Color Swatches
Gradient 1
90
Gradient 1-1
#45a041
Gradient 1-2
#004d19
Gradient 1-3
#00c44c
Gradient 1.4
00a033
Gradient 1-5
#42a147
Gradient 1-6
#00290e
Gradient 2
90
Gradient 2-1
1e55b0
Gradient 2-2
#1c355e
Gradient 2-3
#1b3f5f
Gradient 3
90
Gradient 3-1
42a147
Gradient 3-2
#2c679c
Gradient 3-3
#5f7f9c
Gradient 4
90
Gradient 4-1
#ffb899
Gradient 4-2
#d50037
Gradient 4-3
#800021
Gradient 5
90
Gradient 5-1
#ff4e20
Gradient 5-2
#ff4e20
Gradient 5-3
#802710
Gradient 6
90
Gradient 6-1
#00c8f4
Gradient 6-2
#009ed9
Gradient 6-3
#005d80
Gradient 7
90
Gradient 7-1
#00c44c
Gradient 7-2
#00a033
Gradient 7-3
#004d19
Gradient 8
90
Gradient 8-1
#f3ff73
Gradient 8-2
#fcea46
Gradient 8-3
#8f8528
Gradient 9
90
Gradient 9-1
#d0b5ff
Gradient 9-2
#5d00ff
Gradient 9-3
#2f0080
Gradient 10
90
Gradient 10-1
#7dffb0
Gradient 10-2
#bfeeff
Gradient 10-3
#2f0080
Gray 1
#f5f7fa
Gray 2
#cfdae6
Gray 3
#bfccd9
Gray 4
#adbdcc
Gray 5
#8595a6
Gray 6
#636569
Black
#000a19
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: Avenir Next
font-weight: Bold
font-color: #000a19
H1
Lorem ipsum
font-size: 48 px / 3 rem;
line-height: 57 px / 1.2 rem;
letter-spacing: -0.5 px;
font-family: Avenir Next
font-weight: Bold
font-color: #000a19
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: Avenir Next
font-weight: Bold
font-color: #000a19
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: Avenir Next
font-weight: Bold
font-color: #000a19
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: Avenir Next
font-weight: Bold
font-color: #000a19
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: Avenir Next
font-weight: Bold
font-color: #000a19
H6
Lorem ipsum dolor sit amet eiusmod
font-size: 21 px / 1.5 rem;
line-height: 32 px / 1.333 rem;
letter-spacing: -0.5 px;
font-family: Avenir Next
font-weight: Bold
font-color: #000a19
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: Avenir Next
font-weight: Demi Bold
font-color: #000a19
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: Avenir Next
font-weight: Medium
font-color: #000a19
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: Avenir Next
font-weight: Regular
font-color: #000a19
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: Avenir Next
font-weight: Regular Italic
font-color: #000a19
Label
Title Case
font-size: 14 px / 0.875 rem;
line-height: 17 px / 1.25 rem;
letter-spacing: 1 px;
text-transform: capitalize;
font-family: Avenir Next
font-weight: Bold
font-color: #000a19
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: Avenir Next
font-weight: Regular
font-color: #000a19
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: Avenir Next
font-weight: Regular
font-color: #000a19
Pagination
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
(Current page #00c44c)
font-size: 24 px / 1.5 rem;
line-height: 32 px / 1.333 rem;
letter-spacing: 20 px;
font-family: Avenir Next
font-weight: Bold
font-color: #bfccd9
Hyperlinks In Text
Blue Option – #00c8f4
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do
eiusmod tempor this is a link ut labore et dolore magna aliqua.
Pellentesque diam volutpat commmodo sed egestas egestas.
Green Option – #00c44c
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do
eiusmod tempor this is a link ut labore et dolore magna aliqua.
Pellentesque diam volutpat commmodo sed egestas egestas.
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
Compact Button Style
Secondary Button Styles
Alt1 Button Style
Alt1 Compact Button Style
Alt1 Secondary Button Styles
Read More Link Styles
Download Guide
Download Guide
05 – CTA Formatting
FOR YOUR HEALTH
Concerned about Lymphedema? Get our quick start guide “Identifying Lymphedema: 10 Questions to Ask Your Doctor”.
Download Guide
