ClassDojo

Colors

• #191724Background Dark Navy · Screen background
• #FFFFFFText White · Heading text · Social button text
• #946BF5Accent Purple · Inline link text · Legal link text
• #34303ADisabled Button Surface · Disabled Continue button background
• #767180Disabled Button Text · Disabled Continue button text
• #37314BInput Stroke · Email text field border
• #201D2DSocial Button Surface · Google and Apple sign in button backgrounds
• #2F2B41Social Button Border · Border around Google and Apple buttons

Type

• Screen TitleGilroy · 62px · 800 · #FFFFFF
• Subheading / Inline LinkGilroy · 40px · 500 · #D1CFDB
• Input PlaceholderGilroy · 42px · 400 · #767180
• Button TextGilroy · 42px · 700 · #767180
• Divider LabelGilroy · 30px · 700 · #767180
• Legal CaptionGilroy · 32px · 600 · #9A95B2

Elements

• Back Navigation Button · icon_button

  Top left position, circular, ~100px diameter. · Dark circular container with thin white chevron.

• Header Graphic · image

  Centered above title, ~130px width. · 3D house icon rendered in yellow, green, and blue.

• Email Input Field · text_field

  Full width with 80px horizontal inset margins, height ~130px. · Dark container with rounded corners, subtle purple-gray border, left-aligned placeholder.

• Continue Button · pill_button

  Immediately below input field with ~28px gap, height ~130px. · Disabled state with muted dark gray fill and medium-gray label.

• Divider · separator

  Horizontal row spanning input width with centered 'OR' label and thin flanking lines. · 1px stroke in muted slate gray.

• Google Sign-In Button · button

  Stacked below legal disclaimer, height ~136px, full width with standard horizontal insets. · Dark surface card with subtle outer border, full-color Google 'G' logo on left, centered white text.

• Apple Sign-In Button · button

  Positioned below Google button with 24px vertical spacing, height ~136px. · Dark surface card with subtle outer border, solid white Apple logo on left, centered white text.

Layout

Top-aligned authentication form with progressive disclosure: header illustration, title and inline login link, primary email input flow, followed by divider and OAuth alternate login options.

Notes

Font is rounded sans; button corners transition from large rounded rectangles on input to full pills on action buttons.