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.

![Design elements should be anchored to the bottom of the
frame.](https://developer.android.com/static/images/design/ui/glasses/guides/glasses_components_overview.png)

## 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.