Logo
Your primary / brand color will be the main colour used for call to actions when you need to draw attention. This is also known as the brand color or accent.
Logo
Your primary / brand color will be the main colour used for call to actions when you need to draw attention. This is also known as the brand color or accent.
Logo
Your primary / brand color will be the main colour used for call to actions when you need to draw attention. This is also known as the brand color or accent.
Primary
Your primary / brand color will be the main colour used for call to actions when you need to draw attention. This is also known as the brand color or accent.
50
100
200
300
400
500
600
700
800
900
950
Secondary
Your secondary palette is used to support the primary color and is used less often when the primary color doesn't offer enough contrast, or for secondary actions.
50
100
200
300
400
500
600
700
800
900
950
Elite
Your Elite palette are colors that are used on your premium program.
50
100
200
300
400
500
600
700
800
900
950
Grayscale
Grayscale shades with no colour. These are extremely useful, as it's unlikely that they will clash with another colour.
50
100
200
300
400
500
600
700
800
900
950
Shades
White
Black
Primary
Your primary / brand color will be the main colour used for call to actions when you need to draw attention. This is also known as the brand color or accent.
50
100
200
300
400
500
600
700
800
900
950
Secondary
Your secondary palette is used to support the primary color and is used less often when the primary color doesn't offer enough contrast, or for secondary actions.
50
100
200
300
400
500
600
700
800
900
950
Elite
Your Elite palette are colors that are used on your premium program.
50
100
200
300
400
500
600
700
800
900
950
Grayscale
Grayscale shades with no colour. These are extremely useful, as it's unlikely that they will clash with another colour.
50
100
200
300
400
500
600
700
800
900
950
Shades
White
Black
Primary
Your primary / brand color will be the main colour used for call to actions when you need to draw attention. This is also known as the brand color or accent.
50
100
200
300
400
500
600
700
800
900
950
Secondary
Your secondary palette is used to support the primary color and is used less often when the primary color doesn't offer enough contrast, or for secondary actions.
50
100
200
300
400
500
600
700
800
900
950
Elite
Your Elite palette are colors that are used on your premium program.
50
100
200
300
400
500
600
700
800
900
950
Grayscale
Grayscale shades with no colour. These are extremely useful, as it's unlikely that they will clash with another colour.
50
100
200
300
400
500
600
700
800
900
950
Shades
White
Black
Headings
Hx heading
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
Hm heading
HB HEADING
Social Media
SM1 Social
SM2 Social
SM3 Social
Body
Laboris qui commodo qui magna velit dolore sit elit. Reprehenderit labore ut ex tempor officia deserunt do eiusmod labore aute duis ex. Commodo culpa esse anim voluptate dolor laboris ut et. Magna voluptate eiusmod excepteur do. Exercitation officia pariatur elit minim proident commodo excepteur fugiat ex.
Excepteur dolor ea sit exercitation irure duis do. Culpa laborum pariatur consectetur aute dolore ut ea reprehenderit esse sint ad velit exercitation. Sint dolor ipsum elit ipsum consequat sunt mollit labore sunt eiusmod Lorem. Qui anim excepteur occaecat elit ullamco enim. Excepteur occaecat ex irure eiusmod. Fugiat elit dolore eiusmod tempor exercitation ipsum Lorem ea. Lorem cupidatat minim elit nulla Lorem ipsum deserunt quis eu sunt.
Small
Lorem ipsum dolor sit ament non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat.
Links
This is an example of a inline Primary 500 Link on a text
This is an example of a inline Underline 900 Link on a text
This is an example of a inline Grayscale 300 → Black Link on a text
Buttons
Bx button
Bm button
Bs button
Headings
Hx heading
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
Hm heading
HB HEADING
Social Media
SM1 Social
SM2 Social
SM3 Social
Body
Laboris qui commodo qui magna velit dolore sit elit. Reprehenderit labore ut ex tempor officia deserunt do eiusmod labore aute duis ex. Commodo culpa esse anim voluptate dolor laboris ut et. Magna voluptate eiusmod excepteur do. Exercitation officia pariatur elit minim proident commodo excepteur fugiat ex.
Excepteur dolor ea sit exercitation irure duis do. Culpa laborum pariatur consectetur aute dolore ut ea reprehenderit esse sint ad velit exercitation. Sint dolor ipsum elit ipsum consequat sunt mollit labore sunt eiusmod Lorem. Qui anim excepteur occaecat elit ullamco enim. Excepteur occaecat ex irure eiusmod. Fugiat elit dolore eiusmod tempor exercitation ipsum Lorem ea. Lorem cupidatat minim elit nulla Lorem ipsum deserunt quis eu sunt.
Small
Lorem ipsum dolor sit ament non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat.
Links
This is an example of a inline Primary 500 Link on a text
This is an example of a inline Underline 900 Link on a text
This is an example of a inline Grayscale 300 → Black Link on a text
Buttons
Bx button
Bm button
Bs button
Headings
Hx heading
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
Hm heading
HB HEADING
Social Media
SM1 Social
SM2 Social
SM3 Social
Body
Laboris qui commodo qui magna velit dolore sit elit. Reprehenderit labore ut ex tempor officia deserunt do eiusmod labore aute duis ex. Commodo culpa esse anim voluptate dolor laboris ut et. Magna voluptate eiusmod excepteur do. Exercitation officia pariatur elit minim proident commodo excepteur fugiat ex.
Excepteur dolor ea sit exercitation irure duis do. Culpa laborum pariatur consectetur aute dolore ut ea reprehenderit esse sint ad velit exercitation. Sint dolor ipsum elit ipsum consequat sunt mollit labore sunt eiusmod Lorem. Qui anim excepteur occaecat elit ullamco enim. Excepteur occaecat ex irure eiusmod. Fugiat elit dolore eiusmod tempor exercitation ipsum Lorem ea. Lorem cupidatat minim elit nulla Lorem ipsum deserunt quis eu sunt.
Small
Lorem ipsum dolor sit ament non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat.
Links
This is an example of a inline Primary 500 Link on a text
This is an example of a inline Underline 900 Link on a text
This is an example of a inline Grayscale 300 → Black Link on a text