Clear, glanceable design for optical see-through displays.
Jetpack Compose Glimmer is a Google design system and UI toolkit for optical see-through (OST) displays, like wired XR glasses. A design system provides reusable decisions—from color, type, and shape primitives, to components and guidance.
Principles
Jetpack Compose Glimmer is one of the first UI frameworks to be optimized for transparent displays and glasses form-factor. OST displays project light directly over the physical world rather than using opaque screen displays. Glimmer helps developers build high-contrast, glanceable UIs that preserve real-world presence.
Transparent display first
Optimized, and backed by research and color science, for transparent displays and the glasses form factor for thoughtful, beautiful, optical see-through experiences.
Hardware input
Interaction inputs are designed around the capabilities of wired XR glasses.
Purpose-built
Styles and components are purpose-built to use out-of-the-box for glasses. Jetpack Compose Glimmer is optimized for see-through displays and user comfort. While purpose built, it's not rigid. It provides a way for you to customize the focus highlights, in addition to type and color.
Styles
Jetpack Compose Glimmer's design language features a simplified theme for optimal visibility on glasses. Color and type can be customized for semantic expression and app cohesion. Visual design principles emphasize clarity, legibility, and minimal distraction. While wired glasses have a wider field of view and may have less "real-world" interference, you should still consider keeping the UI out of the way.
Glimmer comes with a baseline theme that's optimized for OST glasses. Color and type can be customized for semantic expression and app cohesion. Black is transparent on an optical-see-through display. Keep this in mind when designing, as darker colors will appear dull or transparent, but this can also be used to create depth.
Color scheme
The glasses color scheme (collection of color tokens or roles to theme the color of your app) consists of three accent roles, six surface (or neutral roles), and their on-color counterparts.
Customize color
Primary color can be customized to use your brand or primary interaction color. Consider the contrast, saturation, and power usage of the chosen color.
Read more on Glimmer's color system and best practices.
Typography
Jetpack Compose Glimmer has an optimized default typescale. Composed of two roles with three styles each, type roles are based on their purpose and hierarchy. For more information, see Glimmer typography.
Surface and depth
Surfaces contain content. They provide clear focal points within the user's field of view, which can contain content or actions. More about surface and depth is used in Glimmer.
Components
Components are purpose-built building blocks for building your UI. Your app should use Jetpack Compose Glimmer for components, as they're optimized for the unique use cases of OST glasses. For more information, see Glimmer components.
Ready to implement components? Check out the Jetpack Compose Glimmer documentation.
Glimmer components span multiple UX purposes. Some components include buttons for actions, progress indicators for communication, stacks for containment, navigation, and voice indicators for input.