Brand Guidelines & Release Notes

1. Typography & Fonts

The platform's typography has been strictly designed to project high-end editorial luxury and editorial sophistication:

• Primary Font Family: Outfit (Google Fonts). This geometric sans-serif typeface is configured via Next.js next/font with custom weights.
• Weights Used:
  • Light (300): Used for all main paragraph copy, itineraries list items, and details text to maintain a spacious, light, and modern feel.
  • Regular (400): Used for interactive controls, secondary buttons, labels, and forms.
  • SemiBold (600): Used for uppercase tracking tags, card eyebrows, status markers, and navigational tags.
• Letter Spacing (Tracking):
  • Navigational headers and small tags feature letter spacing up to tracking-[0.2em] or tracking-widest to emphasize editorial boundaries.
  • Large page titles use negative tracking tracking-[-0.04em] to present sharp, unified layouts.

2. Color Palette & Styling Tokens

Our color system is mapped to HSL tokens representing the natural landscape of the seven Emirates (dunes, mountains, coasts, and architectural heritage):

3. Corporate Identity & Responsive Rules

• Grid System Spacing: The layout uses a strict max-w-frame container configuration aligned to a 12-column grid. Left and right paddings (e.g. px-6 sm:px-8 lg:px-12) align components seamlessly.
• The Brand Star Emblem: The terracotta clay star ornament (brand-star--clay) is placed adjacent to section numbers and primary headings, providing visual continuity.
• Glassmorphism & Gradients: Header elements use semi-transparent backdrops (backdrop-blur-md) and top/bottom dark radial gradients (bg-gradient-to-t from-ink/95 via-ink/50 to-transparent) to keep texts 100% legible under varying background assets.

4. Content Strategy & Compilation

The platform's itinerary data was created using a systematic content compilation strategy:

• Extraction Pipeline: Raw travel itinerary descriptions, schedules, hotels programs, and meals details were programmatically extracted from six source PDF documents provided by the travel desk.
• Python Compiler Script: A Python compilation pipeline at compile_itineraries.py parsed raw outputs, normalized the days structure, and compiled them into a statically-typed TypeScript database at src/lib/data/itineraries.ts.
• Bilingual Strategy: Each day's title, activities, and destinations are stored in both English (En) and Turkish (Tr) subkeys, allowing real-time client-side language switching without querying databases.

5. Image Assets & Sourcing

Visual assets on the platform are structured to showcase the premium quality of the destinations:

• Unsplash Sourcing: All dynamic background images for destinations and day-by-day itineraries are loaded directly from high-resolution, royalty-free photography on Unsplash.
• Itinerary Keyword-Image Mapping: A dynamic lookup system maps specific keywords in the day description (e.g., “safari”, “mosque”, “mountain”, “resort”, “heritage”, “museum”, “beach”) to custom Unsplash image IDs. This guarantees contextual photos on expanded timeline items.
• Custom Vector Assets: Brand logos and vector layout overlays are saved in the project under /public/brand/ to ensure responsive scaling and light page weight.

6. Software Stack & Technical Architecture

The platform is built using a modern, fast, and type-safe software stack:

• Programming Languages:
  • TypeScript: Set to strict mode (strict: true) to ensure robust type-safety across components, interfaces, and databases.
  • JavaScript (ESNext): For custom utilities and configuration scripts.
• Framework & Libraries:
  • Next.js 16 (Turbopack): Using the App Router framework. Page layout rendering utilizes React Server Components (RSC) to maximize load speeds and minimize client bundles.
  • Tailwind CSS v4: Utilizing CSS variables for design token mapping and responsive styling classes.
  • next-intl: Powering path-based multi-language routing middleware (/[locale]/...) and translations rendering.
  • Prisma ORM & SQLite: Database abstraction layer with robust catch-all try/catch hooks that fall back to memory default content on serverless environments like Vercel.