Live Translator - AI Translate

Colors

• #2563EBprimary-blue · title text · feature icon glyph and ring
• #0F172Adark-navy · feature list label text
• #64748Bsubtitle-gray · subtitle text
• #FFFFFFsheet-background · bottom sheet card background
• #EFF6FFicon-bubble-bg · feature icon circular background

Type

• sheet-titleSF Pro Display · 34px · 800 · #1E3A8A
• sheet-subtitleSF Pro Text · 17px · 500 · #64748B
• feature-item-labelSF Pro Text · 18px · 600 · #0F172A

Elements

• bottom-sheet-modal · modal sheet

  Bottom half of the screen, extending to screen bottom with rounded top corners · Opaque white background with soft upward elevation shadow over blurred background content

• thumbs-up-graphic · 3D illustration

  Top center of the modal sheet, overflowing upper boundary slightly · Stylized 3D hand giving thumbs up with floating blue confetti sparkles

• feature-list · list group

  Vertical stack centered below subtitle, containing 3 icon-and-label rows · Each row has a circular blue icon container (40px) and bold title text with ~24px vertical spacing

Layout

Modal bottom sheet overlaying a heavily blurred backdrop, containing celebration artwork, header copy, and three feature check/highlight rows.

Notes

Background screen is intentionally blurred to focus attention on modal completion dialog.