Sam

Wanna do lunch?

Sam
Wanna do lunch?

Sam
Wanna do lunch?

Sam
Wanna do lu

632

632

632

Sam
Wanna do lunch?

Sam
Wanna do lunch?

Sam
Wanna do lunch?

Ok Google

Interactive mode with hotword

Interactive mode while device is

being charged

Ambient mode while device is being

charged

8 DP BLOCK
32 DP BLOCK

12 DP
2 DP
52 DP

632

8 DP
14 DP
14 DP

Ok Google

632
Ok Google

632

104 DP
MAX
HEIGHT
12 DP

Google Custom
Hotword + Indicator Position

Hotword appears when entering

interactive mode and disappears
after 3 seconds

Ambient mode while device is being

charged

8 DP BLOCK
24 DP BLOCK

Snippet text
ROBOTO LIGHT 16 SP

12 DP

8 DP

12 DP

8 DP

14 DP

14 DP

Ok Google
40 DP
MIN CARD

Snippet text

CENTER

Position: MIDDLE

14 DP
14 DP

Ok Google

96 DP

118 DP

Ok Google

LEFT

8 DP

36 DP

64 DP

86 DP

40 DP
MIN CARD

12 DP

RIGHT

Snippet text

LEFT

CENTER

Position: BOTTOM

104 DP
MAX
HEIGHT
12 DP

RIGHT

LEFT

CENTER

Position: TOP

RIGHT

8 DP BLOCK

14 DP

16 DP

12 DP
14 DP

Ok Google

Ok Google

18 DP

COLOR #000
OPACITY 30%

LEFT

System indicator background

protection.

8 DP BLOCK

64 DP ICON
ASSET SIZE

48 DP
INTERIOR

24 DP

24 DP

104 DP

104 DP

Big actions use big icons.

ic_full_*

Labels with two lines

look like this

Big action buttons cast a dark

scrim over the background.
Overlay #000 at 50% opacity.

Archive

12 DP

Reply

12 DP
16 DP

16 DP

16 DP

16 DP

Labels with two lines

look like this

Label with one line

ROBOTO LIGHT 16 SP

ROBOTO LIGHT 20 SP

104 DP

BLUE CIRCLE
COLOR #2878ff
PRESSED
COLOR #2955C5

8 DP BLOCK

632
Sam
Wanna do lunch?
12 DP
8 DP
NEXT PAGE
CURRENT PAGE

Reply

8 DP BLOCK

Regular peek card

Short peek card with custom

clockface

632
Sam Blitzstein
Wanna do lunch?
12 DP

632
40 DP

8 DP

Sam Blitzstein

12 DP

8 DP

8 DP 8 DP

Sam Blitzstein
ROBOTO LIGHT 16 SP
COLOR #434343

8 DP BLOCK

On long press, grow dot

outward from center.

ic_full_cancel

Apply 50% black on top of

background.

104 DP

RED CIRCLE
COLOR #ff5151
PRESSED
COLOR #b83120

Press state for quit button.

8 DP BLOCK

Blue Bird
Standard two line
text notication

Fire
Standard two line
text notication

Snapper
Standard two line
text notication

OVERLAY
20% #000

OVERLAY
20% #000

OVERLAY
20% #000

100% DOMINANT COLOR

100% DOMINANT COLOR

100% DOMINANT COLOR

8 DP BLOCK

Artist

32 DP ICON

ROBOTO LIGHT CONDENSED 20 SP

COLOR #a2a2a2

Artist one line only

Track title on one line

Artist one line only

Track title on two lines max

12 DP
12 DP
2 DP
12 DP

20 DP

Naomi Pilgrim
Money
12 DP

20 DP
8 DP

Track title

12 DP

2 DP

ROBOTO LIGHT CONDENSED 16 SP

COLOR #434343

20 DP

Naomi Pilgrim
Money Money
(Remix)
12 DP

12 DP
8 DP

12 DP

Naomi Pilgrim
Money Money
(Remix)

8 DP BLOCK

64 DP ICON
ASSET SIZE

48 DP
INTERIOR

24 DP

24 DP

104 DP

104 DP

Big actions use big icons.

ic_full_*

Next

Big action buttons cast a dark

scrim over the background.
Overlay #000 at 50% opacity.

Previous

12 DP

