Style Guide

Colors

Brand Colors

Brand Prime
#4B3DE3
Brand Second
#FE7020
Brand Third
#9EE9FF
Brand Fourth
#FE76FB
Brand Fifth
#0DEE9F
Brand Sixth
#---

Solid Colors

Lightest
#F7F7F7
Lighter
#F0F0F0
Light
#DEDEDE
Neutral
#BDBDBD
Dark
#A6A6A6
Darker
#696969
Darkest
#262626

Dark Transparent

Black 003
Black 006
Black 013
Black 026
Black 035
Black 059

System Colors

Success Green
#---
Success Green Light
#---
Error Red
#---
Error Red Light
#---

White Transparent

White 003
White 006
White 013
White 026
White 035
White 059

Typography

HTML Headings Tags

HTML tags define default Heading styles.

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

Headings Classes

Heading classes when typography style doesn't match the default HTML tag.

Heading Style H1

Heading 1

Heading Style H2

Heading 2

Heading Style H3

Heading 3

Heading Style H4

Heading 4

Heading Style H5

Heading 5

Heading Style H6

Heading 6

Extra styles

Meta Style

All Caps Style

All Caps Small Style

Al Caps Small Style

Other HTML Tags

HTML tags define default Heading styles.

All Paragraphs

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

All Links

Text Link

All Block Quotes

Block Quote

All Unordered Lists

No Bullet List
No Bullet List
No Bullet List

All Unordered Lists

Bullet List
Bullet List
Bullet List

All Ordered Lists

Ordered List
Ordered List
Ordered List

Text Sizes

Text sizes classes when typography size doesn't match the default HTML tag.

Text Size Large

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Size Medium

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Size Regular

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Size Small

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Size Tiny

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Weights

Text weight classes when typography weight doesn't match the default HTML tag.

Text Weight Extra Bold

Text Weight Extra Bold (800)

Text Weight Bold

Text Weight Bold (700)

Text Weight Semi Bold

Text Weight Semi Bold (600)

Text Weight Medium

Text Weight Medium (500)

Text Weight Normal

Text Weight Normal (400)

Text Weight Light

Text Weight Light (300)

Text Colors

Text Color White

This is some text

Text Color Darkest

This is some text

Text Color Darker

This is some text

Text Color Dark

This is some text

Text Color Brand Prime

This is some text

Text Color Brand Second

This is some text

Text Color Brand Thirth

This is some text

Text Color Brand Fourth

This is some text

Text Color Brand Fifth

This is some text

Text Color Brand Sixth

This is some text

Text Color White 059

This is some text

Text Color Black 059

This is some text

Text Color Black 035

This is some text

Icons

80px Icons

48px Icons

32px Icons

24px Icons

16px Icons

Rich Text

Text Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

CMS Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

CMS Rich Text Alt

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.