import { Meta } from '@storybook/addon-docs/blocks';
# 
Welcome to **Path**, Preply's Design System.
This Storybook serves designers and developers alike. Component stories double
as documentation and as the visual, interaction, and accessibility test suite
that runs in CI — and **Foundations**, **Patterns** and each component's
**Guidelines** page hold the design side of Path.
## What do you want to do?
- **Set up Path in an application** — follow
[Installation: Client-side app](/docs/get-started-installation-client-side-app--docs) or
[Installation: Next.js](/docs/get-started-installation-next-js--docs).
- **Teach your AI assistant to use Path** — see [AI assistants](/docs/get-started-ai-assistants--docs).
- **Find a component** — browse **Components** in the sidebar. Each one opens on its
**Guidelines** page, covering when to use it; **Docs** has the props. Full prop
documentation also lives in JSDoc, so it appears in your IDE as you type.
- **Start designing** — open the
[Design File Toolkit](https://www.figma.com/design/KFhG0g7iCVlQWJbyukH3JT/Design-File-Toolkit-%E2%9C%A8?node-id=0-1&p=f&t=POUtHh1T7lf7sgVg-0)
in Figma.
- **Review a design inside Figma** — use the
[Aperçu design review plugin](https://www.figma.com/community/plugin/1661386881453898678/apercu-design-review).
- **See what designers are doing with AI** — see
[AI design experiments](/docs/how-to-contribute-ai-design-experiments--docs).
- **Use design tokens** — read the [Design tokens overview](/docs/design-tokens-overview--docs), then
search values in the [Token Explorer](/docs/design-tokens-token-explorer--docs).
- **Look up an asset** — use the [Icon Explorer](/docs/assets-icon-explorer--docs) or
[Illustration Explorer](/docs/assets-illustration-explorer--docs).
- **Understand the conventions** —
[Responsive and shorthand values](/docs/conventions-responsive-and-shorthand-values--docs),
[Popovers](/docs/conventions-popovers--docs), and [Forms](/docs/conventions-forms--docs).
- **Style something custom** — reference tokens with
[getTokenVar](/docs/utilities-gettokenvar--docs), and switch layout or hover styles with
[Breakpoints](/docs/utilities-breakpoints--docs) and [onHover](/docs/utilities-onhover--docs).
- **Find the Rebrand components** — they aren't in Path yet. For web, search the components
prefixed `Rebrand` in the [apollo Storybook](https://apollo-storybook.preply.org/); for React
Native, see
[ds-candidates](https://github.com/preply/apollo-mobile/tree/master/src/ds-candidates) in
apollo-mobile.
Prefer existing components over custom UI. If you believe your component would
be a good addition to the Design System, reach out in
[#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) — see
[How to contribute](/docs/how-to-contribute-community--docs).
## Where everything else lives
- **Component API reference** — JSDoc, in your IDE at the moment you need it.
- **Figma** — the design source of truth: working files, libraries, and the
detail behind the Foundations and Guidelines pages here.
- **Support** — [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V).
- **Legacy design docs** — the retired Zeroheight site
([archive PDF](https://drive.google.com/file/d/1KWlU1hTKbedU4ipoZkSf1TKtwpxVTGCF/view?usp=sharing),
[old site](https://zeroheight.com/62fdeb7ec/p/109536-path-design-system)).
## React Native
1. Download Expo Go ([Android](https://play.google.com/store/apps/details?id=host.exp.exponent), [iOS](https://apps.apple.com/us/app/expo-go/id982107779))
2. Open it and scan the following QR
