Enclave: a coffee and coworking brand with a barista companion
A project story about building a specialty coffee and coworking website for two Metro Manila locations, with a menu, workspace rates, and Kopi, an AI companion.
- Coffee
- coworking
- hospitality
- Philippines


Hover the browser to scroll the live page capture.
- Project
- Enclave
- Type
- Client website
- Sector
- Coffee and coworking
- What we built
- Interactive signature drinks and a full menu by category
- Coworking rates and room requests for the Makati space
- Kopi, an AI companion for menu, branch, and room questions
- Live site
- enclave.vibeboxph.com
A café that is also a workplace has two audiences who want different things: the person who wants a good drink in two minutes, and the person who wants a quiet desk for four hours. Enclave sells both, in Legazpi Village in Makati and at Bonifacio High Street in BGC. The website had to make a visitor feel the place before they arrived.
The brief was a website for specialty coffee, calm workspaces, and a community worth showing up for, with enough product structure to handle menu questions, space rates, and room requests.
The product problem
Hospitality sites tend to be a photo, a menu PDF, and a map pin. Enclave needed more than that:
- two locations with different roles, a full café and coworking space in Makati and a grab-and-go counter in BGC;
- a menu that is easy to browse by category, with best sellers marked;
- coworking rates and meeting-room times that read clearly before anyone calls;
- a brand that feels warm and local without turning into a stock-photo template.
Designing the first screen
The homepage opens on a generated café scene with a signature cup and Kopi, the brand's panda barista. A warm, serif-led headline sits on a cream palette with deep green accents, and the first screen offers two paths: order now, or explore the spaces. Three short proof cards cover coffee, workspace, and community.
Letting the menu be interactive
The signature drinks section is a rotatable cup carousel. Visitors can spin a cup, open it to see what is inside, and jump to the full menu by category: coffee, chillers, tea, refreshers, and food. Prices sit beside the drinks they belong to.
Two locations, two jobs
Enclave Main is presented as the full experience: menu, coworking spaces, meeting rooms, and events. Enclave Express is presented as the quick one: grab and go, quick bites, the same quality. A day-at-Main timeline walks through the morning launch, the deep-flow hours, the midday reset, and after-hours community nights.
Coworking and room requests
Open desks, private cubicles, meeting rooms, and flexible packages are shown with hourly rates and package prices. A room request widget lets a visitor choose a start time and a duration, and shows the total. The action reads "Request this time", which keeps the promise honest: it is a request, not an instant booking.
Kopi, the AI companion
Kopi answers questions about the best seller, nearby branches, room booking, and drink recommendations. It gives the brand a voice that is friendly and a little playful, and it is introduced as a companion instead of a generic chat box.
What the work reinforced
- Give each location a job. One brand, two clear roles, and no duplicate pages.
- Make the menu playable. A drink you can turn and open sells better than a list.
- Say what a request is. Room times that look like instant bookings create support work. A button that says "request" keeps the promise honest.
Continuing work
Enclave is a live site for a real brand, and the menu, rates, and spaces will keep changing. This story will be updated as the product grows. If you are building a hospitality or coworking site of your own, start with the two questions a visitor asks first: where do I go, and what will it cost?
Keep reading
A project story about building an event ticketing platform for the Philippines, from event pages and GCash checkout to QR tickets, a phone scanner, and a payout ledger.
Project story · 5 min readReact Component Kit: headless components styled with TailwindA project story about building a public, source-delivered React component registry with accessible headless primitives, Tailwind styling, and shadcn-compatible install paths.
Start a project
Planning a website of your own?
Tell us what the website needs to accomplish. We reply with an honest fit review and the right next step.
