> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polymet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Design systems

> Build your components and theme once, and use them in every project.

A design system is its own kind of project: it holds your components and your theme. You release it in versions, and every project linked to it builds with those components and that theme.

![The projects page switched to Design Systems, with the New Design System button](https://mintcdn.com/polymet/TfIzLh80_L4bW9xQ/images/docs/design-systems/projects-design-systems-tab.png?fit=max\&auto=format\&n=TfIzLh80_L4bW9xQ\&q=85\&s=d1731d33f016543fae473eb0392acf43)

## Design system, project or theme

| | What it is | Where you change it |
| - | - | - |
| **Design system** | A project of reusable components and a theme, released in versions for other projects | On its own canvas, like any project |
| **Project** | One app you are building. It can link one design system | On its canvas |
| **Theme** | One project's colors, fonts, radius and shadows | **Project settings** > **Theming**. See [Themes](https://docs.polymet.ai/canvas/themes.md) |

A project linked to a design system uses the design system's theme, so its own theme is locked until you unlink.

## Create a design system

1. On the projects page, switch to **Design Systems** and click **New Design System**.
2. In **Create new design system**, pick how to start and click **Continue**:
   * **Create a design system with AI**: name it in **Design system name** and click **Create design system**. It opens on the canvas. Ask the agent for the components you need, the way you would in any project.
   * **Import design system from Figma**: opens the Figma import, which brings your Figma frames in as a new design system. See [Import from Figma](https://docs.polymet.ai/canvas/import-figma.md).
3. When it is ready, [release a version](https://docs.polymet.ai/design-systems/release.md) so other projects can link it.

### Import path

**Import path** is optional and set when you create the design system. It is the name other projects use in their code to import its components. It defaults to `shared`, and can hold letters, numbers, hyphens and underscores:

```typescript theme={null}
import { Button } from "@/polymet/shared/components/button"
```

You see it later under **Project settings** > **Design System**.

## Turn a project into a design system

1. Open the project, then **Project settings** > **Design System**.
2. Under **Convert Design System**, click **Convert**, then **Convert** again to confirm.

This cannot be undone. Only the project's owner sees it, and only while the project is not linked to a design system: a design system cannot link another one.

## Deleting a design system

Once a design system has a release, it cannot be deleted from the projects page. Its menu says **This design system has releases. Please contact support to delete it**.

## Related

* [Release a design system](https://docs.polymet.ai/design-systems/release.md) — make a version available to other projects
* [Use a design system in a project](https://docs.polymet.ai/design-systems/use.md) — link, update and unlink
* [Themes](https://docs.polymet.ai/canvas/themes.md) — one project's colors and fonts


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.