Live Build · Sutton Coldfield

A Brutalist Fight-Night Site For A Punjabi Bar And Grill.

Sutton Coldfield's loudest restaurant brand on the web — coal, ash, ember, and a custom lion crest carrying the whole identity.

Open Live Site Build Like This Website Build Service

This is a real production site we built end-to-end. The build below is the same site you can open at the live URL.

shersuttoncoldfield.vercel.app

Design Language

The Locked Direction.

Concept · Fight-Night Poster Brutalism

Palette

Coal Black#0A0A0A
Ash White#ECEAE3
Ember Orange#E04713
Blood Gold#D2A648
Smoke Grey#2A2A2A

Fonts

Druk Wide Super
Neue Haas Grotesk
Big Shoulders Stencil

Signature Moves

80vh Stencil Hero — FEAST LIKE A LION
Custom Inline SVG Lion Crest
Marquee Section Dividers Like A Fight-Card Bill
Brutalist Split-Grid Menu With Hover Inversion
Smoky Parallax On Dish Photographs
Number-Driven Stat Ticker — Address · Phone · Likes · Visits

Background

The Brief Behind The Brand.

The brief took the restaurant's own tagline — feast like a lion — and turned it into the design language. The brand needed to feel like a fight-night poster crossed with a streetwear capsule crossed with a tandoor pit: bold, brutalist, smoky, masculine, and modern, with family-friendly warmth tucked underneath the brutalism.

We built a four-page brutalist build. Hero, lion crest, ticker, marquee, signature dishes, and reserve and order CTAs on the homepage; a split-grid menu carrying all five categories with smoke parallax; an address, phone, hours, and Uber Eats link on visit; and a short pride-of-the-family origin on story.

Build

Visual System, Motion, And Structure.

The visual system is high-contrast only. Coal black #0A0A0A, ash white #ECEAE3, ember orange #E04713 for headlines and CTAs, blood gold #D2A648 for the lion crest and accolades, and smoke grey #2A2A2A for surfaces. There are no mid-tones, no soft pastels, and no curves over four pixels — every section is either ash on coal or coal on ash.

Type uses Druk Wide Super for the hero in tight all-caps, Neue Haas Grotesk Display for body copy, and Big Shoulders Stencil reserved for the FEAST LIKE A LION treatment. The hero stencil owns 80vh on its own, with the inline-built lion crest sitting above it as the fixed logomark in the nav and as a ghosted watermark on key pages.

Structurally, the page is a tour bill. Marquee dividers scroll MIXED GRILL · TANDOOR · INDO-CHINESE · WRAPS · SIDES across the screen between sections; the menu is a brutalist split grid that inverts colours on hover; smoke-overlay PNGs drift at half-scroll over the dish photography; and the stat ticker rolls 1-3 Manor Rd · 0121 827 5678 · 3,022 likes · 1,709 visits across the page like a billing line.

What's Wired

The Practical Foundations.

Schema

Restaurant and LocalBusiness JSON-LD with the Manor Road address (B73 6EJ), phone, hours, and Uber Eats reference.

Accessibility Floor

Tested contrast on every block, visible ember focus rings, semantic landmarks, and reduced-motion kills the marquee, smoke parallax, and ticker.

Motion Budget

Framer Motion is used only for the marquee dividers, the smoky parallax, and the rolling stat ticker — every other interaction is static.

Fonts

Druk Wide Super for the hero, Neue Haas Grotesk Display 500 for body, and Big Shoulders Stencil reserved for the FEAST LIKE A LION moment.

Colour

Coal #0A0A0A, ash #ECEAE3, ember #E04713, blood gold #D2A648, and smoke #2A2A2A — no mid-tones.

Specs

Build Specs.

Stack: Next.js 16 · React 19 · Tailwind v4 · Framer Motion · Custom SVG Lion Crest
Pages Count: 4 — Home · Menu · Visit · Story
Duration: 3 Weeks End-To-End
Shipped: 2026-04-26
Live URL: shersuttoncoldfield.vercel.app

Sister Builds