TYPOGRAPHY
Main title
h1-title
Section title
h2-section-title
Block title
h3-block
Paragraph under H1
p-h1
Paragraph under H2
p-h2-section
Paragraph under H3
p-h3-block
Short main text
text-main
Small secondary text
text-secondary
Short text title
text-title
Customer reviews for social proof
blockquote-testimonial
"This is the formatting for inspirational quotes. "
blockquote-citation
Lorem ipsumlink-ok
UTILITY CLASSES
Center text
text-center
Bold forced
font-bold
Forced regularization
font-regular
Inside space left and right (24 px)
padding-x-24
Inside space left and right (32 px)
padding-x-32
Inside space left and right (64 px)
padding-x-64
Micro-spacing between small elements
spacer-xs
Slight separation, e.g. button/text
spacer-sm
Standard block spacing
spacer-md
Visually separate two zones
spacer-lg
Breathing space between sections
spacer-xl
Large space, airy effect, premium design
spacer-2xl
CTA
Bigger button?
Special button?
Color
These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.
Text colors
font color - dark grey
#121212
font color - white
#ffffff
Main colors
BLUE
#142A3E
DARK GREY
#121212
YELLOW
#e4a94b
CREAM
#ffefd5
Neutral colors
LIGHT GREY 1
#142A3E
N/a
#FFFFFF
LIGHT GREY 2
#142A3E
N/A
#FFFFFF
Logo
Components
These are a few example components.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.