Design
Design elements such as color, typography, iconography, and form fields that are used to communicate the brand look and feel.
- Background
- Accent
- Shadow
- Button Background
- Button Hover Shadow
- Copy
Background
-
Default
-
Red
-
Blue
-
Green
-
Purple
-
Yellow
Accent
-
Default
-
Red
-
Blue
-
Green
-
Purple
-
Yellow
Shadow
-
Default
-
Red
-
Blue
-
Green
-
Purple
-
Yellow
Button Background
-
Default
-
Red
-
Blue
-
Green
-
Purple
-
Yellow
Button Hover Shadow
-
Default
-
Red
-
Blue
-
Green
-
Purple
-
Yellow
Copy
-
Copy
-
Button Text
-
Button Text - Yellow
Primary Font - Area Normal
Secondary Font - Freight Big Compressed Pro
Headline 1 Primary Font / Semi Bold / 72px / Title Case
Headline 2 Primary Font / 49.5px / Title Case
Headline 3 Primary Font / 36px / Title Case
Headline 4 Primary Font / 27px / Title Case
Headline 5 Primary Font / 20.25px / Title Case
Headline 6 Primary Font / 18px / Title Case
Paragraph Large Primary Font / Regular / 22.5px / Title Case
Paragraph Primary Font / Regular / 16px / Line Height 28px / Sentence Case
Paragraph Small Primary Font / Regular / 13.5px / Sentence Case
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.