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.

Features

Web extension

🌞 🌑

Multi theming

🕍 ⛪ 🕋

Framework agnostic

🧘

Single source of truth

🧩

Extendible

CLI

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
Result
Loading...