Cacao Noir — Luxury Chocolate Atelier Website
Dark, luxurious website for Cacao Noir, a San Francisco bean-to-bar atelier — dramatic chocolate photography and a tasting-first layout for connoisseurs.
Challenge
Cacao Noir is a Hayes Valley bean-to-bar atelier with a real craft story — 72-hour stone grinding, three direct-trade origins, hand tempering — but its website looked like a generic candy shop. The atelier needed a site with the gravity of a wine estate: dark, luxurious, and serious about craft, while doing the practical work of selling bars, booking tastings, and winning corporate gifting. The design had to feel expensive without feeling cold.
Approach
We built a dark-premium site in the colors of the product: deep cocoa backgrounds, bronze accents, Playfair Display headlines, and dramatic low-key photography of pouring chocolate and handcrafted truffles. The collection section presents the three origins with CSS chocolate-bar visuals and origin labels (Ecuador, Madagascar, Tanzania) instead of prices. The 72-hour process gets a four-step telling, and the chocolatier's story — Lyon training, the wine analogy — carries the brand's authority. Tastings are positioned as the conversion centerpiece. Corporate gifting gets its own conversion path, with custom bars and truffle boxes framed as the atelier's quiet specialty.
Design highlights
The hero pairs a cinematic chocolate-pour photograph with an oversized serif headline and bronze italic accent. The collection uses pure-CSS chocolate bars in origin-tinted swatches with tasting-note copy. The story section frames truffle photography with a bronze-outlined border and the chocolatier's signature. The bean-to-bar process (Source, Roast, Grind, Temper) sits on near-black, and the closing CTA — "Taste what patience makes." — extends the craft story to the final scroll. Every gold accent is used sparingly, like the product itself.
Outcome
The site now has the weight the chocolate deserves — visitors feel the craft before they read a word about it. The origin storytelling differentiates Cacao Noir from every generic chocolatier, and the tasting-first conversion path matches how the atelier actually acquires customers. It's a luxury site that earns its mood through substance, not just shadows.
Cacao Noir is a fictional brand created by WebStackRank to demonstrate a chocolate brand website concept. It is a design concept, not a client project.
