22
Sam Wanna do lunch? Sam Wanna do lunch? Sam Wanna do S W

Sam Wanna do lunch? - commondatastorage.googleapis.com · Sam Wanna do lunch? 6 ... System indicator background protection. 8 DP BLOCK. ... Fire Standard two line text notification

Embed Size (px)

Citation preview

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

“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”

LEFT

14 DP

14 DP 16 DP

18 DP

COLOR #000OPACITY 30%

12 DP

System indicator background protection.

8 DP BLOCK

ArchiveLabels 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

Label with one lineLabels with two lines

look like this

Reply

SamWanna do lunch?

632

CURRENT PAGE

NEXT PAGE

12 DP

8 DP

8 DP BLOCK

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

Sam Blitzstein

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)

Naomi PilgrimNaomi Pilgrim

Money Money (Remix)

Naomi Pilgrim

ROBOTO LIGHT CONDENSED 20 SPCOLOR #a2a2a2

ROBOTO LIGHT CONDENSED 16 SPCOLOR #434343

12 DP

2 DP

12 DP 12 DP

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

Artist

Track title

PreviousNext 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

Label with one line

+3 more

ROBOTO LIGHT 14 SP#434343

12 DP

36 DP

Airplane modeEnabled

Don’t forgetyour phone!

Battery is at20%

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

Roboto Condensed Light20 SP

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

Card title

Card Body

PRIMARY TEXT COLOR#434343

SECONDARY TEXT COLOR#a2a2a2

ROBOTO CONDENSED LIGHTSIZE 20 SP

ROBOTO CONDENSED LIGHTSIZE 20 SP

Abc

Abc

30th and MissionNavigate 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

Header

Secondary

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

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

HeaderBody

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.