Style Guide for all headings, titles, subtitles, paragraphs, links and button text
Inter / 7.43 Rem Font-Size / 100% Line-Height
Inter / 6.192 Rem Font-Size / 1.12- Line-Height
Inter / 5.16 Rem Font-Size / 1.2- Line-Height
Inter / 3.583125 Rem Font-Size / 1.2- Line-Height
Inter / 2.98625 Rem Font-Size / 1.2- Line-Height
Inter / 2.488125 Rem Font-Size / 1.15- Line-Height
Inter / 2.488125 Rem Font-Size / 1.15- Line-Height
Inter / 1.728125 Rem Font-Size / 1.12- Line-Height
Inter / 1.44 Rem Font-Size / 1.12- Line-Height
Inter / 1.44 Rem Font-Size / 1.2- Line-Height
Inter / 1.2 Rem Font-Size / 1.15- Line-Height
Inter / 0.833125 Rem Font-Size / 1.1- Line-Height
Inter / 1.44 Rem Font-Size / 1.4- Line-Height
Inter / 1.2 Rem Font-Size / 1.35- Line-Height
Inter / 0.833125 Rem Font-Size / 1.3- Line-Height
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
Inter / 1.2 Rem Font-Size / 100% Line-Height
Link SmallInter / 1 Rem Font-Size / 100% Line-Height
Email LinkInter / 1 Rem Font-Size / 100% Line-Height
Style Guide for primary, secondary, tertiary, success, error, warning, black, white, greys and white-opacity, basic black and white colors.
Primary Color - Dodger Blue
Secondary Color - Ultramarine Blue
Tertiary Color - Blue RYB
Success Color - Green Pigment
Warning Color - Selective Yellow
Error Color - Rusty Red
Black Color - Oxford Blue
White Color - Alice Blue
**HSL color setup - Select Primary Color set Lightness to 10 for Black and 98 for White
Black Color - Basic Black
White Color - Basic White
Grey Color - 50 - 900
White Opacity Color - 1% - 90% Overlay White
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.
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.
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.
Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
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.
