A design system to build the web.

Cherry is the foundation for your design system, from design to code. With examples of implementations in modern front-end technologies. Customizable and scalable, ready to be used out-of-the-box.

Get Started
Cherry home page illustration
Figma Logo
Sass Logo
PostCSS Logo
React Logo
WordPress Logo
HTML5 Logo

1Start with design

You start by designing your website. Cherry provides a Figma template that defines all standard web patterns and typographys for your design system.

Design
Design illustration

2Continue in code

Each design element comes with a code implemented in various modern front-end technologies or can be used as components.

Code
Code illustration

3Scale your design system

Cherry follows it’s own naming convention from design to code. Expanding and customizing your design system has never been easier.

Scale
Scale illustration

Open Source Projects

Get Started

Follow the creator

Join the community