Skip to main content

The theming system

you were missing

Morfeo is a tool to build design systems based on a theme. It helps you to follow a design language and write consistent UIs, whatever it is the framework of your choice. It's easy to use and, with the browser extension, your theme and your components are automatically documented.


Web extension

🌞 🌑

Multi theming

🕍 ⛪ 🕋

Framework agnostic


Single source of truth




How it works?

"colors": {
"primary": "#0066ff",
"secondary": "#db2494"
"radii": {
"s": "12px"
set your theme
"bg": "secondary",
"color": "primary",
"corner": "s"
create styles based on the theme
"backgroundColor": "#db2494",
"color": "#0066ff",
"borderRadius": "12px"
Morfeo will generate a valid CSS-in-JS

Try it now!

This is a React example but Morfeo can be used everywhere
Live Editor