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 | 500 font-weight / 72px font-size / 90px line-height

Heading H2

Montserrat | 500 font-weight / 54px font-size / 74px line-height

Heading H3

Montserrat | 600 font-weight / 36px font-size / 50px 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.

Noto Sans JP | 400 font-weight / 20px font-size / 36px line-height / 0.5px Letter-spacing

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.

Noto Sans JP | 300 font-weight / 18px font-size / 30px line-height / 0.5px Letter-spacing

Paragraph Style 3

Lorem ipsum dolor sit amet, consectetur

Montserrat | 600 font-weight / 36px font-size / 70px line-height

Paragraph Style 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Montserrat | 500 font-weight / 20px font-size / 36px line-height / 0.5px Letter-spacing

Text Block
Text Block Style 1

Email Text Block

Noto Sans JP | 500 font-weight / 14px font-size / 28px line-height / 0.5px Letter-spacing

Text Block Style 2

Scroll Text Block

Noto Sans JP | 300 font-weight / 12px font-size / 12px line-height / 2px Letter-spacing

Text Block Style 3

Hero Button Link Block

Noto Sans JP | 700 font-weight / 12px font-size / 24px line-height / 4px Letter-spacing

Text Block Style 5

Nav Number Text Block

Noto Sans JP | 700 font-weight / 12px font-size / 24px line-height / 2px Letter-spacing

Text Block Style 6

Footer Link Block, Footer Address, Project Type

Noto Sans JP | 400 font-weight / 16px font-size / 25px line-height

Text Block Style 7

About Text Block

Noto Sans JP | 400 font-weight / 14px font-size / 28px line-height / 9px Letter-spacing

Text Block Style 5

Services Types

Noto Sans JP | 400 font-weight / 20px font-size / 32px line-height

Text Block Style 6

Footer Text Block

Noto Sans JP | 700 font-weight / 14px font-size / 20px line-height / 2.4px Letter-sacing

Text Block Style 7

Footer Text Block

Noto Sans JP | 400 font-weight / 16px font-size / 20px line-height

Color Usage
Color Name : Black Light
Hex : #1f1e1d
Color Usage : Menu Icon Bar, Menu Wrapper, Menu Close Icon, Heading H2, Paragraph ( Work ), Heading H3, Project Type, Services Type, Footer Wrapper
Color Name : White
Hex : #ffffff
Color Usage : Header Email Link Wrapper, Email Text Underline, Menu Icon Inner Wrapper, Heading H1, Paragraph, Hero Button Link Block, Plus Icon, Scroll Overlay, Scroll Text Block, Nav Number Text Block, Menu Close Icon Wrapper, Social Icon ( Hover ), Work Wrapper, About Text Block, Paragraph ( About ), Services Image Overlay, Heading H2 ( Contact ), Paragraph ( Footer ), Footer Text Block
Color Name : Black Light With 80% Opacity
Hex : #1f1e1d
Color Usage : Menu Icon Bar
Color Name : Dark Grey
Hex : #323135
Color Usage : Button Background, Button Circle
Color Name : Black Light With 90% Opacity
Hex : #1f1e1d
Color Usage : Video Overlay
Color Name : White Smoke
Hex : #eeeeee
Color Usage :  Services Type Background On Hover
Color Name : Tomato
Hex : #ff6b50
Color Usage : Footer Link Block, Button Background ( Contact ), Button Circle ( Contact ), Footer Underline
Color Name : Dim Grey
Hex : #6f6f6f
Color Usage : Footer Address, Social Icon, Footer Address
Color Name : Grey Light With 20% Opacity
Hex : #9c9c9c
Color Usage : Project Image Wrapper
Color Name : Orange Red
Hex : #f84525
Color Usage : About Background, About Text Block ( Services ), Contact Background
Color Name : Grey Light
Hex : #9c9c9c
Color Usage : Footer Link Block ( Nav Link ), Footer Underline ( Nav Link )