What is this Uber email template?
This template is a pixel-perfect Figma recreation of Uber's transactional email design language — clean, minimal, and immediately recognizable. It covers the visual system Uber uses across receipt emails, trip confirmations, and account notifications: tight typography, monochrome palette, and a clear single-column layout that works perfectly across all email clients.
Duplicate the Figma file, customize with your brand, and export production-ready HTML in one click using the Marka Email Generator plugin.
Why Uber's email design works
Uber's emails are a masterclass in transactional design. Three principles drive the whole system:
Radical clarity Every email has one job. The layout doesn't compete for attention — the primary information (trip cost, pickup details, account change) is front and center, with supporting content pushed below. There's no decorative imagery, no sidebar, nothing that adds visual noise.
Typography-first hierarchy Uber relies almost entirely on type weight and size to create hierarchy. A large bold number or action item at the top, smaller supporting text below — no color blocks or image headers needed. This makes the emails load fast and render cleanly in every client, including Outlook.
Monochrome with a single accent Black, white, and one accent — usually the Uber black or a system green for confirmations. This restraint makes the CTA button pop without effort.
How to use this template in Figma
- Duplicate the Figma file from the community link above
- Replace the placeholder logo with your company logo
- Update the primary text content (headline, body copy, amount/detail fields)
- Adjust the CTA button text and color to match your brand
- Open Marka Email Generator plugin and select the frame
- Click Export HTML — paste the output into your email platform
The template is built with Auto Layout throughout, so Marka generates fully responsive HTML that collapses to a single column on mobile automatically.
Customization tips
Keep the single-column layout Uber's template works because it never tries to do too much. If you're adapting this for a different brand, resist the urge to add columns or image grids — the minimal approach is what makes it scannable on mobile.
Use the typography scale as-is The size relationships between headline, subtext, and footer text are calibrated for readability. Change the font and colors, but keep the scale.
Receipt-style data tables If you're building a receipt or order confirmation, use the table rows already in the template. They render correctly in Outlook without any custom code — Marka handles the table-based HTML output automatically.
Frequently asked questions
Can I use this for my own transactional emails? Yes. This is an inspired-by template, not a copy of Uber's actual email assets. It uses the same visual approach — you adapt it for your brand by swapping logo, colors, and content.
Does it work in Outlook? Yes. Marka exports table-based HTML that renders correctly in Outlook 2016, 2019, 2021, and Outlook.com.
Can I add dynamic variables for my email platform?
Yes. Type your platform's variable syntax directly into the Figma text layers (e.g. {{order_total}} for Klaviyo, {{ .Amount }} for Supabase, {{{amount}}} for SendGrid). Marka preserves them in the exported HTML.
