Style Guide

Manage the look and feel of the entire website from our style guide. Style and components used on the site are documented here, and any changes made will be immediately visible across all pages.
Primary
primary-soft
primary-light
primary-main
primary-dark
primary-hard

Colors

The different weights of greys and colours used throughout the website.
Neutral
background
layer
divider
border
text-title
text-primary
text-secondary
text-tertiary
text-placeholder
text-disabled

Typography

Styles for heading tags (H1-H6).
Global Typography
Global Tag
HTML tags define default Heading styles.
All H1 Headings

All Heading 1

All H2 Headings

All Heading 2

All H3 Headings

All Heading 3

All H4 Headings

All Heading 4

All H5 Headings
All Heading 5
All H6 Headings
All Heading 6
All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list
  • No bullet list
All Unordered Lists
  • No bullet list
  • No bullet list
All Ordered Lists
  1. No bullet list
  2. No bullet list
Customize Typography
Customize Tag
These are all of Typography used in the design system and components.
Heading
h1-heading-regular

Heading 1

h1-heading-medium

Heading 1

h1-heading-bold

Heading 1

h2-heading-regular

Heading 2

h2-heading-medium

Heading 2

h2-heading-bold

Heading 2

h3-heading-regular

Heading 3

h3-heading-medium

Heading 3

h3-heading-bold

Heading 3

h4-heading-regular

Heading 4

h4-heading-medium

Heading 4

h4-heading-bold

Heading 4

h5-heading-regular
Heading 5
h5-heading-medium
Heading 5
h5-heading-bold
Heading 5
h6-heading-regular
Heading 6
h6-heading-medium
Heading 6
h6-heading-bold
Heading 6
Body
b1-body-regular
Body 1
b1-body-medium
Body 1
b1-body-bold
Body 1
b2-body-regular
Body 2
b2-body-medium
Body 2
b2-body-bold
Body 2
Label
l1-label-regular
Label
l1-label-medium
Label
l1-label-bold
Label
l2-label-regular
Label
l2-label-medium
Label
l2-label-bold
Label
Caption
c1-caption-regular
Caption
c1-caption-medium
Caption
c1-caption-bold
Caption
c2-caption-regular
Caption
c2-caption-medium
Caption
c3-caption-bold
Caption

Structure Page

Defined and flexible core structure we can use on all or most pages.
Section
section
section
small
section
none
Container
container-default
container-sm
container-md
container-lg
Padding
padding-2xs
padding-sm
padding-md
padding-lg
padding-xl
padding-2xl
Align
align-left
align-center
align-right
Grids
Different grid layouts to use across your site
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
2.5-1 Grid
1-2.5 Grid
Spacing
Spacer elements using the 8-pt grid to give sections more room to breathe.
spacing-xs
spacing-sm
spacing-md
spacing-lg
spacing-xl
spacing-2xl
spacing-3xl
spacing-4xl
spacing-5xl
spacing-6xl
Max width
Use the max-width CSS property to contain inner content to a maximum width.
max-width-2xs
max-width-xs
max-width-sm
max-width-md
max-width-lg
max-width-xl
max-width-2xl

Effect

The distance between two surfaces on the z-axis
Box Shadow
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis
shadow-2xs
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl

Icons

Icons are visual symbols used to represent ideas, objects, or actions.
Icon Sizing
Components typically use icons on 16px artboards
icon-height-2xs
icon-height-xs
icon-height-sm
icon-height-md
icon-height-lg
icon-height-xl

Button

Button allows users to take actions, and make choices, with a single tap.

Filled buttons

Use the most visual impact, and should be used for important.
Default
Button
Default
Small
Button
Small

Outline buttons

are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action
Default
Button
Default
Small
Button
Small

Tonal buttons

Is an alternative middle ground between filled and outlined buttons. They’re useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give
Default
Button
Default
Small
Button
Small

Text buttons

used for the lowest priority actions, especially when presenting multiple options.
Default
Button
Default
Small
Button
Small

Elevated buttons

Use when absolutely necessary, such as when the button on dark or color background.
Default
Button
Default
Small
Button
Small

Card

Button allows users to take actions, and make choices, with a single tap.

Blog Card

Property
The Benefits of Cloud-Based Collaboration Tools
In the era of remote work, collaboration is key to maintaining productivity and fostering a sense of teamwork.
Jame Harris
Feb 15, 2024

Form

Form block group form element
fleld-label
form-input
form-input
is-text-area
form-input
is-select-input
form-checkbox
form-radio
form-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich text

Suitable for long-term content, like blog posts, product descriptions with various text styles, images, and video all in once.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C
Text link

Bold text

Emphasis

Superscript

Subscript

Tabs

Tab component organize related content.
Mentions
Galleries
Files
Code

Badge

Use tags to label, categorize, or organize items using keywords that describe them.
badge
Our service

Tags

Use tags to manage and organzing blog posts, making the categorization and search process more convenient.
tag
tag