Moss Breakfast Plate
Breakfast & brunch
Case 06 · Self-initiated concept
Moss &Ember
An imagined neighbourhood café, brought online with warmth, appetite and a clear invitation to visit.
Fictional portfolio project · not a client commission.
01 / Intent & identity
Make a visit
feel inviting.
The concept brief brings together three visitor needs: choosing something to eat, understanding the café’s character and planning a visit. The homepage balances an editorial story with direct routes to the menu, opening hours and location.
A botanical flame emblem connects “Moss” and “Ember”. Forest green, warm ivory and terracotta pair with generous serif headings and simple body type. Consistent, AI-generated food and interior photography explores a possible visual direction; it depicts no real café, team or dishes.
Forest#24483A
Ivory#F5F0E6
Terracotta#9B4C33
Moss#8FA98B
02 / Editorial rhythm
Slow mornings.
Purposeful movement.
Overlapping image panels give the café’s morning, lunch and evening stories their own moment. Gentle zooms, staggered text and touch-friendly browsing add character. Native scrolling stays in control, and reduced-motion visitors receive a still presentation.
Concept imagery · an animated study of the website’s overlapping-panel approach.
03 / Information architecture
Less searching.
More choosing.
The 45-item photo menu is divided into six recognisable groups: brunch, lunch, bakery, coffee, other drinks and children’s choices. Category filters narrow the view; search and direct dish links support specific requests. Visible prices and dietary notes help visitors decide before arriving.
Try three illustrative entries below. The full menu is available in the concept.
Hand-Brewed Filter Coffee
Coffee
Cinnamon Bun
Bakery & cakes
04 / A branded map
The welcome
starts nearby.
A locally bundled MapLibre map uses real neighbourhood geometry, ivory streets, sage spaces and the café’s botanical marker. Zoom, keyboard navigation, recentring and directions support the visit. The local view remains available when live tiles cannot load; the café address and pin are fictional.
Finding your neighbourhood…
Drag to explore. Use two fingers on touch screens.
Interactive source component · real OpenStreetMap geography · approximate fictional café location.
05 / Front-end & outcome
Character,
with a clear foundation.
Responsive CSS defines the layouts and image sequences. JavaScript enhances menu filtering, carousels and map loading. WebP image variants, lazy loading and reserved image dimensions keep the static Cloudflare-ready site practical.
This self-initiated study demonstrates a coherent hospitality experience. It has no client results or measured commercial outcomes. Booking and enquiry forms are demonstrations; they send nothing and take no payments.
Next project · 07 / 07
Health & Body
