ReciMe: Recipes & Meal Planner

Colors

• #F9F8F4Background · screen background
• #FFFFFFSearch Box · search bar background
• #FFFFFFGrid Tile Background · store logo card background

Type

• titleSF Pro Rounded · 28px · bold · #111111
• subtitleSF Pro Text · 16px · regular · #6B6B6B
• store labelSF Pro Text · 14px · regular · #111111

Elements

• Search Bar · search input

  Below title and subtitle, full width with margins · White rounded input with search icon and placeholder text

• Store Grid · grid of cards

  Scrollable 3-column grid occupying middle portion of screen · White rectangular cards with store logos and labels

Layout

Header with title and instructions, search field, 3x3 grid of grocery store options, and bottom continue button.

Notes

Grid displays popular grocery store brands.