Knowunity - AI learning app

Colors

• #0D0F17Background Dark · Screen background fill
• #8964EEMascot Violet · Center illustration fill · Completed progress track fill
• #191C26Card Surface · Review testimonial card fill · Social login button fill
• #F5A623Star Rating Gold · 5-star review icon fill
• #232635Primary Button Surface · Apple continue button background
• #252837Pill Tag Dark · Reviewer metadata tag fills
• #FFFFFFText White · Title text · Review heading · Apple button text · Reviewer name
• #8E93A3Text Muted · Review body copy · Metadata badge labels

Type

• Screen TitleSF Pro Display · 68px · 800 · #FFFFFF
• Card HeaderSF Pro Text · 44px · 700 · #FFFFFF
• Review BodySF Pro Text · 30px · 400 · #8E93A3
• Review Metadata TagSF Pro Text · 28px · 600 · #FFFFFF
• Continue With Apple LabelSF Pro Text · 40px · 700 · #FFFFFF

Elements

• Review Testimonial Card · card

  Placed in middle-lower third above authentication actions, full width with side gutters. · Rounded dark card containing 5 gold stars, headline, multi-line user feedback, and author profile tags (avatar, grade, school).

• Carousel Indicator · page_control

  Directly below review card, centered horizontal row of 5 dots. · White filled dot for active page, darker circular dots for upcoming pages.

• Continue with Apple Button · primary_action_button

  Full width minus side margins, height 140px, placed in bottom action zone. · Rounded pill button in dark slate fill with white Apple logo icon and bold label.

• Alternative Auth Button Group · icon_button_row

  Centered row below Apple button with 2 circular buttons spaced ~48px apart. · Two dark circular icon buttons housing colored Google 'G' icon and white outlined Mail envelope icon.

Layout

Sign-up gate screen structured with progress indicator, compelling value headline, central mascot illustration, paginated review social proof, and Apple/Google/Email authentication controls.

Notes

Progress bar fill is near 90%, signaling final step of onboarding before creating an account.