Style Guide
Client-first Version 1.0

Global headings

Coshape Heading

H1

Coshape Heading

H2

Coshape Heading

H3

Coshape Heading

H4
Coshape Heading
H5
Coshape Heading
H6

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 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
Phasellus a nulla in neque lacinia posuere.
text-style-monospace
Click to see more
text-style-link
Click to see more
text-style-link | arrow-after
Click to see more
text-style-link | [open in new tab is checked]
Click to see more
text-style-link | text size large | [open in new tab is checked]

Text colors

Phasellus a nulla in neque lacinia posuere.
text-color-primary
Phasellus a nulla in neque lacinia posuere.
text-color-lightgrey
Phasellus a nulla in neque lacinia posuere.
text-color-black
Phasellus a nulla in neque lacinia posuere.
text-color-white
Phasellus a nulla in neque lacinia posuere.
text-color-grey

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.

Placeholder Image
Image caption here

Colors

Primary

#121319 - background

#f4f4f4 - text

#ff3c00 - button/primary

#000000 - black

Secondary

#20222E - background

#313647 - background

#657AE6 - button

#FF6B33 - border/accent

Button hovers and pressed states

#ED2109 - hover

#D30912 - pressed

#424E82 - hover

#5F6587 - pressed

Background colors

background-color-black
background-color-orange
background-color-border-accent
background-color-grey
background-color-blueish
background-color-light
background-color-transparent

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-xxhuge
padding-custom1
padding-custom2
padding-custom3
padding-top
padding-right
padding-bottom
padding-left
padding-horizontal
padding-vertical
padding-0-all

Containers

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