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

Source: https://docs.vectorboard.app/en/interface-design/reuse-styles-and-components/ · INTERFACE DESIGN

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.

![Tokens, components and instances](https://assets.vectorboard.app/docs/fig/fig-918.webp)
*Build a reusable design system*

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.

![Reuse styles and components](https://assets.vectorboard.app/docs/fig/fig-919.webp)

![Design annotations visible](https://assets.vectorboard.app/docs/fig/fig-920.webp)

See the design without annotations

> **Expected result:** Repeated elements share one definition, instead of being independent copies.

> **Example:** Use a **Primary action** style and a **Workshop card** component in the catalog, detail and booking confirmation screens.

> **Important:** An override and a change to the shared component have different scopes. Check what you have selected and how it relates to the component before you modify all the uses.