Styleguide for Crest
Figma template by Atwww.

1.0 Typeface

Aa

Heading Font — Light

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

Paragraph Font — Regular

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

Paragraph Font — Regular

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

2.0 Headings

Title H1

Hello Atwww

Size
80px
Line Height
110%
Letter Spacing
-2px
Weight
Medium
Title H2

Hello Atwww

Size
70px
Line Height
110%
Letter Spacing
-2.5px
Weight
Medium
Title H3

Hello Atwww

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

Hello Atwww

Size
55px
Line Height
110%
Letter Spacing
-2px
Weight
Regular
Title H5
Hello Atwww
Size
45px
Line Height
120%
Letter Spacing
-1.5px
Weight
Regular
Title H6
Hello Atwww
Size
40px
Line Height
130%
Letter Spacing
-1.5px
Weight
Regular

3.0 Paragraphs

Paragraph 30PX

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
30px
Line Height
140%
Weight
Medium
Paragraph 25PX

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
25px
Line Height
140%
Weight
Regular
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
140%
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
140%
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
140%
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
140%
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
140%
Weight
Regular

4.0 Colors

~100
HEX
#F7F9FC
~66
HEX
#FFED36
~300
HEX
#1846D3
~400
HEX
#1A237E
~500
HEX
#0E0B3D