Product Design

Kashi: A Design System Developed In React

Kashi: A Design Language

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.

Tiling of The Shah Mosque in Isfahan. Photo by Mostafa Meraji
Tiling of Sheikh Lotfollah Mosque, Isfahan. Photo by Faruk Kaymak

 

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