Cherry

From design to code

Cherry is a design system for the modern web: a white-label foundation designed in Figma and built in React with TypeScript and styled-components. The same primitives exist in both worlds, Figma variables on one side and a fully typed theme object on the other, so what a designer picks is what a developer ships.

It deliberately covers the essentials most interfaces need and stops there. Every token and component is meant to be customized or extended; Cherry is the starting point, not the ceiling.

Free to use

We carefully designed the Cherry documentation at cherry.al, and built it with Cherry itself, so the docs double as a real example of how things are made.

Cherry is free and open source under the MIT license, and can be used by everyone.