Typography

Note: I have set the root font-size to 10px for this library.

Instructions to import the Colors & Typography in your CSS or HTML:

Starling UI uses Montserrat font. You can directly use the tags h1, h2, h3, h4, h5 & p or use their custom classes to get the following font-size:

This is a Heading - H1

Font Size:  4.8rem

This is a Heading - H2

Font Size:  3.2rem

This is a Heading - H3

Font Size:  2.4rem

This is a Heading - H4

Font Size:  2.0rem
This is a Heading - H5
Font Size:  1.6rem

This is a Paragraph - P

Font Size:  1.2rem
This is a < div > with a font-size of h3

These are the different Font Weights in Starling UI. The demo text has the .h3 custom font class:

LIGHT 300 REGULAR 400 MEDIUM 500 SEMIBOLD 600 BOLD 700 BOLDER 800 BLACK 900

These are the different Text Colors in Starling UI:

This is Primary Text Color This is Variant 1 Text Color This is Variant 2 Text Color This is Variant 3 Text Color

These are the different Background Colors in Starling UI:

This is Primary Background Color
This is Variant 1 Background Color
This is Variant 2 Background Color
This is Variant 3 Background Color