Introduction

Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.

In the world of design and development, consistency is key. Every page, every component, and every interaction should adhere to a set of fundamental principles. Enter the Cherry Design System—your reliable companion for maintaining harmony between design and development.

Why a Design System?

  1. Consistency: A design system ensures that basic elements remain consistent across all pages. Whether it’s buttons, typography, or spacing, users should experience a seamless visual language.
  2. Efficiency: For meticulously crafted projects, a robust design system streamlines workflows. It bridges the gap between designers and developers, fostering collaboration and efficiency.
  3. Foundations: A good design system lays down the groundwork. It establishes rules, guidelines, and best practices, allowing teams to build upon a solid foundation.

Cherry: Your Solution

At Cherry, we offer simplicity with purpose. Here’s what we bring to the table:

  • Figma Designs: Our journey begins with meticulously crafted Figma designs for all the design primitives. From buttons to inputs, we’ve got you covered.
  • Figma Plugin: Say hello to our Figma plugin! Extract default theme tokens automatically, ensuring consistency across your entire project.
  • Development Phase: After the design phase, development takes center stage. Cherry provides more than just visuals—we’ve got your back during implementation too.
  • Open Source React Components: We don’t stop at visuals. Cherry offers open source React components for the default implementation. But remember, Cherry is meant to be customized and built upon. For smaller projects, you might find more than you need out of the box—like secondary and tertiary buttons or size variations. Start small, stay organized, and grow as needed.

While it may appear extensive, the Cherry Design System intentionally focuses on providing the essential building blocks that most interfaces require. By offering a concise yet robust set of elements, we empower designers and developers to create consistent, efficient, and well-structured user experiences. Remember, simplicity often leads to elegance, and Cherry is here to simplify your creation journey!