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
Click to see more
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
- list item
- list item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
Colors
Primary
#121319 - background
#f4f4f4 - text
#000000 - black
Secondary
#20222E - background
#313647 - background
#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
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
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