Design system for the modern web.

Cherry Design System is a versatile foundation for projects. It offers a white label base, ready-to-use Figma designs, open-source React components, built-in support for theming and dark mode. Explore the docs to create delightful user interfaces.

<Container>
  <Grid $xsCols={1} $lgCols={3}>
    <Col $lgSpan={3}>
      <Input type="text" $fullWidth />
    </Col>
    <Button $variant="primary">Save</Button>
    <Button $variant="secondary">Cancel</Button>
    <Button $outline>Remind Later</Button>
  </Grid>
</Container>

For every serious project, a robust design system is essential. It lays the foundation for consistent and cohesive user interfaces. Whether you’re building a web app, mobile app, or any digital product, having a well-defined set of basic elements is crucial. These elements include typography, buttons, form inputs, components, and more.

Design

Cherry provides a Figma Template that includes all the fundamental elements of an interface. And a Figma Plugin to extract the design tokens.

Code

All Cherry elements seamlessly translate into open-source React components written in TypeScript, making implementation a breeze.

Scale

Whether you’re tweaking, adding features, or expanding your project, Cherry ensures that your design remains harmonious.

Join the community

Ready to be part of something great? Join our vibrant community! Connect with fellow designers and developers on Discord, explore our Figma community template, star our GitHub repository, and engage in discussions. Together, we’ll build a better web!