Bible Chat: Daily Devotional

Colors

• #EFF2ECbackground-sage · screen background
• #F8FAF6card-surface · option card background
• #E2E7DEcard-border · option card border · radio indicator border
• #252B20text-primary · screen headline text · option label text
• #6C7467text-muted · subtitle text · icon glyph fill
• #D3D9CEprogress-track · progress bar background
• #4D5642progress-fill · progress bar active fill
• #B1B9ABbutton-disabled-fill · inactive cta button fill
• #3E4637button-disabled-text · inactive cta button label and icon

Type

• titleGeorgia · 44px · 700 · #252B20
• bodySF Pro Text · 24px · 400 · #6C7467
• labelSF Pro Text · 28px · 500 · #252B20
• buttonSF Pro Text · 26px · 600 · #3E4637

Elements

• top-progress-bar · indicator

  Positioned 126px from top, centered horizontally, spanning 800px width with 8px height. · Pill track filled with light grayish olive, filled approximately 60% with deep olive green.

• option-card-woman · card

  Full-width card with 58px horizontal page margins, height 108px, centered in upper third. · Off-white rounded rectangle with a thin 1px light grayish border, left female pictogram, label, and right circular radio border.

• option-card-man · card

  Positioned 20px beneath the woman card, height 108px, same horizontal margins. · Off-white rounded rectangle with a thin 1px border, male pictogram, label, and right circular radio ring.

• continue-button · button

  Positioned at bottom, 126px above screen bottom edge, 58px horizontal margins, height 96px. · Solid muted sage-gray filled pill button with dark olive label and trailing right chevron icon.

Layout

Single-column mobile onboarding screen with top progress indicator, centered headline and verse subtitle, vertical selection card stack, and fixed bottom CTA button.

Notes

Title serif shows characteristics similar to New York or Georgia. Exact pixel heights depend on source scaling.