Style guide

Typography

Headings and subheadings invite and guide readers through the text. Effective use of large headings grabs their attention. Smaller subheadings help them decide whether or not they want to read a particular section. Headings need to stand out to help anchor the composition.

Headers

H1

Heading

One

H2

Heading

Two

H3

Heading

three

H4

Heading

Four

H5
Heading
Five
H6
Heading
six
p

“Make it count” sums up our whole approach. Whether we are looking at design, copywriting or illustrations, we are all about emotional triggers that lead to action.

“Make it count” sums up our whole approach. Whether we are looking at design, copywriting or illustrations, we are all about emotional triggers that lead to action.

Lists
Ordered list
  1. Item list
  2. Item list
  3. Item list
  4. Item list
unOrdered list
  • Item list
  • Item list
  • Item list
  • Item list
Rich text

Heading

“Make it count” sums up our whole approach. Whether we are looking at design, copywriting or illustrations, we are all about emotional triggers that lead to action.

  • Item list
  • Item list
  • Item list
  • Item list
Heading

“Make it count” sums up our whole approach. Whether we are looking at design, copywriting or illustrations, we are all about emotional triggers that lead to action.

  1. Item list
  2. Item list
  3. Item list
  4. Item list

Colors

Setting up a color system for your website is key to a successful communication of your brand. A color system’s ability to create beautiful and harmonious experiences is worthwhile for everyone.

Brand palette

Elements

Interactive elements are a prompt on a website that tells the user to take some specified action. A call to action is typically written as a command or action phrase, such as ‘Sign Up’ or ‘Buy Now’ and generally takes the form of a button or hyperlink.

Form

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

Grid system

The website grid is a system for organizing the content on the page and creating alignment and order. It forms the basic structure or skeleton of your user interface. Designers use website grids to make design decisions and create a good user experience.

Elements

Container

Row

Col

Desktop

col-lg-1
col-lg-11
col-lg-2
col-lg-10
col-lg-3
col-lg-9
col-lg-4
col-lg-8
col-lg-5
col-lg-7
col-lg-6
col-lg-6
col-lg-12

Tablet

col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12
md-no-margin

Landscape

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
sm-no-margin

Mobile

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12
xs-no-margin

Margin 1/2 col

col
col
col
col

Align start

align-start

Align center

align-center

Align end

align-end

Align stretch

align-stretch

Justify start

Justify start

Justify center

Justify center

Justify end

Justify end

Justify between

Justify between
Justify between

Justify around

Justify around
Justify around

Spacing

padding-large

padding-medium

padding-small

Overflow

overflow-auto

overflow-hidden

overflow-scroll

Display

md-hide

sm-hide

xs-hide