←Back to work
case studyVisit site ↗
livv.pagecase study

KRU — The New Site.

A full rebrand for KRU — from a crowded Shopify storefront to an editorial home where recipes, journal, market and shop speak one language, with a chat assistant that helps you pick your sauce.

ClientKRU Food
RoleRebrand & web design
Year2026
Sitelivv.page ↗

Home

Desktop · 1920px
the challenge

A sauce with a point of view, on a site that had none.

KRU sells West African hot sauce made in small batches. The old store did not say that. It led with a stock photograph of a London street, stacked its menu into a wall of links, and put a green Buy Now button where the story should have been. Drag the slider below to see it.

We rebuilt the whole thing as one editorial system. Thirty-three pages — recipes, philosophy, community, journal and shop — now share a warm identity, a high-contrast serif and a magazine rhythm, so reading a recipe and buying a bottle feel like the same act rather than two different websites.

An interactive shopping assistant sits on every page. It opens with a question instead of a form, answers in plain language, and links straight to the product it recommends.

Focus
UI designEditorialE-commerceArt direction
Key outcomes
A rebrand carried across 33 pagesOne editorial system for recipes and journalA chat assistant advising every purchaseA shop with a collection per product line
the transformation

One brand, before and after.

BeforeAfter
krufood.com · 2026 · Drag to compare
the story

The founder story

01

Rooted in the soil, grown with purpose

02
the craft

Every spice tells a story

01
the product page

The product page

01

Ingredients, shipping and the rest of the range

02
the kitchen

The KRU Kitchen

01

Every recipe, one grid

02
in the browser

The journal

01

The shop

02

The spice range

03
the illustration system

One painted bottle per heat level

01

The four category marks

02
the photography

Late afternoon on the counter

01

In the middle of cooking

02

The range, on a shelf

03
the shopping assistant

It opens with a question, not a form

01

It recommends, explains and links straight to the product

02
the site, out there

The kitchen, on a desk

01

The home, outdoors

02
mobile

Home

iPhone · 390px

Recipes

iPhone · 390px

The assistant, on the phone

iPhone · 390px
brand & merch

The mark on linen

01

The illustration, framed

02
out of home

Platform lightbox

01

Inside the carriage

02

Street frame, after dark

03
where you can find it

Kitchens and shops stocking KRU

01
tools & stack
FigmaFigma
ReactReact
ViteVite
Tailwind CSSTailwind
ShopifyShopify
SupabaseSupabase
Klaviyo
the architecture

Thirty-three pages, one tree.

The captured structure of the site — shop, recipes and journal branching from one home. Drag around, zoom in.

livv.page 12 recipes 12 african bitter leaf soup coconut chickpeas fried rice coconut curry grilled vegetables kru spicy spaghetti sauce kruasian pepper soup lobster quesadillas with kru sauce open face sardines sandwich ribeye steak garnished in kru sauce spicy vegetables stir fry we got pizza at home west african mackerel gravy shop 4 sauces 5 classic fiery hot mild yamu yamu care coffee spices about community contact home journal lifestyle interior design lifestyle kitchen home lifestyle merch market philosophy Site map — drag to explore
the audit

Site coverage

Numbers from the current audit — every page captured at 4 screen sizes.

33
pagesTemplates documented
33
from the home to every recipe and product
captures188
viewports375 → 1920px
breakpoints4
design language

Visual system

Cream palette, a high-contrast editorial serif and a supporting sans — pulled from the live site.

Aa
typeface Cormorant Garamond
T
Aa

The quick brown fox jumps over the lazy dog.

300 Light
400 Regular
600 Semibold
color · swatches
#FFFFFF copied ✓
Neutral 1 neutral #FFFFFF
#F8F5F2 copied ✓
Background pageBg #F8F5F2
#F2EEE9 copied ✓
Surface surface #F2EEE9
spacing
8 8px · xs
16 16px · sm
32 32px · md
8pt grid system
components
button Action
input Type…
palette
Display · 64px The quick brown fox jumps over the lazy dog.
Heading · 40px The quick brown fox jumps over the lazy dog.
Subhead · 26px The quick brown fox jumps over the lazy dog.
Body · 17px The quick brown fox jumps over the lazy dog.

Want a digital home like this for your brand?

Visit the site→
© 2026 KRU New Site