What Uber's illustration guidelines cover

Uber's illustration guidelines set rules for how images, graphics, and visual elements should look and function across driver and rider communications. These guidelines exist so that every visual piece — whether it appears in the app, in emails, or in support materials — matches Uber's brand and works clearly on different screen sizes and devices.

The guidelines cover image file formats, resolution requirements, color standards, sizing for different contexts, and how illustrations should behave when users interact with them. They also specify which types of images work best for different purposes: some rules explore only to in-app graphics, while others cover print materials or web pages.

Understanding these rules matters if you create or submit visual content for Uber platforms, manage driver communications, or design materials that will appear alongside Uber branding. Following them prevents your images from appearing blurry, distorted, or misaligned on user devices.

Key Takeaways

  • Uber's guidelines specify exact file formats (usually PNG or SVG), minimum resolutions, and color profiles so images display consistently across phones, tablets, and web browsers.
  • Illustrations must meet size requirements that vary by context — a driver app icon needs different dimensions than a rider email header or a support article graphic.
  • Color standards include approved palettes, contrast ratios for readability, and rules about when to use gradients or transparency effects.
  • Images submitted for Uber platforms must follow accessibility standards, including alt text requirements and ensuring illustrations work for colorblind users.

File formats and technical specifications

Uber typically requires illustrations in PNG format for raster images (photographs or complex graphics) and SVG format for vector graphics (logos, icons, or straightforward illustrations that need to scale). PNG files preserve quality across different sizes, while SVG files scale infinitely without losing sharpness, which matters when the same icon appears on a phone screen and a large monitor.

Resolution requirements depend on where the image will appear. Images for mobile apps usually need to be provided at 1x, 2x, and 3x pixel densities — meaning a 100-pixel icon becomes three separate files at 100 pixels, 200 pixels, and 300 pixels wide. Web images typically need a minimum resolution of 72 DPI (dots per inch), though 96 DPI is standard for sharper display on modern screens.

File size matters too. Uber materials should be optimized so they load quickly in the app or on web pages. PNG files should be compressed without losing visible quality, and SVG files should have unnecessary code removed. If your illustration is larger than 500 KB, it likely needs optimization before submission.

Color standards and visual consistency

Uber maintains a specific color palette for all brand communications. Illustrations should use only approved colors from this palette unless there is a documented reason for variation. The palette includes primary brand colors, neutral grays for backgrounds and text, and accent colors for alerts or interactive elements.

Contrast ratios are legally required for accessibility. Text overlaid on illustrations must have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 points or larger). This ensures that riders and drivers with low vision or color blindness can still read the content. You can test contrast using free tools like WebAIM's contrast checker.

Illustrations should work for colorblind users, which means they cannot rely on color alone to convey information. If an illustration uses red to show an alert, it should also include an icon, pattern, or text label so the message is clear to someone who cannot see red. Gradients and transparency effects are allowed but should not be so subtle that they disappear on older devices or in bright sunlight.

Sizing requirements for different contexts

The same illustration often appears in multiple places — in the app, in emails, on web pages — and each context has different size requirements. A driver profile photo might be 200 pixels square in the app but 400 pixels square on a desktop website. Uber's guidelines specify exact dimensions for common uses.

In-app illustrations typically follow these ranges: small icons (16–24 pixels), standard icons (32–48 pixels), and larger graphics (128–256 pixels or more). Email headers usually need to be at least 600 pixels wide to display properly on desktop and tablet screens. Web article images should be at least 800 pixels wide for desktop viewing.

Illustrations should never be stretched or squeezed to fit a space. If an image is the wrong size, it should be resized proportionally or replaced with a version created at the correct dimensions. Distorted images look unprofessional and can confuse users about what they are looking at.

Accessibility and alt text requirements

Every illustration used in Uber communications must have alt text — a short text description that screen readers read aloud to users who are blind or have low vision. Alt text should describe what the illustration shows and its purpose in context, not just say "image" or "graphic."

Good alt text is specific and concise. Instead of "driver illustration," write "driver holding a phone with a five-star rating displayed." Instead of "map," write "pickup location marked on a city map." Alt text should be 125 characters or fewer and should not repeat information already in nearby text.

Illustrations should also be tested with actual screen readers to may support the alt text makes sense when read aloud. Some illustrations are purely decorative — they add visual interest but do not convey information — and these should be marked as decorative so screen readers skip them.

Interactive and animated illustrations

Illustrations that move or respond to user actions (animations, hover effects, or interactive graphics) must follow additional rules. Animations should not flash more than three times per second, as faster flashing can trigger seizures in users with photosensitive epilepsy. This is a legal requirement under accessibility standards.

Animated illustrations should have a way to pause or stop them. Users should not be forced to watch an animation loop repeatedly. If an animation is essential to understanding the content, there should also be a static version available for users who have animations disabled in their device settings.

Interactive illustrations — ones that respond when a user taps or hovers — should have clear visual feedback. When a user touches an interactive element, something should change visibly: a color shift, a highlight, or a state change. This feedback should happen within 100 milliseconds so it feels responsive.

Submission and review process

Illustrations intended for Uber platforms usually go through a review process before they appear to drivers or riders. The review checks that files meet technical specifications, that colors match the approved palette, that alt text is present and accurate, and that the illustration serves its intended purpose clearly.

When you submit an illustration, include the source file (the editable version, not just the final PNG or SVG), a description of where it will be used, and any context about what it should communicate. If the illustration is part of a larger project, include mockups showing how it will appear in context.

Review timelines vary. straightforward icon updates might be approved within days, while new illustrations for major features can take weeks. Resubmissions after feedback usually move faster than initial submissions.

Common mistakes and how to avoid them

The most common mistake is submitting illustrations at the wrong size or resolution. Always check the guidelines for the specific context before you create or resize an image. A 100-pixel icon will look blurry on a phone screen that expects a 300-pixel version.

Another frequent issue is using colors that are not in the approved palette. Even small deviations — a slightly different shade of blue or a custom green — can break visual consistency across the app. Use a color picker tool to match approved colors exactly, or request a new color addition if the palette does not include what you need.

Missing or vague alt text is also common. "Image" or "graphic" tells screen reader users nothing. Spend a few seconds writing alt text that describes what the illustration shows and why it matters in that location.

Frequently Asked Questions

What if I need a color that is not in Uber's approved palette?

Request the new color through your design or product team. Provide a reason for the addition — for example, a new alert type that requires a distinct color. New colors are added to the palette periodically, but they go through a review process to may support they work with existing colors and meet contrast requirements.

Can I use photographs instead of illustrations?

Yes, but they must follow the same technical specifications: correct file format, resolution, and size for the context. Photographs should be optimized for file size and should include alt text describing what they show. Some Uber communications prefer illustrations for consistency, so check the guidelines for your specific use case.

Do illustrations need to work on very old phones or devices?

Uber's guidelines typically target devices from the past five to seven years. Very old devices may not support certain features like transparency or advanced SVG effects, but illustrations should still display and function on older phones, even if they look slightly different. Test on older devices if your illustration uses advanced features.

What happens if I submit an illustration that does not meet the guidelines?

The review team will return it with specific feedback about what needs to change — for example, "resolution too low" or "alt text missing." You can then revise and resubmit. Resubmissions are usually faster than initial reviews because the team already understands the context.

Are there different guidelines for driver-facing versus rider-facing illustrations?

The technical specifications (file format, resolution, color standards) are the same. However, the content and style may differ — illustrations for drivers might show vehicle-related scenarios, while rider illustrations might show pickup or payment flows. Check the specific guidelines for the audience and context you are creating for.