Introduction
Moon Design System is a complete design system made to help product teams across the world build better digital experiences. This design system includes all the visual assets and reusable components with clear guidelines needed to create high-quality products.
Our primary goal is to unify our user experience, further streamline the developmente process and help teams to focus on solving user problems instead of reinventing the wheel.
We are and have always been an open-source project. We believe in a collaborative environment, that thrives on communities coming together to build better experiences.
Quickstart your project
Whether you're a designer or a developer, this documentation includes all the necessary resources you'll need to start building your next great idea.
Project overview
Moon Design System is more than just a component library. It's a complete toolkit, scalable and highly customizable, built for modern product development. Key features include:
- Design libraries built in Figma: Components, templates, assets and variables. Built with scalability and system usability in mind.
- Multiple frameworks: Moon Design System is available for CSS, React, and LiveView.
Key features
These are the key features that make up the Moon Design System.
| Feature | Description |
|---|---|
| Automation process | We aim to enable automation processes between the design tool and code output. |
| Design tokens | Integral part of the automation feed between Figma and the code output. |
| Multiple frameworks | Use Moon Design System in your desired platform, or use just a plain CSS library. |
| Contextual modes | The values of design tokens can adopt based on specific context or situation, such as global theming or component prominence. |
| Open-source | We are open-source and don't keep secrets, let's work together to create a better web. |
| Best practises | We are a dedicated team working on Moon Design System. We have the resources and know-how on how to build systems. |