The Design System Starter provides a solid foundation for creating your own custom design system. This starter kit aims to streamline the process of building consistent and visually appealing web components for your design system.
It's built on the vision of a circular workflow between UX designers and developers, keeping both parties in sync and provide a setup for a close collaboration.
Use design tokens as basis of all components. Provided in this repository you can see our design tokens that have been exported from Figma with this plugin. Keep your design system consistent across your tools, devices and frameworks.
All components in this starter kit are built as reusable web components. Build them once, use them everywhere in any framework. With the use of Shadow DOM these components look the same wherever you use them without any side effects on your surrounding application.
We use Storybook to showcase all components in isolation. This is a great starting point for new users of your design system to discover and play around with the existing components and their API.
-
Installation:
- Clone this repository:
git clone https://github.com/Zuehlke/design-system-starter.git - Install dependencies:
npm install --workspaces - Build the project:
npm run build --workspace web-components
- Clone this repository:
-
Usage:
- Run:
npm run storybook --workspace web-componentsto boot up a local storybook dev server - Explore the design tokens in the
web-components/tokensdirectory
- Run:
-
Contributing:
- Contributions are welcome! Fork the repo and submit pull requests.
If you're interested in more detailed aspects of the project, head over to our docs directory: