API IN-APP DESIGN GUIDELINES03.17.15

uber.com 21455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

TABLEOFCONTENTS

Introduction

How to Attribute Uber

How to Reference Uber Products

How to Implement Uber Buttons

How to Use the Uber Status Bar

How to Display “Rides by Uber”

How to Use the Uber Badge

How to Use Other Uber Brand Assets

3

4

5

6

7

8

9

10

uber.com 31455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

Our brand is more than the Uber name and logo—it’s our values and our reputation. And that’s why the details matter so much to us. Following these design guidelines consistently within your app and adhering to the policies described in our Terms of Use will providethe best results from the Uber brand.

INTRODUCTION

uber.com 41455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

HOW TOATTRIBUTEUBER

Your app is unique, and itsbranding should reflect that.

DO

• Use the phrase “Rides by Uber” to explain the integration

DON’T

• Include “Uber” as part of your app’s name• Include any Uber graphic element in your app’s branding• Suggest that Uber promotes or endorses your app

uber.com 51455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

HOW TOREFERENCEUBERPRODUCTS

Use the product display name exactly as returned from the Products API endpoint. Don’t call Uber products anything other than their approved product names.

uber.com 61455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

HOW TOIMPLEMENTUBER BUTTONS

The Uber buttons should be used to introduce the Uber experience within your app.

Ride there with Uber

Section Title

Button label

Button label

Button label

Paragraph Title

I will build something wonderful with the Uber

Request endpoint. I will build something

wonderful with the Uber Request endpoint.

Label Name $12.98

Label Name $12.98

Get a ride

Section Title

Button

Section Title

Button label aenean

Button label venenatis

Ride there with Uber

Button label condimentum

Paragraph Title

I will build something wonderful with the

Uber Request endpoint. I will build something

wonderful with the Uber Request endpoint.

I will build something wonderful with the Uber

Request endpoint.

Section Title

Get a ride Button label Button label

FULL WIDTH

Use this option when you need astand-alone button within the context of a calendar event or address.

HALF WIDTH

Use this option when you need a stand-alone button and the full width version doesn’t fit or make sense.

LIST VIEW

Add this button to a list of other actions a user can take.

SMALL BUTTON

This option should only be usedif our full width button doesn’t work with your design.

uber.com 71455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

HOW TOUSE THE UBERSTATUS BAR

Section Title

Paragraph Title

I will build something wonderful with the Uber

Request endpoint. I will build something

wonderful with the Uber Request endpoint.

I will build something wonderful with the Uber

Request endpoint. I will build something

wonderful with the Uber Request endpoint.

Your Uber is arriving now

The Uber status bar allows your users to see where they are in the ride flow without leaving your app.

DO

• Only show the status bar when the user is not on the map view

• Use the Uber Badge with the status message• Give emphasis to the “Arriving Now” state

by animating or changing the color of the status bar

uber.com 81455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

HOW TODISPLAY “RIDESBY UBER”

Be sure to attribute the integration to Uber. Use the phrase “Rides by Uber” along with the Uber badge to provide context for your users.

RIDES BY UBER

RIDES BY UBER

Use the grey lockup ondark backgrounds.

Use the black lockup onlight backgrounds.

uber.com 91455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

HOW TOUSE THEUBER BADGE

The Uber badge has beendesigned for maximum legibility,brand recognition, and impact.

DO

• Maintain clear space around the Uber badge

DON’T

• Alter the Uber badge in any way, including the color, opacity, or proportion

• Use the Uber badge and the Uber logotype together• Use the U from the Uber badge as a stand-alone asset• Alter the size of PNG files

78 px

70 px

64 px

58 px

50 px

44 px

36 px

28 px

22 px

16 px

PNG

The Uber badge is available in10 sizes. Do not alter the dimensionsor create a custom size.

SVG

The SVG files of the Uber badgecan be resized as long as theyremain proportional.

The clear space around the logotype is determined by the width of the logotype.

100%

Clear space

Clear space

Cle

ar s

pac

e

Cle

ar s

pac

e

62%

uber.com 101455 Market St.San Francisco, CA 94103

Uber Technologies, Inc. API Guidelines03.16.15

HOW TO USE OTHER UBER BRAND ASSETS

Do not alter any Uber brand asset, including the color, size, proportion, or opacity.

uberX uberXL uberBLACK SUV

UBER CARS ICONS

Use the appropriate car icons for the Uber products offered in your app.

These are the U.S. product names. Check uber.com/cities for your local equivalent.

DROPPED PIN

Users can identify theirexact location with the pin.