Bible Chat: Daily Devotional

Colors

• #EFF2ECbackground-sage · screen background
• #F8FAF6card-surface · unselected list item background
• #DCE5D3card-selected-bg · selected list item background
• #47513Cprimary-green · selected border · selected checkbox fill · continue button fill
• #252B20text-primary · title text · list item text
• #4D5642text-secondary · instruction header text
• #FFFFFFtext-white · button label · checkmark icon

Type

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

Elements

• selected-card-unique-study · card

  Seventh card in the list, partially obscured by the floating CTA, height 98px. · Light olive green tint with 2px olive border and active checkmark circle.

• continue-button-active · button

  Floating over bottom section, 126px above bottom edge, height 96px, 58px side padding. · Solid dark olive green background, crisp white centered text and right chevron.

Layout

Multi-choice scroll list where selecting 1 of up to 3 items updates the count to '1/3 selected' and enables the bottom CTA button.

Notes

The CTA is positioned with an absolute float, overlapping the lower scrollable cards.