Documentation

Materiale Design Guideline

Typography

Display Lg

Display Md

Display Sm

Headline Lg

Headline Md

Headline Sm

Title Lg

Title Md

Title Sm

Label Lg

Label Md

Label Sm

Body Lg

Body Md

Body Sm

Colors (light & dark)

Body

#FFFFFF

#000000

Background

#FEF7FF

#141218

Bg Dark 50%

#00000 (50%)

Heading

#1F1F1F

#E3E3E3

Paragraph

#49454F

#AEA9B4

Outline

#79747E

#938F99

Primary

#6750A4

#D0BCFF

On Primary

#FFFFFF

#381E72

Primary Container

#EADDFF

#4F378B

On Primary Container

#4F378B

#EADDFF

Primary Fixed

#EADDFF

On Primary Fixed

#4F378B

Primary Fixed Dim

#D0BCFF

Error

#B3261E

#F2B8B5

On Error

#FFFFFF

#601410

Error Container

#F9DEDC

#8C1D18

On Error Container

#410E0B

#F9DEDC

Black Solid

#00000

Surface 0

#FEF7FF

#141218

Surface 1

#F6EFFA

#1D1A24

Surface 2

#F2EAF8

#23202A

Surface 3

#EDE5F5

#292531

Surface 4

#ECE3F4

#2B2634

Surface 5

#E9E0F2

#2E2A38

Primary 0.08

Primary (8%)

Primary 0.12

Primary 12%

Primary 0.16

Primary 16%

On Primary 0.08

On Primary 8%

On Primary 0.12

On Primary 12%

On Primary 0.16

On Primary 16%

White Solid

#FFFFFF

Rating

#FF9900

There are 5 color schemes that are ready for you to use, purple (default), blue, green, red and yellow (Download here).


If you want to create your own color scheme, please create it here https://m3.material.io/theme-builder#/custom

Edit colors in Assets>> Styles>>Colors


Change color
Change color

Changelogs

VERSION 1.0.0 (MAY 2023)

Initial Release