Social first sign up
A minimalist, high-fidelity mobile authentication wireframe optimized for social login conversion. Features a grayscale palette (blacks, whites, and specific gray scales), sophisticated typography using Plus Jakarta Sans, and high-contrast touch targets. Ideal for SaaS, fintech, or any modern mobile application onboarding where social sign-in is the primary user journey. The layout focuses on clean vertical stacks, 48px touch heights, and subtle micro-interactions like scale-down on press and smooth border transitions.
Summary
A clean, high-contrast mobile sign-up screen prioritizing social authentication via Apple, Google, and Facebook. The design utilizes a grayscale wireframe aesthetic with a 48px standard height for interactive elements, generous whitespace, and a clear visual hierarchy established through typographic weight and subtle dividers.
Style
The style is defined by a 'monochrome-plus' aesthetic, primarily using grayscale (#FFFFFF to #111827) for a professional wireframe look. Typography is 'Plus Jakarta Sans' with heavy reliance on tracking-tight for headings and medium weights for interactive text. Components feature a consistent 12px (rounded-xl) border radius. Interaction states include background color shifts (Gray 50/100) and physical scale compression (98%) on buttons.
Layout & Structure
A vertical linear layout optimized for mobile screens. The structure flows from a descriptive header to a high-priority social stack, followed by a secondary email form separated by a subtle text-inclusive divider, and concludes with a persistent footer link.
Header Section
Social Authentication Stack
Visual Divider
Email Form Section
Primary CTA and Footer
Components
Social Provider Button
A high-precision secondary button with icon integration.
Icon-Prefix Input Field
Standardized form input with consistent internal padding and icon placement.
Special Notes
MUST maintain the 48px (h-12) height for all interactive elements to ensure accessibility (touch targets). MUST NOT use vibrant colors; keep the palette restricted to grayscale to maintain the wireframe aesthetic. DO ensure the divider lines have exactly 1px height for a crisp look. Inputs MUST have 'appearance-none' and 'outline-none' to control custom focus states properly.