typography

Style Guide for all headings, titles, subtitles, paragraphs, links and button text

headings

Colossus

Inter / 7.43 Rem Font-Size / 100% Line-Height

Uber

Inter / 6.192 Rem Font-Size / 1.12- Line-Height

Hero

Inter / 5.16 Rem Font-Size / 1.2- Line-Height

Heading H1

Inter / 3.583125 Rem Font-Size / 1.2- Line-Height

Heading H2

Inter / 2.98625 Rem Font-Size / 1.2- Line-Height

Heading H3

Inter / 2.488125 Rem Font-Size / 1.15- Line-Height

Heading H4

Inter / 2.488125 Rem Font-Size / 1.15- Line-Height

Heading H5

Inter / 1.728125 Rem Font-Size / 1.12- Line-Height

Heading H6

Inter / 1.44 Rem Font-Size / 1.12- Line-Height

title headings

title heading big

Inter / 1.44 Rem Font-Size / 1.2- Line-Height

title heading small

Inter / 1.2 Rem Font-Size / 1.15- Line-Height

title heading xsmall

Inter / 0.833125 Rem Font-Size / 1.1- Line-Height

sub headings

Sub Heading Big

Inter / 1.44 Rem Font-Size / 1.4- Line-Height

Sub Heading Small

Inter / 1.2 Rem Font-Size / 1.35- Line-Height

Sub Heading xSmall

Inter / 0.833125 Rem Font-Size / 1.3- Line-Height

paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 1.2 Rem Font-Size / 1.75- Line-Height / Body Large Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 1.2 Rem Font-Size / 1.6- Line-Height / Body Large Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 1 Rem Font-Size / 1.6- Line-Height / Body Medium Regular ( Base Size )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 1 Rem Font-Size / 1.5- Line-Height / Body Medium Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 0.833125 Rem Font-Size / 1.45- Line-Height / Body Small Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 0.833125 Rem Font-Size / 1.4- Line-Height / Body Small Bold

links

Link Large

Inter / 1.2 Rem Font-Size / 100% Line-Height

Link Small

Inter / 1 Rem Font-Size / 100% Line-Height

Email Link

Inter / 1 Rem Font-Size / 100% Line-Height

Button text

Button Large Text

Inter / 1.2 Rem Font-Size / 100% Line-Height

Button Medium Text

Inter / 1 Rem Font-Size / 100% Rem Line-Height

Button Small Text

Inter / 0.833125 Rem Font-Size / 100% Rem Line-Height

color

Style Guide for primary, secondary, tertiary, success, error, warning, black, white, greys and white-opacity, basic black and white colors.

Brand Primary

Primary Color - Dodger Blue

Brand Secondary

Secondary Color - Ultramarine Blue

Brand Tertiary

Tertiary Color - Blue RYB

Success

Success Color - Green Pigment

Warning

Warning Color - Selective Yellow

Error

Error Color - Rusty Red

Brand Black

Brand White

Black Color - Oxford Blue

White Color - Alice Blue

**HSL color setup - Select Primary Color set Lightness to 10 for Black and 98 for White

Basic Black

Basic White

Black Color - Basic Black

White Color - Basic White

Grey Color - 50 - 900

White Opacity Color - 1% - 90% Overlay White

buttons

Style Guide for buttons square, button radius, buttons rounded, buttons with icons **fontawesome - FA 900 Solid

Button Large Button Large_4px Radius Button Large_8px Radius Button Large_Round

Button Large Solid- Square Corners, 4px Radius, 8px Radius, 32px Radius

Button Medium Button Medium_4px Radius Button Medium_8px Radius Button Medium_Round

Button Medium Solid- Square Corners, 4px Radius, 8px Radius, 32px Radius

Button Small Button Small_4px Radius Button Small_8px Radius Button Small_Round

Button Small Solid- Square Corners, 4px Radius, 8px Radius, 32px Radius

Button Large Button Large_4px Radius Button Large_8px Radius Button Large_Round

Button Large Outline - Square Corners, 4px Radius, 8px Radius, 32px Radius

Button Medium Button Medium_4px Radius Button Medium_8px Radius Button Medium_Round

Button Medium Outline - Square Corners, 4px Radius, 8px Radius, 32px Radius

Button Small Button Small_4px Radius Button Small_8px Radius Button Small_Round

Button Small Outline - Square Corners, 4px Radius, 8px Radius, 32px Radius

Buttons Solid with icons- Square Corners **fontawsome - FA 900 Solid

Buttons Solid with icons- 4px Radius **fontawsome - FA 900 Solid

Buttons Solid with icons- 8px Radius **fontawsome - FA 900 Solid

Buttons Solid with icons- 32px Radius **fontawsome - FA 900 Solid

Buttons Outline with icons- Square Corners **fontawsome - FA 900 Solid

Buttons Outline with icons- 4px Radius**fontawsome - FA 900 Solid

Buttons Outline with icons- 8px Radius**fontawsome - FA 900 Solid

Buttons Outline with icons- 32px Radius **fontawsome - FA 900 Solid