Flavr iOS app UI kit

Last Updated on August 7, 2026 by Editorial Team

Flavr is a delicious UI kit design for a recipe iOS app, created by Silvia Medeiros.

What makes Flavr stand out among recipe app UI kits is how confidently it uses food photography as the actual interface. The category screen up top, with its simple stacked list of Dish, Pasta, Salad, and Soup next to a moody dark hero shot of a cast iron skillet surrounded by herbs, spices, and little bowls of oil and seasoning, sets a tone that carries through every other screen. This is not a kit that hides behind flat color blocks and generic icons. It leans on warm, appetizing imagery to do the emotional work, then lets clean typography and simple orange accents handle the structure. That combination of moody photography and bright, confident orange as the single accent color is the visual signature of this kit, and it is worth studying if you are building any food, recipe, or lifestyle app where the content itself needs to feel irresistible.

Look closely at the recipe cards and you can see a consistent pattern repeated across the Minestrone soup, Chocolate Pudding, Pasta Salad, and Pancakes screens: a square or rectangular photo thumbnail on one side, a category label in small caps, a bold recipe title, and a row of small utensil, heart, and people icons underneath giving quick metadata like prep time and serving size. That row of iconography is doing a lot of quiet work. It tells the user at a glance how difficult a dish is, how long it takes, and how many people it serves, without a single sentence of copy. Anyone designing a similar content-heavy app, whether it is recipes, workouts, or DIY tutorials, can lift this exact pattern of photo plus label plus title plus icon row as a reliable way to make scannable cards.

Screens Included and How They Connect

The kit walks through a fairly complete user journey. There is a sign-up screen with name, email, and password fields under a Create Account button in that same orange, a featured recipes home screen with a Sketch-style status bar and a Latest section, category browsing screens, and a full recipe detail view for Pasta Salad that shows ingredients in a clean list format. Seeing all of these together in one preview is useful because it shows how the design language holds up across very different content densities, from a sparse login form to a busy scrollable feed to a text-heavy ingredients list. That consistency is what separates a usable kit from a handful of disconnected mockup screens.

This makes Flavr a strong starting point for anyone prototyping a food delivery app, meal planner, cooking blog companion app, or recipe discovery platform. It also works well as a reference kit for onboarding flows in general, since the account creation screen is generic enough to restyle for almost any app that needs a name, email, and password step. Designers building a portfolio case study around a food tech concept will find the recipe detail and ingredients screens especially handy, since that layout pattern translates directly to grocery list apps and nutrition trackers too.

If you plan to adapt the kit for your own project, the fastest changes to make are usually:

• Swap the food photography for your own recipe or product shots, keeping the same crop ratios so the card grid stays aligned.
• Recolor the orange accent to match your brand, since it is used sparingly enough on buttons, active tab indicators, and highlight text that a single find-and-replace of that color will re-skin most screens.
• Adjust the type scale on the title cards if your recipe or product names run longer than the short single-line titles shown here.
• Rebuild the icon row with your own metric icons if your app tracks different data, like calories or price, instead of time and servings.

Pairing Flavr with a matching icon set for food and kitchen tools, or a simple sans serif font pairing, will help extend the kit beyond the screens already designed. Because the layouts lean on photography rather than heavy illustration, almost any clean grotesque or humanist sans will sit comfortably with the existing type, so you have room to bring in your own font choices without clashing with the kit’s established mood.