ReciMe: Recipes & Meal Planner

Colors

• #F7F5F0Background · screen_background
• #111111Text Dark · title_text · option_text
• #555555Text Muted · subtitle_text
• #2B74D9Selected Border · card_selected_border
• #1E1E1EPrimary Button · button_background
• #FFFFFFButton Text · button_text

Type

• TitleSF Pro · 38px · bold · #111111
• SubtitleSF Pro · 24px · normal · #555555
• Option TextSF Pro · 24px · medium · #111111
• Button TextSF Pro · 26px · semibold · #FFFFFF

Elements

• Back Button · icon_button

  Top left · Chevron icon

• Progress Bar · progress_bar

  Top center · Linear progress bar

• Selected Card 1 · card

  Grid row 1 column 2 · White card with blue border indicating selection

• Selected Card 2 · card

  Grid row 2 column 1 · White card with blue border indicating selection

• Continue Button · button

  Bottom center · Solid dark pill button (enabled)

Layout

Two-column grid layout with two cards selected (blue borders), enabling the bottom primary button.

Notes

Preference selection screen with active selections made and button enabled.