Compose it like a publication.
Editorial type, warm paper and food-led colour create a recognisable voice. The homepage alternates recipes, ingredients and stories instead of repeating one card layout from top to bottom.
Food / Editorial · 2026
MESA
From market
to everyday table.
An original culinary publication: recipes, visual stories and a playful ingredient-matching kitchen, composed like an independent magazine.
MESAVisual language
At the table
A table to gather
the whole story.
I approached MESA as a small culinary publication, with a voice and visual rhythm of its own. Recipes, stories and a practical kitchen tool needed to feel connected, while keeping ingredients and methods easy to find.
Editorial choices
Warmth in the image.
Order in the recipe.
Three decisions that connect the visual language to the experience.
Separate inspiration from instructions.
A recipe opens with atmosphere, then settles into a predictable structure for ingredients and methods. Portions, checkable ingredients and cooking mode sit where they become useful.
Make ingredient matching explain itself.
The kitchen matches authored ingredient IDs and shows what is missing. It avoids pretending that an approximate text match means a visitor has everything required.
Kitchen index
What's on the table.
An editorial kitchen of recipes, stories and practical tools for exploring food.
The kitchen index
Recipes, stories & useful details.
- Recipe articles
- 12
- Editorial stories
- 4
- Recipe tools
- Scale · check · focus
- Build
- Python static generator · HTML · CSS · JavaScript
- Hosting
- GitHub Pages
- Media
- WebP photography · Cloudflare R2
- Audience
- A reader browsing food stories or choosing a recipe from ingredients already at hand.
- Published pages
- 21
- Distinct photographs
- 35
- Language
- English
Colour language
Paper#FFF7E8
Tomato#E9472F
Saffron#F6CA56
Herb#32634A
Original website typefaces
- Space Grotesk
- Instrument Serif
- DM Sans
- DM Mono
How these figures were counted
21 published pages: five main destinations, 12 recipes and four stories. 35 distinct photographs are referenced; one additional supplied photograph is not used and is excluded.
Reviewed 23 October 2026. Duplicate source copies, error pages and responsive image variants are excluded. Counts describe the original website, not this case study.
View the reviewed source ↗Portion study
A small rule with a useful result.
Change the portions to see three quantities from the original Charred Tomato Toast record scale together. This illustrates interface behaviour; the recipes remain untested editorial drafts.
Charred Tomato ToastQuantity study
- Cherry tomatoes
- 350 g
- Sourdough bread
- 2 slices
- Olive oil
- 30 ml
Ingredient-matching kitchen
Choose ingredients to find related recipes and see the remaining items clearly.
Explore this feature ↗Adjustable portions
Ingredient quantities scale from the recipe's base serving count. Checkboxes help keep track of the ingredient list.
Explore this feature ↗Focused recipe reading
Cooking mode and optional timers support the method without replacing the written recipe.
Explore this feature ↗The reading table
Room to read.
Space to cook.
The magazine composition turns into a readable single-column flow. Ingredients, portion controls and methods remain close together instead of becoming a sequence of oversized image panels.
What I explored
An editorial world,
with useful tools.
A useful editorial experience needs both appetite and clarity. MESA explores how a strong visual voice can sit beside straightforward, transparent recipe tools.