Bible Chat: Daily Devotional

Colors

• #F0F2EBScreen Background · screen background
• #252723Headline Dark Charcoal · title text
• #F8F9F5Card Off-White · option card background
• #E0E3DACard Border Tone · card border · radio indicator border
• #47533CProgress Active Dark Olive · progress fill
• #B5BCB0Disabled Button Background · disabled button fill
• #3E4339Disabled Button Text · disabled button label

Type

• TitleGeorgia · 68px · 700 · #252723
• Option LabelSF Pro Text · 42px · 400 · #252723
• Primary ButtonSF Pro Text · 44px · 600 · #3E4339

Elements

• Progress Bar · progress_indicator

  Top of screen, ~45% filled dark olive segment. · Linear bar with rounded caps and progress track.

• Bible Version Options List · radio_list

  Vertical list of 7 items; top items wrap onto two lines (e.g. RSVCE, CPDV), card heights scale to accommodate content (~160px for multiline, ~146px for single line). · Off-white background cards with faint borders and right-aligned circular radio outlines.

• Disabled Continue Button · button

  Anchored bottom pill, height ~146px. · Inactive muted green pill button with disabled text styling.

Layout

Single-choice selection list featuring variable-height option cards due to multiline Bible translation titles.

Notes

Cards adjust internal padding or height gracefully for two-line text entries.