FantasyPros - Fantasy Advice

Colors

• #FFFFFFScreen Background · webview canvas background
• #6001D2Active Purple · focused input border · focused input label · next button fill
• #D1D5DBKeyboard Background · iOS virtual keyboard surface
• #FFFFFFKey Fill · alphanumeric keyboard key background
• #000000Key Text · keyboard key glyphs

Type

• HeadingYahoo Sans · 56px · 800 · #1B1B1E
• Active Input LabelYahoo Sans · 32px · 700 · #6001D2
• Next Button TextYahoo Sans · 34px · 700 · #FFFFFF

Elements

• Focused Input Field · text_field

  Full width form field ~830px wide by 128px high. · White fill with bold 2px Yahoo purple border.

• Keyboard Accessory Bar · toolbar

  Docked immediately above soft keyboard across full width, containing chevron left/right navigation and done checkmark. · Translucent white/light gray background with subtle border line.

• Software Keyboard · keyboard

  Docked to bottom of viewport, taking roughly lower 45% of screen height (QWERTZ layout). · System light keyboard with white keycaps and drop shadows.

Layout

Focused form state with software keyboard deployed over bottom half of screen. The webview content is slightly occluded at the bottom.

Notes

German QWERTZ layout shown on keyboard with umlauts.