iTranslate Translator

Colors

• #F3F3F8Screen Background Tint · background
• #FFFFFFSurface White · card background · pill background · tab bar
• #BCBCC0Placeholder Gray · text input placeholder text
• #1E96F6Accent Blue · text input cursor · active tab icon and label
• #1C1C1EPrimary Dark · title · source language text · target language text
• #8E8E93Neutral Icon Gray · inactive tab icons · swap arrow icon · settings gear

Type

• App TitleSF Pro Display · 54px · 700 · #1C1C1E
• Selector Item TextSF Pro Text · 44px · 500 · #1C1C1E
• Input PlaceholderSF Pro Display · 72px · 600 · #BCBCC0
• Tab Bar LabelSF Pro Text · 28px · 500 · #1E96F6

Elements

• Navigation Bar · header

  Horizontal row under status bar with title centered and settings icon pinned right. · Transparent background with bold glyphs.

• Language Switcher Row · control_group

  Row of two large pill buttons ('Detect language', 'Spanish') flanked by a small center swap button. · White cards with gentle rounded corners, drop shadows, neutral borders.

• Translation Input Card · text_input

  Full width rounded card occupying the upper midsection (~980px wide by ~1050px tall), padded inside with active blue cursor and placeholder. · Pure white surface, rounded corners, faint elevation blur, large placeholder text.

• Bottom Navigation Bar · tab_bar

  Anchored to screen bottom, 3 tab items evenly spaced. · White background, top hairline separator, blue primary accent on first tab item.

Layout

Vertical column layout: top branding header, language pair configuration row, expansive white input card, and fixed bottom navigation.

Notes

Empty state of the translation screen showing active cursor and placeholder.