Style Guide

Typography

Headings

This section defines your heading styles. (x1.250)

Heading / XL3

Heading XL3

Heading / XL2

Heading XL2

Heading / XL

Heading XL

Heading / XL

Heading XL

Heading / H1

Heading 1

Heading / H1

Heading 1

Heading / H2

Heading 2

Heading / H2

Heading 2

Heading / H3

Heading 3

Heading / H3

Heading 3

Heading / H4

Heading 4

Heading / H5

Heading 5

Heading / H6

Heading 6

Text

Text XL - Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text L - Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text M - Regular - 18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text S - Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text XS - Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Bold

Text M - Bold - 18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Links

Text Link / Text Link Style 1

Colors

Use this section to define and keep track of your colors. Don't forget to create color styles for each swatch in the 'Shared Colors' section.

Brand / Primary

Background / Primary

Text / Primary

Gray Scale

Black

Grey / 900

Grey / 700

Grey / 500

Grey / 300

Grey / 100

White

Spacing & Sizing

Container Sizes

We can use container sizes to limit the width of our content.

L Container - 1280px Max Width

M Container - 960px Max Width

S Container - 768px Max Width

UI Elements

Buttons

Copy buttons from here, or drag them from the Assets panel into your designs. All buttons have variants such as left and right icons, styling choices and so on. To edit a button's styling, click into it to edit the component.

Primary / Default

Secondary / Default

Link / Default

Icons

Image based icons

XS - 16x16

S - 24x24

M - 40x40

L - 64x64

XL - 80x80

Phosphor icons

XS - 16x16

S - 24x24

M - 40x40

L - 64x64

XL - 80x80