LangLearn: AI English Tutor

Colors

• #e4eef9background-sky · screen background soft gradient
• #386cebprimary-blue · headline line 1 text · circular progress indicator ring
• #122046dark-navy · headline line 2 text
• #ffffffpill-bg · floating price pill background
• #1c1c1ephone-bezel · mockup smartphone frame stroke

Type

• headline line 1SF Pro Display · 44px · 700 · #386ceb
• headline line 2SF Pro Display · 44px · 700 · #122046
• cost calloutSF Pro Display · 44px · 700 · #1f2a37

Elements

• Step Progress Ring · indicator

  top center, ~110px diameter · thick circular ring stroke in primary blue

• Price Badge Pill · chip

  centered above phone mock, width ~580px, height ~110px · white rounded capsule container with soft elevation shadow, emoji icon on left

• Phone Mockup Screen · graphic container

  bottom half of viewport, partial smartphone bezel visible · dark bezel framing AI avatar video feed

Layout

Top progress ring leading into two-line centered value proposition, anchored below by pricing badge and mobile mockup displaying AI tutor.

Notes

Visual design focuses on clean minimalist educational technology branding with blue primary accents.