Panggon free psd template
Last Updated on July 23, 2026 by Editorial Team
Panggon is a marketplace template for room bookings designed by Ahmad Nur Fawaid.
Panggon is built around a booking search pattern that anyone designing a marketplace or reservation product will recognize instantly. The dark navy hero section sits at the top, holding a bold headline and a floating search card that breaks into three clear fields: location, date, and number of guests, followed by a solid green call-to-action button. That structure alone makes this PSD template worth grabbing if you are sketching out a meeting room booking site, a coworking space finder, a venue rental platform, or any service where users need to search by place, time, and headcount.
The color palette does a lot of the communicating here. A deep charcoal navy anchors the top of the page and gives the brand name and headline strong contrast, while a single mint green accent color carries through the logo, icons, search button, and the recommendation cards lower on the page. White space handles everything else, keeping the search form and the content grid below it easy to scan. This kind of restrained two-color system is a good reference point if you want a marketplace UI that feels calm and trustworthy rather than busy or salesy, which matters a lot for a booking flow where users are comparing prices and availability.
Below the hero, the layout shifts into a lighter section headed by a “recommendations” heading and a row of card placeholders. These blank green blocks are clearly meant to hold room photography, pricing, and location details once populated, and their rounded corners and consistent sizing show how the grid is meant to scale as more listings get added. This is the part of the template worth studying if your project needs a listing grid for spaces, rentals, or bookable items of any kind, since the spacing and card proportions are already tuned for a clean browsing experience.
Adapting the Search Form and Hero
Because this file comes as a layered PSD, the search card is the easiest place to start customizing. Swap out the placeholder labels and sample values, such as the city name and date, with copy that matches your own product or client. If your project is not about meeting rooms, you can repurpose the same three-field structure for other search-driven categories: swap “peserta” for room type, price range, or category filters, and the layout logic still holds up.
The navy header background is also simple to recolor. Select the background layer and adjust its fill to match a different brand palette, then check that the green accent still reads clearly against the new backdrop. If you keep the accent color, try to keep it isolated to interactive elements like buttons and icons, the way it is used here, so the interface keeps a clear visual hierarchy between static text and clickable actions.
For the recommendation cards, replace the flat green rectangles with actual imagery of interiors, offices, or whatever product you are showcasing, then layer price and title text on top using the same font weights already established in the headline and subheading. Keeping typographic consistency between the hero and the card grid is what makes a template like this feel like one cohesive product rather than two unrelated sections stitched together.
This template pairs well with icon sets for location pins, calendars, and people, since the existing search bar already leans on that visual shorthand. It also works nicely alongside simple line-style illustrations for empty states, confirmation screens, or onboarding steps if you are extending this into a full booking flow. Because the structure is so reusable, it also suits early-stage wireframing and client pitch decks, where you want a polished, credible-looking mockup of a booking product without building the entire interface from scratch.
