Description & Goals

When I was working in a private company, designers and developers were not speaking the same language. Thus, we established a research group to study major design systems and create a new design system or employ one of the existing ones based on the company needs to serve as a common language to reach better consistency the company's products.

---

What Design Systems We Studied?

We conducted in-depth research on the following design systems to study their best practices and find the most suitable one which fully responds to the company's needs.

• Google Material
• Apple Human Interface Guidelines
• Microsoft Fluent
• IBM Carbon
• Adobe Spectrum
• GitLab Pajamas
• Shopify Polaris
• Atlassian
• Uber
• Salesforce Lightning
• Divar Sonnat

---

What Concepts We Studied?

Based on our needs, we studied the following concepts in the above-mentioned design systems:

• Bi-directionality
• Colors
• Data Visualization
• Grid System
• Iconography
• Imagery
• Interation States
• Motion
• Shape
• Sound
• Spacing
• Typography

---

Which Components We Redesigned?

We redesigned the following components based on existing elements in the product and those may be used in the future.

• App Bars
• Banners
• Bottom Navigation
• Buttons
• Dialogs
• Dropdown
• Image Lists
• Lists
• Navigation Drawers
• Progress Indicators
• Selection controls
• Sheets
• Sliders
• Snackbars
• Tabs
• Text field
• Tooltip

---

Color Palette & Typography

This color palette consists of primary, secondary, neutral, success, warning, and error colors for light and dark themes. In addition, the number of "A"s for each color indicates the supported level of accessibility. IRANSans is the primary typeface and Dana is the alternative typeface used in this project because of their geometric features and proved legibility.