Styleguide for Quartz
Figma template by Atwww.

Typeface: Instrument Sans

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

1234567890

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

1234567890

Headings

Title H1

Hello

Size
255px
Line Height
100%
Letter Spacing
-0.3px
Weight
Bold
Title H2

Hello

Size
100px
Line Height
100%
Letter Spacing
-0.2px
Weight
Bold
Title H3

Hello

Size
100px
Line Height
100%
Letter Spacing
-0.3px
Weight
Medium
Title H4

Hello Atwww

Size
90px
Line Height
110%
Letter Spacing
-0.2px
Weight
Regular
Title H5
Hello Atwww
Size
60px
Line Height
110%
Letter Spacing
-0.2px
Weight
Regular
Title H6
Hello Atwww
Size
40px
Line Height
130%
Letter Spacing
-0.15px
Weight
Regular

Paragraphs

Paragraph 20PX

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.

Size
20px
Line Height
150%
Weight
Regular
Paragraph 18PX

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.

Size
18px
Line Height
150%
Weight
Regular
Paragraph 16PX

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.

Size
16px
Line Height
150%
Weight
Regular
Paragraph 14PX

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.

Size
14px
Line Height
150%
Weight
Regular
Paragraph 14PX - ALL CAPS

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.

Size
14px
Line Height
150%
Weight
Regular
Paragraph 12PX

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.

Size
12px
Line Height
130%
Weight
Regular
Paragraph 12PX - ALL CAPS

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.

Size
12px
Line Height
130%
Weight
Regular

Colors

~100
HEX
#F7F9FC
~200
HEX
#0C0F1A
~300
HEX
#1846D3