Find Phone: Device Tracker

Colors

• #22262aDark Background · background
• #ffffffWhite · heading · text
• #2c3238Input Dark · text input fill
• #29664cGreen Button · secondary action button

Type

• HeadingSF Pro Display · 26px · bold · #ffffff
• SubtitleSF Pro Text · 15px · normal · #9ca3af
• Input TextSF Pro Text · 16px · normal · #9ca3af
• ButtonSF Pro Text · 16px · semibold · #ffffff

Elements

• Close Button · button

  Top left corner · Dark circular button with white cross icon

• Phone Input Container · input field

  Center area, full width with margins · Dark rounded rectangle with country code prefix and placeholder text

• Select from Contacts Button · button

  Centered below phone input · Solid dark green rounded rectangle with icon and white text

• Disabled Continue Button · button

  Bottom anchored, full width with margins · Muted dark grey rounded rectangle with muted text

Layout

Top-aligned header elements followed by central phone entry options and a bottom-anchored disabled action button.

Notes

Simple form input layout.