DESIGN SYSTEM v3.2 — FIXED & IMPROVED

DesertPaths™

Complete UI Style Guide — 43 Sections · Flowbite Components · Tailwind CSS · RTL Ready · Dark Mode · Accessible

6 Color Palettes 43 Sections LTR + RTL WCAG AA Dark Mode

1. Color Palette

Brand colors, semantic states, and neutrals. Click any swatch to copy its hex code.

Gold (Primary)

50
#FFF9EB
100
#FFF0CC
200
#FFE199
300
#FFD266
400
#C8A13E
500
#B8922E
600
#9A7A24
700
#7C621D
800
#5E4A16
900
#40320F

Brown (Secondary)

50
#FAF5F0
100
#F0E6D8
200
#E1CDB1
300
#D2B48A
400
#B89B6A
500
#8B6F47
600
#6E583A
700
#51412D
800
#342A20
900
#1A1510

Dark (Neutrals)

50
#F5F5F5
100
#E0E0E0
200
#BDBDBD
300
#9E9E9E
400
#757575
500
#616161
600
#424242
700
#2C2C2C
800
#1E1E1E
900
#121212

Semantic Colors

Success
#10B981
Warning
#F59E0B
Danger
#EF4444
Info
#3B82F6

2. Typography

Audiowide pentru headings, Plus Jakarta Sans pentru body/UI, JetBrains Mono pentru cod.

Headings

Audiowide

Weight: 400 (Regular)

Body / UI

Plus Jakarta Sans

Weights: 300, 400, 500, 600, 700

Monospace

JetBrains Mono

Pentru cod și ID-uri

Type Scale

H1 — Discover the Arabian Desert
Audiowide 36px LH 1.2
H2 — Journey Through Ancient Kingdoms
Audiowide 28px LH 1.25
H3 — Land of Midian Expedition
Audiowide 22px LH 1.3
H4 — Booking Details
Plus Jakarta Sans 700 18px
H5 — Payment Summary
Plus Jakarta Sans 600 16px
Body — Experience the magic of the desert with our curated journeys through Saudi Arabia's most breathtaking landscapes.
Plus Jakarta Sans 400 16px / LH 1.6
Body Small — Check-in time is 3:00 PM. Please bring comfortable hiking shoes.
14px LH 1.5
Code — var price = CalculateTotal(journey);
JetBrains Mono 14px

3. Buttons

Primary, secondary, outline, ghost, danger, and size variants.

Variants

Sizes

Loading State

With Icons

<!-- Primary Button -->
<button class="bg-orange-400 hover:bg-orange-500 text-white font-semibold px-6 py-2.5 rounded-desert transition">
  Primary Button
</button>

<!-- Loading State -->
<button class="bg-orange-400 text-white font-semibold px-6 py-2.5 rounded-desert
  inline-flex items-center gap-2 opacity-80 cursor-wait" disabled>
  <svg class="animate-spin h-4 w-4">…</svg> Processing…
</button>

4. Tags & Badges

Status, journey style, customer type, land, priority, and payment tags — toate tipurile folosite în proiect.

4.1 Status Tags

DRAFT PLANNING CONFIRMED PARTIALLY PAID FULLY PAID IN PROGRESS COMPLETED CANCELLED REFUNDED

4.2 Journey Style Tags

BEDOUIN MODERN VIP PREMIUM

4.3 Customer Type Tags

B2C CORPORATE MINISTRY GROUP HONEYMOON

4.4 Land Tags

NEOM MIDIAN KINGDOMS HEJAZ INCENSE

4.5 Priority / Alert Tags

URGENT PINNED FEATURED NEW

4.6 Payment Tags

PAYTABS CASH TRANSFER PENDING 
<!-- Status Tag -->
<span class="inline-flex items-center gap-1 text-xs font-semibold px-3 py-1 rounded-full"
      style="background:#DBEAFE; color:#1E40AF">
  <i class="fa-solid fa-circle-check text-[10px]"></i> CONFIRMED
</span>

<!-- Journey Style -->
<span class="inline-flex items-center gap-1 bg-dark-900 text-orange-400
      text-xs font-semibold px-3 py-1 rounded-full">
  <i class="fa-solid fa-crown text-[10px]"></i> VIP
</span>

<!-- Land Tag -->
<span class="text-xs font-semibold px-3 py-1 rounded-full text-white"
      style="background:#0EA5E9">NEOM</span>
BEDOUIN MODERN VIP PREMIUM

4.3 Customer Type Tags

B2C CORPORATE MINISTRY GROUP HONEYMOON

4.4 Land Tags

NEOM MIDIAN KINGDOMS HEJAZ INCENSE

4.5 Priority / Alert Tags

URGENT PINNED FEATURED NEW

4.6 Payment Tags

PAYTABS CASH TRANSFER PENDING 
<!-- Status Tag -->
<span class="inline-flex items-center gap-1 text-xs font-semibold px-3 py-1 rounded-full"
      style="background:#D1FAE5;color:#065F46">
  <i class="fa-solid fa-check-double text-[10px]"></i> FULLY PAID
</span>

<!-- Land Tag -->
<span class="text-white text-xs font-semibold px-3 py-1 rounded-full"
      style="background:#D97706">MIDIAN</span>

<!-- VIP Tag -->
<span class="inline-flex items-center gap-1 bg-dark-900 text-orange-400
             text-xs font-semibold px-3 py-1 rounded-full">
  <i class="fa-solid fa-crown text-[10px]"></i> VIP
</span>

5. Form Elements

Inputs, selects, textareas, toggles, checkboxes, and validation states.



Looks good!

Toggle

7. Cards

Journey cards, info cards, and stat cards.

Active

Golden Dunes Safari

Experience the magic of desert dunes at sunset with a guided caravan.

$299

12 Locations

Curated desert destinations across Saudi Arabia and the UAE.

Explore →
Total Revenue +12.5%

$48,290

vs $42,900 last month

8. Tables

Data tables with hover, striped rows, and status badges.

Booking ID Guest Journey Date Amount Status
#BK-001 Ahmed Al-Rashid Golden Dunes Safari Mar 15, 2026 $299 Confirmed
#BK-002 Sarah Mitchell Stargazing Night Mar 18, 2026 $189 Pending
#BK-003 Khalid Omar Desert Camping Mar 22, 2026 $450 Cancelled

9. Modals

Dialog windows for confirmations, forms, and info.

10. Toast Notifications

Feedback messages for user actions.

Booking confirmed!

Confirmation email sent to guest.

Payment pending

Guest has 24h to complete payment.

Error occurred

Failed to process. Try again.

11. Alerts

Contextual alert banners.

13. Tabs

Tab navigation for content sections — Flowbite data-tabs-toggle.

Journey details content — name, description, itinerary, and category.

Pills Style

Showing all items regardless of status.

14. Accordion

Collapsible content panels for FAQs and grouped info.

Includes 4x4 dune drive, camel ride, traditional dinner, henna painting, and stargazing session. Professional guide and safety equipment provided.

15. Avatars

User profile images and initials.

Avatar Group

+5

16. Progress Bars

Visual progress indicators.

Booking Completion75%
Profile Setup40%
Upload100%

17. Tooltips

Hover-triggered contextual tips.

18. Empty States

Placeholder for empty data views.

No Journeys Yet

Create your first desert journey and start attracting adventurers.

19. File Upload

Drag-and-drop upload zone.

20. Stepper

Multi-step wizard indicators — Flowbite Stepper component.

Default Stepper

  1. 1 Details
  2. 2 Pricing
  3. 3 Media
  4. 4 Review

Stepper with Icons

Details Pricing Media Review

Vertical Stepper

  1. Personal Info

    Step details here

  2. Journey Selection

    Step details here

  3. Payment

    Current step

  4. Confirmation

    Pending

Tailwind Config Reference

Copy this into your tailwind.config.js for the DesertPaths project.

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js,jsx,ts,tsx,razor}'],
  theme: {
    extend: {
      colors: {
        gold:    { 50:'#FFF9EB', 100:'#FFF0CC', 200:'#FFE199', 300:'#FFD266',
                   400:'#C8A13E', 500:'#B8922E', 600:'#9A7A24', 700:'#7C621D',
                   800:'#5E4A16', 900:'#40320F' },
        brown:   { 50:'#FAF5F0', 100:'#F0E6D8', 200:'#E1CDB1', 300:'#D2B48A',
                   400:'#B89B6A', 500:'#8B6F47', 600:'#6E583A', 700:'#51412D',
                   800:'#342A20', 900:'#1A1510' },
        dark:    { 50:'#F5F5F5', 100:'#E0E0E0', 200:'#BDBDBD', 300:'#9E9E9E',
                   400:'#757575', 500:'#616161', 600:'#424242', 700:'#2C2C2C',
                   800:'#1E1E1E', 900:'#121212' },
        sand:    { 50:'#FEFCF8', 100:'#FDF8F0', 200:'#FAF0E0',
                   300:'#F5E6CC', 400:'#E8D5B0', 500:'#D4BF94' },
        success: { 50:'#ECFDF5', 500:'#10B981', 700:'#047857' },
        warning: { 50:'#FFFBEB', 500:'#F59E0B', 700:'#B45309' },
        danger:  { 50:'#FEF2F2', 500:'#EF4444', 700:'#B91C1C' },
        info:    { 50:'#EFF6FF', 500:'#3B82F6', 700:'#1D4ED8' }
      },
      fontFamily: {
        heading: ['Playfair Display', 'serif'],
        body:    ['Inter', 'sans-serif'],
        mono:    ['JetBrains Mono', 'monospace'],
        arabic:  ['Noto Sans Arabic', 'sans-serif']
      },
      borderRadius: { desert: '8px' },
      boxShadow: {
        'desert-sm': '0 1px 3px rgba(139,111,71,0.12)',
        'desert':    '0 4px 12px rgba(139,111,71,0.15)',
        'desert-lg': '0 8px 24px rgba(139,111,71,0.18)',
        'desert-xl': '0 12px 36px rgba(139,111,71,0.22)',
        'gold-glow': '0 0 20px rgba(200,161,62,0.3)'
      }
    }
  },
  plugins: [require('flowbite/plugin')]
}

21. Datepicker

Date selection using Flowbite datepicker with DesertPaths styling. Used for journey dates, booking windows, and filters.

Single Date

Date Range (Check-in / Check-out)

→ 
<input datepicker datepicker-format="dd/mm/yyyy" type="text"
  class="bg-white border-2 border-dark-200 text-dark-700 text-sm rounded-desert
  focus:ring-orange-400 focus:border-orange-400 block w-full ps-10 p-2.5"
  placeholder="Select journey date">

22. Rating

Star ratings for journey reviews, guide feedback, and restaurant scores.

Display Rating (4.5/5)

4.5 out of 5 · 128 reviews

Interactive Rating

Click to rate

Compact (Inline)

Desert Safari 4.8
Stargazing Tour 4.6
Camel Riding 4.2

24. Stats & KPI Cards

Dashboard stat widgets for revenue, bookings, customers, and journey metrics.

12.5%

$48,250

Total Revenue

8.3%

156

Active Bookings

2.1%

1,024

Total Customers

0.3

4.7

Avg. Rating

Large Stat Card with Chart Placeholder

Monthly Revenue

$127,430 +18.2%

Chart area — integrate with Chart.js or ApexCharts

25. Spacing Scale

Consistent spacing tokens used across the design system. Based on a 4px grid.

Token Tailwind Value Preview
space-1p-14px
space-2p-28px
space-3p-312px
space-4p-416px
space-6p-624px
space-8p-832px
space-10p-1040px
space-12p-1248px
space-16p-1664px
space-20p-2080px
Usage rule: Use gap-4 (16px) between form fields, gap-6 (24px) between card sections, py-20 (80px) for page sections.

26. Icons

Font Awesome 6 icons used across the platform. Consistent sizing and color usage.

Navigation & Actions

home
route
calendar-check
users
map-marked
search
plus
edit
trash
download
filter
bell
cog
eye
globe
sun

Domain-Specific (Desert / Tourism)

mountain-sun
campground
utensils
compass
binoculars
horse
moon
camera

Icon Sizes

xs (12px)

sm (14px)

base (16px)

lg (18px)

xl (20px)

2xl (24px)

3xl (30px)

4xl (36px)

27. Shadows

Custom desert-themed box shadows with warm brown tones.

desert-sm

0 1px 3px

Inputs, small cards

desert

0 4px 12px

Cards, dropdowns

desert-lg

0 8px 24px

Modals, popovers

desert-xl

0 12px 36px

Hero sections

gold-glow

0 0 20px

Featured items

// tailwind.config.js
boxShadow: {
  'desert-sm': '0 1px 3px rgba(139,111,71,0.12)',
  'desert':    '0 4px 12px rgba(139,111,71,0.15)',
  'desert-lg': '0 8px 24px rgba(139,111,71,0.18)',
  'desert-xl': '0 12px 36px rgba(139,111,71,0.22)',
  'gold-glow': '0 0 20px rgba(200,161,62,0.3)'
}

28. RTL Preview

Arabic RTL layout demo. All components support dir="rtl" with Tailwind logical properties.

رحلة صحراوية مميزة

استمتع بتجربة فريدة في قلب الصحراء العربية. رحلات مصممة خصيصاً لتناسب جميع الأذواق مع مرشدين محترفين.

نموذج الحجز

تم الحجز بنجاح!

سيتم إرسال تأكيد الحجز إلى بريدك الإلكتروني خلال دقائق.

RTL tip: Use Tailwind logical properties: ps-4 instead of pl-4, me-2 instead of mr-2, start-0 instead of left-0.

29. Timeline

Journey itinerary timeline and booking activity log.

Journey Itinerary

  1. Day 1 — Arrival & Welcome

    Airport pickup, transfer to desert camp, welcome dinner under the stars.

  2. Day 2 — Desert Exploration

    Sunrise hike, rock formations tour, traditional lunch, dune bashing.

  3. Day 3 — Stargazing & Farewell

    Free morning, stargazing session, farewell ceremony, airport transfer.

Booking Activity Log

  1. Payment received — $2,400.00

  2. Confirmation email sent to client

  3. Booking updated — added extra guest

  4. Booking created — Journey #J-2026-0042

30. Do / Don't Guidelines

Usage guidelines to maintain consistency across the platform.

✓ DO
  • Use rounded-desert (12px) for all cards, modals, and containers
  • Use Audiowide only for H1–H3 headings
  • Use orange-400 as the primary action color
  • Use semantic colors for status: success/warning/danger/info
  • Maintain 4px grid spacing (multiples of 4)
  • Use Flowbite data-attributes for interactive components
✗ DON'T
  • Don't use Audiowide for body text or small labels
  • Don't mix rounded corners — stick to 12px
  • Don't use pure black — use dark-900 instead
  • Don't use red for non-destructive actions
  • Don't hardcode colors — always use Tailwind tokens
  • Don't write custom JS when Flowbite has a component

31. Pagination

Page navigation for data lists and search results.

Showing 1–10 of 120 results

32. Skeleton Loading

Placeholder shimmer animations while content loads.

Loading…
Loading…
Loading…

33. B2C Navbar

Public-facing navigation for guest site.

Tailwind Config Reference

Copy this into your tailwind.config.js for the DesertPaths project.

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js,jsx,ts,tsx,razor}'],
  theme: {
    extend: {
      colors: {
        gold:    { 50:'#FFF9EB', 100:'#FFF0CC', 200:'#FFE199', 300:'#FFD266',
                   400:'#C8A13E', 500:'#B8922E', 600:'#9A7A24', 700:'#7C621D',
                   800:'#5E4A16', 900:'#40320F' },
        brown:   { 50:'#FAF5F0', 100:'#F0E6D8', 200:'#E1CDB1', 300:'#D2B48A',
                   400:'#B89B6A', 500:'#8B6F47', 600:'#6E583A', 700:'#51412D',
                   800:'#342A20', 900:'#1A1510' },
        dark:    { 50:'#F5F5F5', 100:'#E0E0E0', 200:'#BDBDBD', 300:'#9E9E9E',
                   400:'#757575', 500:'#616161', 600:'#424242', 700:'#2C2C2C',
                   800:'#1E1E1E', 900:'#121212' },
        sand:    { 50:'#FEFCF8', 100:'#FDF8F0', 200:'#FAF0E0',
                   300:'#F5E6CC', 400:'#E8D5B0', 500:'#D4BF94' },
        success: { 50:'#ECFDF5', 500:'#10B981', 700:'#047857' },
        warning: { 50:'#FFFBEB', 500:'#F59E0B', 700:'#B45309' },
        danger:  { 50:'#FEF2F2', 500:'#EF4444', 700:'#B91C1C' },
        info:    { 50:'#EFF6FF', 500:'#3B82F6', 700:'#1D4ED8' }
      },
      fontFamily: {
        heading: ['Playfair Display', 'serif'],
        body:    ['Inter', 'sans-serif'],
        mono:    ['JetBrains Mono', 'monospace'],
        arabic:  ['Noto Sans Arabic', 'sans-serif']
      },
      borderRadius: { desert: '8px' },
      boxShadow: {
        'desert-sm': '0 1px 3px rgba(139,111,71,0.12)',
        'desert':    '0 4px 12px rgba(139,111,71,0.15)',
        'desert-lg': '0 8px 24px rgba(139,111,71,0.18)',
        'desert-xl': '0 12px 36px rgba(139,111,71,0.22)',
        'gold-glow': '0 0 20px rgba(200,161,62,0.3)'
      }
    }
  },
  plugins: [require('flowbite/plugin')]
}

34. Admin Navigation (B2B)

Tabbed admin navigation with gold active state for the B2B dashboard.

Dashboard overview with KPIs, charts, and recent activity.

Showing all items regardless of status.

45. Popover

Rich content popovers using Flowbite data-popover-target.

<button data-popover-target="popover-id">Trigger</button>
<div data-popover id="popover-id" role="tooltip" class="...">
  <div class="px-4 py-3 bg-orange-50 border-b rounded-t-desert">
    <h3>Title</h3>
  </div>
  <div class="px-4 py-3">Content</div>
  <div data-popper-arrow></div>
</div>

46. Do / Don't Guidelines

Visual best-practice examples for consistent design usage.

Do

Use primary action on the left, secondary on the right.

Don't

Avoid two strong-colored buttons side by side.

Do
Confirmed

Use semantic colors: green = success, amber = warning, red = danger.

Don't
Confirmed

Don't use blue (info) for success states.

36. Master Data Tables

Advanced admin tables with toolbar, search, filters, and pagination.

Journey Land Days Price Status Actions

37. Touristic Sites Table

Sites database with thumbnails and ratings.

Site Land Type Rating

Hegra (Madain Saleh)

 MIDIAN UNESCO Heritage
5.0

Edge of the World

 NAJD Natural Wonder
4.7

38. Restaurants Table

Restaurant partners with cuisine type and pricing.

Restaurant Cuisine Price Range Status

Al Nakheel Restaurant

AlUla Old Town

 Traditional Saudi $ Active

Desert Lounge

Habitas AlUla

 International Fusion $$ Active

39. Staff Table

Staff directory with roles, languages, and availability status.

Name Role Languages Status
KA

Khalid Al-Otaibi

Since 2019

 Guide
ARENFR
 Available
FA

Fatima Al-Zahrani

Since 2021

 Coordinator
AREN
 On Leave
MH

Mohammed Hassan

Since 2020

 Driver
AREN
 Busy

40. Gear & Equipment Table

Equipment inventory with stock levels and condition.

Equipment Category In Stock Condition

Desert Tent (4-person)

 Camping
24/30
 Excellent

Binoculars (Pro)

 Optics
5/15
 Good

41. Inline Editing

Click-to-edit cells for admin tables.

Click on any value below to enter edit mode:

Midian Explorer
$1,250
5 Days

42. Chat & Messaging

Real-time chat UI for customer support.

AR

Ahmed Al-Rashid

Online

Today
AR
Hello! I'd like to know more about the Midian Explorer journey.

10:32 AM

YO
Hi Ahmed! The Midian Explorer is a 5-day journey through ancient ruins and desert camps. Would you like to see available dates?

10:34 AM

AR
Yes please! For March or April 2026.

10:35 AM