Foret is an open-source design system for building web applications related to nature with Foret design language.
The Forest Design System is a personal project started to experience the creation of a design system.
First, I needed a brand before building a design system. Since I was always interested in nature, I created a fake brand called Foret, which has a mission of 'creating a green space within the living area for modern people in the city.'
After creating the brand, I defined design principles that serve as guidelines to follow when approaching the design system. Within the design principles, I selected basic elements of the design system such as color and font that match the brand, and developed UI components based on them.
The Foret Design System is available in React and Angular versions.
If you're looking for React version, check out foret-react
. If you're looking for Angular
version, take a look at foret-ng
.
Here's a full list of packages that are included in Foret Design System.
Package | Description |
---|---|
@altenull/foret-react |
React components. |
@altenull/foret-ng |
Angular components. |
@altenull/foret-sass |
Package that should be installed with foret-ng. |
@altenull/foret-core |
A shared resource used by both foret-react and foret-ng. |
Licensed under the MIT.