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


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

  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

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

AIROS Medical Emblem