import { Meta } from '@storybook/addon-docs';

<Meta title="Intro" />

# impactMarket design system

Welcome to our design system. This guide will help you to understand how to use visual components in **impactMarket** apps.

## Get started
1. First step is to add add the lib to project
```bash
yarn add @impact-market/ui
```

2. Add Link tags in your app add
```jsx
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

3. Then you must add the provider on the very top of the apps
```jsx
// _app.js
import { DesignSystemProvider } from "@impact-market/ui";

<App>
    <DesignSystemProvider>
        {/* your app content here */}
    </DesignSystemProvider>
</App>
```

## **Index**

### **Docs**

- [Colors](?path=/story/colors--page)
- [Icons](?path=/story/icons--page)
- [Generator](?path=/story/generator--page)

### **Components**

- **Typography**
    - [Display](?path=/story/components-typography-display--display)
    - [Text](?path=/story/components-typography-text--text)
- **Layout**
    - [Box](?path=/story/components-layout-box--box)
    - [Grid](?path=/story/components-layout-grid--grid)
- **Icons**
    - [Icon](?path=/story/components-icons-icon--icon)