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
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
Complementary
Your tertiary palette are optional colors that are used sparingly to support your primary and secondary palettes. Often used for elements of lower importance.
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
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
Complementary
Your tertiary palette are optional colors that are used sparingly to support your primary and secondary palettes. Often used for elements of lower importance.
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
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
Complementary
Your tertiary palette are optional colors that are used sparingly to support your primary and secondary palettes. Often used for elements of lower importance.
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
HB HEADING
Hm heading
Buttons
Bx button
Bm button
Bs button
Display
D1 display
D2 display
D3 display
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 Primary 50 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
Headings
Hx heading
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
HB HEADING
Hm heading
Buttons
Bx button
Bm button
Bs button
Display
D1 display
D2 display
D3 display
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 Primary 50 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
Headings
Hx heading
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
HB HEADING
Hm heading
Buttons
Bx button
Bm button
Bs button
Display
D1 display
D2 display
D3 display
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 Primary 50 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