OkCupid Dating: Date Singles

Colors

• #F4F3F8Background Off-White · screen_background
• #FFFFFFInput Surface · input_field_fill
• #C9C7CEBorder Gray · input_field_border
• #121115Primary Black · headings · labels
• #BCBAC2Placeholder Gray · placeholder_text · disabled_button_fill
• #C8C7CEToggle Inactive · switch_track

Type

• Screen Header TitleSF Pro Text · 30px · 700 · #121115
• Page Welcome HeaderSF Pro Display · 42px · 800 · #121115
• Input LabelSF Pro Text · 28px · 600 · #121115
• Input PlaceholderSF Pro Text · 32px · 400 · #BCBAC2
• Toggle Helper TextSF Pro Text · 25px · 500 · #121115
• Next Button LabelSF Pro Text · 26px · 800 · #FFFFFF

Elements

• Back Navigation Button · circular_icon_button

  Top left inset, 40px margin from left, diameter approx 80px. · Translucent white/light circular container holding a black left chevron.

• Email Input Field · text_input

  Full width with 48px lateral padding, height approx 110px. · White rectangular field with fine light gray border and vertical text insertion cursor.

• Promotional Toggle · switch

  Right-aligned adjacent to descriptive disclaimer text. · iOS-style track in light gray with a white circular thumb in the off position.

• Next Action Button · button

  Full width with 48px lateral margins, positioned above the virtual keyboard, height 96px. · Disabled state pill button filled with muted neutral gray.

• System Keyboard · keyboard

  Pinned to bottom of the viewport occupying ~40% screen height. · Standard iOS light mode QWERTZ software keyboard.

Layout

Standard vertical form flow on soft tinted canvas, composed of nav header, two-line welcome title, single input row, checkbox/switch setting, fixed action button, and keyboard.

Notes

German QWERTZ keyboard is actively presented.