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

umault

H2

Umault

H3

Umault

H4

umault

Four

H5
umault
Five
H6
Heading
six
H6
Heading
six
H6
Heading
six
H6
Heading
six
H6
Heading
six
H6
Heading
six
H6
Heading
six
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

Understanding Stakeholder Hesitation

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.

Understanding Stakeholder Hesitation

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.

Heading

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.

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