V/1.1

STYLE GUIDE

HAMISHDUNCAN.COM

KIND WORDS

Typography

Headers

H1

Heading

One

H2

Heading

Two

H3

Heading

three

H4

Heading

Four

H5

Heading
Five

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

SPACING

SCALE

TOKEN

REM

PX

EXAMPLE

Spacing-01

0.125

2

Spacing-02

0.25

4

Spacing-03

0.5

8

Spacing-04

0.75

12

Spacing-05

1

16

Spacing-06

1.5

24

Spacing-07

2

32

Spacing-08

2.5

40

Spacing-09

3

48

Spacing-10

4

64

Spacing-11

5

80

Spacing-12

6

96

Spacing-13

10

160

ColoUrs

Brand palette

BLACK

#1E1E1E

RED

#CA4935

IVORY

#FFFDEA

WHITE

#FFFFFF

Elements

Form

Form

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

ACCORDION & DROPDOWN

ACCORDION

TITLE

To embark on a new project, you need to know everything you can about it. I will delve deep into your market to analyse past projects to figure out what worked and what didn’t. Together, we’ll use this research to move things forward, away from the business as usual.

ICONOGRAPHY

ICONOGRAPHY: FILL

ARROW / 16px
ARROW / 20PX
ARROW / 24px
ARROW / 32PX
LEFT ARROW / 16px
LEFT ARROW / 20PX
LEFT ARROW / 24px
left ARROW / 32PX
RIGHT ARROW / 16px
RIGHT ARROW / 20PX
RIGHT ARROW / 24px
RIGHT ARROW / 32PX
WAVES / 16px
WAVES / 20px
WAVES / 24px
WAVES / 32px
CROSS / 16px
CROSS / 20px
CROSS / 24px
CROSS / 32px
UTURN / 16px
UTURN / 20px
UTURN / 24PX
UTURN / 32px
TICK / 16px
TICK / 20px
TICK / 24px
TICK / 32pX

Grid system

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

PLAY IS THE ENGINE THAT POWERS TRANSFORMATION

PLAY IS THE ENGINE THAT POWERS TRANSFORMATION

PLAY IS THE ENGINE THAT POWERS TRANSFORMATION

Table of Contents
GO HOME