Recipe Detail

Design a recipe detail screen that helps someone decide, prep, and cook without hunting for information. The page should open with the recipe name, a strong food image, and the key facts that matter most at the start: prep time, cook time, total time, servings, difficulty, and rating.

Below the hero, organize the content into clear sections: ingredients, step-by-step instructions, and any notes or substitutions. Ingredients should be easy to check off, and steps should read cleanly one at a time, with enough spacing to follow on a phone while cooking. If you include video or gallery content, keep it secondary to the recipe itself.

Add one primary action for the main task, such as saving the recipe, starting cooking mode, or adding ingredients to a shopping list. If you include a portion control tool, it should update ingredient quantities immediately and stay visible near the ingredients list. The screen should feel calm, practical, and built for use with one hand in a kitchen.

Incorporate visual cues like icons or color-coding to distinguish different sections of the recipe, such as ingredients, utensils, and cooking steps.