Designing for Transparent Screens
Behind the scenes of Jetpack Compose Glimmer, our new design system for display AI glasses
David Allin Reese is a Senior Visual Designer working on the next generation of interfaces for display AI glasses — including Jetpack Compose Glimmer, the newly launched design system for Android extended reality (XR) experiences. Here, David Allin shares an inside look at the challenges and opportunities of designing for this transformative technology.
Traditional design always starts with a container: a screen, a grid, a rectangle to fill. But designing for AI glasses? There’s no screen, no crisp blank page. Instead, you’re faced with the world itself, in all its vibrant, boundless, and wonderfully chaotic glory. How do you gracefully layer an interface onto that living, breathing reality? How do you do it sparingly, respectfully, and in a way that truly harmonizes with the real world?
For more than a decade, Google’s designers have explored the problem of designing for transparent displays. And we’ve learned so much along the way — sometimes through delightful discoveries, other times through unexpected lessons. What we’ve found is that many of our fundamental design elements — things like color, typography, and even shadows — behave in counterintuitive ways. Understanding spatial distance becomes paramount. That vibrant, saturated color you love on your phone? It practically vanishes against a bright blue sky. “Black” suddenly means transparent. Common typefaces become illegible. And animations can go from subtle to overwhelming in just a few milliseconds.
We’ve had to rethink interface design principles from the ground up, giving us a rare opportunity to define what beauty truly means for an interface that lives constantly within human perception. What lies at the heart of this new form factor is a truly ambient display, one that appears when you need it and disappears when you don’t.
An interface at arm’s length
This new canvas isn’t a screen in your hand; it’s an interface that lives on the lens of glasses and within your field of view. It’s designed to be present when you need it, not all-encompassing. The display itself only takes up a small portion of your field of view, and its unique qualities have influenced almost all aspects of the design language for glasses.
A crucial insight that shaped so much of our work: the interface doesn’t actually appear on the surface of the lens itself. Instead, it’s projected to a perceived depth of about one meter away — roughly an arm's length.
This was a really pivotal realization for our Android XR design team early on. It sounds like a small detail, but it means that to read any content, a user has to consciously shift their focus. They’re moving their gaze from the real world — say, a friend’s face, a stunning sunset, or the street ahead — to this one-meter focal plane. It’s not a passive glance; it’s an active, physical choice to engage with the UI, even if just for a millisecond.
This act of shifting focus is both a central challenge and the greatest opportunity we’ve embraced in designing for AI glasses. It pushes us to create interfaces that are so inviting, so helpful, and so integrated that they earn that moment of attention.
How do you design with light?
One of the most common questions we get when presenting the Jetpack Compose Glimmer design system is, “Why aren’t you using any black? Is that a style choice?” No. It’s physics.
The display technology in these glasses can only add light; it can’t create opaque black or make the world darker. It’s like how a home movie projector can’t project black. On additive displays like these, black appears 100% transparent. It isn’t a color, it’s a void.
Components and other elements appear differently on glasses than they do in design tools. We often blend a screen view with a natural background to visualize how UI will appear on glasses.
Initially, we tried to port over existing Android components — the Material Design elements we all know and love. I remember mocking up a generic Material location card and trying it out on the transparent display.
The result? It just didn’t work. Material Design, with its tactile metaphors of paper and layers, relies heavily on bright, opaque surfaces and subtle shadows. On an additive display, those “surfaces” turned into large, bright blocks of light, creating distracting glare and rapidly draining battery life.
We quickly discovered another significant problem: halation. Halation is that effect where bright light sources bleed into adjacent darker areas, creating a blurry, halo-like fringe. On these displays, our bright surfaces would bleed into transparent content, making text completely illegible. It was frustrating, but it also informed us we were on the wrong track, which was valuable learning.
A classic Material card pairs light surface colors with small, dark text.
A card in Jetpack Compose Glimmer uses dark surface colors and light text with optimized typography for glanceability.
DO: Use dark surfaces and bright content to avoid halation and provide the most contrast in a variety of environments.
DON'T: Use light surfaces and dark content. Otherwise, the light from the surface color can bleed into content due to halation.
Our solution was a fundamental redefinition: instead of a color, we redefined “black” as a container. Our surfaces use black to provide a legible “clean plate” foundation for your content. In addition to surfaces, we defined a new depth system that casts dark, rich shadows to convey a sense of occlusion and space. This approach elegantly establishes hierarchy and depth where traditional shadows simply can’t exist, harmonizing with the display behavior rather than fighting it.
Components like buttons can overlap with cards to establish hierarchy and relationships.
System elements, like a volume slider, use an exaggerated depth level with dark shadows to signify their relationship to system-level control.
Can you even read that?
We read text all the time, so you might think showing text on glasses interfaces would be easy. Because the display is set further away, the interface appears at about a meter in perceived depth. This meant we had to throw out a lot of common conventions for UI typography and instead turn to science. On devices like AI glasses, text isn’t measured in pixels or points, but in terms of visual angle, or degrees.
Think of it like driving along a highway. You see exit signs or speed-limit signs with text and graphics printed at a fixed size. But how big that text appears to you changes dramatically based on your distance. Far away, it’s tiny; as you get closer, it grows. That’s visual angle in action.
We collaborated closely with our vision-science team to pinpoint the sweet spot for legibility. We established a minimum readable size of around 0.6 degrees. Building on that foundation, the typography styles are set comfortably above this minimum, ensuring they remain effortlessly glanceable in most environments and user contexts.
Jetpack Compose Glimmer’s typography styles remain well above the 0.6 degree minimum to remain glanceable in most situations.
But legibility isn’t just about size. We’ve taken Google Sans Flex — our versatile brand typeface — and used its optical size axis to make the letters appear more legible. For example, letters like a and e have larger counters (the openings inside the letter), and the dots on j's and i's are further away from the letter body. These changes make the text more readable. Optical sizing also optimizes letter-spacing without needing to specify it separately in code, making every word as clear as possible at a glance.
The default Google Sans Flex is a versatile font used across many devices.
The optimized Google Sans Flex used in Jetpack Compose Glimmer is designed to make words legible by increasing letter spacing using the optical size axes.
DO: Use bold, optimized typography with increased letter spacing and decreased optical sizing if available. We recommend using Google Sans Flex.
DON’T: Use thin, small typography, as this will be unreadable in many environments.
How do you make color… colorful?
Through a glass screen, the world is the backdrop. With brightness and colors constantly changing, we had to challenge our assumptions around visual contrast. Our team measured perceived brightness using the additive contrast ratio, so we could ensure that content remains vibrant, whether against a bright blue sky or a dark room.
We quickly learned that the highly saturated colors we’d typically use on a phone simply “disappear” against the real world. They become illegible, appearing ghostly against a vivid world.
Solving for additive contrast ratio takes into account display brightness and environment brightness.
As colors grow darker, less light is added to the display and therefore it becomes less visible. Conversely, as colors grow lighter, they become less colorful.
Based on this insight, we made Jetpack Compose Glimmer’s interface neutral by default, so it would harmonize with the diverse colors of the real world. Surfaces in Glimmer are always dark and the content itself is always bright. This high-contrast default is our foundation for legibility in most environments.
Glimmer’s desaturated palette judiciously utilizes colors that are closer to white to maintain contrast, ensuring the UI remains stable and legible no matter the environment.
A neutral interface harmonizes well with the colorful world. Judicious use of color can draw attention toward important elements like buttons.
Can motion guide, not distract?
On a heads-up display, motion can’t be distracting or extraneous. Because AI glasses are meant to be worn all day, there is always a chance that content can appear in your view at any time. It should respectfully and gracefully guide your focus as it traverses from your periphery to the center of your attention.
A key example of this is how we approached incoming notifications — content that can appear ambiently on the display at any time, regardless of where you are or what you’re doing.
At first, the team applied a typical motion transition of around 500 milliseconds, which faded almost instantly. The problem was that the notification appeared too quickly for someone to even notice the transition. Instead of slowly drawing someone’s attention, they would essentially “blink” and a notification would suddenly be in view.
The team landed on an incoming notification transition that occurs over almost two seconds. This slower, more deliberate motion respects the user’s periphery, gently inviting their focus rather than demanding it.
But this grace has to be balanced with responsiveness. When a user provides input — whether it’s voice or a gesture — they need instant, clear feedback. This is where our focus rings and highlights come in. They provide that critical, low-latency responsiveness that confirms an action, while our ambient motion ensures we respect the human factors of attention and focus.
Designing for a blended reality
Ultimately, the journey of designing for display AI glasses isn’t just about pixels and light; it’s about human factors like attention and focus. With Jetpack Compose Glimmer, we’ve embraced the profound responsibility of crafting experiences that put human focus first, allowing technology to gently enhance rather than loudly demand attention. This philosophy of calm, thoughtful integration means that as AI glasses evolve, they won’t just show us more information — they’ll help us see our world, and our place within it, more clearly and beautifully than ever before. We’re excited for a future where helpfulness truly blends with reality, one graceful glance at a time.
Learn more about our design guidelines for AI glasses and start building now with Jetpack Compose Glimmer in our Figma Design Kit.
Special thanks to designers Ryan West, Joost Korngold, Nadeem Haidary, Tarik Abdel-Gawad, Adhithya Ramakumar, Yinghua Yang, and Paul Hoover, as well as our product manager Yasmine Evjen for their work on this project.