masaruk Logo

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)

TokenHexUsage
Primary Green#006a4ePrimary actions, CTA buttons, accents
Teal#2ec4b6Secondary accents, highlights
Dark Grey#2f2f2fHeadings, main text on light background
White#ffffffBackgrounds, cards, modals
Light Grey#f4f4f4Muted backgrounds, sections
Error Red#ef4444Validation errors, ملغاه badge
Success Green#22c55eSuccess 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

LevelUsageWeight
H1Page titles700
H2Section titles600
H3Sub-sections500
BodyGeneral text400
CaptionLabels, notes300-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.1 Buttons

Primary

  • Background: #006a4e
  • Text: white
  • Radius: 10px
  • Full width on mobile
  • Hover (web): darker green

Secondary

  • Border: #006a4e
  • Text: #006a4e
  • Background: white

Destructive

  • Background: Error Red
  • Used only for delete actions

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)ColorMeaning
نشطةGreenActive (Bus)
غير نشطةRed/PinkInactive
تحت الصيانةOrangeMaintenance
فعالةGreenActive (Hotel/Rest stop)
غير فعالةPinkInactive (Hotel/Rest stop)
مؤكدةGreenConfirmed Booking
قيد التنفيذOrangePending Booking
ملغاهRed/PinkCancelled
قادمةBlue/TealUpcoming
مكتملةGreyCompleted
في الرصيد الحاليBeigePending payout
تم التحويلGreen/TealSettled
مسترجعPinkRefunded

6. Navigation Rules

  • Bottom navigation permanent
  • Required tabs: الرئيسية / الرحلات / حجوزاتي / تواصل معنا / الملف الشخصي
  • Back button NEVER closes the app
  • Booking flow always sequential