Translate AI - Live Translate

Colors

• #000000pure_black · screen background
• #FFFFFFpure_white · bottom button background · title text behind modal
• #E5E5EAmodal_background · in-app rating modal surface
• #007AFFstar_blue · unfilled rating star stroke icon
• #000000modal_title · modal headline text
• #3C3C43modal_body · modal description text
• #8E8E93spinner_gray · activity indicator icon

Type

• modal_titleSF Pro · 38px · 600 · #000000
• modal_bodySF Pro · 30px · 400 · #3C3C43
• modal_actionSF Pro · 36px · 600 · #000000
• background_titleSF Pro · 54px · 700 · #FFFFFF

Elements

• system_rating_modal · modal_dialog

  Centered overlay dialog occupying ~85% screen width (~860px wide, ~760px high) · Apple SKStoreReviewController style frosted light gray panel with heavy drop shadow and blurred backdrop

• app_icon · icon

  Centered horizontally inside modal top area, ~160px by ~160px · Vibrant blue gradient app icon with rounded squircle shape showing globe, speech bubble, and AI glyph

• star_rating_bar · rating_bar

  Horizontal row of 5 star glyphs centered in the modal, ~520px wide with ~40px spacing · Thin blue stroked unfilled five-pointed star outlines

• not_now_button · button

  Centered at the bottom of the rating dialog card, height ~80px · Slightly darkened pill container fill with bold sans-serif text 'Not Now'

• loading_button · button

  Full width with 60px horizontal margins, ~90px from screen bottom, height ~116px · Solid bright white pill button with a centered gray iOS activity indicator spinner replacing the text label

Layout

Dark background onboarding screen obscured by an iOS system in-app review pop-up dialog in initial unrated state, with the underlying bottom action button displaying a spinner.

Notes

Modal directly mirrors native iOS StoreKit review dialog specifications.