API IN-APP DESIGN GUIDELINES

03.17.15

Uber Technologies, Inc.

TABLE
OF
CONTENTS

API Guidelines
03.16.15

1455 Market St.

San Francisco, CA 94103

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

10

uber.com

Uber Technologies, Inc.

INTRODUCTION

API Guidelines
03.16.15

1455 Market St.

San Francisco, CA 94103

uber.com

Our brand is more than the Uber name and

logoits our values and our reputation. And
thats 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 provide
the best results from the Uber brand.

Uber Technologies, Inc.

HOW TO
ATTRIBUTE
UBER

API Guidelines
03.16.15

1455 Market St.

San Francisco, CA 94103

Your app is unique, and its

branding should reflect that.
DO
Use the phrase Rides by Uber to explain the integration
DONT
Include Uber as part of your apps name
Include any Uber graphic element in your apps branding
Suggest that Uber promotes or endorses your app

uber.com

Uber Technologies, Inc.

HOW TO
REFERENCE
UBER
PRODUCTS

API Guidelines
03.16.15

1455 Market St.

San Francisco, CA 94103

Use the product display name exactly

as returned from the Products API
endpoint. Dont call Uber products
anything other than their approved
product names.

uber.com

Uber Technologies, Inc.

HOW TO
IMPLEMENT
UBER BUTTONS

API Guidelines
03.16.15

Section Title

1455 Market St.

San Francisco, CA 94103

Section Title

uber.com

Section Title

The Uber buttons should be

used to introduce the Uber
experience within your app.

Section Title

Get a ride

Paragraph Title

Button label

I will build something wonderful with the Uber

Button label

Button label

Button label aenean

Request endpoint. I will build something

Button label

Button label

wonderful with the Uber Request endpoint.

Label Name

$12.98

Label Name

$12.98

Button label venenatis

Paragraph Title

Button label condimentum

I will build something wonderful with the

Uber Request endpoint. I will build something

Ride there with Uber

Get a ride

Button

Ride there with Uber

wonderful with the Uber Request endpoint.

I will build something wonderful with the Uber
Request endpoint.

FULL WIDTH

HALF WIDTH

LIST VIEW

SMALL BUTTON

Use this option when you need a

stand-alone button within the context
of a calendar event or address.

Use this option when you need a standalone button and the full width version
doesnt fit or make sense.

Add this button to a list of other

actions a user can take.

This option should only be used

if our full width button doesnt
work with your design.

Uber Technologies, Inc.

HOW TO
USE THE UBER
STATUS BAR

API Guidelines
03.16.15

Your Uber is arriving now

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.

1455 Market St.

San Francisco, CA 94103

uber.com

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 Technologies, Inc.

HOW TO
DISPLAY RIDES
BY UBER

API Guidelines
03.16.15

1455 Market St.

San Francisco, CA 94103

uber.com

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

Use the grey lockup on

dark backgrounds.

RIDES BY UBER

Use the black lockup on

light backgrounds.

API Guidelines
03.16.15

1455 Market St.

San Francisco, CA 94103

PNG

SVG

The Uber badge is available in

10 sizes. Do not alter the dimensions
or create a custom size.

The SVG files of the Uber badge

can be resized as long as they
remain proportional.

The Uber badge has been

designed for maximum legibility,
brand recognition, and impact.

uber.com

DO
78 px

Maintain clear space around the Uber badge

DONT

64 px

58 px

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

50 px

44 px

36 px

28 px

Clear space

Clear space

70 px

Clear space

HOW TO
USE THE
UBER BADGE

Uber Technologies, Inc.

Clear space

22 px
62%

16 px

100%

The clear space around the

logotype is determined by the
width of the logotype.

Uber Technologies, Inc.

HOW TO USE
OTHER UBER
BRAND ASSETS
Do not alter any Uber brand
asset, including the color, size,
proportion, or opacity.

API Guidelines
03.16.15

1455 Market St.

San Francisco, CA 94103

uber.com

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 their
exact location with the pin.

uberX

uberXL

uberBLACK

SUV

10