Translate AI - Live Translate

Colors

• #000000pure_black · screen background
• #FFFFFFpure_white · primary bottom cta background · submit button text
• #E5E5EAmodal_background · in-app rating modal surface
• #007AFFsystem_blue · filled stars · submit button fill
• #000000modal_title · modal headline text · cancel button text
• #3C3C43modal_body · modal description text

Type

• modal_titleSF Pro · 38px · 600 · #000000
• modal_bodySF Pro · 30px · 400 · #3C3C43
• submit_buttonSF Pro · 36px · 600 · #FFFFFF
• cancel_buttonSF Pro · 36px · 600 · #000000
• button_primarySF Pro · 38px · 600 · #000000

Elements

• system_rating_modal · modal_dialog

  Centered overlay dialog occupying ~85% screen width (~860px wide, ~840px high) · Light gray rounded container with translucent blurred background overlay

• star_rating_bar_filled · rating_bar

  Centered horizontally inside modal, 5 filled star glyphs across ~520px · Solid bright iOS system blue stars indicating a 5-star rating selection

• submit_button · button

  Inside modal beneath stars, ~720px wide, height ~96px · Solid system blue rounded pill button with centered bold white text

• cancel_button · button

  Inside modal below submit button, height ~70px · Borderless plain text button with dark text

• continue_button · button

  Full width with 60px horizontal margins, ~90px from screen bottom, height ~116px · Solid bright white pill button with centered black 'Continue' text

Layout

In-app review dialog transitioned to state with 5 stars selected: 'Submit' blue primary pill and 'Cancel' button displayed within the modal, with 'Continue' button restored at the bottom of the blurred base screen.

Notes

Selecting stars toggles the secondary action into an active blue submission CTA inside the system alert.