Typography Style Guide

Given below is the style guide for all the text in the template, that is, headings, paragraphs, lists, and buttons. Properties other than 'typography' may vary according to the design.

HEADINGS

Heading H1

Montserrat | 600 font-weight / 45px font-size / 55px line-height

Heading H2

Montserrat | 600 font-weight / 30px font-size / 45px line-height

Heading H3

Montserrat | 600 font-weight / 26px font-size / 30px line-height

Heading H4

Muli | 800 font-weight / 16px font-size / 30px line-height

Heading H5

Muli | 800 font-weight / 11px font-size / 20px line-height / 4px Letter-spacing

PARAGRAPHS
Project Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Montserrat | 400 font-weight / 14px font-size / 22px line-height

Text Block
Text Block Style 1

Logo Text

Muli | 300 font-weight / 25px font-size / 25px line-height / -0.5px letter-spacing

Text Block Style 2

Text Span

Muli | 600 font-weight / 25px font-size / 25px line-height / -0.5px letter-spacing

Text Block Style 3

Nav Link

Montserrat | 600 font-weight / 15px font-size / 25px line-height / -0.5px Letter-spacing

Text Block Style 4

hover

Montserrat | 800 font-weight / 100px font-size / 100px line-height

Text Block Style 5

Footer Text & Footer Link

Montserrat | 500 font-weight / 14px font-size / 20px line-height

Text Block Style 6

Link Text

Muli | 800 font-weight / 13px font-size / 20px line-height / 3px letter-spacing

Text Block Style 7

Form Field

Muli | 800 font-weight / 11px font-size / 20px line-height / 3px letter-spacing

Text Block Style 8

Submit Button

Muli | 800 font-weight / 12px font-size / 20px line-height / 4px letter-spacing

Text Block Style 9

Privacy Text Block

Montserrat | 400 font-weight / 11px font-size / 20px line-height

Color Usage
Color Name : White Smoke
Hex : #f7f7f8
Color Usage : Logo Text & Text Span, Nav Link, Heading H1, Project Name On Hover, Heading H4, Project Description, Heading H2, Heading H3
Color Name : White Smoke With 70% Opacity
Hex : #f7f7f8
Color Usage : Heading H5, Email Contact Link, Link Underline, Form Field
Color Name : White Smoke With 50% Opacity
Hex : #f7f7f8
Color Usage : Line, Project Description(Features), Submit Button
Color Name : White Smoke With 10% Opacity
Hex : #f7f7f8
Color Usage : Features Line, Features Outer Circle
Color Name : White Smoke With 20% Opacity
Hex : #f7f7f8
Color Usage : Features Inner Circle, Form Field Bottom Border
Color Name : White Smoke With 30% Opacity
Hex : #f7f7f8
Color Usage : Privacy Text Block
Color Name : Black Light
Hex : #171717
Color Usage : Project Section, About Section, Work Body, Contact Body
Color Name : Black Grey
Hex : #333333
Color Usage : Nav Underline, Nav Link(Dark)
Color Name : Sea Green With 90% Opacity
Hex : #0a9c4f
Color Usage : Project Image Overlay
Color Name : Dark Turquoise With 90% Opacity
Hex : #2fc1bf
Color Usage : Project Image Overlay Two
Color Name : Red With 90% Opacity
Hex : #b1393e
Color Usage : Project Image Overlay Three, Project Image Overlay(About)
Color Name : Grey
Hex : #777777
Color Usage : Footer Text, Footer Link
Color Name : Midnight Black
Hex : #222222
Color Usage : Logo(Dark), Heading H1(Dark), Heading H2(About)(Services), Heading H3(Services)
Color Name : Midnight Black With 50% Opacity
Hex : #222222
Color Usage : Line(Services), Heading H5(Services), Line(Small)(Services)
Color Name: Midnight Black With 40% Opacity
Hex : #222222
Color Usage : Features Inner Circle(Services)
Color Name: Midnight Black With 20% Opacity
Hex : #222222
Color Usage : Features Line(Services), Features Outer Circle(Services)