Speak: Language Learning

Colors

• #090C15background-deep · screen background with bottom subtle blue glow
• #3067FFpercent-blue · large percentage display
• #FFFFFFheading-white · status headline text
• #1B1D23status-card · checklist container background
• #2CC68Asuccess-green · check circle icons
• #E2E5EClist-text · checklist item labels
• #4787FFmascot-blue · creature mascot body

Type

• percentage statSF Pro Rounded · 140px · 800 · #3067FF
• loading headlineSF Pro Display · 44px · 700 · #FFFFFF
• checklist itemSF Pro Text · 26px · 500 · #E2E5EC

Elements

• percentage display · display text

  Centered horizontally in the upper third · Extremely large bold blue glyphs '99%'

• mascot character · illustration

  Positioned peeking over the top edge of the checklist card · Rounded bean-shaped blue character with resting hands and black oval eyes

• progress card · card

  Centered in the middle of the screen, width approximately 480px, height roughly 260px · Rounded dark charcoal card holding 3 checked progress rows

• check icon item · indicator

  Left of each checklist entry, diameter approximately 38px · Solid mint-green circle with white checkmark

Layout

Clean centered progress/loading screen showing a prominent percentage stat, status title, peeking mascot, and completed step checklist card on a dark gradient background.

Notes

Large numeric font displays rounded terminals suggesting SF Pro Rounded or similar geometric rounded typeface.