Material 3

Google’s Material Design 3 baseline: the light and dark colour schemes generated by Google’s material-color-utilities from the baseline seed (#6750A4), with the Material 3 type scale and shape (corner) scale. Brought into Stoaken by the Stoaken team from Google’s published open-source packages, unchanged, under its licence. Stoaken isn’t affiliated with or endorsed by Google.

Android Web Cross-platform Dark mode Open source Rounded Semantic tokens Typography scale

0 likes1 view67 tokens2 modes

color.errorcolor.scrimcolor.shadowcolor.outlinecolor.primarycolor.surfacecolor.on-errorcolor.tertiarycolor.secondarycolor.backgroundcolor.on-primarycolor.on-surfacecolor.on-tertiarycolor.on-secondarycolor.on-backgroundcolor.error-container

Mode

Colour

29 colours in 1 group. Hover a swatch for its name.

color 29

error#ba1a1a
scrim#000000
shadow#000000
outline#7a757f
primary#6750a4
surface#fffbff
on-error#ffffff
tertiary#7e5260
secondary#625b71
background#fffbff
on-primary#ffffff
on-surface#1c1b1e
on-tertiary#ffffff
on-secondary#ffffff
on-background#1c1b1e
error-container#ffdad6
inverse-primary#cfbcff
inverse-surface#313033
outline-variant#cac4cf
surface-variant#e7e0eb
primary-container#e9ddff
inverse-on-surface#f4eff4
on-error-container#410002
on-surface-variant#49454e
tertiary-container#ffd9e3
secondary-container#e8def8
on-primary-container#22005d
on-tertiary-container#31101d
on-secondary-container#1e192b

Spacing, type and more

38 tokens in color-scheme: light, drawn as what they are.

shape 7

full9999px
none0px
large16px
small8px
medium12px
extra-large28px
extra-small4px

spacing 11

44px
88px
1212px
1616px
2020px
2424px
3232px
4040px
4848px
5656px
6464px

typography 20

Sizes

Aabody-large16px
Aabody-small12px
Aabody-medium14px
Aalabel-large14px
Aalabel-small11px
Aatitle-large22px
Aatitle-small14px
Aalabel-medium12px
Aatitle-medium16px
Aadisplay-large57px
Aadisplay-small36px
Aadisplay-medium45px
Aaheadline-large32px
Aaheadline-small24px
Aaheadline-medium28px

Typefaces

The quick brown foxbrand · Roboto
The quick brown foxplain · Roboto

Weights

Aabold700
Aamedium500
Aaregular400

Material 3 is shared by Stoaken Curated under the Apache 2.0 licence. Stoaken hosts it; Stoaken Curated is responsible for what it contains. See something wrong? Use Report.