Amānāh Travel Umroh

Overview

Amānāh Travel Umroh is a licensed Islamic pilgrimage operator serving Indonesian families and communities seeking authentic, spiritually-guided Umroh experiences. The design system embodies 'Sacred Minimalism'—a fusion of deep, trustworthy navy depths (rgb(7, 22, 45)) with warm, precious gold accents (rgb(212, 168, 83)) that evoke both reverence and accessibility. The aesthetic rejects ornament in favor of clarity: clean typography hierarchies, generous whitespace, and purposeful color contrast ensure that pilgrims and their families can navigate complex travel logistics with confidence and peace of mind. The brand voice is warm, reassuring, and family-centric—never corporate or distant. Example sentence: 'Kami telah memandu lebih dari ribuan jamaah dengan keamanan dan kenyamanan penuh—perjalanan suci Anda adalah prioritas kami.'

Colors

The color palette is anchored in two strategic roles: **Primary (rgb(212, 168, 83) / #d4a853)** is the brand's signature warm gold, deployed on all call-to-action buttons ('Daftar Sekarang', 'Konsultasi Gratis'), interactive states, and accent highlights. This color signals trust, warmth, and spiritual significance without aggression. **Secondary (rgb(0, 75, 170) / #004baa)** is a deep, authoritative blue used for links, badges, and secondary navigation—reinforcing institutional credibility and the brand's licensed status. **Tertiary (rgb(18, 48, 93) / #12305d)** is a darker navy for supporting UI elements and subtle backgrounds. **Surface (rgb(7, 22, 45) / #071621)** is the dominant dark background, chosen to evoke the night sky and sacred solemnity while reducing eye strain during extend

Typography

The type system employs a three-tier hierarchy: **Display (Anton, 71px, 900 weight, -0.03em tracking)** is reserved for hero headlines ('Travel Umroh Amanah & Terpercaya'), commanding attention with its bold, geometric letterforms. **Headline (Poppins or Antonio, 28–40px, 600 weight)** structures section breaks and card titles, balancing warmth with professionalism. **Body (Inter, 16–18px, 400 weight, 24–28px line-height)** is the workhorse for descriptive copy, package details, and testimonials—Inter's geometric neutrality ensures legibility at all sizes and on low-contrast backgrounds. **Labels (Poppins or Inter, 12–14px, 500–600 weight, 0.01–0.05em tracking)** are applied to buttons, badges, and form fields. On small labels over busy backgrounds (e.g., badge text on semi-transparent car

Layout

The page employs a fluid 12-column grid with a max-width of 1200px (--ast-normal-container-width), centered on desktop and edge-to-edge on mobile. Hero sections use full-width backgrounds (extending beyond the container) with content constrained to the grid for visual drama. Section separation follows the lg spacing token (40px) for breathing room between major content blocks; internal card and list spacing uses md (24px) for cohesion. The gutter (24px) is applied consistently to left/right padding on all containers, scaling down to sm (12px) on tablets and xs (4px) on phones. Whitespace is treated as a design material: generous margins around CTAs (40px above, 24px below) create visual hierarchy and encourage action. Container padding scales with viewport: 2.5em (40px) on desktop, 2em (32

Elevation & Depth

Depth is conveyed through layered transparency and subtle shadows rather than dramatic drop-shadows. **Level 1 (Base):** The dark navy surface (rgb(7, 22, 45)) serves as the foundation, with a subtle grain texture applied via background-image or CSS noise to prevent flatness. **Level 2 (Standard Cards):** Cards use rgba(255, 255, 255, 0.05) background with a 1px border at rgba(255, 255, 255, 0.1) and box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), creating a frosted-glass effect. Optional backdrop-filter: blur(10px) enhances the glassmorphic aesthetic on supported browsers. **Level 3 (Modals/Elevat

Shapes

The shape philosophy is **'Soft-Technical Precision'**—rounded corners are used strategically to soften the austere dark palette without sacrificing clarity. **Buttons** use rounded.lg (1rem / 16px) for a friendly, approachable feel; primary CTAs ('Daftar Sekarang') at 10px border-radius (slightly tighter) convey urgency. **Cards and containers** use rounded.lg to rounded.xl (16–24px) to create visual softness and reduce the harshness of the dark background. **Input fields** use a more pronounced rounded.full-ish treatment (18px) to signal interactivity and approachability—these are spaces whe

Components

Action Elements **Button Primary** (rgb(212, 168, 83) background, rgb(26, 20, 16) text, 14px Inter 600, 11px 18px padding, 16px border-radius) is the dominant CTA for registration and consultation. On hover, shift to #c9963f (a darker gold) with transition: all 0.2s ease to signal responsiveness. **Button Secondary** (rgb(255, 204, 0) background, rgb(26, 20, 16) text, 15px Outfit 800, 12px 24px padding, 3px border-radius) is used for secondary actions; the tighter radius and brighter yellow create visual distinction. **Button Tertiary** (transparent background, rgb(212, 168, 83) text, 2px solid border) is for low-priority actions like 'Learn More'; on hover, add rgba(212, 168, 83, 0.1) background.

Containers & Surfaces **Card** uses rgba(255, 255, 255, 0.05) background, 1px rgba(2

Do's and Don'ts

**Do**

• Do use the gold primary (rgb(212, 168, 83)) sparingly on dark backgrounds—it's a precious accent, not a fill color. Reserve it for CTAs, focus states, and key brand moments.
• Do maintain the dark navy surface (rgb(7, 22, 45)) as the dominant background to evoke trust, spirituality, and reduced eye strain during extended browsing.
• Do apply generous whitespace (lg spacing, 40px) between major sections to create visual breathing room and guide the user's journey through the pilgrimage packages.
• Do use the full rounded scale: tighter radii (4–8px) for buttons and inputs, looser radii (16–24px) for cards and containers, to create a cohesive soft-technical aesthetic.
• Do layer transparency (rgba with 0.05–0.1 opacity) for subtle depth and glassmorphic effects rather than relying on heavy shadows or gradients.

**Don't**

• Don't use the gold primary for body text or large background fills—it will overwhelm the dark palette and reduce contrast. Reserve it for interactive elements and accents only.
• Don't apply harsh, high-contrast shadows (e.g., 0 10px 30px rgba(0, 0, 0, 0.3))—they conflict with the glassmorphic aesthetic. Stick to subtle shadows (0 1px 2px rgba(0, 0, 0, 0.05)) or rely on border and transparency layering.
• Don't mix rounded and sharp corners arbitrarily—use the graduated scale (sm for tight, lg for soft) to create visual hierarchy and guide attention.
• Don't override the dark surface with light backgrounds for large content areas—it breaks the cohesive, sacred aesthetic. Use cards with transparent layering instead.
• Don't use more than three font families in a single page—stick to Anton (display), Poppins (headlines/labels), and Inter (body) to maintain typographic clarity and brand consistency.