-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathkashi.html
8 lines (8 loc) · 8.2 KB
/
kashi.html
1
2
3
4
5
6
7
8
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Kashi: A Design System Developed In React - Taha Mousavi</title><meta name="description" content="Company: Miare Product: Kashi (code name: Milingo) My role: UI designer, Product Manager Team: 4 Engineers, Myself 2019 - 2020…"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="canonical" href="https://tahamousavi.github.io/kashi.html"><link rel="alternate" type="application/atom+xml" href="https://tahamousavi.github.io/feed.xml"><link rel="alternate" type="application/json" href="https://tahamousavi.github.io/feed.json"><meta property="og:title" content="Kashi: A Design System Developed In React"><meta property="og:image" content="https://tahamousavi.github.io/media/posts/16/Kashi-design-language-cover.webp"><meta property="og:image:width" content="1600"><meta property="og:image:height" content="1200"><meta property="og:site_name" content="Taha Mousavi"><meta property="og:description" content="Company: Miare Product: Kashi (code name: Milingo) My role: UI designer, Product Manager Team: 4 Engineers, Myself 2019 - 2020…"><meta property="og:url" content="https://tahamousavi.github.io/kashi.html"><meta property="og:type" content="article"><link rel="stylesheet" href="https://tahamousavi.github.io/assets/css/style.css?v=b1a5fc78c4cf9c158c60d1dc7c392797"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://tahamousavi.github.io/kashi.html"},"headline":"Kashi: A Design System Developed In React","datePublished":"2021-10-02T21:22","dateModified":"2022-12-24T12:10","image":{"@type":"ImageObject","url":"https://tahamousavi.github.io/media/posts/16/Kashi-design-language-cover.webp","height":1200,"width":1600},"description":"Company: Miare Product: Kashi (code name: Milingo) My role: UI designer, Product Manager Team: 4 Engineers, Myself 2019 - 2020…","author":{"@type":"Person","name":"Taha Mousavi","url":"https://tahamousavi.github.io/authors/taha-mousavi/"},"publisher":{"@type":"Organization","name":"Taha Mousavi"}}</script></head><body><header class="header" id="js-header"><a href="https://tahamousavi.github.io/" class="logo">Taha Mousavi</a><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li><a href="https://tahamousavi.github.io/tags/design-tag/" target="_self">Product Design</a></li><li><a href="https://tahamousavi.github.io/tags/illustration-tag/" target="_self">Visuals</a></li><li><a href="https://tahamousavi.github.io/about-me.html" target="_self">About me / CV</a></li></ul></nav></header><main><div class="wrapper"><article class="post"><header class="post__header"><a href="https://tahamousavi.github.io/tags/design-tag/" class="post__maintag">Product Design</a><h1 class="post__title">Kashi: A Design System Developed In React</h1></header><figure class="post__featured-image"><img src="https://tahamousavi.github.io/media/posts/16/Kashi-design-language-cover.webp" height="1200" width="1600" alt="Kashi: A Design Language"></figure><div class="post__inner"><div class="post__entry"><p><strong><span data-preserver-spaces="true">Company:</span></strong><span data-preserver-spaces="true"> <a href="https://www.linkedin.com/company/mia.re/about/" target="_blank" rel="noopener noreferrer">Miare</a></span><br><strong><span data-preserver-spaces="true">Product:</span></strong><span data-preserver-spaces="true"> <a href="https://github.com/miare-ir/Milingo" target="_blank" rel="noopener noreferrer">Kashi</a> (code name: Milingo)</span><br><strong><span data-preserver-spaces="true">My role:</span></strong><span data-preserver-spaces="true"> UI designer, Product Manager</span><br><strong><span data-preserver-spaces="true">Team:</span></strong><span data-preserver-spaces="true"> 4 Engineers, Myself </span><br><span data-preserver-spaces="true">2019 - 2020</span></p><p><a href="https://github.com/miare-ir/Milingo" target="_blank" rel="noopener noreferrer">[Source code]</a> <a href="https://miare-ir.github.io/Milingo" target="_blank" rel="noopener noreferrer">[Live demo on Storybook]</a></p><h2>Introduction</h2><p>Kashi is a design system. It is developed to support the interface design of Miare products. As I explained <a href="https://tahamousavi.github.io/miare.html" target="_blank" rel="noopener noreferrer">here</a>, 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.</p><p>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.</p><figure class="post__image"><img src="https://tahamousavi.github.io/media/posts/16/mostafa-meraji-fJAdX7tU-Co-unsplash.jpg" alt="" width="1920" height="1280"><figcaption>Tiling of The Shah Mosque in Isfahan. Photo by Mostafa Meraji</figcaption></figure><figure class="post__image"><img src="https://tahamousavi.github.io/media/posts/16/faruk-kaymak-CNVvDjVDiVI-unsplash.jpg" alt="" width="1920" height="1194"><figcaption>Tiling of Sheikh Lotfollah Mosque, Isfahan. Photo by <a href="https://unsplash.com/@fkaymak?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener noreferrer">Faruk Kaymak</a></figcaption></figure><h2> </h2><h2>Storybook</h2><p>A live demo of React components is available on <a href="https://miare-ir.github.io/Milingo">Storybook</a>.</p><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kasi-storybook.webp" alt="" width="1600" height="1200"></figure><p> </p><h2>Styles</h2><p> </p><h3 class="align-left">Typography</h3><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kasi-Typography-2.webp" alt="" width="1600" height="1494"></figure><h3> </h3><h3>Colors</h3><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kasi-colors-2.webp" alt="" width="1600" height="2480"></figure><h3> </h3><h3>Spacing</h3><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kasi-Spacing.webp" alt="" width="1600" height="824"></figure><h2> </h2><p> </p><h2>Components</h2><p> </p><h3>Button</h3><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kasi-button.webp" alt="" width="1600" height="1532"></figure><h3> </h3><h3>Radio Button, Checkbox, Select, Tag</h3><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kasi-component-n1.webp" alt="" width="1600" height="1265"></figure><p> </p><h3>Text Field</h3><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kasi-Textfield-2.webp" alt="" width="1600" height="983"></figure><p> </p><h3>Table</h3><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kashi-table.webp" alt="" width="1600" height="1158"></figure><p> </p><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/16/Kashi-action-table.webp" alt="" width="1600" height="1405"></figure><p> </p><p> </p></div></div></article></div></main><footer class="footer"><div class="footer__copyright">© 2024 Taha Mousavi</div></footer><script>window.publiiThemeMenuConfig = {
mobileMenuMode: 'sidebar',
animationSpeed: 300,
submenuWidth: 'auto',
doubleClickTime: 500,
mobileMenuExpandableSubmenus: true,
relatedContainerForOverlayMenuSelector: '.navbar',
};</script><script defer="defer" src="https://tahamousavi.github.io/assets/js/scripts.min.js?v=66112a161d5939d966ce2b20c13988d9"></script></body></html>