# Introduction

> Cherry is a design system for the modern web. Designed in Figma, built in React using TypeScript and Styled Components.

Source: https://cherry.al/

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# 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.

<Callout type="info">
  Cherry intentionally focuses on providing the essential building blocks that most interfaces require. Simplicity often leads to elegance.
</Callout>

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.

<Frame caption="A peek at the [Code section](/code), with props and usage docs for every component.">
  [<img className="light-only" src="/code-light.gif" alt="Code" />](/code)
  [<img className="dark-only" src="/code-dark.gif" alt="Code" />](/code)
</Frame>

<Columns cols={2}>
  <Card title="Live Demo" icon="play" href="https://demo.cherry.al/">
    See every component in one interactive playground.
  </Card>
  <Card title="Figma" icon="frame" href="/figma">
    Start with the Figma template and plugin.
  </Card>
  <Card title="Colors" icon="palette" href="/colors">
    Explore the color palette for light and dark modes.
  </Card>
  <Card title="Typography" icon="type" href="/typography">
    Typography scales for desktop and mobile.
  </Card>
  <Card title="Shadows" icon="layers" href="/shadows">
    Shadow elevation system for depth and hierarchy.
  </Card>
  <Card title="Icons" icon="smile" href="/icons">
    Over 1,500 Lucide icons on a consistent grid.
  </Card>
  <Card title="Installation" icon="download" href="/code/installation">
    Install cherry-styled-components and set up the providers.
  </Card>
  <Card title="Component API" icon="compass" href="/code">
    Props and usage docs for every React component.
  </Card>
</Columns>