AI Assistant

Cherry Design System

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. The Cherry Design System is 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.

What Cherry Offers

  • Figma Designs - Meticulously crafted Figma designs for all the design primitives. From buttons to inputs, we've got you covered.
  • Figma Plugin - Extract default theme tokens automatically, ensuring consistency across your entire project.
  • Open Source React Components - Cherry provides open source React components via cherry-styled-components for the default implementation. Meant to be customized and built upon.
  • Theming & Dark Mode - Fully typed light and dark themes with SSR-safe, flash-free dark mode.

Cherry intentionally focuses on providing the essential building blocks that most interfaces require. Simplicity often leads to elegance.

These docs are split in two: you are reading the Design section; switch to Code in the header for installation and the full component API.

Live Demo

See every component in one interactive playground.

Figma

Start with the Figma template and plugin.

Colors

Explore the color palette for light and dark modes.

Typography

Typography scales for desktop and mobile.

Shadows

Shadow elevation system for depth and hierarchy.

Icons

Over 1,500 Lucide icons on a consistent grid.

Installation

Install cherry-styled-components and set up the providers.

Component API

Props and usage docs for every React component.

FigmaNext
DiscordFigma TemplateFigma PluginGitHub