ClassDojo

Colors

• #191724Background Deep Navy · Screen background fill
• #8F6CF5Accent Purple · Primary action button fill
• #58D62AMascot Green · Mascot character 3D render fill
• #FFFFFFWhite · Logo wordmark text · Button text
• #272439Surface Dark Slate · Secondary button fill · Top nav button fill

Type

• Brand Logo WordmarkGilroy · 82px · 800 · #FFFFFF
• Primary Button LabelGilroy · 42px · 700 · #191724
• Secondary Button LabelGilroy · 42px · 700 · #FFFFFF
• Top Navigation Button LabelGilroy · 38px · 700 · #FFFFFF

Elements

• Log in Button · pill_button

  Positioned at top right below status bar, 56px from right edge, width ~200px, height ~88px. · Dark plum rounded pill container with centered white bold text.

• Mascot and Floating Badges Illustration · graphic_composition

  Vertically centered hero cluster spanning approximately 60% of viewport width and 40% of height. · 3D rendered lime green character surrounded by floating stylized icons (school building, chat bubbles, photos badge, star badge, calendar icon).

• I'm an adult Button · pill_button

  Bottom action stack, full width minus 140px margins, height ~136px. · Solid bright lilac-purple fill with dark text.

• I'm a child Button · pill_button

  Stacked directly beneath the primary button with a 24px vertical gap, height ~136px. · Dark charcoal-purple fill with white text.

Layout

Full-screen splash and role-gate onboarding layout. Header row houses top right access button; center zone holds 3D hero artwork and brand wordmark; bottom zone anchors two prominent full-width pill action buttons.

Notes

Font exhibits rounded geometric sans characteristics consistent with custom display fonts or Proxima Soft/Gilroy. Low confidence due to standard geometric shapes without serif distinguishing features.