Bible Chat: Daily Devotional

Colors

• #EFF2ECbackground-sage · screen background
• #F8FAF6card-surface · list item card background
• #E3E7DFcard-border · list item outline · radio ring
• #252B20text-primary · title text · list item title
• #4D5642text-secondary · selection count instruction text
• #B1B9ABbutton-disabled-fill · inactive cta button fill
• #3E4637button-disabled-text · inactive cta button text

Type

• titleGeorgia · 44px · 700 · #252B20
• section-headerSF Pro Text · 20px · 700 · #4D5642
• labelSF Pro Text · 26px · 500 · #252B20
• buttonSF Pro Text · 26px · 600 · #3E4637

Elements

• top-progress-bar · indicator

  Centered at top, 126px below screen top edge, length approximately 800px, 8px high. · 70% filled with dark olive green on light grayish-green track.

• options-scroll-list · list

  Vertical list containing at least 8 items, 58px horizontal margins, item heights approx 98px with 16px gap. · Pill-shaped rectangular cards in pale warm off-white, light gray borders, left text labels and right unselected radio circles.

• continue-button-disabled · button

  Fixed floating near bottom, overlapping list content, 58px horizontal margins, height 96px. · Semi-transparent or solid light sage pill with muted dark olive text and right chevron.

Layout

Multi-select vertical scroll list under header block, with floating fixed action button overlaying bottom elements.

Notes

Bottom list cards scroll underneath the fixed continue button container.