ReciMe: Recipes & Meal Planner

Colors

• #FBFBFAOff-white Background · screen background
• #111111Dark Charcoal Text · title · body
• #3B82F6Brand Blue · subtitle · progress bar active
• #FACC15Star Yellow · rating stars
• #FFFFFFCard Fill · testimonial card background
• #1E1E1EDark Button Fill · primary button background

Type

• titleSF Pro Display · 40px · bold · #111111
• subtitleSF Pro Display · 36px · bold · #3B82F6
• bodySF Pro Text · 22px · regular · #111111
• buttonSF Pro Text · 24px · semibold · #FFFFFF

Elements

• Progress Bar · indicator

  Top section below brand header, featuring a back arrow and segmented bar · Thin track with blue active segment

• Testimonial Card · card

  Centered below heading text, occupying the middle and lower portion of the screen · White rounded card with quote marks, 5 yellow stars, review text, and author profile avatar with name

• Continue Button · button

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

Layout

Top brand logo, progress bar, social proof headline and subtitle, followed by a detailed user testimonial card and a bottom continue button.

Notes

Onboarding questionnaire step featuring customer reviews for social proof.