Huckleberry: Baby Tracker

Colors

• #D1D5DBKeyboard Gray · Virtual keyboard background area
• #FFFFFFKey Surface White · Standard character key caps · Active input card background
• #007AFFPrimary Blue Action · Done button fill in top modal header
• #000000Text Dark · Field labels · Entered text · Keycap letters

Type

• Header TitleSF Pro Display · 22px · 700 · #000000
• Action ButtonSF Pro Text · 18px · 600 · #FFFFFF
• Input LabelSF Pro Text · 18px · 700 · #000000
• Input ValueSF Pro Text · 18px · 400 · #000000

Elements

• Name Input Group Card · Form Card

  Centered below sheet description banner · White rounded card with thin horizontal separator dividing First Name and Last Name rows

• iOS Virtual Keyboard · System Keyboard

  Fixed to bottom viewport spanning full width · Standard QWERTZ European keyboard layout with rounded light gray and white key buttons and subtle shadow

• Done Button · Button

  Top-right corner of sheet header · Vibrant blue pill button with white text

Layout

Focused form editing state within an iOS system sheet, active cursor positioned in First Name input, with on-screen keyboard occupying the lower 40% of the display.

Notes

Active text editing cursor shown in blue beside 'Andrew'.