The color system

Light theme

Primary color

#6200EE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Secondary color

#6200EE

Background color

#6200EE

Surface color

#6200EE

Error color

#6200EE

Light theme

Text legibility

Text on Primary

Primary text | High-emphasis text | X% White

Secondary text | Medium-emphasis text | X% White

Tertiary text | Disabled text | X% White

Quaternary text | Dividers | 12% White

Text on Secondary

Primary text | High-emphasis text | X% Black

Secondary text | Medium-emphasis text | X% Black

Tertiary text | Disabled text | X% Black

Quaternary text | Dividers | 12% White

Text on Background

Primary text | High-emphasis text | X% Black

Secondary text | Medium-emphasis text | X% Black

Tertiary text | Disabled text | X% Black

Quaternary text | Dividers | 12% White

Text on Surface

Primary text | High-emphasis text | X% Black

Secondary text | Medium-emphasis text | X% Black

Tertiary text | Disabled text | X% Black

Quaternary text | Dividers | 12% White

Text on Error

Primary text | High-emphasis text | X% White

Secondary text | Medium-emphasis text | X% White

Tertiary text | Disabled text | X% White

Quaternary text | Dividers | 12% White

Light theme

Icons

Icons help identify actions and provide information. Their color should contrast against the background to ensure that they are legible and identifiable.

Icons on Primary

menu Active + focused | 87% White
menu Active + unfocused | 60% White
menu Inactive / Disabled | 38% White

Icons on Secondary

menu Active + focused | 87% Black
menu Active + unfocused | 60% Black
menu Inactive / Disabled | 38% Black

Icons on Background

menu Active + focused | 87% Black
menu Active + unfocused | 60% Black
menu Inactive / Disabled | 38% Black

Icons on Error

menu Active + focused | 87% White
menu Active + unfocused | 60% White
menu Inactive / Disabled | 38% White

The color system

Dark theme

Primary color

#6200EE

Secondary color

#6200EE

Background color

#6200EE

Surface color

#6200EE

Error color

#6200EE

Dark theme

Text legibility

Text on Primary

Primary text | High-emphasis text | X% Black

Secondary text | Medium-emphasis text | X% Black

Tertiary text | Disabled text | X% Black

Quaternary text | Dividers | 12% Black

Text on Secondary

Primary text | High-emphasis text | X% Black

Secondary text | Medium-emphasis text | X% Black

Tertiary text | Disabled text | X% Black

Quaternary text | Dividers | 12% White

Text on Background

Primary text | High-emphasis text | X% White

Secondary text | Medium-emphasis text | X% White

Tertiary text | Disabled text | X% White

Quaternary text | Dividers | 12% White

Text on Surface

Primary text | High-emphasis text | X% White

Secondary text | Medium-emphasis text | X% White

Tertiary text | Disabled text | X% White

Quaternary text | Dividers | 12% White

Text on Error

Primary text | High-emphasis text | X% Black

Secondary text | Medium-emphasis text | X% Black

Tertiary text | Disabled text | X% Black

Quaternary text | Dividers | 12% White

Dark theme

Icons

Icons help identify actions and provide information. Their color should contrast against the background to ensure that they are legible and identifiable.