Light Theme

primary-dark primary dark
primary primary
accent accent
primary-dark primary dark, inverted
primary primary, inverted
accent accent, inverted
Card Supporting Text

Dark Theme

primary-dark primary dark
primary primary
accent accent
primary-dark primary dark, inverted
primary primary, inverted
accent accent, inverted
Card Supporting Text

Light Color Theme

.mdl-typography-- Scale & Basic Styles
display-4 Light 112px
display-3 Regular 56px
display-2 Regular 45px
display-1 Regular 34px
headline Regular 24px
title Medium 20px
subhead Regular 16px (Device), Regular 15px (Desktop)
body-2 Medium 14px (Device), Medium 13px (Desktop)
body-1 Regular 14px (Device), Regular 13px (Desktop)
body-2-force-preferred-font Medium 14px (Device), Medium 13px (Desktop)
body-1-force-preferred-font Regular 14px (Device), Regular 13px (Desktop)
caption Regular 12px
menu Medium 14px (Device), Medium 13px (Desktop)
button Medium (All Caps) 14px
primary-dark mdl-color--primary-dark mdl-color-text--primary-contrast
primary mdl-color--primary mdl-color-text--primary-contrast
accent mdl-color--accent mdl-color-text--accent-contrast
primary-dark mdl-color--primary-contrast mdl-color-text--primary-dark
primary mdl-color-text--primary
accent mdl-color--accent-contrast mdl-color-text--accent

Base font

Material Design Lite start’s with a base font of

Regular 14px (Device), Regular 13px (Desktop)

Regular 14px (Device), Regular 13px (Desktop)

Medium 14px (Device), Medium 13px (Desktop)

Body with color contrast

Medium 14px (Device), Medium 13px (Desktop)

An anchor

Headings

h1 (56px) Subtitle

h2 (45px) Subtitle

h3 (34px) Subtitle

h4 (24px) Subtitle

h5 (20px) Subtitle
h6 (16px) Subtitle
Input is not a number!
Input is not a number!
Input is not a number!
Input is not a number!
Input is not a number!
radio fingerprint
radio
fingerprint
radio fingerprint
radio
Disabled fieldset
Input is not a number!
radio
Inbox
account_box
Mood
account_box
Materials Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35

Menu button

Dark Color Theme

.mdl-typography-- Scale & Basic Styles
display-4 Light 112px
display-3 Regular 56px
display-2 Regular 45px
display-1 Regular 34px
headline Regular 24px
title Medium 20px
subhead Regular 16px (Device), Regular 15px (Desktop)
body-2 Medium 14px (Device), Medium 13px (Desktop)
body-1 Regular 14px (Device), Regular 13px (Desktop)
body-2-force-preferred-font Medium 14px (Device), Medium 13px (Desktop)
body-1-force-preferred-font Regular 14px (Device), Regular 13px (Desktop)
caption Regular 12px
menu Medium 14px (Device), Medium 13px (Desktop)
button Medium (All Caps) 14px
primary-dark mdl-color--primary-dark mdl-color-text--primary-contrast
primary mdl-color--primary mdl-color-text--primary-contrast
accent mdl-color--accent mdl-color-text--accent-contrast
primary-dark mdl-color--primary-contrast mdl-color-text--primary-dark
primary mdl-color-text--primary
accent mdl-color--accent-contrast mdl-color-text--accent

Base font

Material Design Lite start’s with a base font of

Regular 14px (Device), Regular 13px (Desktop)

Regular 14px (Device), Regular 13px (Desktop)

Medium 14px (Device), Medium 13px (Desktop)

Body with color contrast

Medium 14px (Device), Medium 13px (Desktop)

An anchor

Headings

h1 (56px) Subtitle

h2 (45px) Subtitle

h3 (34px) Subtitle

h4 (24px) Subtitle

h5 (20px) Subtitle
h6 (16px) Subtitle
Input is not a number!
Input is not a number!
Input is not a number!
Input is not a number!
Input is not a number!
radio fingerprint
radio
fingerprint
radio fingerprint
radio
Disabled fieldset
Input is not a number!
radio
Inbox
account_box
Mood
account_box
Materials Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35

Menu button

Default Color Theme

.mdl-typography-- Scale & Basic Styles
display-4 Light 112px
display-3 Regular 56px
display-2 Regular 45px
display-1 Regular 34px
headline Regular 24px
title Medium 20px
subhead Regular 16px (Device), Regular 15px (Desktop)
body-2 Medium 14px (Device), Medium 13px (Desktop)
body-1 Regular 14px (Device), Regular 13px (Desktop)
body-2-force-preferred-font Medium 14px (Device), Medium 13px (Desktop)
body-1-force-preferred-font Regular 14px (Device), Regular 13px (Desktop)
caption Regular 12px
menu Medium 14px (Device), Medium 13px (Desktop)
button Medium (All Caps) 14px
primary-dark mdl-color--primary-dark mdl-color-text--primary-contrast
primary mdl-color--primary mdl-color-text--primary-contrast
accent mdl-color--accent mdl-color-text--accent-contrast
primary-dark mdl-color--primary-contrast mdl-color-text--primary-dark
primary mdl-color-text--primary
accent mdl-color--accent-contrast mdl-color-text--accent

Base font

Material Design Lite start’s with a base font of

Regular 14px (Device), Regular 13px (Desktop)

Regular 14px (Device), Regular 13px (Desktop)

Medium 14px (Device), Medium 13px (Desktop)

Body with color contrast

Medium 14px (Device), Medium 13px (Desktop)

An anchor

Headings

h1 (56px) Subtitle

h2 (45px) Subtitle

h3 (34px) Subtitle

h4 (24px) Subtitle

h5 (20px) Subtitle
h6 (16px) Subtitle
Input is not a number!
Input is not a number!
Input is not a number!
Input is not a number!
Input is not a number!
radio fingerprint
radio
fingerprint
radio fingerprint
radio
Inbox
account_box
Mood
account_box
Materials Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35

Menu button