ReciMe: Recipes & Meal Planner

Colors

• #F9F8F4Background · screen background · card background
• #111111Primary Text · headings · body text · button text
• #3A85EEBrand Blue · logo · progress bar active
• #E5DEC9Progress Track · progress bar background
• #EFEFEFCard Border · card border
• #1C1C1EButton Dark · primary action button background

Type

• titleSF Pro Rounded · 32px · bold · #111111
• bodySF Pro Text · 18px · regular · #4A4A4A
• card textSF Pro Text · 18px · semibold · #111111
• buttonSF Pro Text · 18px · semibold · #FFFFFF

Elements

• Back Button · icon button

  Top left, below header · Chevron arrow symbol

• Progress Bar · progress indicator

  Top center, spanning horizontally below back button · Rounded rectangle, partially filled with brand blue

• Info Cards · container cards

  Stacked vertically in the middle of the screen · White background, thin subtle border, contains icon illustration and text

• Continue Button · primary button

  Bottom center, fixed near bottom edge · Solid dark rounded pill with white text

Layout

Top-to-bottom flow consisting of header navigation, progress indicator, title, subtitle, two informational content cards, and a sticky bottom continue button.

Notes

Colors and font families are visual estimations based on standard iOS design patterns.