Design
Design elements such as color, typography, iconography, and form fields that are used to communicate the brand look and feel.
Brand
-
Primary
-
Primary Dark
-
Secondary
-
Secondary Light
-
Banner Dark BG
Text and Accents
-
Copy
-
Rich Dark:
-
Red
-
Orange
-
Yellow
-
Green
-
Blue
-
Purple
UI
-
Error
-
Error BG
-
Warning
-
Warning BG
-
Confirmation
-
Confirmation BG
-
Info
-
Info BG
Primary Font
Primary Font
Primary Font Bold
Secondary Font
Secondary Font Bold
Large Hero Text Primary Font / Bold / 45px / Title Case
Headline 1 Primary Font / Semi Bold / 38.4px / Title Case
Headline 2 Primary Font / Semi Bold / 28.8px / Title Case
Headline 3 Primary Font / Semi Bold / 24px / Title Case
Headline 4 Primary Font / Semi Bold / 19.2px / Title Case
Headline 5 Primary Font / Semi Bold / 18px / Title Case
Headline 6 Primary Font / Semi Bold / 16px / Title Case
Paragraph Primary Font / Regular / 18px / Line Height 1.8 / Sentence Case
EYEBROW Primary Font / Regular / 14px / Letter Spacing: 7 / Uppercase
EYEBROW SMALL Primary Font / Regular / 12px / Letter Spacing: 5 / Uppercase
UNORDERED LIST
- This is a list item in an unordered list
- An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
- Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
- This is the last list item
ORDERED LIST
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
- Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an ordered list
- This is the last list item
| Lorem Ipsum | Label | Short Label | Medium Label |
| Lorem Ipsum | Label | Short Label | Medium Label |
| Lorem Ipsum | Label | Short Label | Medium Label |
| Lorem Ipsum | Label | Short Label | Medium Label |
| Lorem Ipsum | Label | Short Label | Medium Label |
Example Error Alert using the icon style with a sample link. Lorem ipsum amet, consectetur adipiscing elit.
Example Warning Alert using the icon style with a sample link. Lorem ipsum amet, consectetur adipiscing elit.
Example Confirmation Alert using the icon style with a sample link. Lorem ipsum amet, consectetur adipiscing elit.
Example Information Alert using the icon style with a sample link. Lorem ipsum amet, consectetur adipiscing elit.