ReciMe: Recipes & Meal Planner

Colors

• #F7F5F0Background Off-White · Screen background fill
• #1C1C1APrimary Text Black · Headlines · Body text · Button text
• #3B82F6Brand Blue · Logo icon · Progress bar fill
• #3B82F6Brand Text Blue · Logo text
• #1C1C1APrimary Button Dark · Bottom continue button fill

Type

• TitleSF Pro Display · 36px · Bold · #1C1C1A
• BodySF Pro Text · 24px · Regular · #4A4A45
• ButtonSF Pro Text · 22px · Semibold · #FFFFFF

Elements

• Back Button · Button

  Top-left area, centered vertically with progress bar, alignment left · Simple chevron icon in dark color

• Progress Bar · ProgressBar

  Top header area below logo, spans horizontally with rounded ends · Partially filled blue bar with light grey track

• Illustration Blob · Image

  Centered horizontally in the middle section, organic shape container · Full color photo of a person cooking inside an irregular cloud-like mask

• Continue Button · Button

  Bottom anchored, horizontally centered, substantial vertical padding · Solid dark rounded rectangle with white text

Layout

Vertical stack hierarchy: Top navigation with logo and progress, title and subtitle text, central organic image illustration, secondary messaging text, and a sticky bottom CTA button.

Notes

Standard onboarding layout with custom organic photo mask.