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

Roboto | 900 font-weight / 75px font-size / 75px line-height / -1px Letter Spacing

Heading H1 Span

Playfair Display | 400 font-weight / 75px font-size / 69px line-height / -1px Letter Spacing

Heading H2

Playfair Display | 400 font-weight / 65px font-size / 55px line-height

PARAGRAPHS
Paragraph Style 1

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.

Roboto | 500 font-weight / 20px font-size / 30px line-height

Paragraph Style 2

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.

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

Paragraph Style 3

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.

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

Text Block
Text Block Style 1

Logo Text

Open Sans| 700 font-weight / 12px font-size / 20px line-height / 3px Letter Spacing

Text Block Style 2

Nav Link

Roboto| 500 font-weight / 15px font-size / 20px line-height

Text Block Style 3

Hi Text Block

Playfair Display | 400 font-weight / 50px font-size / 50px line-height

Text Block Style 5

Footer Text & Footer Link

Roboto | 500 font-weight / 15px font-size / 20px line-height

Color Usage
Color Name : Black Light
Hex : #00020f
Color Usage : Nav link, Social Link, Hi Text Block, Heading H1, Heading H1 Span, Paragraph, Open Circle, Contact Link
Color Name : Light Sea Green
Hex : #2aa194
Color Usage : Hero Section, Nav Underline On Hover, Brand Link On Hover, Footer Link On Hover, Loading Animation Wrapper, Loading Animation Outer Wrapper, Plus Icon Wrapper, Project Content On Hover, Contact Section, Social Dot
Color Name : White Smoke
Hex : #f7f7f8
Color Usage : Hero Wrapper, Hero Image Overlay, Bg White With Stroke, Bg White, Work Wrapper, Work Text, Project Wrapper, Open Text Block, Heading H2, Project Number, Project Type, Contact Wrapper, Contact Text
Color Name : Dim Grey
Hex : #4b4c53
Color Usage : Logo Text
Color Name : Dark Slate Blue
Hex : #00349a
Color Usage : Bg White with Stroke
Color Name : White
Hex : #ffffff
Color Usage :  Image Paragraph, Plus Icon Horizontal, Plus Icon Verticle
Color Name : Light Sea Green With 20% Opacity
Hex : #2aa194
Color Usage : Logo Line, Hero Heading Line, Contact Line
Color Name : White With 50% Opacity
Hex : #ffffff
Color Usage : Image Paragraph Line, Logo Line(White)
Color Name : Black With 20% Opacity
Hex : #000000
Color Usage :  Footer Text, Footer Link