Thumbs up

12 DP
16 DP

16 DP

16 DP

16 DP

Label with one line

ROBOTO LIGHT 20 SP

104 DP

BLUE CIRCLE
COLOR #2878ff
PRESSED
COLOR #2955C5

36 DP

+3 more

12 DP

ROBOTO LIGHT 14 SP
#434343

8 DP BLOCK

32 DP ICON

Dismissable card added to

stack.
ic_alert_airplanemode

When breaking connection with

your phone, vibrate and dosplay
this card. ic_alert_nophone

632
12 DP

12 DP

20 DP

Airplane mode
Enabled
12 DP

8 DP

20 DP

COLOR #434343

632

632

Dont forget
your phone!

Battery is at
20%

12 DP

Roboto Condensed Light

20 SP

When battery is at 20%

ic_alert_lowbattery

24 DP INTERIOR

32 DP ICON

8 DP BLOCK

32 DP APP ICON

12 DP
16 DP
16 DP
12 DP

12 DP

12 DP

12 DP

12 DP

16 DP

12 DP

16 DP

8 DP BLOCK

32 DP APP ICON

Card title
ROBOTO CONDENSED LIGHT
SIZE 20 SP

Card Body
12 DP
4 DP
12 DP
4 DP

12 DP

Card title

Large 40
12 DP

12 DP

16 DP

ROBOTO CONDENSED LIGHT

SIZE 20 SP

Card title
Cras nec enim in
felis vulputate sed
malesuada a vitae
blandit ipsum.

Abc

PRIMARY TEXT COLOR

#434343

Abc
12 DP

16 DP

SECONDARY TEXT COLOR

#a2a2a2

8 DP BLOCK

32 DP ICON

24 DP INTERIOR

32 DP ICON

Header
ROBOTO LIGHT CONDENSED 20 SP
COLOR #a2a2a2
12 DP
2 DP
12 DP

12 DP

Navigate to

32 DP

30th and Mission

12 DP

Secondary

Navigate to
30th and Mission

8 DP

12 DP

ROBOTO LIGHT CONDENSED 16 SP

COLOR #434343

48 DP
INTERIOR

64 DP ICON
ASSET SIZE

104 DP

GREEN CIRCLE
COLOR #1ce8b5

8 DP BLOCK

96 DP

632

632

632

Austin Robison
Standard two line
text notication

Austin Robison
Standard three line
text notication will
look just like this

Austin Robison
Standard four line
text notication will
look just like this
example here

If a card is any taller than

96 DP we have to push a bit
of it below the fold.

96 DP

Every line of text adds 24 DP

to the height of the card.
Oh man thats so cool!

96 DP

8 DP BLOCK

96 DP

9 lines of text, or 240 DP is

safe. This is the max size
before we need to truncate.

Taller than 240 DP or 9 lines

of text? We fade you out at the
bottom and truncate you.

632

632

632

Austin Robison
Standard ve line
text notication will
look just like this
example here that
contains ve lines

Austin Robison
This is an example
of the maximum
card height before
we truncate, fanny
pack umami kitsch
authentic pop-up
bicycle rights wolf
moon cardigan

Austin Robison
This is an example
of a card exceeding
the max height and
truncating the card.
Tapping this card
will expand the
card and reveal
more text

96 DP

96 DP

8 DP BLOCK

32 DP APP ICON

632
28 DP
28 DP
24 DP
16 DP

632

Cond Light 20
Cond Light 20
gluten-free vneck

12 DP

Header
Body

12 DP
96 DP

16 DP
COLOR #a2a2a2
COLOR #434343

Austin Robison
Standard four line
text notication will
look just like this
example here

632
12 DP
28 DP
24 DP
24 DP
24 DP
16 DP

Austin Robison
This is an example
of a card exceeding
the max height and
truncating the card.
Tapping this card
will expand the
card and reveal
more text

28 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
16 DP

8 DP BLOCK

This just so happens to be the

smallest card youll ever see.
Imagine that. Its only 72 DP!

632
28 DP
72 DP

Cond Light 20
Cond Light 20 SP

12 DP
28 DP
16 DP

At 96 DP, this sucker is the

tallest card that will ever float
on your home screen.

632

632

Austin Robison
Standard one line!

Austin Robison
Standard two line
text notication