Personal Portfolio
Style Guide

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

Primary Palette

BRAND COLORS
Blue 900
#34a1cd
Blue 700
#58cfff
Blue 600
#9ce2ff
Blue 500
#d9f4ff
Blue 300
#e9f9ff

Typography Palette

HEADING & PARAGRAPH
Grey 900
#1c678c
Grey 900
#1c678c
Grey 900
#1c678c
Grey 900
#1c678c
Grey 900
#130f49

Headings & Paragraphs

Typography

Super Heading Number 1
King of Headings

This is a sample paragraph of text that could help you to adjust the margin of the heading. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, commodo diam libero vitae erat. Aenean faucibus nibh et justo.

This is a sample paragraph of text that could help you to adjust the margin of the heading. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Super Heading Number 2
Heading's Revenge

This is a sample paragraph of text that could help you to adjust the margin of the heading. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Super Heading Number 3
Rise of Headings

This is a sample paragraph of text that could help you to adjust the margin of the heading. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Super Heading Number 4
Heading's Fall

This is a sample paragraph of text that could help you to adjust the margin of the heading. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Super Heading Number 5
Return of the Heading

This is a sample paragraph of text that could help you to adjust the margin of the heading. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Super Heading Number 6
The Last Heading

This is a sample paragraph of text that could help you to adjust the margin of the heading. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

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

Submit
Button Primary
Get in touch
Button Arrow
Submit
Button Outline