CASE STUDY: A dinner starts long before anyone sits down.
Personal project, London
An evolving personal project

A dinner starts long before anyone sits down.

Show me the work ↓
Caballero’s hand-drawn terracotta wordmark

I designed the identity and built the invitation, kitchen and Studio tools for my supper-club project. One system connecting the stories people bring to dinner with the work of making it happen.

A Caballero’s dinner table in sunlight, set with printed menus, flowers, citrus and candlesEnlarge image +
The experience the tools serve: a real Caballero’s table, with its menus and small details in place.

01 / One identity, different jobs

Warm enough to invite you in. Clear enough to cook with.

Invitation design preview: a hand-drawn envelope, A note to the kitchen, and one Start button
The guest side. An invitation to share a dish and its story, in writing or by voice. Invitation design preview.
Recipe library with illustrated recipe cards, search, filters and shopping actions
The kitchen side. Find a recipe, prepare the ingredients, follow the method. Kitchen interface, September 2026.

Personality has a job to do.

The crayon identity makes a digital invitation feel personal. The kitchen needs a different kind of care: readable instructions, quantities within reach and a clear next action. The visual language connects them without making them behave the same way.

02 / A concrete iteration

Less hunting for ingredients. Less losing your place.

Before

Earlier cooking screen with an oversized step number, dense paragraphs and timer action in the bottom barEnlarge image +
The step number competed with the method. Ingredient quantities sat below a long instruction.

Revised

Revised cooking screen with larger text option, clearer paragraph separation, All steps and a fixed Ingredients buttonEnlarge image +
Clearer reading, an explicit step overview and an Ingredients button that stays within reach.

Reference, then return

Ingredient sheet showing staged quantities and a Back to cooking buttonEnlarge image +
Open the quantities, check the relevant stage, then return to the same place in the recipe.

I kept the quantities and temperatures in the instructions, and made the ingredient list easier to reach. I’ve tested it in the kitchen, too.

03 / Beyond the screen

Make the recipe useful. Then make it worth keeping.

Caballero’s Design Studio editing a generic Burnt Basque Cheesecake keepsake, with artwork, text layers and print format controls
A recipe keepsake in the Studio. Open the image for a closer look.

The Studio connects recipe content to editable menus and keepsakes. Layers, artwork and print formats can change without rebuilding every design by hand. Export supports PNG, PDF and SVG containers; the illustrated artwork remains raster.

A plated scallop at a Caballero’s dinner, with flowers and a printed menu behind itEnlarge image +

The screen is only part of it.

The invitation, recipes and printed menus all come together at the table.

What I built with, and where AI fits

The kitchen and Studio use HTML, CSS and vanilla JavaScript. The invitation uses React and Vite. Markdown/TOML recipes and JSON plans feed a Python static generator; local storage and IndexedDB preserve working state.

I used Codex to build and check the tools, and ImageGen and Runway for the invitation’s artwork and motion.

Cloudflare Pages, Workers and D1 support the deployed guest flow and private host tools. Voice transcription is implemented through Workers AI. Guest responses and host records are deliberately absent from this case study.

The custom invitation type was developed with fontTools and Pillow, using a modified Caveat scaffold under its open font licence. The project has continued evolving since the historical interface captures shown here.

Working tools, an evolving independent project.

Role, tools & collaborators

Responsibilities

  • Brand and interaction design
  • Frontend implementation
  • AI-assisted development and visual workflows

Tools

  • JavaScript, React and Vite
  • Python, Markdown and TOML
  • Cloudflare Pages, Workers and D1
  • Codex, ImageGen and Runway
  • fontTools and Pillow