Iroko

Overview

Iroko is a fine dining Nigerian restaurant brand built from the ground up. The name, the identity, the design system, the menu, and a fully functional website with ordering, reservation, and checkout capabilities were all designed as one cohesive body of work. The goal was to create something that felt like a real, investable restaurant brand operating in Lagos today. Not a concept. Not a mockup. A brand that could open its doors tomorrow.

The design challenge was specific: how do you design a fine dining experience for a Nigerian restaurant that does not feel borrowed from a Western template? Nigerian fine dining has its own culinary identity, its own clientele, and its own visual language. Generic would not do it justice.

Naming and Concept

The name Iroko comes from the Iroko tree, one of the largest and most culturally significant trees in West Africa. Known for its strength, longevity, and deep roots, the Iroko tree is a symbol of permanence and prestige across Nigerian culture. It was the right name for a restaurant built on the idea that Nigerian cuisine, at its finest, needs no validation from anywhere else in the world.

The name gave the brand its entire visual direction before a single frame was opened. Organic. Grounded. Premium. Distinctly Nigerian without being folkloric or costumed.

The creative anchor for the project came from a single image, an open flame grill at night, dark and warm and alive with fire. That image locked the brand's emotional tone. Iroko is a restaurant where fire is the craft. Every design decision made after that was held against that image as a reference point, which is why the headline on the live site reads "Rooted in Flavor. Refined by Fire." Those are not just words. They are a direct translation of what that hero image communicates before a single word is read.

Brand Identity

The name: Iroko

One word. Easy to say, easy to remember, impossible to mistake for anything else. It carries weight and meaning without needing explanation to a Nigerian audience, while feeling intriguing and premium to anyone encountering it for the first time.

The palette

The standard fine dining palette, dark background with gold accents, was rejected immediately. That combination is what every generic premium restaurant template defaults to. Iroko needed to feel different because it is different.

The palette was built around the tree itself.

Sage green #DCE5D6 as the primary background, the color of the Iroko canopy, muted and organic rather than clinical or minty.

Warm cream #FAF8F3 for cards and alternating sections, giving the page breathing room and gentle contrast without introducing a new color.

Forest green #1F2E1F for all text and structural elements, deep and rooted, the color of the tree trunk rather than a generic charcoal.

Brass gold #B8975A reserved exclusively for primary CTAs and prices, used so sparingly that every time it appears it reads as premium, not decorative.

Muted sage #5A6B53 for supporting body text.

The constraint placed on brass gold was the most important single decision in the palette. When an accent color appears everywhere it becomes wallpaper. When it appears only where the user needs to take action, it earns its weight every time.

Typography

Cormorant Garamond paired with Inter.

Cormorant Garamond for all headings, display text, and button labels. It is a high contrast serif with an editorial, old world quality that gives Iroko its fine dining voice. Precise, cultured, and confident without being stiff.

Inter for all body copy, navigation, labels, prices, and form fields. Clean, highly legible at small sizes, and completely neutral in personality, which is exactly what you want from a body font when your display face already has a strong point of view.

The pairing captures the core tension of the brand: heritage and modernity. History and intention.

Design System

A complete design system was built before any page design began. With a project covering multiple pages, a checkout flow, and multiple component types, designing without a system would have meant making the same decision repeatedly with different outcomes each time.

Spacing: 8px base unit. Section vertical padding 80 to 96px. Side gutters 80px. Max content width 1200px.

Border radius: 0px for images. 4px for buttons. 8px for form inputs. 12px for cards. Pill for tags and badges.

Buttons, three styles, three levels of hierarchy:

The primary CTA, Order Now, uses brass gold fill with white text. It is the most dominant interactive element on every page it appears on and lives in both the navigation bar and the hero section simultaneously.

The secondary CTA, View Menu, uses a transparent fill with a border. Present and inviting, but visually subordinate to Order Now. A user who already knows what they want clicks Order Now. A user still deciding clicks View Menu. The design reflects that behavioral reality.

The ghost CTA, See Full Menu, appears below the signature dishes section as a lower commitment action for users who want to explore before deciding.

The Website

The homepage opens with a full viewport hero. A dark fire lit photograph fills the screen. A gradient overlay runs from near opaque forest green at the bottom, where the headline and CTAs live, fading upward to transparent so the fire image breathes at the top. The content is center aligned over the image with the eyebrow tag "Fine Dining · Lagos, Nigeria" sitting above the headline "Rooted in Flavor. Refined by Fire." Below the headline a line of supporting copy reads: "A celebration of Nigerian heritage, plated with intention." The two CTAs sit side by side beneath it.

The About section tells the story of the brand in human terms. The Iroko name is explained through the sacred tree it references and connected to the kitchen philosophy of recipes from grandmothers, techniques from the world's finest kitchens, and open flame cooking. Two stat counters, Years of Experience and Happy Guests, anchor the brand's credibility beneath the copy alongside a warm atmospheric restaurant photograph.

The Signature Dishes section presents four featured dishes from the current menu with the heading "A rotating tasting of what our kitchen is proudest of this season, pulled from the fire, the pot, and the market that morning." Each dish card shows a food photograph, an eyebrow tag indicating its status, the dish name, price in Naira, a one line description, and an Add to Cart button. A See Full Menu CTA sits beneath the grid.

The Testimonials section features three guest quotes displayed as cards. The three voices represent different relationships with the restaurant, a food critic, a guest chef, and a regular diner since 2019, which gives the social proof section range and credibility rather than reading as generic five star reviews.

The Reservation section uses a two column layout. A rich interior dining room photograph fills the left side while the booking form sits on the right. The form collects Full Name, Email, Phone, Party Size, Date and Time, and Special Requests. The heading is "Book a Table" with the subtext "We'll confirm within minutes" setting a clear expectation of response speed.

The footer is built on the deep forest green background, the only section of the page that uses forest green at full saturation as a background. It contains the Iroko logo and brand tagline, "A love letter to Nigerian heritage. Rooted, refined, and served with fire," alongside Quick Links, Opening Hours, and Contact information including the restaurant address on Musa Yar'Adua Street, Victoria Island, Lagos.

Visual Hierarchy in Practice

Three specific techniques were applied throughout the site to guide the user's eye without relying on multiple colors or decorative elements.

Hierarchy is most visible in the hero section's two CTA buttons. Order Now is solid, filled, and dominant. View Menu is outlined and secondary. They are the same size but carry completely different visual weight, which communicates to the user without instruction which action the restaurant considers primary and which is a softer alternative.

Opacity is used in the hero sub-copy which sits at reduced opacity against the dark overlay. It communicates supporting information without competing with the headline or the CTAs for attention. The technique creates depth and atmosphere without reducing the information.

Overlay is the dark gradient applied over the hero food photography. The gradient runs from near opaque at the bottom where the text lives, fading to transparent toward the top so the fire image remains the dominant visual while text stays legible at every screen size.

Outcome

Iroko reads as a real brand. Not a template with a logo placed on top. A brand that has a reason for every color, every font choice, every piece of copy, and every interaction.

The tagline "A love letter to Nigerian heritage. Rooted, refined, and served with fire" is not marketing language applied after the design was finished. It is the design philosophy made verbal. The two are the same statement in different languages.

The project demonstrates what happens when a design problem is taken seriously from the first decision to the last pixel: a name rooted in cultural meaning, a palette derived from the brand concept, a typography pairing with a specific editorial voice, and a functional flow that covers the complete customer journey from the first visit to a confirmed table reservation or completed order.

Want something like this for your brand? Click the contact button.

Check out the live website here: irokodining.netlify.app