MobiCity Design System

v1.0 Case Study
01

Colours

The color system is built on three groups: greyscale, primary, and semantic. All tokens are tested to meet WCAG 2.1 AA contrast requirements.

Greyscale

Grey 50#F6F6F6Background·Surface
Grey 100#E0E0E0Border·Divider
Grey 300#BDC1C8Placeholder·Disabled
Grey 500#9DA1A7Subtle text
Grey 700#787A80Secondary text
Grey 900#1C1C1CBody·Heading

Primary — Blue

Primary 50#E9F4F9Tint·Background
Primary 100#E1ECF1Hover·Light state
Primary 500#2790C3CTA·Button·Link
Primary 600#1f7cadHover state
Primary 700#15587dActive·Focus ring
Note: Primary 500 (#2790C3) on white gives a 3.3:1 ratio, which passes AA Large for large text and UI elements. For smaller text, use Primary 700 (#15587d), which reaches 7.5:1.

Additional — Semantic

Success#00B517Confirmation·Stock
Warning#FF9017Alert·Low stock
Error#FA3434Error·Out of stock
White#FFFFFFCard·Surface
02

Typography

The official typeface is IBM Plex Sans Arabic, a high-quality free alternative to SST Arabic. The scale follows an 8px-based rhythm.

IBM Plex Sans Arabic
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700
StyleSize / Line HeightWeightLetter SpacingUsagePreview
H1 72px / 1.0 700 −0.04em Hero · Page Header

عنوان رئيسي

H2 56px / 1.05 700 −0.03em Section Title

عنوان القسم

H3 40px / 1.1 700 −0.02em Sub-section · Card

عنوان فرعي

H4 28px / 1.2 600 −0.01em Component Heading

عنوان المكوّن

H5 20px / 1.3 600 0 Card Title · Label

عنوان البطاقة

H6 16px / 1.4 600 0 Section Sub-label

عنوان ثانوي صغير

Subtitle 18px / 1.6 500 0 Lead paragraph

نص توضيحي رئيسي يظهر تحت العنوان مباشرة

Body 16px / 1.65 400 0 General body copy

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة. لقد تم توليد هذا النص من مولد النص العربي.

Body Sm 14px / 1.6 400 0 Helper · Description

نص مساعد يظهر أسفل حقول الإدخال أو كتوضيح إضافي للمستخدم

Button 16px / 1.0 600 0.01em CTA buttons

أضف إلى السلة

Caption 12px / 1.5 400 0 Image captions · Meta

تمت الكتابة في: ١٦ أبريل ٢٠٢٦ · وقت القراءة: ٣ دقائق

Label 12px / 1.0 600 0.08em · CAPS Tags · Eyebrow · Badge

LABEL TEXT

Link 16px / 1.65 500 0 Inline links اقرأ المزيد عن MobiCity ←
03

Spacing System

Spacing follows an 8px grid. All core values are multiples of 8.

4pxspace-0.5Gap داخل badges
8pxspace-1Padding أزرار صغيرة
12pxspace-1.5Gap بين أيقونة ونص
16pxspace-2Padding card body
24pxspace-3Gap بين العناصر
32pxspace-4Padding sections
40pxspace-5Margin بين blocks
48pxspace-6Section padding
64pxspace-8Hero padding
80pxspace-10Large section gap

Border Radius

4px — xsBadges · Chips
8px — smInputs · Alerts
12px — mdCards · Buttons
16px — lgModals · Panels
24px — xlHero frames
999px — pillTags · Full-round btns
04

Icons

Phosphor Icons are used for a lightweight, multi-weight icon set with RTL-friendly usage. Standard sizes: 16, 20, 24, and 32.

16px — Inline
20px — Input
24px — UI
32px — Feature

Core Icon Set

Search
Cart
Wishlist
User
Notify
Arrow R
Arrow L
Expand
Collapse
Close
Check
Add
Remove
Delete
Edit
View
Hide
Star
Star Fill
Share
Location
Phone
Email
Order
Delivery
Payment
Secure
Tag
Grid
List
Filter
Sort
Warning
Info
Success
Error
Phone
Upload
Camera
Lock
Settings
Home
Store
Date
Copy
05

Accessibility

WCAG 2.1 AA is the minimum baseline applied to all interface elements.

7.2:1
#1C1C1C على أبيض
AAA ✓
4.7:1
#787A80 على أبيض
AA ✓
3.3:1
#2790C3 + نص أبيض
AA Large ✓
7.5:1
#15587d على أبيض
AAA ✓
5.1:1
Success على أبيض
AA ✓
4.6:1
Error على أبيض
AA ✓
Minimum body text size: 16px
Minimum touch target size: 44x44px
Component demos use local dir="rtl" wrappers where Arabic UI is required
Focus states remain visible on all interactive controls
Do not rely on color alone; pair state with icon and text
Every image includes meaningful alt text
06

Buttons

Sizes: Large (Desktop), Medium (Tablet), Small (Mobile). Types: Primary, Secondary, Ghost, and Danger.

Sizes — Desktop · Tablet · Mobile
LG: min-height 52px · padding 14px 28px · font 16px/600 MD: min-height 44px · padding 11px 22px · font 15px/600 SM: min-height 36px · padding 8px 16px · font 14px/600
Types
Icon Variants
Full Width
07

Badges & Tags

Product state badges and filtering tags.

Product Status
جديد تخفيض −20% الأكثر مبيعاً متوفر كمية محدودة نفذت الكمية غير مدعوم
Filter Tags / Chips
08

Alerts

System feedback patterns for success, warning, error, and informational states.

تمت العملية بنجاح! تم إضافة المنتج إلى سلة التسوق بنجاح.
تنبيه! الكمية المتبقية من هذا المنتج أقل من 5 قطع.
حدث خطأ! تعذّر إتمام عملية الدفع. يرجى المحاولة مجدداً.
معلومة. سيتم شحن طلبك خلال ٢–٣ أيام عمل.
09

Forms & Inputs

Input coverage includes text, select, search, quantity, and validation states in an RTL form pattern.

+20
—
تم التحقق بنجاح
رقم الهاتف غير صحيح
Radio · Checkbox · Switch
طريقة الشحن
الإضافات
الإشعارات
11

Product Card

Product card patterns in both grid and list layouts.

Grid View
iPhone 16 Teal
جديد
Apple
iPhone 16 Teal 128GB
(١٢٤)
٤٬٩٩٩ ج.م
Samsung S25 Ultra
الأكثر مبيعاً−15%
Samsung
Galaxy S25 Ultra 512GB
(٢٩٨)
٧٬٦٤٩ ج.م٨٬٩٩٩ ج.م
iPhone 17 Pro Max
نفذت الكمية
Apple
iPhone 17 Pro Max 2TB
(٤٧)
١٤٬٩٩٩ ج.م
Xiaomi Redmi A5
−10%
Xiaomi
Redmi A5
(٣١)
١٬٣٤٩ ج.م١٬٤٩٩ ج.م
List View
Samsung S25 Ultra
الأكثر مبيعاً
Samsung
Galaxy S25 Ultra 12GB+512GB Titanium
(٢٩٨ تقييم)

شاشة Dynamic AMOLED 2X ٦.٩ بوصة — كاميرا ٢٠٠MP — بطارية ٥٠٠٠mAh — شحن سريع ٤٥W

٧٬٦٤٩ ج.م ٨٬٩٩٩ ج.م متوفر
Titanium Silverblue 512GB 12GB RAM
12

Email Subscription

اشترك في نشرتنا البريدية

احصل على أحدث العروض والتخفيضات مباشرة في بريدك الإلكتروني.

بالاشتراك توافق على سياسة الخصوصية. يمكنك إلغاء الاشتراك في أي وقت.

15

Product List Page (PLP)

Product listing page with filters and grid/list view toggle.

١٬٢٤٧ منتج
iPhone 16
جديد
Apple
iPhone 16 Teal
٤٬٩٩٩ ج.م
S25
Hot
Samsung
Galaxy S25 Ultra
٧٬٦٤٩ ج.م٨٬٩٩٩ ج.م
iPhone 17
Apple
iPhone 17 Pro Max
١٤٬٩٩٩ ج.م
Xiaomi A5
Xiaomi
Redmi A5
١٬٣٤٩ ج.م
iPhone 15 Black
Apple
iPhone 15 Black
٣٬٨٩٩ ج.م
Infinix 10
Infinix
Smart 10
٨٩٩ ج.م
16

Product Detail Page (PDP)

Product detail page with gallery, variants, pricing, and purchase actions.

Samsung S25 Ultra
thumb 1
thumb 2
thumb 3
thumb 4
متوفر في المخزن
Samsung

Samsung Galaxy S25 Ultra 12GB + 512GB Titanium Silverblue

٥.٠(٢٩٨ تقييم)
٧٬٦٤٩ ج.م ٨٬٩٩٩ ج.م وفّر ١٬٣٥٠ ج.م
اللون: Titanium Silverblue
التخزين
الكمية
شحن مجاني
إرجاع ١٤ يوم
ضمان سنة
تقسيط بدون فوائد
17

Cart & Checkout

Cart summary and a multi-step checkout form flow.

السلة
٢
الشحن
٣
الدفع
٤
التأكيد

بيانات الشحن

ملخص الطلب

Samsung Galaxy S25 Ultra
512GB · Titanium Silverblue · الكمية: ١
٧٬٦٤٩ ج.م
iPhone 16 Teal 128GB
١٢٨GB · Teal · الكمية: ١
٤٬٩٩٩ ج.م
المجموع الجزئي١٢٬٦٤٨ ج.م
الشحنمجاني
خصم الكود−٥٠٠ ج.م
الإجمالي١٢٬١٤٨ ج.م
18

User Profile

User profile page covering account data, recent orders, and settings.

أحمد محمد

البيانات الشخصية

طلباتي الأخيرة

Samsung Galaxy S25 Ultra
رقم الطلب: #MC-٢٠٢٦-٠٠١٢
تم التوصيل ١٠ أبريل ٢٠٢٦
٧٬٦٤٩ ج.م
iPhone 16 Teal 128GB
رقم الطلب: #MC-٢٠٢٦-٠٠٠٨
جارٍ الشحن ١٥ أبريل ٢٠٢٦
٤٬٩٩٩ ج.م