> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/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](/documentation/design-systems/overview): [Rules](/documentation/design-systems/editing/rules), [typography and icons](/documentation/design-systems/editing/typography-and-icons), [colors](/documentation/design-systems/editing/colors), and [components](/documentation/design-systems/editing/components).

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

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/obZRvV-w_WQ?si=GBDXni7qZ6rnBZOu" title="Design Systems" alt="Design Systems" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

<Card title="Next: Team Workflows and Sharing" icon="play" href="/documentation/guide/team-workflows-and-sharing">
  Continue to lesson five and collaborate with your team.
</Card>