Headings Title Headings Sub Headings Paragraphs Links Button Text Color Buttons Resources

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

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

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

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

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

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

Link x-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 - midnight blue

Brand Secondary

Secondary Color - light salmon

Brand Tertiary

Tertiary Color - cyan

Error

Error Color - Rusty Red

Brand Black

Brand White

Black Color - midnightBlue

White Color - white smoke

**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

buttons

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

square-button
large

square-button
medium

square-button
small

square-button
x-small

loyal-button large

loyal-button medium

loyal-button small

loyal-button xs

Resources

design system

Cabana

A Design System for Sketch and Figma that enables you to create UI quicker, which means you get to present your design ideas much faster. Designer and Teacher of things Marc Andrew.

Visit Website



Website preview for cabana design system.com

Responsive type

Type-Scale

Scale your typography using Minor Second to Golden Ratio formula and custom scaling too. Type Scale is a visual calculator designed by Front-End-Developer Jeremy Church.

Visit Website



Google font

Inter

Inter is a variable font family carefully crafted & designed for computer screens.Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well. The Inter project is led by Rasmus Andersson.

Visit Website



Website preview for fonts.google.com/inter

iconography collection

Fontawesome

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

Visit Website



Color generator

Tints and Shades

This is useful for designers who may be communicating color intent to developers who use Sass or PostCSS in their builds. It's also a solid way to quickly preview what tints and shades look like for a base color you may be considering for your design.

Visit Website



Website preview for maketintsandshades.com

stuff we need from you

Heading H1