Google is moving beyond rectangular screens. For more than 10 years, Google designers have been figuring out how to create an interface for transparent displays. the result is Jetpack Compose GlimmerA design system specifically constructed for display ai glasses. For developers and data scientists, it’s a shift from designing for pixels to designing with light.
additive performance bottleneck
Most developers are accustomed to LCD or OLED screens. However, use AI glasses additive performance. These displays only add illumination to the user’s field of vision. They can’t make opaque black or make the real world darker.
On an additive display, black is 100% transparent. It is not a color; This is a zero. If you use a standard Material Design card (light surface with dark text), it fails. The surface of the light becomes a bright block of light that drains the battery and makes halo. Halation is an effect where bright light flows into dark areas, making text unreadable.
To solve this, developers should use dark surfaces and shiny materials. Using black as a foundation provides a ‘clean plate’ for the UI. This allows digital elements to harmonize with the physical world without creating distracting glare.
Pixel to View Angle
Software developers usually measure UI in pixels or points. In a transparent spatial environment, these units are irrelevant. The perceived size of an object changes depending on its distance from the eye.
Google Teams now measures UI visual angle Or degree. In these glasses the display is projected at a projected depth 1 meterWhich is approximately the length of an arm. This distance requires the user to actively shift their attention from the background to the UI.
To ensure legibility, Google established a minimum readable text size 0.6 degree. Keeping text above this limit ensures that the interface remains ‘viewable’ in different environments.
engineering typography for lighting
Standard fonts often fail on transparent lenses. Google Teams modified google sans flex are using it optical size axis To fix it. These technical adjustments make the letters more distinctive:
- Incremented Counter: Letters like ‘A’ and ‘E’ have larger internal holes to prevent them from blurring.
- Modified point: The dots on ‘i’ and ‘j’ have been moved ahead of the main letter body.
- Variable alphanumeric: The system optimizes spacing through code to maximize clarity at a glance.
additive contrast formula
The Google team uses a specific formula to calculate visibility. this is additive contrast ratio.
The formula is: (Environment Brightness + Display Brightness) / Display Brightness.
In the real world, colors behave differently. Overly saturated colors often ‘disappear’ or look ghostly against a bright sky. Glimmer uses a neutral, desaturated palette by default. By keeping colors close 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 may appear 500 milliseconds. On AI glasses, it’s much faster. This produces a sudden ‘blink’ that may startle the user.
Glimmer uses slower, more deliberate transitions for notifications. These animations end 2 seconds. This duration allows the notification to gracefully enter the user’s peripheral vision. It invites focus rather than demanding it.
However, user-triggered actions (such as voice commands or gestures) are still required. low latency response. Glimmer uses ‘focus rings’ to provide instant confirmation that the system has received an input. It strikes a balance between environmental information and reactive controls.
key takeaways
- Black is transparency, not color: Because AI glasses are used additive performanceThey can only add light; They cannot create true black or shadow. In this environment, black is 100% transparent. To ensure legibility, developers should use dark surfaces for containers and bright colors for text and icons.
- Change view angle pixel: Standard units such as pixels (px) are replaced by visual angle (degrees). Since the UI is projected at the projected depth 1 meterThe size of objects should be relative to the perspective of the human eye. Minimum limit set for readable text 0.6 degree.
- 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 Customization: suffer from standard typefaces halo (light bleeding). Google Sans Flex has been modified through optical size axis To enlarge the internal letter opening (counter) and expand letter-spacing, preventing letters on the transparent lens from blurring together.
- Motion timing is context-dependent: The standard 500ms animations are too sudden for a heads-up display. To respect human peripheral vision, glimmer is used 2-second transition To ‘invite’ focus while maintaining information low latency response (like the focus ring) for direct user input to ensure responsiveness.
check it out technical details. Also, feel free to follow us Twitter And don’t forget to join us 100k+ ml subreddit and subscribe our newsletter. wait! Are you on Telegram? Now you can also connect with us on Telegram.
Michael Sutter is a data science professional and holds a Master of Science in Data Science from the University of Padova. With a solid foundation in statistical analysis, machine learning, and data engineering, Michael excels in transforming complex datasets into actionable insights.
