Google is moving beyond the rectangular screen. For over 10 years, Google designers have explored how to build interfaces for transparent displays. The result is Jetpack Compose Glimmer, a design system built specifically for display AI glasses. For devs and data scientists, this is a shift from designing for pixels to designing with light.
The Additive Display Constraint
Most developers are used to LCD or OLED screens. However, AI glasses use additive displays. These displays only add light to the user’s field of vision. They cannot create opaque black or make the real world darker.
On an additive display, black is 100% transparent. It is not a color; it is a void. If you use a standard Material Design card (light surface with dark text), it fails. The light surface becomes a bright block of light that drains the battery and creates halation. Halation is an effect where bright light bleeds into dark areas, making text unreadable.
To solve this, devs must use dark surfaces and bright content. Using black as a foundation provides a ‘clean plate’ for the UI. This allows the digital elements to harmonize with the physical world without creating distracting glare.
From Pixels to Visual Angles
Software Devs typically measure UI in pixels or points. In a transparent spatial environment, these units are irrelevant. The perceived size of an object changes based on its distance from the eye.
Google team now measure UI in visual angles or degrees. The display in these glasses is projected at a perceived depth of 1 meter, which is about an arm’s length. This distance requires the user to actively shift their focus from the background to the UI.
To ensure legibility, Google established a minimum readable text size of 0.6 degrees. Keeping text above this threshold ensures that the interface remains ‘glanceable’ in different environments.
Engineering Typography for Light
Standard fonts often fail on transparent lenses. Google team modified Google Sans Flex using its optical size axis to fix this. These technical adjustments make letters more distinct:
- Increased Counters: The internal openings in letters like ‘a’ and ‘e’ are larger to prevent them from blurring.
- Modified Dots: The dots on ‘i’ and ‘j’ are moved further from the main letter body.
- Variable Letter-Spacing: The system optimizes spacing through code to maximize clarity at a glance.
The Additive Contrast Formula
Google team use a specific formula to calculate visibility. This is the additive contrast ratio.
The formula is: (Environment Brightness + Display Brightness) / Display Brightness.
In the real world, colors behave differently. Highly saturated colors often ‘disappear’ or look ghostly against a bright sky. Glimmer uses a neutral, desaturated palette by default. By keeping colors closer to white, the UI remains stable and visible regardless of the lighting in the room.
Designing Motion for Human Attention
On a heads-up display, motion can be a major distraction. In standard mobile development, a notification might appear in 500 milliseconds. On AI glasses, this is too fast. It creates an abrupt ‘blink’ that can startle the user.
Glimmer uses a slower, more deliberate transition for notifications. These animations occur over 2 seconds. This duration allows the notification to enter the user’s peripheral vision gracefully. It invites focus rather than demanding it.
However, user-triggered actions (like a voice command or gesture) still require low-latency feedback. Glimmer uses ‘focus rings’ to provide instant confirmation that the system has received an input. This creates a balance between ambient notifications and responsive controls.
Key Takeaways
- Black is Transparency, Not a Color: Because AI glasses use additive displays, they can only add light; they cannot create true black or shadows. In this environment, black is 100% transparent. To ensure legibility, devs must use dark surfaces for containers and bright colors for text and icons.
- Visual Angles Replace Pixels: Standard units like pixels (px) are replaced by visual angles (degrees). Since the UI is projected at a perceived depth of 1 meter, objects must be sized relative to the human eye’s perspective. The minimum threshold for readable text is set at 0.6 degrees.
- The Additive Contrast Formula: Devs must account for environmental light using the formula: (Environment Brightness + Display Brightness) / Display Brightness. Because saturated colors often ‘disappear’ against bright real-world backgrounds, a neutral, desaturated palette is used to maintain visibility.
- Optical Typography Optimization: Standard typefaces suffer from halation (light bleeding). Google Sans Flex is modified via its optical size axis to increase internal letter openings (counters) and expand letter-spacing, preventing characters from blurring together on a transparent lens.
- Motion Timing is Context-Dependent: Standard 500ms animations are too abrupt for a heads-up display. To respect human peripheral vision, Glimmer uses 2-second transitions for notifications to ‘invite’ focus, while maintaining low-latency feedback (like focus rings) for direct user inputs to ensure responsiveness.
Check out the Technical details. Also, feel free to follow us on Twitter and don’t forget to join our 100k+ ML SubReddit and Subscribe to our Newsletter. Wait! are you on telegram? now you can join us on telegram as well.
Michal Sutter is a data science professional with a Master of Science in Data Science from the University of Padova. With a solid foundation in statistical analysis, machine learning, and data engineering, Michal excels at transforming complex datasets into actionable insights.
