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
Button
Secondary / Default
Button
Link / Default
Button
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