Ember & Bone — premium steakhouse website concept

An SR7 concept project, not a client commission. Ember & Bone is a fictional steakhouse in Grainger Town, Newcastle, designed and built by SR7 Web Design to show what a restaurant website can be when it is done properly.

View the live website →

The brief

Most restaurant websites are built from the same template: a big photo, three icons, a gallery and a booking button. The idea here was a premium steakhouse brand and website that looked nothing like that.

It had to get across fire, the cuts, the craft behind them, the atmosphere of the room, where the beef comes from, the wine and cellar side of the business, private dining and reservations. And it had to feel expensive without becoming cluttered or theatrical.

There is no real restaurant behind it. The name, the chef, the herd, the menu and the prices were all written for the concept, the way a real restaurant would write them, so the site can be judged as a working restaurant website. The footer says plainly that it is a concept site by SR7 Web Design.

Design direction

The look is built on Obsidian Luxe, a dark editorial style system with one rule at its heart: expensive by subtraction.

• A near-black background with warm off-white type, and one brass accent. The brass is rationed to one use per screen — the reserve button or a chapter number, never both. Even the prices are set in plain type rather than gold.
• Baskervville, an editorial serif, for the headlines, paired with Work Sans for everything else. Baskervville only comes in one weight, so the hierarchy is built with size, not bold.
• Fire-led food imagery, graded dark, with shading placed where the words sit so the type stays readable and the meat still shows.
• A different editorial layout for each section rather than one repeated stack, with the image side swapping as you go so the long scroll never settles into a pattern.
• Generous spacing, hairline rules and framed images with index numbers, like a printed menu or a magazine.
• Every text colour measured against the background. One colour in the original style failed the WCAG AA contrast standard, so it was replaced with one that passes.

Motion and experience

Movement is there to set the mood, not to show off. Every piece of it has a job and a way out.

• A short loading curtain with a counter, then the headline arrives word by word. The curtain has a hard time limit and a backup timer, so nobody is ever left looking at a black screen.
• The grill film behind the headline only starts loading after the page itself has loaded, and only while the top of the page is on screen. It pauses when you scroll past or switch tabs, and it isn’t downloaded at all on Data Saver or a slow 2G connection.
• Grill sound is available but off by default. Nothing is downloaded until a visitor presses the Sound button.
• Sections fade in as you scroll, driven by the scroll position itself, so scrolling fast or jumping to a link never leaves anything hidden. If the script fails, the whole page simply shows.
• Photographs drift gently against the scroll, and the header settles into a blurred bar once you move down the page.
• For anyone who has reduced motion switched on in their phone or computer settings, all of that stops: no drift, no film downloaded, just a still frame.

The restaurant experience

This is the whole restaurant website, not a homepage mock-up. What is actually on it:

• Dry-ageing and the grill — two chapters on how the beef is hung for 28 to 60 days and cooked over lumpwood embers.
• Five cuts — photographed steaks with weight, days aged and price, from fillet to a porterhouse sold by weight.
• The full menu — snacks, starters, steaks, sharing cuts, sides, sauces, desserts, wine and cocktails, set out like a printed menu.
• Cellar and bar — wine by the glass, the cellar and the bar.
• Provenance — whole animals from one farm in Northumberland, told in a short signed passage from the head chef.
• Private dining — the Cellar Room, for up to twenty-two guests.
• Reservations — pick a date, party size and time, check availability, then confirm. Larger parties are pointed to email. Nothing is sent or stored: at the confirm step the site says clearly that this is an SR7 concept and no real booking has been made.
• Find us — opening hours, directions and access notes.

Designed for phones

The phone version isn’t the desktop layout squashed down. It has its own art direction:

• A separate portrait cut of the grill film, with two video players handing over to each other so the loop never shows a join.
• Different shading behind the headline. On desktop it’s weighted to the left, where the words are; on a phone the words run full width along the bottom, so the shading becomes a vertical fade.
• Steak photographs switch from a wide letterbox crop to 16:9, so the meat doesn’t shrink to a thin strip.
• Smaller image files served to phones.
• A reservation bar that docks at the bottom of the screen once you’re past the hero, within reach of your thumb.
• A menu drawer that is fully locked away when closed, so keyboard and screen-reader users can’t land on hidden links.

Development

Under the design it’s a lean, hand-built site. No page builder, no framework and no third-party code libraries: one page of custom HTML, CSS and JavaScript.

• Fast by default. The fonts are hosted on the site itself rather than fetched from Google. Images are WebP, sized for each slot, and everything below the first screen loads only when it’s needed.
• Built for caching. A small build step gives every image, font and video file a unique name, so browsers can keep them for a year and still pick up changes straight away.
• Accessible. A skip link, one main heading and a clean heading order, labelled form fields, visible focus outlines, touch targets at least 44 pixels, and reduced motion respected throughout.
• Honest with search engines. The search description and the structured data both say it’s a concept by SR7 Web Design. It is never marked up as a real restaurant.

The mobile PageSpeed Insights report on 10 September 2026 scored 100 for Performance, Accessibility, Best Practices and SEO.

The result

Ember & Bone is an SR7 concept project, built to show what a restaurant website can become when the branding, the imagery, the motion and the build are treated as one job.

There are no bookings, visitor figures or reviews to show here, because it isn’t a real restaurant. What there is, is the site itself, live and working. Open it on your phone.

View the live website →

More work

• KPM First Aid Training — a client rebuild with a custom plugin behind it
• Treemasters — a trade site built to get the phone ringing
• Fishing Lives — an SR7-owned archive platform with members and moderation
• Back to all work

Want a site that looks the part?

Restaurants, bars, hotels, salons — any business where the website has to match the price on the menu. If that’s you, this is the level of design I can build for you. Get a quote or call 07538 227194.