Body (All Pages)

Font family
Font color
Line Height
Background color

Page Structure

page-wrapper
    page-code(embed code, component)
    header(component, tag:header)
    main (tag: main)
         .section .name (tag: section) (relative)
              .container
                   .grid
                        .name__top (margin-bottom)
                      .name__main
                            .name-main__items
                                  .name-main__item (flex)
                                         .name-item__title
                                               h3 .heading-3
                                         .name-item__description
                                                p .text-size--medium
                                         .name-item__cta
                                                .button--main(component)
                                  .name-main__item
                                  .name-main__item
               .name__background (absolute)
                      .name-bg__video
                      .name-bg__shape .shape-1
                      .name-bg__shape .shape-2
                      .name-bg__shape .shape-3
         .section .name-2
        .section .name-3

    footer (component, tag:footer)

Typography

Heading (tag All Headings)

Heading 1

Heading 2

Heading 3

Heading 4

Heading (Class)

Heading 1

Heading 2

Heading 3

Heading 4

Body Text Size

.text-size-xlarge

.text-size-large

.text-size-medium

.text-size-small

Other Text

.text-nav

.text-cta

.text-cta .is-Large

Body Text Weight

.text-weight-light

.text-weight-regular

.text-weight-medium

.text-weight-semi-bold

.text-weight-bold

Text Alignment

.text-align-left

.text-align-center

.text-align-right

Text Style

.text-style-underline

.text-style-all-caps

.text-style-Every-word-caps

.text-style-muted

Text Color

.text-color-mist

.text-color-mist-70

.text-color-mist-60

.text-color-white

.text-color-gray-800

.text-color-gray-700

.text-color-gray-500

.text-color-gray-400

.text-color-gray-300

.text-color-storm-gray

.text-color-orange

.text-color-river-bed

.text-color-mirage

.text-color-mirage-70

.text-size--medium .text-aligh--center .text-color--orange

Rich Text

.rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Sample text with a link 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. 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 is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

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

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 that is normally present.

Caption image

Color

Primary

Orange

#FF6C3E

Crimson Navy

#333456

Indigo

#5157a5

...

Neutral

Mirage

#1B1E2C

Mirage 70

#1B1E2C 70% opacity

River Bed

#949494

Storm Gray

#7D7F88

Mist

#F5FAFD

Mist 70

#F5FAFD 70% opacity

Mist 60

#F5FAFD 60% opacity

Gray 800

#8C8C8C

Gray 700

#D1D1D1

Gray 600

#DDD

Gray 500

#E8E8E8

Gray 400

#F3F3F3

Gray 300

#F9F9F9

White

#ffffff

White 20%

#ffffff 20% opacity

Space

Container

Grid (main)

.grid--main
gap row 0
combo class: .row-gap--1x, .row-gap--2x, .row-gap--smartphone-2x (х = gap).

Grid (1/2 main)

.grid--half-main

.grid--half-main .right-half

Button

Primary

.button-primary

Primary Button

With Icon

.button--primary .primary--dark

Let’s get started!

Secondary

.button--secondary

Secondary Button

With Icon

Icons

.button--social

Slider

.slider-arrow / .is-disabled

Icons

icon-embed

icon-height

Link

All links

List

Ordered (tag All)

List item
List item
List item

Unordered (tag All)

List item
List item
List item

Form elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Useful classes

hide

This elements is hidden

hide-tablet

hide-mobile-landscape

hide-mobile-portrait

pointer-events-on

pointer-events-off

no-scrollbar