Structure Classes:

wrapper

Section Classes:

section

is-tiny

section

is-small

section

is-medium

section

section

is-large

section

is-huge

section

is-x_huge

Container Classes:

container

is-tiny

container

is-3x_small

container

is-2x_small

container

is-x_small

container

is-small

container

is-medium

container

container

is-x_large

container

is-2x_large

container

is-huge

container

is-full

HTML Defualt:

All H1 Headings

AaBb

All H2 Headings

AaBb

All H3 Headings

AaBb

All H4 Headings

AaBb

All H5 Headings

AaBb

All H6 Headings

AaBb

Heading Classes:

heading-small

AaBb

heading-base

AaBb

heading-x_base

AaBb

heading-2x_base

AaBb

heading-3x_base

AaBb

heading-4x_base

AaBb

heading-medium

AaBb

heading-x_medium

AaBb

heading-2x_medium

AaBb

heading-3x_medium

AaBb

heading-large

AaBb

heading-x_large

AaBb

heading-2x_large

AaBb

heading-3x_large

AaBb

heading-huge

AaBb

Text Classes:

text-2x_small

This is some text inside of a div block.

text-x_small

This is some text inside of a div block.

text-small

This is some text inside of a div block.

text-base

This is some text inside of a div block.

text-x_base

This is some text inside of a div block.

text-2x_base

This is some text inside of a div block.

text-3x_base

This is some text inside of a div block.

text-4x_base

This is some text inside of a div block.

text-medium

This is some text inside of a div block.

text-x_medium

This is some text inside of a div block.

text-2x_medium

This is some text inside of a div block.

Text Styles:

is-strikethrough

This is some text inside of a div block.

is-italic

This is some text inside of a div block.

is-muted

This is some text inside of a div block.

is-allcaps

This is some text inside of a div block.

is-nowrap

This is some text inside of a div block.

is-link

This is some text inside of a div block.

Text Weight:

is-thin

This is some text inside of a div block.

is-extra_thin

This is some text inside of a div block.

is-light

This is some text inside of a div block.

is-normal

This is some text inside of a div block.

is-medium

This is some text inside of a div block.

is-semi_bold

This is some text inside of a div block.

is-bold

This is some text inside of a div block.

is-extra_bold

This is some text inside of a div block.

is-w_black

This is some text inside of a div block.

Text Align:

is-left

This is some text inside of a div block.

is-center

This is some text inside of a div block.

is-right

This is some text inside of a div block.

Buttons:

main-btn

main-btn

Small

submit-btn

Padding Classes:

padding-none

padding-tiny

padding-3x_small

padding-2x_small

padding-x_small

padding-small

padding-base

padding-x_base

padding-2x_base

padding-3x_base

padding-4x_base

padding-medium

padding-x_medium

padding-2x_medium

padding-3x_medium

padding-large

padding-x_large

padding-2x_large

padding-3x_large

padding-huge

is-padding-top

is-padding-bottom

is-padding-left

is-padding-right

Margin Classes:

margin-none

margin-tiny

margin-3x_small

margin-2x_small

margin-x_small

margin-small

margin-base

margin-x_base

margin-2x_base

margin-3x_base

margin-4x_base

margin-medium

margin-x_medium

margin-2x_medium

margin-3x_medium

margin-large

margin-x_large

margin-2x_large

margin-3x_large

margin-huge

margin-huge

margin-huge

margin-huge

margin-huge

Spacer Classes:

spacer-tiny

spacer-3x_small

spacer-2x_small

spacer-x_small

spacer-small

spacer-base

spacer-x_base

spacer-2x_base

spacer-3x_base

spacer-4x_base

spacer-medium

spacer-x_medium

spacer-2x_medium

spacer-3x_medium

spacer-large

spacer-x_large

spacer-2x_large

spacer-3x_large

spacer-huge

Color:

neutral colors:

#fff

#eee

#ccc

#aaa

#a0a0a0

#666

#444

#222

#111

#000

Base colors:

#be4aa5

#d1fae5

#10b981

#047857

#fef3c7

#f59e0b

#b45309

#fee2e2

#ef4444

#b91c1c

#dbeafe

#3b82f6

#1d4ed8

NavBar: