“Ok Google”1232

“Ok Google”

1232

8 DP BLOCK

36 DP APP ICON

14 DP INDICATOR

ROBOTO THIN 52 SP

ROBOTO LIGHT 16 SP

4 DP BLOCK

40 DP 24 DP

12 DP

16 DP

92 DP

26 DP

218 DP

240 DP

MAX PEEK HEIGHT88 DP

PADDING FROMTOP OF CARD

32 DP

Circle position ONE

“Ok Google”

“Ok Google”

Snippet text

Snippet text

14 DP INDICATOR

8 DP BLOCK

28 DP APP ICON

ROBOTO LIGHT 16 SP

ROBOTO LIGHT 18 SP

4 DP BLOCK

40 DP 40 DP8

16 DP38 DP

218 DP

240 DP

MIN PEEK HEIGHT52 DP

Snippet text

Circle position TWO

“Ok Google”

“Ok Google”

Snippet text

40 DP 40 DP8

218 DP

MIN PEEK HEIGHT52 DP

14 DP INDICATOR

8 DP BLOCK

28 DP APP ICON

ROBOTO LIGHT 16 SP

ROBOTO LIGHT 18 SP

4 DP BLOCK

84 DP106 DP

240 DP

Snippet text

Circle position THREE

“Ok Google”

“Ok Google”

Snippet text

40 DP 40 DP8

218 DP

MIN PEEK HEIGHT52 DP

14 DP INDICATOR

8 DP BLOCK

28 DP APP ICON

ROBOTO LIGHT 16 SP

ROBOTO LIGHT 18 SP

4 DP BLOCK

116 DP138 DP

218 DP

240 DP

SamWanna do lunch?

SamWanna do lunch?

SamWanna do lunch?

SamWanna do lunch?

SamWanna do lunch?

632

SamWanna do lunch?

632

SamWanna do lunch?

632“Ok Google”

Ambient mode while device is being charged

Interactive mode while device is being charged

Interactive mode with hotword

“Ok Google” “Ok Google”632 632 632

104 DPMAXHEIGHT

12 DP

2 DP

52 DP14 DP14 DP

8 DP

Ambient mode while device is being charged

Google CustomHotword + Indicator Position

Hotword appears when entering interactive mode and disappears after 3 seconds

12 DP

8 DP BLOCK

32 DP BLOCK

Snippet text

“Ok Google”

“Ok Google”

“Ok Google”

Snippet text Snippet text

ROBOTO LIGHT 16 SP

Position: BOTTOMPosition: MIDDLE Position: TOP

12 DP

86 DP

8 DP

8 DP BLOCK

24 DP BLOCK

CENTER RIGHT

14 DP

14 DP96 DP

40 DPMIN CARD

14 DP14 DP

12 DP

LEFT CENTER RIGHTLEFT CENTER RIGHTLEFT

40 DPMIN CARD

36 DP

118 DP

64 DP

104 DPMAX HEIGHT

12 DP 12 DP8 DP 8 DP

Snippet text

“Ok Google”“Ok Google”

“Ok Google”“Ok Google”

LEFT

14 DP

14 DP 16 DP

18 DP

22 DP

COLOR #000OPACITY 30%

12 DP

System indicator background protection.

8 DP BLOCK

Archive

Label with one line

Labels with two lineslook like this

Labels with two lineslook like this

Reply

ROBOTO LIGHT 16 SP ROBOTO LIGHT 20 SP

16 DP

12 DP

104 DP104 DP

16 DP16 DP 16 DP

24 DP 24 DP

12 DP

8 DP BLOCK

64 DP ICONASSET SIZE

Big action buttons cast a dark scrim over the background. Overlay #000 at 50% opacity.

Big actions use big icons.ic_full_*

BLUE CIRCLECOLOR #2878ff

PRESSEDCOLOR #2955C5

104 DP

48 DPINTERIOR

Reply

SamWanna do lunch?

632

CURRENT PAGE

NEXT PAGE

12 DP

8 DP

8 DP BLOCK

Sam Blitzstein

Sam Blitzstein

Sam BlitzsteinWanna do lunch?

632632

ROBOTO LIGHT 16 SPCOLOR #434343

40 DP

Regular peek card Short peek card with custom clockface

12 DP

8 DP BLOCK

12 DP 8 DP

8 DP

8 DP

8 DP

8 DP BLOCK

On long press, grow dot outward from center.

Apply 50% black on top of background.

Press state for quit button.

RED CIRCLECOLOR #ff5151ic_full_cancelPRESSEDCOLOR #b83120

104 DP

100% DOMINANT COLOR

OVERLAY20% #000

100% DOMINANT COLOR

OVERLAY20% #000

100% DOMINANT COLOR

OVERLAY20% #000

Blue BirdStandard two line text notification

FireStandard two line text notification

SnapperStandard two line text notification

8 DP BLOCK

MoneyMoney Money (Remix)

Artist

Track title

Naomi PilgrimNaomi Pilgrim

Money Money (Remix)

Naomi Pilgrim

ROBOTO LIGHT CONDENSED 20 SPCOLOR #a2a2a2

ROBOTO LIGHT CONDENSED 16 SPCOLOR #434343

COLOR #02a8f3

12 DP

2 DP

12 DP 12 DP

COLOR #02a8f3OPACITY 50%

HEIGHT 2 DPINSET ON CARD

8 DP 12 DP12 DP 8 DP 12 DP

20 DP

20 DP20 DP

Artist one line onlyTrack title on two lines max

Artist one line onlyTrack title on one line

8 DP BLOCK 32 DP ICON

12 DP

12 DP

2 DP

PreviousNext

Label with one line

Thumbs up

ROBOTO LIGHT 20 SP

16 DP

12 DP

104 DP104 DP

16 DP16 DP 16 DP

24 DP 24 DP

12 DP

8 DP BLOCK

64 DP ICONASSET SIZE

Big action buttons cast a dark scrim over the background. Overlay #000 at 50% opacity.

Big actions use big icons.ic_full_*

BLUE CIRCLECOLOR #2878ff

PRESSEDCOLOR #2955C5

104 DP

48 DPINTERIOR

+3 more

ROBOTO LIGHT 14 SP#434343

12 DP

36 DP

Airplane modeEnabled

Don’t forgetyour phone!

Battery is at20%

Roboto Condensed Light20 SP

632 632 632

32 DP ICON24 DP INTERIOR

COLOR #434343

12 DP

12 DP

8 DP12 DP 12 DP

20 DP

20 DP

Dismissable card added to stack.ic_alert_airplanemode

When breaking connection with your phone, vibrate and dosplay this card. ic_alert_nophone

When battery is at 20%ic_alert_lowbattery

8 DP BLOCK 32 DP ICON

32 DP APP ICON

12 DP16 DP16 DP

12 DP

12 DP 12 DP

12 DP

12 DP

16 DP 16 DP12 DP

8 DP BLOCK

Card title

Card Body

PRIMARY TEXT COLOR#434343

SECONDARY TEXT COLOR#a2a2a2

ROBOTO CONDENSED LIGHTSIZE 20 SP

ROBOTO CONDENSED LIGHTSIZE 20 SP

Abc

Abc

Card title

Card title

Large 40

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

32 DP APP ICON

12 DP

12 DP

4 DP

4 DP

16 DP12 DP

12 DP

12 DP

16 DP12 DP

8 DP BLOCK

30th and Mission

Header

Secondary

Navigate to 30th and MissionNavigate to

ROBOTO LIGHT CONDENSED 20 SPCOLOR #a2a2a2

ROBOTO LIGHT CONDENSED 16 SPCOLOR #434343

12 DP

2 DP

12 DP

8 DP 12 DP12 DP

12 DP

32 DP

8 DP BLOCK 32 DP ICON

32 DP ICON24 DP INTERIOR

64 DP ICONASSET SIZE

GREEN CIRCLECOLOR #1ce8b5104 DP

48 DPINTERIOR

Austin RobisonStandard two line text notification

Austin RobisonStandard three line text notification will look just like this

Austin RobisonStandard four line text notification will look just like this example here

632 632 632

96 DP96 DP 96 DP

8 DP BLOCK

Every line of text adds 24 DP to the height of the card.

Oh man that’s so cool!

If a card is any taller than 96 DP we have to push a bit

of it below the fold.

Austin RobisonStandard five line text notification will look just like this example here that contains five lines

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

Austin RobisonThis 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

632 632 632

96 DP 96 DP 96 DP

8 DP BLOCK Taller than 240 DP or 9 lines of text? We fade you out at the

bottom and truncate you.

9 lines of text, or 240 DP is safe. This is the max size

before we need to truncate.

Cond Light 20Cond Light 20gluten-free vneck

HeaderBody

Austin RobisonStandard four line text notification will look just like this example here

Austin RobisonThis 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

632 632 63228 DP

96 DP28 DP

24 DP

16 DP

12 DP

12 DP

8 DP BLOCK 32 DP APP ICON

COLOR #a2a2a2

COLOR #434343

16 DP

12 DP

28 DP 28 DP

24 DP

24 DP

24 DP

24 DP

24 DP

24 DP

24 DP

24 DP

24 DP

24 DP

16 DP

16 DP

Austin RobisonStandard two line text notification

Cond Light 20Cond Light 20 SP

Austin RobisonStandard one line!

632 632 632

28 DP

28 DP

16 DP

12 DP72 DP

8 DP BLOCK

This just so happens to be the smallest card you’ll ever see. Imagine that. It’s only 72 DP!

At 96 DP, this sucker is the tallest card that will ever float on your home screen.