ClassDojo

Colors

• #191724Background Dark Navy · Full screen background
• #272338Progress Track Inactive · Step bar background
• #8F6CF5Progress Fill Purple · Step bar active indicator
• #FFFFFFText White · Main headline
• #9E99B0Text Slate · Subtitle body text
• #8F6CF5Primary Button Fill · 'Yes, I'm joining a class' button fill
• #8F6CF5Secondary Button Text · 'No, I'm not joining a class' text color

Type

• Screen Question HeadlineGilroy · 60px · 800 · #FFFFFF
• Question SubtitleGilroy · 40px · 500 · #9E99B0
• Primary Action TextGilroy · 42px · 700 · #191724
• Secondary Action TextGilroy · 40px · 700 · #8F6CF5

Elements

• Step Progress Indicator · progress_bar

  Fixed near top below status bar, 10px tall horizontal bar across viewport width with purple segment filled ~10%. · Dark background track with vibrant purple active fill segment.

• Question Text Block · text_block

  Vertically centered above mid-screen, left-aligned or centered, width ~88% of screen. · High-contrast bold white heading followed by muted grayish-purple explanatory body copy.

• Yes Button · pill_button

  Positioned below text block, full width with 80px horizontal margins, height ~136px. · Solid bright lilac-purple fill with dark navy text.

• No Button · text_button

  Centered ~40px directly below the primary button, height ~80px. · Transparent background with bold lilac-purple text.

Layout

Clean onboarding survey question screen: horizontal progress bar at top edge, centered question text block, followed directly by stacked primary affirmative and secondary negative response actions.

Notes

Minimal visual density emphasizes fast decision-making during the setup funnel.