• DocumentationDocs


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

Figma UI Kit

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.

Scale illustration

Cherry Theme Generator
Docs IntroductionDesign Colors

Follow the creator

Join the community