Colors

Background colors

base

bg-lighter

bg-light

bg-base

bg-dark

bg-darker

primary

BGP-Lighter

bgp-light

bgp-base

bgp-dark

bgp-darker

Secondary

BGs-Lighter

bgs-light

bgs-base

bgs-dark

bgs-darker

tertiary

Bgt-Lighter

bgt-light

bgt-base

bgt-dark

bgt-darker

Gradients

bg-2stepgrad

bg-radialgrad

extra

Bg-white

bg-black

system

bg-succes

bg-warning

bg-error

Gradients

Black

bg-grad

bg-grad-dark

bg-grad-darker

Border color

Black

border-black

border-white

Border-base

Border-primary

Border-secondary

Border-base

Filters

Blur

blur-sm

blur

sepia

invert

Backdrop filters

Blur

backdrop-blur-sm

backdrop-blur

backdrop-md

backdrop-lg

brightness

backdrop-br-50

backdrop-br-75

Standard images

Blur

blur-sm

blur

sepia

invert

Drop shadow

Blur

drop-shadow-sm

drop-shadow

drop-shadow-md

drop-shadow-lg

drop-shadow-xl

drop-shadow-2xl

Typography

Colors

Base

Aa

#000000

text-lighter

Aa

#e5e7eb

text-light

Aa

Open Sans

text-base

Aa

Open Sans

Special

Aa

Open Sans

Special

colored

Aa

text-primary

Aa

text-secondary

Aa

text-error

Aa

text-warning

Aa

text-succes

Headings

The quick brown fox jumps over the lazy dog

H1 - 36PX / 1.3EM - Open Sans

The quick brown fox jumps over the lazy dog

H2 - 28PX / 1.3EM - Open Sans

The quick brown fox jumps over the lazy dog

H3 - 24PX / 1.3EM - Open Sans

The quick brown fox jumps over the lazy dog

H4 - 20PX / 1.3EM - Open Sans

The quick brown fox jumps over the lazy dog

H5 - 24PX / 1.3EM - Open Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-2xs

10px / 0,65r

text-xs

12 px /0,75r

text-s

14px /0.87r

text-base (apply global)

16px / 1r

text-l

18p / 1,12r

text-xl

20p / 1,25r

text-2xl

24p / 1,5r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

text-3xl

30p / 1,85r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

text-4xl

36p / 2,25r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

text-5xl

48p / 3r

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-6xl

60p /3,75r

Lorem ipsum dolor sit amet, consectetur.

text-7xl

72p / 4,5r

Lorem ipsum dolor sit amet.

text-8xl

96p / 6r

Lorem ipsum dolor sit amet.

text-9xl

Styles

Tagline

text-tagline

pill

text-pill

pill

text-pill

pill

text-pill

pill + icon

pill

text-pill

link

text-link

no wrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros gg

text-no-wrap

Size

ch max 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-ch-max10

ch max 25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-ch-max25

ch max50

text-ch-max50

Align

left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-left

Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-center

Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-right

Text shadow

Light (25)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-shadow-light

base (50)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-shadow

Dark (75)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-shadow-dark

Darker (100)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-shadow-darker

Icons

Sizes

w-12,h-12

w-24,h-24

w-36,h-36

w-48,h-48

w-60,h-60

UI

Social

Buttons

primary

btn

less

btn, -outline

Button

btn, -txt

black

call now

btn, -black

call now

btn, -black, -outline

call now

btn, -black, -text

white

btn, white

btn, -white, -outline

btn, -white, -text

Link block

btn-menu

socials

Elements

Divider

divider

light divider

divider -light

form

Long form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Short form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Short form white

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Sizing

width x height, px

10x10

wh-10

15x15

wh-20

50x50

wh-50

100x100

wh-100

width x height, %

100%x1oo%

wh-100pct

100%x100%

wh-100-cover

width, px

w-10

w-20

w-40

w-50

100

w-100

width, vw

w-5vw

w-10vw

w-20vw

w-40vw

w-50vw

w-60vw

w-75vw

w-80vw

100

w-100vw

Height

h-10

h-20

h-40

h-50

100

h-100

height, vh

h-5vh

h-10vh

h-20vh

h-25vh

h-40vh

h-50vh

h-60vh

h-75vh

h-80vh

100

h-100vh

Spacing

Padding

0,625REM

10 px

p-2.5

px-2.5

py-2.5

pt-2.5

pr-2.5

pb-2.5

pl-2.5

1.5REM

20 px

p-5

px-5

py-5

pt-5

pr-5

pb-5

pl-5

2.5REM

40 px

p-10

px-10

py-10

pt-10

pr-10

pb-10

pl-10

2.5REM

40 px

p-10vh

px-10vh

py-10vh

pt-10vh

pr-10vh

pb-10vh

pl-10

Margin

0,625REM

10 px

m-2.5

mx-2.5

my-2.5

mt-2.5

mr-2.5

mb-2.5

ml-2.5

1.5REM

20 px

m-5

mx-5

my-5

mt-5

mr-5

mb-5

ml-5

2.5REM

40 px

m-10

mx-10

my-10

mt-10

mr-10

mb-10

ml-10

Space between (gap)

fixed

space-2.5

space-5

space-10

space-10vh

space-20vh

Flexbox

position

z index

Absolute layers

opacity

100

Structure

Blocks

section

container

section

Grid

Container-grid

content-grid

Section-grid

FB + Col

columns

Columns-1

Columns-2

Columns-3

Columns-4

Columns-5

Responsiveness

hide-ipad-down

hide-ls-down

hide-ipad-down

Color Filters Backdrop-f Images Shadow Text Icons Buttons Elements Form Sizing Structure

Colors

Background colors

Gradients

Border color

Filters

Backdrop filters

Standard images

Drop shadow

Typography

Colors

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Headings

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Text size

Styles

Size

Align

Text shadow

Icons

UI

Social

Buttons

Elements

form

Sizing

width x height, px

width x height, %

width, px

width, vw

Height

height, vh

Spacing

Padding

Margin

Space between (gap)

Flexbox

position

z index

Absolute layers

opacity

Structure

Blocks

Grid

FB + Col

columns

Responsiveness