Huckleberry: Baby Tracker

Colors

• #6C7276Modal Backdrop Dimming · Dimmed background overlay
• #F2F2F7iOS Sheet Background · Bottom sheet background container
• #007AFFAction Blue · Continue with Passcode button fill · Radio selection indicator
• #E3E3E8Card Field Background · Grouped input field cards
• #000000System Label Black · Modal title · Field labels

Type

• Modal HeaderSF Pro Display · 24px · 700 · #000000
• Explanation BodySF Pro Text · 17px · 400 · #000000
• Input Field ValueSF Pro Text · 17px · 400 · #3C3C43
• Primary Action CTASF Pro Text · 18px · 600 · #FFFFFF

Elements

• Sign In with Apple Sheet · Modal Bottom Sheet

  Anchored to bottom edge spanning full viewport width, elevated over dimmed base screen · Rounded top corners, close icon at top right, rounded inset grouped controls

• Passcode Action Button · Primary Button

  Bottom of modal card, full-width inset · Solid iOS system blue pill button with bold white text

• Radio Option Selector · Option List

  Grouped rows with Share My Email and Hide My Email · Separated by thin divider, containing blue checkmark icon on selected state

Layout

System-standard modal bottom sheet dialog superimposed over the Let's get started authentication screen.

Notes

Strictly adheres to Apple Human Interface Guidelines for Sign In with Apple sheets.