Style Guide
Client-first Version 1.0

Global headings

H1

H1

H2 Heading

H2

H3 Heading

H3

H4 Finsweet Heading

H4
H5 Finsweet Heading
H5
Finsweet Heading
H6

Global headings

Finsweet Heading

H1

Finsweet Heading

H2

Finsweet Heading

H3

Finsweet Heading

H4
Finsweet Heading
H5
Finsweet Heading
H6

Heading sizes

Heading-xlarge

heading-xlarge

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small

heading-xsmall

heading-xsmall

Heading sizes

Heading-xlarge

heading-xlarge

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small

heading-xsmall

heading-xsmall

Text sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-tiny

Text sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-tiny

Text weights

Phasellus a nulla in neque lacinia posuere.
text-weight-xbold
Phasellus a nulla in neque lacinia posuere.
text-weight-bold
Phasellus a nulla in neque lacinia posuere.
text-weight-semibold
Phasellus a nulla in neque lacinia posuere.
text-weight-medium
Phasellus a nulla in neque lacinia posuere.
text-weight-normal
Phasellus a nulla in neque lacinia posuere.
text-weight-light

Text styles

Phasellus a nulla in neque lacinia posuere.
text-style-italic
Phasellus a nulla in neque lacinia posuere.
text-style-strikethrough
Phasellus a nulla in neque lacinia posuere.
text-style-muted
Block Quote
text-style-quote
text-style-link
Phasellus a nulla in neque lacinia posuere.
text-style-allcaps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-style-3lines
Phasellus a nulla in neque lacinia posuere.
text-style-nowrap

Text colors

text-color-darkgrey
text-color-lightgrey
text-color-black
text-color-white
text-color-grey
text-color-yellow

Text aligns

Phasellus a nulla in neque lacinia posuere.
text-align-left
Phasellus a nulla in neque lacinia posuere.
text-align-center
Phasellus a nulla in neque lacinia posuere.
text-align-right

Rich text

Rich text heading

Rich text heading

Rich text heading

Rich text heading

Rich text heading
Rich text heading
quote

link

  • list item
  • list item

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

Image caption here

Colors

Primary

#212228 -
Black Outliant

#ffffff -
White

#000000 - black

Secondary

#def858 -
Yellow Outliant

#4d4e53 -
Dark Grey Outliant

Button hovers and pressed states

#def858 -
Yellow Outliant

#212228 -
Black Outliant

#ffffff -
White

#4d4e53 -
Dark Grey Outliant

Background colors

background-color-black
background-color-white
background-color-yellow

Form example

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icon classes

Finsweet fs logo icon white
icon-xsmall
Finsweet fs logo icon white
icon-small
Finsweet fs logo icon white
icon-medium
Finsweet fs logo icon white
icon-large
Finsweet fs logo icon white
icon-xlarge
Finsweet fs logo icon white
icon-1x1-xsmall
Finsweet fs logo icon white
icon-1x1-small
Finsweet fs logo icon white
icon-1x1-medium
Finsweet fs logo icon white
icon-1x1-large
Finsweet fs logo icon white
icon-1x1-xlarge

Social icons

Facebook icon
Facebook
Twitter icon
Twitter
Instagram icon
Instagram
LinkedIn icon
Linkedin
YouTube icon
Youtube

Margins

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
margin-top
margin-right
margin-bottom
margin-left
margin-horizontal
margin-vertical
margin-0-all

Paddings

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-vertical-10rem
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
padding-top
padding-right
padding-bottom
padding-left
padding-horizontal
padding-vertical
padding-0-all

Containers

container-white
container-large
container-medium
container-small

Max widths

max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile

Various