ClassDojo

Colors

• #191724Dark Navy Background · Page background
• #211E2FCard Surface Dark · Selection option card background
• #2F2B41Card Border Subtle · Option card border stroke
• #FFFFFFText Primary White · Main headline · Option title text · Top bar button text

Type

• Screen TitleGilroy · 64px · 800 · #FFFFFF
• Card Option TitleGilroy · 44px · 700 · #FFFFFF
• Top Navigation Button LabelGilroy · 38px · 700 · #FFFFFF

Elements

• Back Navigation Button · icon_button

  Top-left header area, circular diameter ~100px. · Dark purple-gray circle with thin centered left-pointing chevron glyph.

• Log in Button · pill_button

  Top-right header, matching height ~88px. · Dark circular pill container with white label.

• Avatar Header Icon · avatar

  Centered horizontally above the title, ~130px diameter. · Circular mascot face graphic with ninja headband and open mouth expression.

• Role Selection Cards · option_list

  Vertical column of 3 cards starting below title with ~24px spacing between each. Height ~176px each. · Rounded rectangle containers with dark slate background, 1px subtle border, each containing a 3D icon on the left followed by bold white title.

Layout

Single-column selection screen with persistent top app bar, centered brand avatar and title, followed by vertically stacked cards occupying the upper half of the viewport.

Notes

Bottom half of the screen remains clear of interactive elements to preserve clean focus on onboarding pathways.