Kashi: A Design System Developed In React

Company: Miare
Product: Kashi (code name: Milingo)
My role: UI designer, Product Manager
Team: 4 Engineers, Myself
2019 - 2020
[Source code] [Live demo on Storybook]
Introduction
Kashi is a design system. It is developed to support the interface design of Miare products. As I explained here, after developing MVPs and the primary version of the restaurant panel, we decided to develop a design system to keep consistency through all future products. The source code of Kashi is open and developed in React.
Kashi is the equivalent of Tile (glazed brick) in the Persian language. Tiling is a prominent ornamental element in Iranian architecture. The name of Kashi is inspired by these wonderful decorations in the below images which are made by putting thousands pieces of tile together. Kashi (Tile) is like an atom in Atomic Design methodology.


Storybook
A live demo of React components is available on Storybook.

Styles
Typography

Colors

Spacing

Components
Button

Radio Button, Checkbox, Select, Tag

Text Field

Table

