Heading 1
56px size, #111 colour, -2 letter spacing, 1.1 line spacing, 700 weight
Heading 2
48px size, #111 colour, -2 letter spacing, 1.2 line spacing, 700 weight
Heading 3
36px size, #111 colour, -1 letter spacing, 1.3 line spacing, 700 weight
Heading 4
30px size, #111 colour, 0 letter spacing, 1.4 line spacing, 700 weight
Heading 5
24px size, #111 colour, 0 letter spacing, 1.4 line spacing, 600 weight
Heading 6
20px size, #111 colour, 0 letter spacing, 1.4 line spacing, 600 weight
Body Extra Large... 18px, 500 weight, 1.4 line spacing
Body Large... 16px, 500 weight, 1.5 line spacing
Body Medium... 14px, 500 weight, 1.5 line spacing
Body Small... 12px, 500 weight, 1.5 line spacing
All Headings and body text have contrast classes. Add "Contrast" to each. See below examples...
Heading 1
Heading 2
This is some text inside of a div block. This is "Body XL"
This is some text inside of a div block. This is "Body sm"
Icons
Using Material Icons provided by Google. Use the "Material Icon" class.
Here is an example of it being used on their own:
And within an "Icon container". Icon container default is 8px padding. The "Small" subclass is 4px padding.
Here's a 48 px version. Add the "48" class:
