RabbaniTour

Overview

RabbaniTour is a premium halal travel and pilgrimage service brand that transforms spiritual journeys into seamless, trustworthy experiences. The design system embraces "Warm Professionalism"—an aesthetic that combines the approachable hospitality of a trusted family advisor with the credibility and precision of a licensed travel operator. The brand serves Indonesian Muslims seeking Umroh, Haji, and halal tourism, and the UI evokes a sense of calm confidence: you are in capable hands, guided by expertise and genuine care.

The voice is conversational yet authoritative, never patronizing. Sentences are direct and benefit-focused: "Berangkat dengan tenang—kami handle semua detail" (Travel with peace of mind—we handle every detail). The brand personality balances warmth (using the golden accent #cb9a32 generously on CTAs and highlights) with the stability of deep teal (#002f2f) in secondary elements, creating a visual language that feels both inviting and dependable.

Colors

The RabbaniTour color system is built on three pillars: a warm golden primary accent, a deep teal secondary for trust and stability, and a clean white surface stack for clarity.

**Primary (#cb9a32)** is the signature accent—applied to all call-to-action buttons ("Konsultasi Gratis", "Jadwal Umroh"), interactive focus states, and key links. On hover, it shifts to #af8936 (darker, more saturated) to signal interactivity. This warm gold evokes both Islamic heritage and the promise of a precious, well-planned journey.

**Secondary (#002f2f)** is a deep, sophisticated teal used for outline buttons, secondary navigation, and text emphasis. It conveys trust, stability, and the professional licensing that RabbaniTour holds. The secondary-container (#1a4d4d) provides a subtle background for second

Typography

The type system pairs **Poppins** (headings: display, headline-lg, headline-md, title-lg) with **Mulish** (body: body-lg, body-md, label-md, label-sm), creating a clear hierarchy that guides users through content. Poppins at 600 weight conveys authority and warmth; Mulish at 400 weight ensures body text remains approachable and legible at 16px on all devices.

Display text (60px, 600 weight, -0.04em letter-spacing) is reserved for hero headlines like "Travel Umroh, Haji dan Wisata Halal Terbaik Aman dan Nyaman." Headline-lg (40px, 600 weight) anchors section titles. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text, with generous line-height (1.5) to support readability on mobile and desktop. Labels (12–14px, 500 weight) are used for button text and metadata. On sm

Layout

RabbaniTour uses a **fluid 12-column grid** with a max-width of 1400px, ensuring the design scales gracefully from mobile (320px) to desktop (1920px+). The container padding follows a semantic scale: 24px (gutter) on tablet and desktop, reducing to 16px on mobile to maximize content width on small screens.

White-space is generous and intentional: section separation uses lg spacing (40px) vertically, creating breathing room between hero, service cards, testimonials, and footer. Horizontal padding within cards uses md spacing (24px), with sm spacing (12px) for nested elements. This rhythm prevents cognitive overload and guides the eye naturally through the journey. The hero section spans full-width with a subtle gradient overlay (rgba(0, 47, 47, 0.7) to rgba(203, 154, 50, 0.1)) to establish

Elevation & Depth

Depth in RabbaniTour is achieved through **subtle layering and soft shadows**, not darkness. The design uses three elevation levels:

**Level 1 (Base)**: Flat white surface (#ffffff) with no shadow—the default canvas.

**Level 2 (Standard Cards)**: box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05), border: 1px solid #e7e7e7. Used for service cards, input fields, and list items. This creates a gentle lift without visual heaviness.

**Level 3 (Elevated/Modals)**: box-shadow: 0 4px 12px rgba(0,0,0,0.08), border: 1px solid #d1d5db. Applied to hover states of cards, modal overlays, and prominent CTAs. T

Shapes

RabbaniTour employs a **"Soft-Technical" radius philosophy**—rounded corners are present but restrained, reflecting both approachability and professional precision. The rounded scale progresses from sharp to generous:

• **sm (0.25rem / 4px)**: Minimal rounding for form inputs and small UI elements, maintaining a clean, structured appearance.
• **DEFAULT (0.5rem / 8px)**: Standard radius for input fields, small buttons, and list items—the workhorse of the system.
• **md (0.75rem / 12px)**: Used for slightly larger interactive elements and secondary buttons.
• **lg (1rem / 16px)**: Primary butt

Components

Action Elements **Button-Primary** is the hero of interaction: 48px height, 12px 20px padding, #cb9a32 background, white text, lg radius (16px), and a subtle shadow (0px 1px 2px rgba(0,0,0,0.05)). On hover, the background shifts to #af8936 over 0.2s, and the shadow increases to 0 4px 12px rgba(0,0,0,0.08). On focus, apply a dotted outline (outline-style: dotted, outline-color: inherit, outline-width: thin) for keyboard accessibility. Button-Secondary uses a transparent background with a 1px solid #002f2f border, same padding and height, for secondary actions like "Learn More."

Containers & Surfaces **Card** is the standard container: #fbfbfb background, lg radius (16px), md padding (24px), 1px solid #e7e7e7 border, and sm shadow (0px 1px 2px rgba(0,0,0,0.05)). On hover, the backgr

Do's and Don'ts

**Do**

• Do use primary gold (#cb9a32) exclusively on CTAs and interactive focus states—it's the brand's signature and must remain distinctive.
• Do maintain the 1.5 line-height on body text (16px × 1.5 = 24px) to ensure readability on mobile and reduce cognitive load.
• Do apply the soft shadow stack (sm for cards, md for hover) consistently—never use hard shadows or drop-shadows that exceed 12px blur.
• Do use Poppins 600 for all headings (h1–h6) and Mulish 400 for body text—mixing weights within a category dilutes hierarchy.
• Do respect the 40px (lg) vertical spacing between major sections; it's the rhythm that makes the layout feel intentional and calm.

**Don't**

• Don't use pure black (#000000) for text or backgrounds—always use #111111 (inverse-surface) or #727272 (on-surface) to maintain warmth.
• Don't apply shadows larger than 0 16px 40px rgba(0,0,0,0.12)—RabbaniTour is light and approachable, not heavy or ominous.
• Don't mix Poppins and Mulish within the same heading or body paragraph—each role has one typeface to maintain clarity.
• Don't use the secondary teal (#002f2f) on CTAs; it's reserved for secondary buttons and trust-building elements, not primary actions.
• Don't reduce padding below 12px (sm) on cards or containers—white-space is part of the brand's calm, professional aesthetic.