Seesaw

Colors

• #ffffffWhite · background · inputs
• #5e2b97Purple · input borders · text labels · buttons
• #f0f0f0Light Gray · card/button backgrounds
• #333333Dark Text · body text

Type

• Screen TitleNunito · 42px · bold · #111111
• Field LabelNunito · 24px · bold · #111111
• Input TextNunito · 30px · normal · #444444
• Link / Action TextNunito · 28px · bold · #5e2b97

Elements

• Top Navigation Bar · Header

  Top portion with back arrow, icon, and title 'Student Sign In'. · White background with bottom divider line.

• Email Input Field · Text Input

  Below email label, spanning most of screen width. · White fill with purple rounded border.

• Password Input Field · Text Input

  Below password label. · White fill with gray border and a show/hide password eye icon on the right.

• Student Sign In Button · Button

  Below password field. · Light gray background with muted text, disabled state.

• Social Sign In Icons · Icon Buttons

  Row of five icons below 'Sign in with' divider. · White buttons with gray borders containing Google, Microsoft, clever-style, and other provider icons.

• Scan Code Button · Button

  Bottom of the screen. · Solid purple fill with white text and QR icon.

Layout

Vertical form layout containing email/password inputs, social logins, alternative text code entry, and a prominent scan button.

Notes

Student sign in interface with multiple authentication options.