ReciMe: Recipes & Meal Planner

Colors

• #FBFBFAOff-white Background · screen background
• #111111Dark Charcoal Text · title · option text
• #666666Subdued Gray · subtitle
• #FFFFFFCard Background · selectable option card fill
• #3B82F6Brand Blue · progress bar active

Type

• titleSF Pro Display · 38px · bold · #111111
• subtitleSF Pro Text · 22px · regular · #666666
• bodySF Pro Text · 24px · medium · #111111

Elements

• Progress Bar · indicator

  Horizontal bar below top brand logo with back arrow · Segmented progress indicator with active blue fill on the left

• Goal Option Cards · selectable list

  Vertical stack of six rounded white cards with icons and text · White cards with subtle borders/shadows containing emoji/icon and option label

Layout

Top brand header and progress indicator, main question with subtitle, followed by a scrollable vertical list of selectable goal cards.

Notes

Onboarding goal selection screen with unselected state for all cards.