marmalade.

A recipe and meal planning app for iPhone. It keeps all of my saved recipes in one place, in a photo grid that makes them easy to browse and find. The design is a small tribute to seventies cookbooks and kitchens.

Personal projectiOSSwiftUIOn-device AIXcodeClaude Code

Why I built it

My recipes were spread across screenshots in my camera roll, saved Instagram and TikTok posts, and PDFs on my computer. That made them hard to find, hard to cook from, and hard to use when planning the week. I built Marmalade to keep them all in one place.

Marmalade recipes screen: a two-column grid of recipe cards with photos

The recipe grid

Importing recipes

Recipes can be imported from screenshots or from a link. For screenshots, the app reads the text on the phone and pulls out the title, ingredients and steps, skipping likes and comments. If a screenshot includes a photo of the dish, it becomes the cover. Links work for recipe websites and for Instagram and TikTok posts. A post with several ideas instead of one recipe, like a list of toast toppings, can be saved as an idea board, and any idea on it can be added to the meal plan.

Marmalade add sheet: from screenshots, from a link, write a recipe, save inspiration, save an idea board

Adding a recipe

Servings and units

Any recipe can be scaled to more or fewer servings. Amounts can be shown as written, in metric, or in US units. Metric converts ingredients that are usually weighed, like flour and sugar, into grams, and leaves small measurements like teaspoons as they are. Ingredients can be checked off while cooking.

Marmalade recipe page: Sugar-Free Banana Muffins with time, servings and ingredients

Servings and units above the ingredients

Cook mode

Cook mode shows one step at a time and keeps the screen on. When a step mentions a time, like “bake for 15 minutes,” tapping it starts a timer. The timer keeps running outside the app and shows on the Lock Screen, where it can be paused or stopped.

Marmalade timer as a Live Activity on the iPhone Lock Screen

Cook mode and the Lock Screen timer

Meal planning

The meal plan covers one week at a time, and several weeks can be saved and rotated. Each day can hold a saved recipe or a meal typed in by hand, like “white rice” as a side. A home screen widget shows what’s planned for dinner.

A week of dinners, with rice added as a side

Why build my own

I tried a few existing recipe apps, but they didn’t fit how I save recipes or how I cook. These are the main things Marmalade does differently.

Recipe page showing only the title, time, servings and ingredients — Simple recipe pagesOnly the title, time, servings, ingredients and steps.

Ingredients in metric: flour and banana in grams, teaspoons left as written — Unit conversionWeighed ingredients convert to grams. Spoon measures stay as written.

Settings: screenshot reading uses on-device AI, privacy says it stays on your phone — PrivacyNo account needed. Screenshots are read on the phone, not uploaded.

Appearance

The app comes in six warm, earthy color palettes with a matte finish. The colors come from seventies kitchens and cookbooks: burnt orange, mustard, terracotta and olive. Choosing one changes the accent color throughout the app. I like being able to make an app feel like my own, and Instagram and Pinterest were the main visual references.

Choosing a palette

Design system

The background is a warm off-white and the cards are white, so the food photos are the most colorful thing on screen. The only other color comes from the selected palette. A small set of components, like chips, cards and buttons, is reused on every screen to keep the app consistent.

The look is a nod to seventies design. Headings use Corben, a rounded serif similar to the type on seventies cookbook covers. The icon uses the stacked rainbow bands and striped horizon that were common in seventies graphics. Together with the matte palettes, these give the app a retro feel without making it look dated.

Color

The background is a warm oat color and the cards are white, so the food photos stand out.

A cottage cheese bowl with cucumber, tomato and egg

Savory Cottage Cheese Bowl

10 min · Breakfast

Oat#F8F6F2

Card#FFFEFD

Sand#EDEAE5

Ink#2B2724

Muted#8A847C

Palettes · Marmalade

Six warm, earthy palettes with a matte finish. The selected palette is the only accent color in the app.

#E0BA70

#DB9D61

#C97F58

#AA6351

Accents

Main buttons are a soft black so they don’t compete with the photos. The palette color is used for the + button ring, selected chips and small labels.

Start cooking

Main buttons

The + ring

Dinner

Selected chip

Dinner · 4 hr

Words, in one solid color

Finish

Colors are matte, like the printing in a seventies cookbook, and the background has a faint paper texture.

Matte color

Paper

Typography

Corben for headings and numbers, a handwritten font for short notes, and the system font for everything else.

The heading Meal plan in the app's serif

A small-caps category label above a recipe title in the app's serif

Time, servings and ingredient counts with figures in the app's serif

SF Pro · body

Bake for 14–16 minutes, until a tester comes out clean.

Icons and chips

Icons are thin outlines. Options are chips you tap instead of dropdown menus.

The tab bar: thin outline icons around the + ring

Recipe filter chips: All, favorites, Breakfast, Lunch, Dinner

Category chips, the selected one outlined

What’s in a name?

The name is meant to feel warm and a little old-fashioned. The icon is an orange rising like a sun over striped bands, a common seventies motif.

Try it

Hover over or select a palette to see every screenshot on this page in that palette.

How it was built

I designed Marmalade and built it as a native iPhone app with Claude Code. I’ve used each version on my own phone and changed whatever didn’t work well. Screenshots are read on the phone itself, not on a server.