Version 1.0.1

Style guide

On this page, you can customize the core classes for your project and make global edits to your site at any time.

Core classes

Typography #

HTML classes

H1

H2

H3

H4

H5
H6
HTML text classes

All Paragraphs

All Links
  • All Unordered Lists

  • All Unordered Lists

  1. All Ordered Lists

  2. All Ordered Lists

Text size classes
x9
x8
x7
x6
x5
x4
x3
x2
x1
x0

Color #

Brand
Brand is a set of your brand colors, and is used to set up your identity specific color styles.
prim
red
green
green_light
yellow
purple_light
off_white
blue_light
Base (neutral)
Base is a set of neutral shades and is the foundation of the color system.
bg-base10
bg-base20

bg-base30
bg-base40
bg-base50
bg-base60
Text color

color-base10

color-base60

Buttons #

Forms #

Plain input field
Number input field
Describe the field
Describe the field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Structure classes

Page #

page
main
code-embeds

Container #

container
container-m
container-s

Grid #

Row
row
Column
col
col

Columns #

Note that following classes are not global but rather combo classes to class of .col therefore are never to be used as standalone classes.
Column - Desktop
d-12
d-1
d-11
d-10
d-2
d-3
d-9
d-8
d-4
d-5
d-7
d-6
d-6
Column - Tablet
t-12
t-1
t-11
t-10
t-2
t-3
t-9
t-8
t-4
t-5
t-7
t-6
t-6
Column - Mobile Landscape
ml-12
ml-1
ml-11
ml-10
ml-2
ml-3
ml-9
ml-4
ml-8
ml-5
ml-7
ml-6
ml-6
Column - Mobile
m-12
m-1
m-11
m-10
m-2
m-3
m-9
m-8
m-4
m-5
m-7
m-6
m-6

Build classes

UI element classes#

Icons
Icons relative
Ratio

Text utility classes #

Text weight
txt-light
txt-normal
txt-medium
txt-semibold
txt-bold
Text alignment
txt-center
txt-right
txt-center-t
txt-right-t
txt-center-ml
txt-right-ml
txt-center-m
txt-right-m

Extra utility classes #

Visibility
hide
hide-t
hide-ml
hide-m
Overflow
overflow-x
oveflow-y
oveflow-hidden

Spacing #

Vertical spacing
v-0
v-4
v-8
v-12
v-16
v-20
v-24
v-32
v-40
v-60
v-80
v-120
Horizontal spacing
h-4
h-8
h-12
h-16
h-20
h-24
h-32
h-40

Padding #

Padding sizes
p-0
p-8
p-12
p-16
p-20
p-24
p-32
pt-8
pt-16
pt-32
pb-8
pb-16
pb-32
-margin-auto

Flex utility classes #

Flex direction
flex-ver
flex-ver-t
flex-ver-ml
flex-ver-m
flex-hor
flex-hor-t
flex-hor-ml
flex-hor-m
Flex alignment
align-start
align-center
align-end
align-stretch
Flex justify content
justify-center
justify-end
justify-between
justify-around