Showcase Build · Bristol

A Candlelit One-Page Brand For A Fictional Coffee And Wine Bar.

A dark-canvas hospitality build balancing restraint, atmosphere, and practical visit information.

Build Like This Website Build Service

This is a fictional brand we built end-to-end as a showcase. The build is real; the company is not.

Background

The Brief Behind The Brand.

The fictional brief was a Bristol venue that changes character through the day: specialty coffee in the morning, cake and matcha in the afternoon, natural wine by candlelight in the evening. The site needed to feel slower and more considered than a typical café template.

We built a one-page editorial hospitality site with a full-screen hero, quiet pull-quote dividers, story content, menu highlights, a bento-style gallery, contact details, hours, and footer links. The main goal was atmosphere first, then clarity before someone decides to visit.

Build

Visual System, Motion, And Structure.

The visual system uses a deep near-black canvas, warm secondary panels, cream text, and gold #c8a96e as the accent. Cormorant Garamond creates the long, elegant headings and DM Sans keeps menu and contact details legible. The site feels closer to a small wine list than a brochure page.

Motion is intentionally quieter than the other two showcase builds. The demo uses smooth scrolling, a subtle grain texture, a gold custom cursor on fine pointers, and pull-quote dividers that create rhythm without demanding attention. The restraint suits the brand promise: patience, flavour, and a slower visit.

Structurally, the page is built around moments. The hero establishes mood, the quote dividers create pauses, menu cards give quick reasons to visit, the gallery does the sensory work, and the contact and hours sections close the loop with the practical details every hospitality page still has to answer.

What's Wired

The Practical Foundations.

Schema

The demo site does not include a visible JSON-LD block; this case-study page carries Article, Organization, and Service schema, and a production venue build would add LocalBusiness and opening-hours data.

Accessibility Floor

Semantic heading structure, descriptive image alt text, gold focus treatment, and pointer-aware custom cursor behaviour.

Motion Budget

Smooth scrolling, grain overlay, gold cursor states, quiet transitions, and pull-quote rhythm rather than decorative animation.

Fonts

Cormorant Garamond for elegant display type and DM Sans for compact, readable details.

Colour

Dark canvas #1a1a1a, warm card panels, cream text, muted secondary copy, and gold #c8a96e highlights.

Specs

Build Specs.

Stack: Next.js 16 · React 19 · Tailwind v4 · Dark Canvas · Responsive Image Assets
Pages Count: 1
Duration: 2 Weeks For The Showcase
Shipped: 2026-04-16

Sister Builds