Design System v.1.0
Set the body-all pages font to be as the custom font you uploaded
Typography
Font size
H1 Tag with some text for scaling
H1 Tag with some text for scaling
H2 Tag with some text for scaling
H2 Tag with some text for scaling
H3 Tag with some text for scaling
H3 Tag with some text for scaling
H4 Tag with some text for scaling
H4 Tag with some text for scaling
H5 Tag with some text for scaling text for scaling text for scaling
H5 Tag with some text for scaling
text for scaling
text for scaling
H6 Tag with some text for scaling text for scaling text for scaling
H6 Tag with some text for scaling text for scaling
H7 Tag with some text for scaling text for scaling
p-humongous
p-large
p-leading
p-leading indent
p-body
p-body --is--single (For single lines)
p-body --is--subheading (subheadings 2-3 lines)
paragraph
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.
p-small
p-small indent
p-small inter
p-tiny
is-bold(add thicker font weight)
subtitle
Overline
Badge label
Input text XS
Input text S
Input text M
Input text L
Caption text XS
Caption text S
Caption text M
Caption text L
Font properties
Setting:
Text align
/
Line-height
/
Letter spacing
/
Letter spacing
Text align
text-left
text-center
text-right
Line height
Line-height-09
Line-height-1
Line-height-1.1
Line-height-1.2
Line-height-1.3
Line-height-1.4
Line-height-1.5
Line-height-1.6
Line-height-1.7
Letter spacing
letter-spacing-0.5
letter-spacing-0
letter-spacing-1
letter-spacing-2
letter-spacing-3
letter-spacing-4
Font-weight
text-weight-light
text-weight-regular
text-weight-medium
text-weight-bold
Color
Font properties
Setting:
Accent
/
Primary
/
Secondary
/
Text
Primary Backgrounds
bg-white
bg-primary
FESPA Blue
bg-fb-50
bg-fb-100
bg-fb-900
Accent Blue
bg-ab-50
bg-ab-100
bg-ab-200
bg-ab-400
bg-ab-600
Other
bg-sg-50
bg-ly-50
bg-eg-50
bg-mt-200
bg-mt-200
bg-b-400
primary Text colors
t-b-strong
t-b-default
t-b-subtle
t-n-strong
t-n-default
t-n-subtle
t-w-strong
t-w-default
t-w-subtle
t-ab-800
t-ly-800
t-db-900
t-db-800
t-rc-900
t-fb-600
t-fb-600
Layout
Content layout
Setting:
container
/
spacers
/
flex-gap
Containers
container-full
container-small
Spacers
spacer-025
spacer-05
spacer-1
spacer-2
spacer-4
spacer-8
spacer-10
spacer-16
Spacers
Setting:
padding
/
margin
/
flex-gap
/
cleanup
Padding-direction
padding-top
padding-bottom
padding-left
padding-right
padding-horizontal
padding-vertical
Padding-size
padding-0
padding-0.25
padding-0.5
padding-1
padding-2
padding-4
padding-8
padding-10
Margin-direction
margin-top
margin-bottom
margin-left
margin-right
margin-horizontal
margin-vertical
Margin-size
padding-0
margin-0.25
margin-0.5
margin-1
margin-2
margin-4
margin-8
margin-10
Cleanup clasess
spacing-clean
flex-gap
flex-gap-0.5
flex-gap-0.5
flex-gap-0.5
flex-gap-1
flex-gap-1
flex-gap-1
flex-gap-2
flex-gap-2
flex-gap-2
Separators
separator-top
separator-bottom
Opacity, Radius...
Transparency
--opacity-01
--opacity-02
--opacity-03
--opacity-04
--opacity-05
--opacity-06
--opacity-07
--opacity-08
--opacity-09
Border-radius
bradius--0.2
bradius--0.25
bradius--0.5
bradius--1
bradius--1.5
bradius--2
Special classes
Usefull systems
Setting:
hide
/
Special clasess
/
max-width
Hide element
hide
hide
hide-on-desktop
Usefull classes
align-center
display-inlineflex
clamp-2lines
clamp-3lines
z-index-1
z-index-5
z-index-10
text-balance
Overflow
oveflow-hidden
overflow-auto
