Mindvalley Design System
The Mindvalley Design System provides reusable design tokens and assets for building consistent digital experiences across the Mindvalley ecosystem, based on the Mindvalley Design Language.
**Built with TypeScript** for type safety and better developer experience, it speeds cross-brand UI development while maintaining quality and accessibility.
#### Key Features
✅ **TypeScript Support** - Full type definitions for color, typography tokens and Tailwind plugins
✅ **Runtime Validation** - Zod-powered token validation for type safety
✅ **Multi-Brand Support** - Tokens for Mindvalley and B2B brands
✅ **Tailwind CSS Plugin** - Ready-to-use typography and color plugins
✅ **Design Token Sync** - Automated synchronization with Figma via Supernova
#### Getting started
First, we recommend going through the [Figma design system](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257). It captures our current views on how best to use the design in your daily work. In the case you don't have access to the mentioned Figma design system, you can reach out to the channel listed in the [help section](#-need-help)
and access will be granted.
Then, you can read the following guides:
1. The [usage guide](docs/usage.md), if you want to start using the design system in your project/repo (includes examples for different web frameworks).
2. The [contribution](CONTRIBUTING.md) and [release](contributing/releasing.md) guides if you want to contribute to the repo.
*Note:* This guide uses the term *design tokens* throughout. Learn what they are: [What are design tokens?](https://css-tricks.com/what-are-design-tokens/)
#### :books: Usage
See the comprehensive [usage guide](docs/usage.md).
#### 🙌 Contributing
Read about the development process in the [contribution guide](CONTRIBUTING.md).
#### 🚀 Releasing and publishing changes
You can find docs about our release process in the [release guide](contributing/releasing.md).
#### Tooling
| Tool | Purpose |
|------|---------|
| [pnpm](https://pnpm.io/) | Package manager |
| [Nx](https://nx.dev/) | Monorepo task orchestration and package versioning |
| [Webpack](https://webpack.js.org/) | Production bundling |
| [Style Dictionary](https://styledictionary.com/) | Design token transformation |
| [Biome](https://biomejs.dev/) | Formatting and linting |
| [Jest](https://jestjs.io/) | Testing |
| [Lefthook](https://lefthook.dev/) | Git hooks |
Nx is used for workspace management and independent package versioning. CI currently runs the root build pipeline (webpack). Nx-driven CI will be added when packages contain code.
#### Support
* All browsers
* Server-side rendering
* TypeScript and JavaScript projects
* CommonJS and ES modules
## 🤷🏽♂️ Need Help?
For questions on how to use the Mindvalley Design System, please join and post questions to the [#mindvalley-design-system](https://mindvalley.slack.com/archives/C03F4SBLZL2) channel on Slack, or reach out to any of the contributors for assistance.