iTranslate Translator

Colors

• #38B6FFprimary-sky-blue · primary button fill · voice mic action button fill · active pagination indicator
• #1C2434slate-dark · headline typography
• #FFFFFFneutral-card-bg · mockup speech card · button text
• #BCE3FDpale-indicator-blue · inactive pagination indicator
• #94A3B8subtle-placeholder-gray · instructional card text

Type

• headlineSF Pro Display · 64px · 700 · #1C2434
• buttonSF Pro Text · 38px · 600 · #FFFFFF
• placeholder-instructionSF Pro Display · 42px · 600 · #CBD5E1

Elements

• device_mockup · illustration

  Centered upper screen displaying voice conversation interface with dual language boxes. · Rounded device border with screen reflection, showing English and Spanish dialog cards with circular mic triggers.

• mic_circle_button · button

  Inside mockup aligned right within English input card, 96px diameter. · Vibrant solid blue circle with white microphone glyph icon.

• continue_button · button

  Bottom aligned, centered horizontally, width 890px, height 126px. · Solid sky-blue fill with white text.

• pagination_indicator · indicator

  Bottom centered, row of 5 indicators. · Second element is an elongated horizontal blue pill; all others are pale circular dots.

Layout

Linear onboarding sequence step 2 showing Voice Translation feature mockup in upper section, centered two-line value proposition text, persistent primary CTA, and page progress indicators.

Notes

Subtle top gradient wash blends between very pale blue and warm white.