Bible Chat: Daily Devotional

Colors

• #EFF2ECbackground-sage · screen background
• #DCE5D3card-selected-bg · selected option card fill
• #4D5642card-selected-border · selected option card stroke
• #F8FAF6card-unselected-bg · unselected option card fill
• #47513Cprimary-green · active continue button fill · selection checkmark circle fill
• #252B20text-primary · headline text · option item text
• #FFFFFFtext-white · active button text and chevron · selected checkmark icon
• #6C7467text-muted · subtitle text · unselected pictogram fill

Type

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

Elements

• option-card-woman-selected · card

  Full width with 58px margins, height 108px, upper section. · Light sage green background with 2px solid olive green border, dark olive filled circle containing a white check icon on right.

• option-card-man-unselected · card

  Directly below selected card, height 108px. · Off-white background with thin 1px border and empty circle outline.

• continue-button-active · button

  Bottom anchored, 126px above screen bottom, height 96px, 58px horizontal margins. · Deep olive green pill button, centered white text, trailing white right-pointing chevron.

Layout

Onboarding selection state showing active card selection and enabled bottom action button.

Notes

Transition from disabled to enabled state alters CTA background from light sage to deep olive and text to white.