⚠️ Warning: This project is meant primary for learning and currently is in work in progress state. Expect breaking changes.
All-purpose design system, meant to be used in small to medium, framework or non-framework projects, where using something simple and non-intrusive is valued more than customizability and high amount of options. Its primary targeted to developers building an application for learning a new technology or something which doesn't require flashy looks. Web is the main supported platform but the system allows easier extension with more platforms.
-
Phase MVP
- Define and setup initial structure and tooling
- Analyze and describe the use case and the scope of the design system which will be developed
- Target Audience
- Use Cases
- Define Supported Platforms
- Establish Design Principles
- Catalog Components
- Explain customization level and how styling could be done
- Define anatomy elements and collect resources
- Core values/Principles
- Define initial tokens
- Define initial systems, if needed
- Define initial components
- Add some guides
- Setup npm package and document how it should be used
- Auto deployment script
- Add docs for at least one process - component contribution
- Develop at least one component from the MVP list by following a process
-
Phase Next
- Test with different frameworks and add examples/recipes
- Fix problems with build tools import and importmap
- Make automatic documentation for components to work
- Define and describe versioning
- More Design principles - Adaptive/Responsive/Accessibility
- Setup Chromatic with CI
- Add metrics - e.g. accessibility threshold
- Setup tests
- Make it more engaging - colors, gradients, animations
- Light/dark theme
- SSR components support
- https://design-system.service.gov.uk/
- https://baklava.design/
- https://material-web.dev/about/intro/
- https://www.fast.design/
- https://m3.material.io/
- https://fluent2.microsoft.design/
- https://polaris.shopify.com/
- https://mailchimp.com/design/
- https://carbondesignsystem.com/
- https://nordhealth.design/
- https://vaadin.com/design-system
- https://github.com/ing-bank/lion
- https://studio.backlight.dev/edit/5vtJtbY04aoD1dGKcsu1/introduction/?p=doc