Style Guide

Unlock design brilliance with a roadmap to create visually stunning and cohesive experiences.

Typography

We use Inter for everything.

Inter

Headers

For ease of use and consistency, this component allows you to switch between heading levels.

Super Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Body

Our standard body text comes in at 16px. It has underline link styling and comes in a big and small variation.

Super Body

Body M

Body

Note

Colors

Our system consists of a few brand colors, a selection of complementary colors and a scale from shading.

Accent

Dark

White

Light

Shading

Apart from solid colors, we use opacity for shading.

100%

80%

60%

40%

20%

5%

Complementary colors

Use for alerts and system notifications.

Red

Green

Orange

Icons

We use the Google Material icon set for all our icons.

Join newsletter

Stay in the know with our Newsletter. Updates, changelog highlights, and valuable tips in your inbox.

By submitting your email, you agree to receive newsletter. Read our privacy policy. You can unsubscribe anytime.

Join newsletter

Stay in the know with our Newsletter. Updates, changelog highlights, and valuable tips in your inbox.

By submitting your email, you agree to receive newsletter. Read our privacy policy. You can unsubscribe anytime.

Join newsletter

Stay in the know with our Newsletter. Updates, changelog highlights, and valuable tips in your inbox.

By submitting your email, you agree to receive newsletter. Read our privacy policy. You can unsubscribe anytime.