iTranslate Translator

Colors

• #BCE3FDVibrant Gradient Sky · Upper background radial gradient tint
• #F9FBFEBackground Base White · Screen background fill
• #0D99FFBrand Icon Blue · App icon tile fill · Skip button text
• #1C1C1ETitle Black · Question heading text · Radio option labels
• #48484ASubheader Gray · Subtitle explanatory text
• #8E8E93Unselected Border Gray · Unselected radio button ring borders
• #D1D5DFDisabled Button Background · Disabled action button fill
• #8E93A0Disabled Button Text · Disabled action button text

Type

• Skip Action ButtonSF Pro Text · 42px · 500 · #0D99FF
• Survey TitleSF Pro Display · 72px · 800 · #1C1C1E
• Survey SubtitleSF Pro Text · 40px · 400 · #48484A
• Radio Option LabelSF Pro Text · 41px · 600 · #1C1C1E
• Disabled Button LabelSF Pro Text · 42px · 600 · #8E93A0

Elements

• Skip Link · button

  Top-right navigation item below status bar with chevron. · Text with trailing '>' glyph.

• App Brand Icon · icon

  Left-aligned, 216x216 px squircle placed below navigation header. · Vibrant blue gradient with white wireframe globe.

• Survey Radio Group · radio_group

  Vertical stack of 7 choices, 76 px row gap, left-aligned. · Circular unfilled ring borders (~64 px diameter) paired with bold text labels.

• Continue Button (Disabled) · button

  Bottom-pinned, full width minus horizontal padding, 142 px height. · Desaturated light gray-blue fill, low contrast muted text.

Layout

Top-to-bottom structured onboarding survey page with skip header, brand logo, left-aligned bold question, multi-choice radio list, and sticky disabled footer CTA.

Notes

State represents initial unanswered survey condition.