Personal Portfolio
Style Guide

Use this page to get alter global typography styles and establish your website style-guide.

Primary Palette

BRAND COLOURS
Purple 900
Dark
Purple 700
Dark
Purple 600
PRIMARY
Purple 500
tint
Purple 300
tint
Blue 900
DARK
Blue 700
DARK
Blue 600
PRIMARY
Blue 500
tint
Blue 300
tint
Pink 900
DARK
Pink 700
DARK
Pink 600
PRIMARY
Pink 500
tint
Pink 300
tint
Red 900
tint
Red 700
tint
Red 600
PRIMARY
Red 500
tint
Red 300
tint

Typography Palette

HEADING & PARAGRAPH
Grey 900
#130f49
Grey 700
#55527c
Grey 600
#b4b2c5
Grey 500
#d9d9e2
Grey 300
#f8f8fa

Typography Styles

Not sure on something? [email protected]

Headings

Aa Bb Cc Dd Ee

Display
64px

Aa Bb Cc Dd Ee

Heading 1
48px

Aa Bb Cc Dd Ee

Heading 2
40px

Aa Bb Cc Dd Ee

Heading 3
34px

Aa Bb Cc Dd Ee

Heading 4
20px
Aa Bb Cc Dd Ee
Heading 5
18px
Aa Bb Cc Dd Ee
Heading 6
12px

Paragraph

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large
22px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
14px

Quotes & Lists

Not sure on something? [email protected]

Quotes

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Quote 1
Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Quote 2
Coloured

Lists

  • Example Item 1
  • Example Item 2
  • Example Item 3
List Dots
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Numbers
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Letters

Buttons

Not sure on something? [email protected]

Buttons

Submit
Button Primary
Get in touch
Button Arrow
Submit
Button Outline