Gizmo: AI Tutor

Colors

• #FFFFFFScreen Background White · screen background
• #111827Text Primary Slate · screen headline · section title · social button labels
• #6B7280Input Placeholder Gray · placeholder text
• #DCE1E8Border Stroke Gray · text input outline · social button outline · divider line
• #53647ESubmit Button Slate Blue · sign up primary button fill
• #2B6CB0Link Blue · sign in link text

Type

• Title HeadlineNunito · 48px · 900 · #111827
• Section SubtitleNunito · 26px · 800 · #111827
• Input Text / PlaceholderNunito · 24px · 500 · #6B7280
• Button Text PrimaryNunito · 26px · 700 · #FFFFFF
• Social Button TextNunito · 26px · 700 · #111827

Elements

• Text Input Field · text_input

  Vertically stacked full-width rounded input fields for email and password · White fill with thin soft gray border stroke

• Primary Sign Up Button · cta_button

  Full width pill button directly below password input · Solid slate grayish blue fill with centered white text

• Divider with Label · divider

  Horizontal hairline with centered 'Other options' label · Thin light gray rule with white background behind text

• Social Sign In Buttons · social_button

  Two stacked full-width buttons for Apple and Google authentication · White fill, soft gray border outline, left-aligned brand icon with centered label

Layout

Vertically centered single-column form with clear hierarchical grouping: email input, CTA, horizontal separator, and third-party authentication buttons.

Notes

Clean registration screen. Font exhibits friendly rounded terminals consistent across the application.