Motivations
When your application starts to grow, maintain UI consistency it's not easy. Even in popular applications we often face wrong typographies, different color pallettes used across different pages or inconsistent spacings in each component.
These problems are even more frequent in large applications where different teams work on different features (maybe with different technologies and frameworks).
morfeo solves this problem by sharing across all the applications a customizable theme that contains the "language" of your design and a set of parsers that generate styles based on this language.
In this way the UIs and the components are always consistent.
morfeo provides these helpers through a function called morfeo that exposes a simple API.
Alternatives
Morfeo is not the only tool you might find to build and maintain design systems, in fact, morfeo was the result of what we experienced using other tools like styled-system, theme-ui, react material-ui, xstyled and others...
We are grateful to all of them because they inspired us to make morfeo as it is. But even if we think these are great tools, none of them could solve all the problems we were facing in our projects, for example:
- theme-ui works only into a React environment, but it has the concept of components inside the theme too;
- xstyled too is made only for React;
- styled-system is technically framework agnostic, but it needs a wrapper around to always provide the theme to the parsers; That's why is commonly used with styled-components or @emotion;
- material-ui is a design system that has been implemented to work in tens of environments, each of the implementations of the system is made to follow the principles of material design, so it's not a good choice if you want to follow others style guidelines.
Morfeo instead works everywhere, doesn't need a wrapper or a context to provide the theme, it's made to be highly customizable, in this way you can build your next design system following any style guide you want to follow.