Brand Guidelines

This brand guide outlines the standards for displaying brand elements and identification information consistently. It serves as a central reference for maintaining a cohesive brand image.

Brand kit

Brand Assets

Download our logo and other brand assets. Do not edit the look of the assets or impose new graphics without permission.

Google Drive

Headings Body text

Typography

Our design system leverages carefully chosen typographic styles that prioritize legibility. Effective typography not only increases readability but also elevates the overall aesthetic appeal of the design.

Headings

Headings are text elements used to organize and structure written content. They are used to break down a document into smaller, more manageable sections and help the reader understand the content's hierarchy and organization.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Heading 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Heading 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Heading 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Heading 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Heading 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Heading 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body text

Body text is the main content of a written document or design. It is the portion of the text that provides the reader with the necessary information, details, and context. Proper use of body text can enhance readability and the overall user experience, and can help to keep the reader engaged with the content.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Medium text. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Small text. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Extra-small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque elit eget gravida cum sociis natoque penatibus et. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. In nisl nisi scelerisque eu ultrices vitae auctor eu. Purus non enim praesent elementum facilisis leo vel fringilla. A erat nam at lectus urna duis convallis convallis tellus. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Sit amet est placerat in. Commodo elit at imperdiet dui accumsan sit. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Venenatis urna cursus eget nunc. Magna eget est lorem ipsum dolor.

FAMILY:

SIZE:

WEIGHT:

HEIGHT:

Tracking:

Style data available on desktop

Tiny text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque elit eget gravida cum sociis natoque penatibus et. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. In nisl nisi scelerisque eu ultrices vitae auctor eu. Purus non enim praesent elementum facilisis leo vel fringilla. A erat nam at lectus urna duis convallis convallis tellus. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Sit amet est placerat in. Commodo elit at imperdiet dui accumsan sit. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Venenatis urna cursus eget nunc. Magna eget est lorem ipsum dolor.

Neutral Primary Secondary Success Warning Error Accent

Color

Our design system leverages a purposeful set of color styles to be used across the entire project. When it comes to color, contrast is critical for ensuring text is legible.

Neutral

Neutral colors are the foundation of our color system. Almost everything in the UI design –– text, form fields, backgrounds, dividers –– are usually a neutral color.

Neutral 50

Neutral 100

Neutral 200

Neutral 300

Neutral 400

Neutral 500

Neutral 600

Neutral 700

Neutral 800

Neutral 900

Primary

The primary color is our "brand" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.

Primary 50

Primary 100

Primary 200

Primary 300

Primary 400

Primary 500

Primary 600

Primary 700

Primary 800

Primary 900

Secondary

Secondary colors are an optional addition to your primary brand color. If used, they should be applied sparingly.

Secondary 50

Secondary 100

Secondary 200

Secondary 300

Secondary 400

Secondary 500

Secondary 600

Secondary 700

Secondary 800

Secondary 900

Success

Success colors communicate a positive action, positive trend, or a successful confirmation. If using green as a primary color, the success colors should be distinct.

Success 50

Success 100

Success 200

Success 300

Success 400

Success 500

Success 600

Success 700

Success 800

Success 900

Warning

Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.

Warning 50

Warning 100

Warning 200

Warning 300

Warning 400

Warning 500

Warning 600

Warning 700

Warning 800

Warning 900

Error

Error colors are used across error states and in "destructive" actions. They communicate the seriousness of the action about to be taken, or that something didn't work.

Error 50

Error 100

Error 200

Error 300

Error 400

Error 500

Error 600

Error 700

Error 800

Error 900

Accent

Accent colors are optional, and are used very sparingly to add accent visual elements of the page.

Accent 1

Accent 2

Accent 3

Accent 4

Accent 5

Box Shadow

Effects

Effects refer to the visual enhancements applied to an object or text to give it a unique look and feel.

Box shadow

Shadows are a design element that add depth, dimension, and visual interest to graphics and interfaces.

Shadow xxlarge

Shadow xlarge

Shadow large

Shadow medium

Shadow small

Shadow xsmall