UI Components
On Coral
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Shell
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Poppy
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Terracotta
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Canyon
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Tourmaline
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Seafoam
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Agave
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Lilac
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Cerulean
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Jade
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Neutral 5
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Neutral 4
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Neutral 3
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Neutral 2
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |
Textfield
Logotype
Alert
UI Components
On Neutral 1
Typography
-
H1
The quick brown fox jumps over the lazy dog
-
H2
The quick brown fox jumps over the lazy dog
-
H3
The quick brown fox jumps over the lazy dog
-
H4
The quick brown fox jumps over the lazy dog
-
H5
The quick brown fox jumps over the lazy dog
-
P
The quick brown fox jumps over the lazy dog
-
H6
The quick brown fox jumps over the lazy dog
-
H7
The quick brown fox jumps over the lazy dog
Element | Desktop | Tablet | Mobile |
---|---|---|---|
H1 | Size: 60px / Line Height: 1.16em / Letter Spacing: -.88px | Size: 50px / Line Height: 1.16em / Letter Spacing: -.5px | Size: 40px / Line Height: 1.16em / Letter Spacing: -.5px |
H2 | Size: 48px / Line Height: 1.16em | Size: 40px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em |
H3 | Size: 38px / Line Height: 1.16em | Size: 32px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em |
H4 | Size: 30px / Line Height: 1.16em | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em |
H5 | Size: 24px / Line Height: 1.16em | Size: 20px / Line Height: 1.16em | Size: 18px / Line Height: 1.16em |
P | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em | Size: 18px / Line Height: 1.3em |
H6 | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em | Size: 14px / Line Height: 1.4em |
H7 | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px | Size: 11px / Line Height: 1.45em / Letter Spacing: .22px |