ClassDojo

Colors

• #191724Canvas Dark Navy · Main screen background
• #906CF5Primary Accent Purple · Add child button fill · Active tab indicator · Upgrade pill border/glow
• #211E30Navigation Bar Background · Bottom navigation bar fill
• #342F4BActive Nav Pill Fill · Selected bottom navigation item container
• #FFFFFFText White · Headings · Nav icon highlights
• #9E9AA8Text Secondary Slate · Body description text · Inactive nav labels

Type

• Empty State TitleGilroy · 56px · 800 · #FFFFFF
• Empty State BodyGilroy · 38px · 500 · #BCB8C8
• CTA Button TextGilroy · 38px · 700 · #191724
• Top Tab Label SelectedGilroy · 36px · 700 · #906CF5
• Top Tab Label UnselectedGilroy · 36px · 600 · #FFFFFF
• Bottom Nav Item LabelGilroy · 28px · 600 · #BCB8C8

Elements

• Header Navigation Bar · app_bar

  Spans full width at top, contains account pill on left, bell/calendar icons in pill, and 'UPGRADE' badge on right. · Translucent dark surface with distinct pill groupings and bright blue-purple gradient badge.

• Top Sub-Navigation Tabs · tab_bar

  Row of 3 items (Story, Reading, Play) with 3D icon representations above text labels and an active underline indicator beneath Story. · Horizontal tab list with full-width underline indicator.

• Empty State Illustration Collage · image_grid

  Centered arrangement of five rounded rectangular story vignettes showing Mojo mascot in different classroom scenarios. · Colorful illustrated story cards with floating decorative sticker elements (hearts, camera).

• Add child CTA Button · pill_button

  Centered below empty state text, width ~360px, height ~108px. · Solid bright lilac-purple fill with dark navy text.

• Bottom Navigation Bar · tab_bar

  Floating rounded dock fixed at bottom, ~150px height, containing 5 destinations (Home, Kids, Points, Chats, Learning). · Dark slate pill container with highlighted rounded pill behind active 'Home' item.

Layout

Three-tiered layout: fixed top header and category tabs, scrollable central feed area featuring empty state collage with call to action, and anchored bottom navigation bar.

Notes

Bottom bar acts as an inset floating dock rather than edge-to-edge footer.