01
Photos as polaroids
The hero scatters real photos of the food and coffee like snapshots on a counter — friendly, and nothing like a chain's stock imagery.
Coffee CornerBistro.
A website for a neighbourhood coffee shop on Piet Retief Boulevard — coffee, breakfast, light meals and cake, from 06:30 on weekdays. Built for the person deciding where to stop on the way to work.
01 · The brief
Coffee first. Then breakfast, lunch and cake.
Coffee Corner Bistro is the kind of place people find on their phone at 06:20 — so the questions are simple: is it open, what's on the menu, what does it cost, and where do I park. The site had to answer all four in the first screen, carry the full priced menu without feeling like a PDF, and still feel as friendly as the counter.
What the site has to do
01
Open, or not?. The 06:30 opening time sits in the hero as a badge, with weekday and Saturday hours right beside it.
02
The real menu, priced. Breakfast, omelettes, toasties, croissants, tramezzini and cake, every item with its price.
03
Families welcome. A section of its own for bringing the kids along, because that decides the visit for a lot of people.
04
Find the corner. Directions, parking and step-free access, plus a map and hours in the closing section.
02 · Colour
Honey yellow and a strong black.
A bright honey yellow fills the hero and the closing band — warm, cheerful and easy to spot on a phone — with near-black ink for type and buttons. White cards and a soft mist grey keep the long menu clean between them.
Honey
#FFDB5B
Hero, highlights, closing band
Pollen
#FFF386
Soft highlights
Ink
#202020
Headings, buttons, body
Paper
#FFFFFF
Cards and menu
Mist
#F3F3F3
Section backgrounds
Charcoal
#3B3B3B
Secondary text
Graphite
#575656
Muted text
03 · Typography
One friendly family.
DM Sans does everything: bold for the headlines, regular for the menu and body. One family keeps a page full of prices calm, and its rounded shapes match the relaxed feel of a neighbourhood coffee shop.
01
DM Sans BoldHeadings and display
02
DM SansMenu, body, buttons
04 · Details
The parts worth pointing at.
02
A menu you can read on a phone
Items and prices sit in clean two-column cards with a short note per section, instead of an image of the board.
03
The 06:30 badge
A round badge in the hero answers the most common question before anyone has to look for opening hours.
04
Scrolling favourites
A ticker of coffee, toasties, milkshakes and cake runs under the hero, setting the menu in a second.
05 · The page
Top to bottom, in one go.
Want the samefor your business?
Tell us what your business does and we'll come back with a scope, a fixed price, and a date.