ReciMe: Recipes & Meal Planner

Colors

• #FBFBFAOff-white Background · screen background
• #111111Dark Charcoal Text · title · option text
• #E8F0FESelected Card Fill · selected option background
• #8AB4F8Selected Card Border · selected option border
• #FFFFFFUnselected Card Fill · unselected option background
• #1E1E1EDark Button Fill · primary button background

Type

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

Elements

• Goal Option Cards · selectable list

  Vertical stack of six rounded cards · First card is highlighted with light blue fill and distinct blue border indicating selection; remaining cards are white with thin borders

• Continue Button · button

  Pinned to the bottom of the screen · Dark charcoal pill button with white text

Layout

Top brand header, progress bar, question title, vertical list of goal cards with the first option selected, and a bottom continue button.

Notes

Onboarding goal selection screen showing an active selection state on the first item.