Kahani — Hero-First Immersive (Production-Ready)
Kahani is a premium, hero-first immersive design system tailored for high-end hospitality, fine dining, and boutique lifestyle services. Characterized by a sophisticated deep teal and cream palette, it utilizes elegant Zodiak serif typography and Satoshi sans-serif for a refined, editorial feel. The layout emphasizes high-quality photography through full-bleed hero sections with sophisticated dark gradients, horizontal scrolling product cards, and glassmorphism navigation. It features smooth scroll-triggered micro-interactions and view transitions, making it ideal for mobile-first luxury commerce, concierge services, and upscale restaurant booking platforms.
Summary
A luxurious, production-ready mobile UI for a premium restaurant, featuring an immersive hero image, floating glassmorphism navigation, elegant serif headings, and a rich teal-based color story with horizontal scrolling featured items.
Style
The style is sophisticated and refined, avoiding gold to maintain a modern editorial aesthetic. It uses a core palette of deep teal (#1B4F5C), accent teal (#2D7A8E), warm wood (#8B6F47), and off-white cream (#F5F3F0). Typography pairs the Zodiak serif for elegant headings with Satoshi sans-serif for clean body text. Visual depth is achieved through subtle drop shadows (0 10px 24px -16px), glassmorphism (backdrop-blur-md), and vertical gradients (black/35 to #07161a/90) over images for text legibility.
Layout & Structure
A vertical scroll layout dominated by a 50vh immersive hero section, followed by horizontally scrolling featured cards, high-contrast call-to-action blocks, and a persistent floating bottom checkout bar.
Header & Hero Section
Horizontal Featured Cards
Quick Book Reservation Block
Information & About Section
Floating Bottom CTA
Components
Glassmorphism Floating Nav
A semi-transparent sticky header with blur effects.
Immersive Image Card
Rich imagery cards with integrated text and CTA.
Special Notes
DO NOT use gold or bright playful colors; maintain the sophisticated teal and wood palette. MUST use generous white space between sections (min 24px). MUST ensure text readability over hero images using gradients. Animation timing must be elegant (500ms+) rather than snappy. Cards must have a border-radius of at least 24px to feel premium and modern.