WeWard - L'app de Marche !

Colors

• #FA6B26Primary Orange · Sign In button fill · Back button arrow
• #131B32Dark Navy · Heading text
• #3E4459Input Text · Entered email value
• #6E7787Muted Gray · Subtext and disclaimer
• #DFE2E8Border Gray · Input border · Social button outlines · Divider line
• #FFFFFFPure White · Input background · Social button fill · Sign In button label

Type

• screen_headingOutfit · 56px · 800 · #131B32
• input_valueOutfit · 32px · 500 · #3E4459
• hint_captionOutfit · 24px · 400 · #6E7787
• primary_button_labelOutfit · 34px · 700 · #FFFFFF
• social_button_labelOutfit · 32px · 600 · #5A6275
• disclaimer_textOutfit · 24px · 400 · #2D3142

Elements

• Back Button · icon_button

  Top left, circular 88px by 88px button with 40px left padding. · Soft peach circular background with orange arrow.

• Email Input Field · text_input

  Below headline, full width with 40px margins, height 110px. · White surface with 2px light gray border and rounded corners, containing left-aligned text.

• Sign In Button · button

  Full width with 40px side margins, height 112px, positioned below input hint text. · Solid orange pill button.

• Or Divider · divider

  Centered horizontally between auth methods, thin horizontal line with centered 'or' label. · 1px light gray line with white badge cutout behind gray text.

• Apple Auth Button · button

  Full width with 40px side margins, height 112px. · White fill with subtle gray border, leading Apple logo, centered text, and trailing loading/placeholder ring.

• Google Auth Button · button

  Full width with 40px side margins, height 112px, spaced 24px below Apple button. · White fill with subtle gray border, leading multicolored Google G icon, and centered text.

Layout

Authentication form screen structured with top left navigation, primary title, email entry field with primary CTA, followed by horizontal divider, secondary social authentication options, and bottom disclaimers.

Notes

Apple button contains an activity/progress indicator circle on the trailing edge.