Trusted by teams at
Editorial Webflow template for specialty coffee roasters and small-batch cafés. CMS-driven single-origin rotation, story-first scroll narrative, dark premium aesthetic.
Noir Bean is a premium Webflow template designed for specialty coffee shops, boutique roasteries, espresso bars, cafés, and modern hospitality brands. With its dark editorial design, warm coffee-inspired atmosphere, refined typography, and immersive content flow, Noir Bean helps your brand create a strong and memorable first impression.
Built for coffee brands that care about craft, origin, and experience, the template guides visitors through your story, menu, featured coffees, café atmosphere, customer voices, and visit/contact section. Every section is structured to help users understand your concept, explore your offerings, and take action with ease.
Noir Bean goes beyond a basic café landing page. Its editorial layout, atmospheric visuals, and clear conversion path make it ideal for brands that want a premium, calm, and distinctive online presence. It is a strong fit for independent cafés, roasteries, slow bars, and boutique food or drink concepts.
Premium dark editorial design
Built for cafés, roasteries, espresso bars, and hospitality brands
Immersive one-page storytelling structure
Strong hero section with clear calls to action
Brand story, menu, coffee selection, gallery, testimonials, and visit sections
Coffee detail layout for origin, process, roast, harvest, elevation, and price
Reservation and contact-focused CTA section
Fully responsive layout for desktop, tablet, and mobile
Style guide included for typography, colors, spacing, and components
Easy to customize directly in Webflow
Home / Hero
Brand Story
Coffee Process
Menu
Featured Coffees
Reservation CTA
Space / Gallery
Customer Voices
Visit / Contact
Footer
Style Guide
Instructions
Licenses
Changelog
Specialty coffee shops
Boutique roasteries
Espresso bars
Modern cafés
Slow bar concepts
Coffee product brands
Bakeries, wine bars, tea houses, and artisan food concepts
Noir Bean is easy to update and adapt in Webflow. You can replace images, edit copy, adjust colors, update menu items, customize coffee details, and refine sections to match your brand. The included style guide helps keep the design consistent while giving you a flexible foundation for a premium coffee or hospitality website.
Can only be used by you or one client for one end product. You cannot resell or redistribute this template in its original or modified state.
This template is free to use in both person and commercial projects. You cannot resell, redistribute, or license this template in its original or modified state.
Questions about this template? Just reach out to the template designer and they will get back to you within 2 business days.
For advanced design guidance, please share your questions in the Webflow Forum or reach out to a Webflow Partner.
Share your feedback by leaving a comment below.
For template support, please check the Support tab.
Use the Preview in Designer option to make any edits to the template pages and preview how the layout would fit your content. Changes in preview mode won't be saved.
It isn't possible to apply a template to an already existing project. Instead, you'll need to create a new project based on the Template.
With a Core plan (or higher), you can export sites you build in Webflow, including templates, to host them anywhere you'd like.
Webflow templates are only available for purchase through Workspaces and legacy individual accounts.
CMS templates are designed to use the power of the Webflow CMS. It is possible to downgrade to a Basic Site Plan as long as all CMS content is deleted from the project.
Use the View Connections tool to understand where the CMS content is on the site and delete any dynamic listings and CMS content. We also recommend you to check Components and the Collection page Templates.
Ecommerce templates are designed to use the power of Webflow Ecommerce. It is not possible to remove Ecommerce from a template, however, deleting all Ecommerce Products and Categories from the project, will allow to select a lower Site Plan.
Membership templates are designed to use the power of Webflow Membership. It is not possible to remove Memberships from a template.
.svg){kind=small}
Bring life and motion to your design with background videos
Reposition and resize items anywhere within the grid to produce powerful, responsive layouts — faster and without code.
Reusable elements you can use across your site. Edit a component and all copies update instantly.
Customize the built-in database for your project or just add new content.
Custom design for the 404 page of your website
Build your lead lists and subscriber base with beautiful forms.
Comes with GSAP animations and interactions for additional polish and usability.
Comes with animations and interactions for additional polish and usability.
Displays perfectly on desktops, tablets, and phones.
Site navigation automatically collapses into a mobile-friendly menu on smaller devices.
All graphics are optimized for devices with high DPI screens.
Uses fonts from Google's Web Font collection.
