Hotel UI
One system. Many hotels.
The architecture stays reusable while each property keeps its own identity. Structure, responsive behavior and multilingual foundations live in the system; brand and content live in the implementation.
Reusable sections
- Component Development
- Reusable system
- More than 20 identities
- Shared
Reuse the product. Not the identity.
Every hotel needs the same handful of things — rooms, services, a gallery, a way to book — and every hotel wants them to look nothing like the last one. Built individually, each site repeats the same work and drifts away from the others the moment it ships.
Structure
Sections and page architecture stay consistent.
Behavior
Responsive and multilingual behavior live in the foundation.
Identity
Typography, color and visual expression change per property.
Content
Rooms, services, imagery and hotel information belong to the implementation.
I developed the reusable sections in Next.js with Styled Components, Tailwind CSS and Storybook. The component contracts keep structure consistent while each hotel supplies its own content and identity.
Same architecture. Different hotels.
The proof is not another diagram. It is seeing the same foundation carry clearly different hotel identities without turning each one into a separate codebase.
One architecture. Many identities.
Sections are components with a defined contract. Layout, typography and colour are the configurable layer; structure and responsive behaviour stay consistent across implementations.
Approach
I focused on creating the reusable components that make the hospitality system work across different hotel identities. The page is assembled from configurable sections, so a new property becomes a matter of composition, content and brand treatment rather than rebuilding the same interface from scratch.
Experience
From a guest's side it reads as a single hotel with its own voice: a room they can picture, services described in their language, and a booking path that never makes them wonder where they are.
Result
The same component foundation supports more than 20 hotel identities. The selected examples include Hotel Tarik, Marina Smir, Prestige and Al Khaima.
Reflection
The interesting constraint was deciding what should not be configurable. Every extra option makes the system more flexible and harder to keep coherent.