MATERIAL 3 CASE STUDY
Now in Android App
with Material 3
link to figma file
COLOR GUIDANCE
Color is used to express style and communicate meaning. With dynamic
color, Material puts personal color preferences and individual needs at
the forefront of systematic color application.
These color styles were generated using the Material Theme Builder
however we altered the Neutral color set with custom colors. This allowed
us the opportunity to show developers how they might alter M3 styles if
required within the opensource code base.
3
Note
e c o lo rs b e yon d w hat M
iz y
If you custom erates you must carefull
gen y.
dynamically c o n tr a s t accessibilit
lo rs
test these co
1
Color Styles
Tonal Palettes
100 99 95 90 80 70 60 50 40 30 20 10 0
Primary
100 99 95 90 80 70 60 50 40 30 20 10 0
Secondary
100 99 95 90 80 70 60 50 40 30 20 10 0
Tertiary
100 99 95 90 80 70 60 50 40 30 20 10 0
Error
Custom styles
100 99 95 90 80 70 60 50 40 30 20 10 0
Neutral
100 99 95 90 80 70 60 50 40 30 20 10 0
Neutral
Variant 2
Color Styles
Light
Primary On Primary Primary Container On Primary Container
Primary40 Primary100 Primary90 Primary10
Secondary On Secondary Secondary Container On Secondary Container
Secondary40 Secondary100 Secondary90 Secondary10
Tertiary On Tertiary Tertiary Container On Tertiary Container
Tertiary40 Tertiary100 Tertiary90 Tertiary10
Error On Error Error Container On Error Container
Error40 Error100 Error90 Error10
Background On Background Surface On Surface
Custom
styles
Neutral99 Neutral10 Neutral99 Neutral10
Surface Variant On Surface Variant Outline
Neutral-Variant90 Neutral-Variant30 Neutral-Variant50
Custom Inverse Surface Inverse On Surface
styles Neutral20 Neutral95 3
Color Styles
Dark
Primary On Primary Primary Container On Primary Container
Primary80 Primary20 Primary30 Primary90
Secondary On Secondary Secondary Container On Secondary Container
Secondary80 Secondary20 Secondary30 Secondary90
Tertiary On Tertiary Tertiary Container On Tertiary Container
Tertiary80 Tertiary20 Tertiary30 Tertiary90
Error On Error Error Container On Error Container
Error80 Error20 Error30 Error90
Custom Background On Background Surface On Surface
styles
Neutral10 Neutral90 Neutral10 Neutral90
Surface Variant On Surface Variant Outline
Neutral-Variant30 Neutral-Variant80 Neutral-Variant60
Custom Inverse Surface Inverse On Surface
styles Neutral90 Neutral10 4
Color Styles
Custom styles
Light Dark
Surface Surface
Surface at +1 Surface at +1
+ 5% Primary + 5% Primary
Surface at +2 Surface at +2
+ 8% Primary + 8% Primary
Surface at +3 Surface at +3
+ 11% Primary + 11% Primary
Surface at +4 Surface at +4
+ 12% Primary + 12% Primary
Surface at +5 Surface at +5
+ 14% Primary + 14% Primary
5
Color Gradients
Light
primary-container + tertiary-container + inverse-on-surface + tertiary-container +
tertiary-container primary-container primary-container inverse-on-surface
inverse-on-surface + inverse-on-surface + inverse-on-surface + secondary-container +
6
tertiary-container surface-varient surface tertiary-container
Color Gradients
Dark
primary-container + tertiary-container + inverse-on-surfac + tertiary-container +
tertiary-container primary-container primary-container inverse-on-surfac
inverse-on-surface + inverse-on-surface + inverse-on-surface + secondary-container +
7
tertiary-container surface-varient surface tertiary-container
Color Background
primary 8% + surface primary 8% (dark) +
surface (dark)
8
TYPOGRAPHY
Use typography to make writing legible and beautiful. Material's default
type scale includes contrasting and flexible styles to support a wide range
of use cases.
Google roboto font download
9
Typography
Display Large Roboto 36/44 . 0
Display Medium Roboto 45/52 . 0
Display Small Roboto 57/64 . -0.25
Headline Large Roboto 32/40 . 0
Headline Medium Roboto 28/36 . 0
Headline Small Roboto 24/32 . 0
10
Typography
Title Large - Roboto Bold 22/28 . 0
Title Medium - Roboto Bold 18/24 . +0.1
Title Small - Roboto Medium 14/20 . +0.1
Body Large - Roboto 16/24 . +0.5
Body Medium - Roboto 14/20 . +0.25
Body Small - Roboto 12/16 . +0.4
Label Large - Roboto 14/20 . +0.1
Label Medium - Roboto 12/16 . +0.5
Label Small - Roboto 10/16 . 0
11
ILLUSTRATIONS
& ELEMENTS
Icon elements use Material design icons or were custom built.
The illustrations use nested components and masks. This makes it easier
to create alternate themes, but it has the trade-off of adding size to
exported SVGs.
Gradient colors in figma don’t currently allow for style names but require
hex numbers instead. So that gradients styles can be dynamically themed
we used gradient masks and selection colors to create gradient
components.
12
Solid Icons and Illustrations
13
Black/White Icons and Illustrations
14
Logos and Illustrations
15
Elements
Material icons
16
Elements
Custom icons & other elements
9:30
3 32
17
LAYOUT
Layout and breakpoints.
These designs give the main margins, paddings, row size and colomn
count for various screen sizes and layouts.
The entire view isn’t shown for these designs or has been re-sized to fit.
18
Extra Small (0-599dp)
(Resized and/or
cropped to fit
this view.)
19
Small (600-904dp)
(Resized and/or
cropped to fit
this view.)
20
Medium (905-1239dp)
(Resized and/or
cropped to fit
this view.)
21
Medium (1240-1439dp)
(Resized and/or
cropped to fit
this view.)
22
Large (1440+dp)
(Resized and/or
cropped to fit
this view.)
23
COMPONENTS
The figma Material 3 Design Kit was used to originally design the
components for this file and are reccommended for building out M3
components.
Some components have been customized beyond the colors and fonts
from the Material 3 Design kit and the Material theme builder styles. We
have marked these components as custom. Also we have generated what
the components would have looked like without customization.
This type of customization provides real world learning examples in the
app for developers.
Custom color styles
d w h a t M 3 offers you
Note
eyo n
c u s to m iz e componets b e n ts for accessib
lity.
If you o m p o n
y test these c
must carefull
24
Buttons (Light)
Custom color styles
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
25
Buttons (Dark)
Custom color styles
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
Enabled Hovered Focused Pressed
26
Icons Butons (Light)
Custom color styles
Custom color styles
27
Icons Butons (Dark)
Custom color styles
Custom color styles
28
Radio Buttons
Title
Text
Text
Title
Text
Text
29
Checkbox Buttons
Text
Text
Text
Text
30
Cards (Light)
Update headline
January 1, 2021 • [Link]
Topic Topic Topic Topic Topic
Author
Author
Update headline
Update headline
January 1, 2021 • [Link]
January 1, 2021 • [Link]
Topic Topic Topic Topic Topic
Include an image for each update, extracted
from the webpage or manually chosen.
Topic Topic Topic Topic Topic
31
Cards (Dark)
Update headline
January 1, 2021 • [Link]
Topic Topic Topic Topic Topic
Author
Author
Update headline
Update headline January 1, 2021 • [Link]
January 1, 2021 • [Link]
Topic Topic Topic Topic Topic
Include an image for each update, extracted
from the webpage or manually chosen.
Topic Topic Topic Topic Topic
32
Dialogs
Basic dialog title Basic dialog title
A dialog is a type of modal window that A dialog is a type of modal window that
appears in front of app content to appears in front of app content to
provide critical information, or prompt provide critical information, or prompt
for a decision to be made. for a decision to be made.
Enabled Enabled Enabled Enabled
33
Chips
Enabled Hovered Focused Pressed Pressed
Enabled Hovered Focused Pressed Disabled
Custom color styles
Enabled Hovered Focused Pressed Disabled
Enabled Hovered Focused Pressed Disabled
34
Dropdown Menus (Light)
Newest first Newest first Newest first
Most popular
Most recent
Most published
A-Z
Z-A
35
Dropdown Menus (Dark)
Newest first Newest first Newest first
Most popular
Most recent
Most published
A-Z
Z-A
36
Tabs
Topics People
Topics People
Topics People
Topics People
37
View Toggle
Compact view Expanded view
Compact view Expanded view
38
Video
Wear OS gets Compose - 5:33
Wear OS gets Compose - 5:33
39
Search Input
jetpack com
jetpack com
40
Topic Tags
Custom color styles
Topic Topic Topic Topic
Follow Unfollow Follow Unfollow
Browse topic Browse topic Browse topic Browse topic
Topic Topic Topic Topic
41
Topic List (Light)
Person Person
Topic Topic
Topic Topic
At vero eos et accusamus et iusto At vero eos et accusamus et iusto
odio dignissimos ducimus qui. odio dignissimos ducimus qui.
Topic Topic
At vero eos et accusamus et iusto At vero eos et accusamus et iusto
odio dignissimos ducimus qui. odio dignissimos ducimus qui.
42
Topic List (Dark)
Custom color styles
Person Person
Topic Topic
Topic Topic
At vero eos et accusamus et iusto At vero eos et accusamus et iusto
odio dignissimos ducimus qui. odio dignissimos ducimus qui.
Topic Topic
At vero eos et accusamus et iusto At vero eos et accusamus et iusto
odio dignissimos ducimus qui. odio dignissimos ducimus qui.
43
Place Holder Author Image
44
Featured Links
Link title
[Link]
Link title
[Link]
Link title
[Link]
Link title
[Link]
45
Navigation Bars (Light)
Custom color styles
For you Episodes Saved Interests
For you Episodes Saved Interests
For you Episodes Saved Interests
For you Episodes Saved Interests
For you Episodes Saved Interests
46
Navigation Bars (Dark)
Custom color styles
For you Episodes Saved Interests
For you Episodes Saved Interests
For you Episodes Saved Interests
For you Episodes Saved Interests
For you Episodes Saved Interests
47
Navigation Bar Alerts
Custom color styles
3 3
For you For you For you Episodes Saved Interests
Custom color styles
3 3
For you For you For you Episodes Saved Interests
48
Side Navigation Bar
Custom color styles Custom color styles
For you For you
Episodes Episodes
Saved Saved
Interests Interests
49
Switch
Custom color styles and component style
Custom color styles and component style
Switch text Switch text
Switch text Switch text
50
Top App Bar (Light)
Title
Title
Title
Title
51
Top App Bar (Dark)
Title
Title
Title
Title
52
Errors & Loading
Error and loading states should follow these sample designs.
53
Errors & Loading
54