← Onboarding

Mirrativ

Mirrativ, Inc. · Social Networking · $900K/mo · 9K downloads · ★ 4.3

App Store ↗

Screens31

8Profile setup

Colors

  • #137471Dimmed Teal Overlay · Dimmed background upper portion
  • #FFFFFFWhite Card Surface · Modal card fill · Standard keyboard key cap fill
  • #D1D5DBKeyboard Background Grey · Virtual keyboard base plate
  • #A9B2BCSpecial Key Grey · Backspace, Shift, Return, 123 key caps
  • #000000Keyboard Key Text · Key character glyphs

Type

  • Keyboard Key GlyphsSF Pro Text · 38px · 400 · #000000
  • Spacebar LabelSF Pro Text · 28px · 400 · #000000

Elements

  • Shifted Nickname Modal Card · Modal Card

    Pushed upward to y=180-515px to accommodate the software keyboard. · Identical white card with circular avatar header badge as seen in Screen 6.

  • iOS Software Keyboard (QWERTZ German Layout) · System Virtual Keyboard

    Bottom docked, y=630 to screen bottom (1000px). · System grey keyboard tray with individual white rounded rectangular keycaps and darker modifier keys ('Leerzeichen', '123', mic, globe, enter).

Layout

The nickname modal dialog has moved vertically upward towards the top status area to make room for the focused virtual keyboard occupying the lower ~37% of the viewport.

Notes

The active keyboard layout appears to be German QWERTZ based on the presence of Ä, Ö, Ü and the 'Leerzeichen' spacebar label.

Store