Interface design

Reuse styles and components

A design token is a named visual value, such as a color, with light and dark variants when you define them. A component is a reusable design object. An instance is one use of the component. An override changes only that use. Together they help you keep repeated screens more consistent.

1. Define tokens for the styles you reuse and apply them to the objects.
2. Create a component from a repeated part of the interface, such as a card or a button.
3. Place instances on the relevant screens. Change text or other supported values through overrides.

4. Modify a shared token and review all its uses, including the light and dark variants.
5. Show the annotations during review and hide them to check the clean design.

See the design without annotations