UI & UX Guidelines
Official UI/UX rules for all MASARUK surfaces
1. Purpose & Scope
This document defines the official UI/UX rules for all MASARUK surfaces:
- B2C Web (Next.js + Tailwind)
- Mobile App (Flutter)
- Admin Panel
- Provider Portal
These rules ensure:
- Consistency across all platforms
- Alignment with MASARUK brand identity
- Predictable user flows
- Accessible and modern Saudi-oriented travel UX
- Strict preservation of Arabic UI labels
2.1 Colors (Official Palette)
| Token | Hex | Usage |
|---|---|---|
| Primary Green | #006a4e | Primary actions, CTA buttons, accents |
| Teal | #2ec4b6 | Secondary accents, highlights |
| Dark Grey | #2f2f2f | Headings, main text on light background |
| White | #ffffff | Backgrounds, cards, modals |
| Light Grey | #f4f4f4 | Muted backgrounds, sections |
| Error Red | #ef4444 | Validation errors, ملغاه badge |
| Success Green | #22c55e | Success states, completion messages |
| Warning Orange | #f97316 | قيد التنفيذ or تحت الصيانة statuses |
2.2 Typography (Fonts)
Arabic
- Tajawal (default)
- Cairo (fallback)
- IBM Plex Arabic (headings, Admin)
English
- Inter (default)
- Poppins (fallback)
Hierarchy
| Level | Usage | Weight |
|---|---|---|
| H1 | Page titles | 700 |
| H2 | Section titles | 600 |
| H3 | Sub-sections | 500 |
| Body | General text | 400 |
| Caption | Labels, notes | 300-400 |
3. Layout & Spacing
3.1 Spacing System
Use a consistent 8pt system:
4px (tight)8px (standard unit)16px (sections)24px (cards)32px (hero areas)48px (major layout separation)
4. Components Guidelines
4.2 Input Fields
- Rounded corners: 10px
- Border: #d1d5db
- Focus: #006a4e
- Error border: #ef4444
- RTL alignment when Arabic is active
- Labels must match UI text exactly
4.3 Tables
- Sticky header
- Alternating row background on hover
- Row actions ALWAYS right aligned (edit, delete, view)
- Status badges use official color-coded statuses
4.4 Status Badges (Mandatory Mapping)
| Arabic (UI) | Color | Meaning |
|---|---|---|
| نشطة | Green | Active (Bus) |
| غير نشطة | Red/Pink | Inactive |
| تحت الصيانة | Orange | Maintenance |
| فعالة | Green | Active (Hotel/Rest stop) |
| غير فعالة | Pink | Inactive (Hotel/Rest stop) |
| مؤكدة | Green | Confirmed Booking |
| قيد التنفيذ | Orange | Pending Booking |
| ملغاه | Red/Pink | Cancelled |
| قادمة | Blue/Teal | Upcoming |
| مكتملة | Grey | Completed |
| في الرصيد الحالي | Beige | Pending payout |
| تم التحويل | Green/Teal | Settled |
| مسترجع | Pink | Refunded |