Meet Espresso
The base to all things Frappe design.
Why we built Espresso
The Philosophy
Frappe is a multi-product company. We build ERPNext, CRM, Helpdesk, Gameplan, Insights, and a long list of others, all on top of Frappe Framework. For a long time, each of those products was making its own decisions about the basics. What a button looks like. How forms are spaced. Which typeface to use. Where the active state lives. Different teams, different calls, different answers to the same questions.
The products worked. People used them. But you could tell they came from different hands. And in a multi-product company, that adds up to a lot of inconsistency for users who move between them every day.
So in 2022, we decided to fix this mess. We started with Frappe UI, a Vue component library that gave developers a shared set of building blocks to build on. Then we built Espresso, the design system that sits underneath Frappe UI, in collaboration with Timeless. The idea was simple. If every team starts from the same foundation, the products that come out of it will feel consistent without anyone having to think too hard about it.
Today, Gameplan, Helpdesk, CRM, Insights, and most of our newer products are all built on Espresso.
The building blocks
The Philosophy
Espresso covers all the building blocks that every Frappe product is made from. A typography system with clear rules for titles, body, and subtext. Colour stays neutral and monochrome at the base, so each product can bring its own accent without the foundation getting noisy.
Components like buttons, inputs, tabs, checkboxes, and selects are all documented with every state they can be in. Default, hover, focus, active, disabled, loading. Spacing, shadows, border radius, all the small decisions that you stop noticing once they are consistent, are settled once and reused everywhere.
Typography
Color
Iconography
Components
Designing in the open
The Philosophy
Espresso is fully open source, like everything else we build. If you are designing for Frappe, building a partner app on Framework, or extending one of our products for your own business, you can use it.
The full design system lives as a Figma community file. Every component, every token, every pattern. You can duplicate the file and start working from it immediately. The implementation lives on GitHub as frappe-ui, our Vue component library. Components in code, mapped one to one with the system in Figma.
“The unexamined life is not worth living”
~ Socrates
