julio.io

Amex Dark Mode

Dark mode American Express mobile app screens

Role

Lead UX Designer

Scope

  • Mobile design systems
  • Color tokens
  • Accessibility
  • Data visualization
  • Brand expression
Product
Amex Consumer Mobile App | iOS & Android
Team
American Express Mobile UX
Year
2020

Summary

What began as a need for more data-visualization colors became an opportunity to rebuild the American Express mobile color system and deliver one of its most requested features. I led a semantic token system for text, icons, surfaces, brand expression, and chart data that enabled accessible dark mode without reducing the app to generic black and gray. More than 40% of users adopted dark mode in its first year.

Challenge

Support dark mode and richer data visualization across a large consumer app without losing accessibility, hierarchy, or the American Express brand.

Outcome

  • 40%+User adoption within the first year.

My Contribution

  • Created a semantic color-token system that worked across light and dark themes.
  • Embedded accessibility requirements into the structure of the color system.
  • Established a branded approach to dark mode and data visualization instead of relying on generic platform defaults.

Base Palette

I began by extending our current color system into multiple shades and tints to make more colors available while staying within our brand guidelines.

Original American Express mobile app color palette
The original color palette
Expanded semantic color palette for American Express dark mode
The extended palette based on the original

Base Palette

I began by extending our current color system into multiple shades and tints to make more colors available while staying within our brand guidelines.

Typography and icon color documentation for American Express dark mode

Type & Icons

Given that accessibility standards are higher for text than graphic elements, I broke the colors up into two categories: text/icons and layout.

Layout color examples for American Express dark mode screens

Layout colors

Semantic color families for American Express dark mode

Color Families

An initial idea for a visualization color system grouped into three families:

  1. General Data
  2. Card Member Activity
  3. Merchant Categories
Product color mappings for American Express dark mode

Colors by product

  1. Platinum Card
  2. Gold Card
  3. Green Card

I explored using patterns to extend values beyond colors.

Profile screen color documentation for American Express dark mode

Profile Colors

Data visualization color documentation for American Express dark mode

General Data Colors

Spend category color examples for American Express dark mode

Spend Category Colors

Production American Express dark mode mobile screen

In Product

I broke with the HIG and Material dark mode guidelines to leverage our brand colors rather than simply using a black and gray palette.

Outcome

Dark mode was a success with over 40% user adoption in the first year. American Express set a precedent by being the first major financial institution to implement dark mode in a mobile app, a great step forward for accessibility and toward reducing eye strain for our customers.