Style Guide
Titles
Title: (111.45px)

A Visual Type Scale

A Visual Type Scale

SubTitle: (25.92px)

Heading H1

H1: (77.4px)

Heading H2

H2: (31.1px)

Heading H3

H3: (21.60px)

Heading H4

H4: (18px)
Heading H5
H5: (15px)
Heading H6
H6: (21.6px)
Paragraphs - Small, Normal & Big

Photoshop out the neighbours' dustbin and make the sky more blue. Add some furniture to the room to make it look more inviting. Add more cars on the driveway and people walking around. Straighten up the perspective on the building and I think we're almost there.

Tiny Paragraph: 0.694rem / 1.783

Photoshop out the neighbours' dustbin and make the sky more blue. Add some furniture to the room to make it look more inviting. Add more cars on the driveway and people walking around. Straighten up the perspective on the building and I think we're almost there.

Small Paragraph/

Photoshop out the neighbours' dustbin and make the sky more blue. Add some furniture to the room to make it look more inviting. Add more cars on the driveway and people walking around. Straighten up the perspective on the building and I think we're almost there.

Global Paragraph/

Photoshop out the neighbours' dustbin and make the sky more blue. Add some furniture to the room to make it look more inviting. Add more cars on the driveway and people walking around. Straighten up the perspective on the building and I think we're almost there.

Medium / 1.5 lines

Photoshop out the neighbours' dustbin and make the sky more blue. Add some furniture to the room to make it look more inviting. Add more cars on the driveway and people walking around. Straighten up the perspective on the building and I think we're almost there.

Large  / 2 lines

Labels - Small & Normal

This is some text inside of a div block.
Small Label/ 12px / 1.4 EM
This is some text inside of a div block.
Normal Label/ 14px / 1.6 EM
Links – Normal, Caps & Nav
Make it pop
Normal Link/ /
Main Navigation
Main Nav Link: 1.2rem / 1.375
Sub Navigation
Sub Nav Link: 1.2rem / 1.98
Nav Bar/ /
Misc
Photoshop out the neighbours' dustbin and make the sky more blue. Add some furniture to the room to make it look more inviting. Add more cars on the driveway and people walking around. Straighten up the perspective on the building and I think we're almost there.
Global Block QUote/ /
  • I know you've made thirty iterations but can we go back to the first one
  • I know you've made thirty iterations but can we go back to the first one
  • I know you've made thirty iterations but can we go back to the first one
Spans
text__light
Rich Elements

I am a H1 inside of a rich text element.

I am a H2 inside of a rich text element.

I am a H3 inside of a rich text element.

I am a H4 inside of a rich text element.

I am a H5 inside of a rich text element.
I am a H6 inside of a rich text element.
I am a block quote inside of a rich text element. I am a paragraph inside of a rich text element.

I am a link inside of a rich text element. I am a link inside of a rich text element. I am a link inside of a rich text element.

Photoshop out the neighbours' dustbin and make the sky more blue. Add some furniture to the room to make it look more inviting. Add more cars on the driveway and people walking around. Straighten up the perspective on the building and I think we're almost there.

  • I know you've made thirty iterations but can we go back to the first one
  • I know you've made thirty iterations but can we go back to the first one
  • I know you've made thirty iterations but can we go back to the first one
H1: 82.56pm /

Layouts

2 Columns
Three Columns
Four Columns

Colour Palette

Black
Dark Gray
Red
Black
white 25
White
Light Gray
Black Felt
Black Felt
Black Felt

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.

Text Black

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.

Text Dark Gray

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.

Text Light Gray

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.

Text White

Logos

Images

Image – 16 x 5
Image – 21 x 9
Dog
Image – 2 x 1
Image – 16 x 9
Image – 9 x 16
Image – 4 x 3
Image – 1 x 1

Layouts

This is a large statement that spans sereval lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae justo eros. Donec sit amet nunc elementum, lobortis est accumsan, pharetra est. Nullam mi ipsum, mattis ut eros a, faucibus gravida orci. Fusce at risus et enim maximus venenatis vitae eu tortor. Phasellus pulvinar.

Nullam vehicula eros at nisl tempus blandit. Donec mollis, turpis ut efficitur rutrum, lacus neque tristique magna, non accumsan justo ipsum eu elit. Nulla metus ligula, pretium ullamcorper facilisis ac, efficitur at quam. Vestibulum rhoncus nec sapien in sollicitudin.

Padding – Medium
Padding – Small
Padding – Extra Small
Stackable
Stackable - Bottom
Stackable - Top
Spacing – Large
Spacing – Medium
Spacing – Small
Spacing – Extra Small

Prefer to pick up the phone?

Give us a call and let's chat about your vision.

Contact form

For General Enquiries please call during office hours:

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