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

# Design Systems

> Overview of rules, typography, colors, components, and leveraging your real design system.

In this lesson, you will learn how to keep prototypes on-brand by using components, tokens, and libraries so generated UI matches your product standards.

Set up your design system from the [design systems overview](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md): [Rules](https://www.magicpatterns.com/docs/documentation/design-systems/editing/rules.md), [typography and icons](https://www.magicpatterns.com/docs/documentation/design-systems/editing/typography-and-icons.md), [colors](https://www.magicpatterns.com/docs/documentation/design-systems/editing/colors.md), and [components](https://www.magicpatterns.com/docs/documentation/design-systems/editing/components.md).

Teams can connect a real React library by linking a [GitHub repo](https://www.magicpatterns.com/docs/documentation/design-systems/importing/github.md) or an [NPM package](https://www.magicpatterns.com/docs/documentation/design-systems/importing/npm-package.md) (for example NPM, GitHub Packages, or a manual bundle). See [importing your design system](https://www.magicpatterns.com/docs/documentation/design-systems/importing/overview.md) for connecting your library and onboarding.

[Design Systems](https://www.youtube.com/embed/obZRvV-w_WQ?si=GBDXni7qZ6rnBZOu)

> [card] [Next: Team Workflows and Sharing](https://www.magicpatterns.com/docs/documentation/guide/team-workflows-and-sharing.md)
>
> Continue to lesson five and collaborate with your team.


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