# Usage guide
## Installation
### Using npm or yarn
We recommend using either npm or yarn to install, as per your own preference.
```bash
npm install @mindvalley/design-system
```
```bash
yarn add @mindvalley/design-system
```
The package supports both ES module syntax and CommonJS syntax.
#### *ES module syntax*
```js
import { colors } from '@mindvalley/design-system'
```
#### *CommonJS syntax*
```js
const { colors } = require('@mindvalley/design-system')
```
## π¨ colors
To use the colors from the design system there are two options.
### 1. TailwindCSS
If you use TailwindCSS in your project, using the colors is a simple two-step process:
1. Install the design system. See [installation](#using-npm-or-yarn).
2. Use the [CommonJS syntax](#commonjs-syntax) to include the colors and extend your `tailwind.config.js`.
*Example tailwind.config.js*
```js
const { colors } = require('@mindvalley/design-system')
module.exports = {
theme: {
colors: {
...colors
}
}
}
```
For other brands (e.g., B2B), you can access and combine colors from the core Mindvalley brand
and override the redefined colors using the B2B-specific colors.
```js
const { colors } = require('@mindvalley/design-system');
const { colors: b2bColors } = require('@mindvalley/design-system/b2b');
module.exports = {
theme: {
colors: {
...colors,
...b2bColors
}
}
}
```
#### Tailwind v4
Tailwind v4 uses a CSS-first approach and doesn't require a config file by default. However, to use the design system colors, you'll need to create a config file and load it with the `@config` directive.
**Step 1: Create `tailwind.config.js`**
```js
// tailwind.config.js
import { colors } from '@mindvalley/design-system'
export default {
theme: {
colors: {
...colors
}
}
}
```
For B2B projects:
```js
// tailwind.config.js
import { colors } from '@mindvalley/design-system'
import { colors as b2bColors } from '@mindvalley/design-system/b2b'
export default {
theme: {
colors: {
...colors,
...b2bColors
}
}
}
```
**Step 2: Load the config in your CSS**
```css
/* app.css */
@import "tailwindcss";
@config "./tailwind.config.js";
```
**Step 3: Use color classes as normal**
```html
...
```
### Why the override?
Both brands share color names, but their hues and shades differ. The override ensures B2B developers get brand-specific shades.
Here is the full list of [B2B colors](https://www.figma.com/file/1EPj7v5H5JhP2d0v2h8QeC/B2B-Foundations?type=design&node-id=1-395&mode=design&t=SY5HTy1zbFO5p80n-0).
#### Gradients
For gradients you can use the following TailwindCSS presets:
- Purple wave: `from-brand-accent to-purple-600`
- Orange Wave: `from-orange-500 to-orange-600`
- Yellow wave: `from-yellow-400 to-yellow-500`
- Blue Wave: `from-blue-600 to-blue-700`
- Grey wave (150 - white): `from-cool-grey-150 to-white`
- Gray wave (600 - 700): `from-cool-gray-600 to-cool-gray-700`
Example use:
```html
```
Will give you purple wave gradient.
##### π‘ Note
If you'd like other custom names, you can make [tailwindcss color customizations](https://tailwindcss.com/docs/customizing-colors#using-the-default-colors) to the provided values and use them in your code.
### 2. Using CSS-in-JS
1. Install the design system. See [installation](#using-npm-or-yarn).
2. Use the [ES module](#es-module-syntax) syntax to import your module and include it in your code.
*Sample usage in a React app*
```js
import React from 'react'
import { colors } from '@mindvalley/design-system'
function App() {
const isBackgroundRed = true;
return (
);
}
export default App;
```
## ποΈ Typography
### Loading typography fonts
Before using the typography plugin, load the required fonts:
**Google Sans Flex**
```html
```
> **Note:** Google Sans Flex requires the variable font version to support width variations. Fontsource currently only offers static font weights, which won't work with this typography system.
**Sharp Grotesk**
```javascript
import '@mindvalley/design-system/typography/mindvalley/fonts.css'
```
> π For framework-specific examples (Next.js, React, Vite, Vue, Phoenix) see the [Typography Setup Guide](typography/setup.md).
### Typography plugin (TailwindCSS)
We provide a TailwindCSS typography plugin that lets developers use Figma typography class names directly, without configuring font sizes, line heights, or font families manually.
> β οΈ **Important:** Typography classes are already responsive - don't add screen prefixes!
>
> ```html
>
>
Hello
>
>
>
Hello
> ```
#### How to use it?
To match Figma typography values in your code:
1. Install the design system as described in the [install section](#using-npm-or-yarn).
2. Load the typography fonts using one of the methods described in [Loading Typography Fonts](#loading-typography-fonts) above.
3. Require and use the Tailwind typography plugin in your `tailwind.config.js` file.
**Google Sans Flex (Recommended):**
```js
module.exports = {
...
plugins: [
require('@mindvalley/design-system/dist/tailwind/plugins/typography-gsf.js')()
],
...
}
```
**Sharp Grotesk (Legacy):**
```js
module.exports = {
...
plugins: [
require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')()
],
...
}
```
> π **Migrating?** See the [GSF Migration Guide](typography/migration.md) for details on switching from Sharp Grotesk to Google Sans Flex.
> β οΈ **Tailwind v4:** Tailwind v4 does not use js config files. To use the typography plugins see [Tailwind v4 typography Setup guide](typography/setup.md#tailwind-v4-setup) for details.
4. Find the name to use by inspecting the selected text on the Figma design file.
1. Use the class name as follows. Remember to adjust that according to the casing option if you are not using the default.
```html