iTranslate Translator

Colors

• #38B6FFprimary-sky-blue · primary button fill · voice waveform button · active pagination indicator
• #1C2434slate-dark · headline typography
• #FFFFFFcard-white · dialogue card background · button label · audio wave icon
• #BCE3FDpale-indicator-blue · inactive pagination indicator

Type

• headlineSF Pro Display · 64px · 700 · #1C2434
• buttonSF Pro Text · 38px · 600 · #FFFFFF
• labelSF Pro Text · 32px · 600 · #1C2434

Elements

• device_mockup_perspective · illustration

  Rotated and angled close-up device preview occupying top half. · Diagonal isometric angle showing detailed corner curves and audio waveform inside translation input bubble.

• waveform_action_button · button

  Inside angled phone mockup, round button 104px across with white soundwave bars. · Bright blue circular background with five vertical white audio amplitude bars.

• continue_button · button

  Bottom centered, width 890px, height 126px. · Solid rounded blue rectangle with centered white text.

• pagination_indicator · indicator

  Centered below continue button with 5 dots. · Third item is the extended active sky-blue pill.

Layout

Dynamic tilted angle onboarding view emphasizing real-time voice translation interaction, headline, and bottom navigation controls.

Notes

Device mockup is rotated approximately 20 degrees counterclockwise to show depth.