MyTunes : AI Music Generator

Colors

• #ffffffSheet Background · Modal card background
• #000000Primary Text · Title 'Contacts' · Empty state title 'No Contacts'
• #8e8e93Secondary Text · Empty state description · Search placeholder
• #f2f2f7Control Button Background · Circular header buttons (< and X) · Search bar input fill
• #8e8e93Placeholder Icon Fill · Contacts placeholder avatar icon

Type

• Sheet TitleSF Pro Text · 17px · 600 · #000000
• Empty State TitleSF Pro Display · 22px · 700 · #000000
• Empty State BodySF Pro Text · 16px · 400 · #8e8e93
• Input PlaceholderSF Pro Text · 16px · 400 · #8e8e93

Elements

• Modal Sheet Container · modal_sheet

  Presented as a rounded sheet card covering almost the entire viewport, rounded top edges. · Pure white background (#ffffff) with rounded top corners.

• Back Button · button

  Top-left header circular button. · Light gray circular disc with black chevron icon.

• Close Button · button

  Top-right header circular button. · Light gray circular disc with black cross icon.

• Empty State Avatar · icon

  Horizontally centered in the middle of the sheet above the text. · Medium gray circular contact silhouette placeholder.

• Search Bar · text_field

  Positioned near the bottom of the modal, horizontally centered with generous horizontal margins. · Rounded pill-shaped input with light gray fill (#f2f2f7), magnifying glass icon, and 'Search' placeholder.

Layout

Centered empty state layout inside an iOS modal sheet, with navigation controls anchored at the top and a floating search bar anchored at the bottom.

Notes

Triggered by tapping 'Contact' in the AutoFill menu from Screen 2.