# How to Choose a Design System by Product Type

> Choose a design system based on what you are building: Abdul Osama suggests different options for cross-platform apps, enterprise software, e-commerce, and mobile apps. His list is a starting point for comparison, not a rule that every project must follow.

- By Abdul Osama (عبدول أسامة) — AI, marketing and business, in Arabic
- 5 October 2026
- URL: https://abdulosama.com/en/feed/design-systems-for-vibe-coding-projects
- Video: https://abdulosama.com/feed/video/193
- Instagram: https://www.instagram.com/reel/DYPw28QqBcJ/
- YouTube: https://youtube.com/shorts/85-RIstlf7A
- TikTok: https://www.tiktok.com/@abdul_osama/video/7696580109746195732
- LinkedIn: https://lnkd.in/p/dJs5w-SZ
- X: https://x.com/AbdulOsama90/status/2110427025806860549?s=20

## Key takeaways

- Choose by product type and platform before choosing a design system.
- Abdul suggests Material Design for cross-platform work and Fluent UI for productivity or enterprise software.
- He points to Carbon Design System for data-heavy enterprise interfaces and Polaris for e-commerce.
- His mobile and quick-web-MVP suggestions are Human Interface Guidelines and Base Web, respectively.
- He mentions Stripe Design System for developer-focused or FinTech software with back-end dashboards.

Start with the product: is it a mobile app, an online store, a data-heavy dashboard, or an app that spans platforms? Abdul Osama (عبدول أسامة) explains that publicly available design systems from major companies can help when designing or *vibe coding*. A design system is a set of guidance and components for building consistent interfaces.

## Which system fits which product?

| Product or use case | Abdul’s suggested system |
|---|---|
| Web or Android app, or a cross-platform product | **Material Design**: Google’s design system; Abdul also suggests it for AI products or projects seeking a simple visual approach. |
| Enterprise software or a productivity tool | **Fluent UI**: Microsoft’s design system, which he recommends for these uses. |
| Complex enterprise app, data-heavy dashboard, or FinTech product | **Carbon Design System**: IBM’s design system, which he suggests for these cases. |
| Online store, checkout, or e-commerce dashboard | **Polaris**: Shopify’s design system, which he recommends for e-commerce interfaces. |
| iOS app | **Human Interface Guidelines**: Apple’s design guidance for apps on its platform. |
| Quick web-based MVP | **Base Web**: Uber’s design system, which Abdul suggests for this kind of project. |
| Developer-focused software or FinTech with back-end dashboards | **Stripe Design System**: the name Abdul uses for a Stripe design option he suggests for these uses. |

> “If you want to build enterprise software or a productivity tool, you can use Fluent UI.” — Abdul Osama

## Background

*Vibe coding* commonly refers to building software with AI assistance by describing what you want. A design system offers a reference for interface patterns and components; you still need to check whether they suit your users and product.

## What to do next

Identify your platform, interface type, and data complexity, then compare the relevant systems above. Abdul says viewers can request a list of GitHub links by commenting; GitHub is a platform for hosting software projects.

## Questions and answers

### Which design system does Abdul suggest for a cross-platform app?

Material Design from Google. He includes web and Android apps among its potential uses.

### What does he recommend for a data-heavy enterprise dashboard?

Carbon Design System from IBM, which he associates with complex applications and dense numerical data.

### Which system does he mention for e-commerce?

Polaris from Shopify, including for storefronts, checkout, and e-commerce dashboards.

### Are these mandatory choices for each product type?

No. They are Abdul’s suggestions for the use cases in the video; compare them against your project’s needs.

## Sources and tools mentioned

- [GitHub](https://github.com)

## Full transcript

هل تعلم أن معظم الشركات الكبيرة عندها Design Systems متاحة لأن أنت تستخدمها وانت بتvibe code؟ يعني مثلا جوجل عندها Design System اسمه Material Design. ممتاز لو أنت بتعمل حاجة Cross-Platform, Web Application, Android App, Software أو AI Products أو حتى عايز تستخدم Motion Graphics وعايز حاجة Simple لأن جوجل أسدت Simplicity. أنت كمان ممكن تستخدم لو أنت عايز تبني حاجة Enterprise Software أو Productivity Tool فممكن تستخدم Fluent UI ده بتاع Microsoft وممتاز لليوس كيس دي. عايز تعمل حاجة Enterprise تقيلة شوية وفيها Data كتيرة وDashboards وApplications معقدة شوية ورخمة في الأرقام أو FinTech فتستخدم Carbon Design System بتاع IBM. بعد كده عندك لو هتعمل حاجة E-commerce فأحسن Design System طبعاً للE-commerce سواء Dashboards أو Front في E-commerce زي Checkout أو غيره أو حتى Designs للWebsite. Shopify عندهم Design System اسمه Polaris. بعد كده لو عايز تعمل Mobile App عموماً فطبعاً السياد الموبايل Apps واللي حولوا الموبايل Apps لحاجة يعتمد عليها جامد Apple مع احترامنا للAndroid يعني. عندهم Design System بيفرضوه على المستخدم الiOS أو مبرمجي الiOS اسمه Human Interface Guidelines ده اسمه. بعد كده لو أنت عايز تعمل حاجة Web Based MVP سريعة خفيفة وما فيهاش ألوان أصلاً كتير ومعتمد على الأسود فأحسن حاجة للMVP Design System Uber اسمه Base Web. أخيراً لو عايز تعمل حاجة لها دعوة بالFinTech أو Software اللي فيه Dashboards في Backend كتير وحاجة للDevelopers قوي فأكيد Stripe Design System وهو اسمه كده أحسن Option بالنسبة لك. لو يهمك تاخد الليستة دي باللينكات بتاعت GitHub اللي هتديها للAgency بتاعتك رد بأي تعليق وهبعتهلك على الخاص. أنا عبدالقسامك تابعوني عشان تعرف كل جديد في الزكاء الصناعي والتسويق.

---
Transcribed and written up with AI from the video; reviewed on request.