Kahani — Hero-First Immersive (Production-Ready)
A premium, hero-first immersive design system tailored for high-end hospitality and boutique services. Characterized by a sophisticated deep teal (#1B4F5C) and warm wood (#8B6F47) color palette, it features elegant editorial typography (Zodiak Serif) paired with modern sans-serif (Satoshi). The layout emphasizes visual immersion with a 50% viewport height hero section, dark gradient overlays for readability, and horizontal-scrolling product carousels. Suitable for fine dining, luxury lifestyle apps, interior design portfolios, and high-end e-commerce.
Summary
An elegant, immersive mobile-first design with a focus on high-quality imagery and sophisticated color palettes. It utilizes a prominent hero section with a floating glassmorphism navigation bar and a bento-grid inspired arrangement for information sections, finished with a persistent floating action bar.
Style
The style is 'Sophisticated Editorial'. It uses a serif/sans-serif pairing (Zodiak for headlines, Satoshi for body) to create a balance between traditional luxury and modern clean-tech. The color palette centers on Deep Teal (#1B4F5C), Accent Teal (#2D7A8E), Warm Wood (#8B6F47), and an Off-white/Cream background (#F5F3F0). Animations focus on subtle 'soft-rise' entries (8px upward translation with 520ms ease-out) and smooth view transitions.
Layout & Structure
A vertical-scrolling mobile layout with an immersive hero container and a floating sticky bottom CTA. Sections are spaced generously and use varied horizontal and grid-based internal layouts.
Sticky Header Navigation
Hero Section
Horizontal Product Carousel
Feature/Booking Card
Information Grid
Floating Bottom CTA
Components
Glassmorphism Floating Nav
Semi-transparent navigation bar that floats over the hero image.
Product Badge
Small notification badge for cart items.