Components are purpose built building blocks for building your UI. Your app should utilize Jetpack Compose Glimmer for components as they are optimized for the unique Glasses display use cases.
Optimized components
How were components optimized for transparent display?
Surface color: The surface color of components is black to maximize contrast for card content.
Outline & Highlight: The Outline color is optimized for contrast. The use of a highlight provides visual expression and might be used to indicate some types of input.
Shape: A softer shape system is used to improve glanceability by reducing the sharpness of corners and improving comfort.
On Surface color: The On Surface color of content is white or close to white to maximize contrast against surface.
Typography: The typography scale uses a small set of refined Body and Title styles that optimize kerning, size and weight for optimal readability & legibility.
Iconography: The use of rounded Material Symbols coheres with the rounded typography scale.
Ready to implement components? Check out the Jetpack Compose Glimmer UI library documentation.