Design

Cherry provides a UI Kit template in Figma with all the standard web elements. The document template is divided in a few pages to keep everything organized.

1. Branding - Contains the colors definition and all the typography styles, both for desktop and mobile.
2. Interface - You can find all the form elements, buttons, inputs, checkboxes, radio buttons and drop-down selects.
3. Patterns - The desktop and mobile header can be found here.
4. Icons - Cherry uses open source icons from Ionicons.
5. Spacing & Grid - Spacing definitions and Cherry Grid, the 12 column layout system.
6. Meta Images - Favicon and all the rest of icons required for metadata.

Figma Plugin

Cherry has its own Figma Plugin to generate design tokens automatically with a click of a button. Cherry Theme Generator exports all values of the design system. It supports PostCSS, Sass, and React Components.