Reverse-Engineering the iPhone X Home Indicator Color

Nathan Gitter
Dec 29, 2017 · 13 min read
Home indicator starts light, then a share sheet passing makes it dark.

Home Indicator Basics

https://www.apple.com/iphone-x/

The Home Indicator’s Purpose

It doesn’t take a UI designer to see something is wrong here.

Part 1 — The Beginning

Some home indicator color examples from my Stack Overflow answer.

Part 2 — The Plot Thickens

Observation #1: Multiple Colors

If you look close enough, you can see the transition from gray to black. (iOS simulator)
Watch the home indicator’s color change as the white view passes underneath. (iOS simulator)

Observation #2: Same Background, Different Home Indicator Color

Home indicator starts light, share sheet passing makes it dark. (real iPhone X)

Part 3 — The Investigation Begins

The app created for testing the home indicator.

Part 4 — The Investigation Continues

Part 5 — The Investigation Becomes Colorful

Part 6 — We Need to Go Deeper!

We found the home indicator!
So many fun sliders to play with. 😍
Some alternate home indicator sizes.

High-level Takeaways

But… Why?

Prefer one over the other?

The Real Lesson


Nathan Gitter

Written by

designer + engineer, iOS app maker, writing about the intersection of art and tech

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade