Style System
Structure
Typography
Colors
Spacing
Utility
Elements
Getting Started

Welcome to your project's style system. The system we are using is the Client-first. Read the docs if you have any questions about it.

Documentation
Structure
Core
page-wrapper
main-wrapper
padding-global
Containers
container-small
container-medium
container-large
Max Width
max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full-mobile
max-width-full-tablet
max-width-full
Typography
Headings
H1
heading-display-1
H1 text block*
H1
heading-display-2
H1 text block*
H1
heading-style-h1

H1 HTML tag*

H1 text block*
H2
heading-style-h2

H2 HTML tag*

H2 text block*
H3
heading-style-h3

H3 HTML tag*

H3 text block*
H4
heading-style-h4

H4 HTML tag*

H4 text block*
H5
heading-style-h5
H5 HTML tag*
H5 text block*
H6
heading-style-h6
H6 HTML tag*
H6 text block*
Other HTML tags
All Paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps.

All Links
Text Link
All Unordered Lists
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
All Ordered Lists
  1. Sample text is being used as a placeholder.
  2. Sample text is being used as a placeholder.
  3. Sample text is being used as a placeholder.
All Block Quotes
Block Quote
Text sizes
text-size-large
Text large
text-size-medium
Text medium
text-size-regular
Text regular
text-size-small
Text small
text-size-tiny
Text tiny
Text styles
text-style-strikethrough
Text strikethrough
text-style-italic
Text italic
text-style-muted
Text muted
text-style-allcaps
Text allcaps
text-style-nowrap
Text nowrap
text-style-link
Text link
text-style-quote
Block quote
text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Text weights
text-weight-xbold
Text xbold
text-weight-bold
Text bold
text-weight-semibold
Text semibold
text-weight-medium
Text medium
text-weight-normal
Text normal
text-weight-light
Text light
Text alignment
text-align-left
Text left
text-align-center
Text center
text-align-right
Text right
Rich text
text-rich-text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Caption text
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  1. Sample text is being used as a placeholder.
  2. Sample text is being used as a placeholder.
  3. Sample text is being used as a placeholder.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Colors
Primary
background-color-1
text-color-1
AaBb
background-color-2
text-color-2
AaBb
background-color-3
text-color-3
AaBb
background-color-4
text-color-4
AaBb
Secondary
background-color-5
text-color-5
AaBb
background-color-6
text-color-6
AaBb
background-color-7
text-color-7
AaBb
Spacing
Section
padding-section-xsmall
padding-section-small
padding-section-medium
padding-section-large
padding-section-xlarge
padding-section-xxlarge
Spacer
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
spacer-custom1
spacer-custom2
spacer-custom3
Utility
Visibility
hide
hide-tablet
hide-mobile-landscape
hide-mobile-portrait
overflow-visible
overflow-hidden
overflow-clip
overflow-scroll
overflow-auto
Layout
display-block
display-flex
display-inlineblock
display-inline
Aspect ratio
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
Border Radius
border-radius-large
border-radius-medium
border-radius-small
Others
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
z-index-3
icon-current-color
icon-full
Fade In
fade-in-0
fade-in-200
fade-in-400
fade-in-600
fade-in-800
Elements
Form
multiple classes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Buttons
button
small
Button Text
button
large
Button Text
button
light + small
Button Text
button
light
Button Text
button
light + large
Button Text
Version: 3.0