Find Phone: Device Tracker

Colors

• #181b1fDark Background · bottom navigation bar · buttons
• #ffffffWhite · icons · text
• #2bd1b6Green Accent · buttons

Type

• Modal TitleSF Pro Display · 18px · bold · #000000
• Modal BodySF Pro Text · 14px · normal · #000000
• Prompt TextSF Pro Text · 14px · normal · #9ca3af
• ButtonSF Pro Text · 16px · semibold · #ffffff
• Nav LabelSF Pro Text · 11px · normal · #ffffff

Elements

• System Notification Permission Dialog · modal

  Centered over the screen with heavy background dimming · Light grey frosted glass iOS alert box with two option buttons

• Add People Button · button

  Bottom area, left side above tab bar · Dark rounded rectangle with thin white border

• Join Circle Button · button

  Bottom area, right side above tab bar · Dark rounded rectangle with thin white border

• Bottom Navigation Bar · tab bar

  Bottom anchored spanning full width · Dark background with five icon-and-label tabs

Layout

Map background overlaid with a system notification permission modal, bottom action buttons, and a bottom tab bar.

Notes

Modal dialog has higher z-index and dims the map and UI underneath.