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. 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 mentioned figma design system, you can reach out to the channel listed in the help section
and access will be granted.

Then, you can read the following guides:

1. The usage guide, if you want to start using the design system in your project/repo (includes examples for different web frameworks).
2. The contribution and release 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?

#### :books: Usage

See the comprehensive usage guide.

#### 🙌 Contributing

Read about the development process in the contribution guide.

#### 🚀 Releasing and publishing changes

You can find docs about our release process in the release guide.

#### ⚙️ 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 channel on Slack, or reach out to any of the contributors for assistance.