Propelle AI Minimal Auth Page

Overview

This is a hyper-minimalist authentication portal for Propelle AI, utilizing a centered card layout on a soft gradient background. It serves as an excellent reference for builders wanting to implement a clean Microsoft-first OAuth experience while maintaining a high-end, professional enterprise aesthetic.

Design System

• Color Palette & Visual Hierarchy: The design uses a subtle bg-gradient-to-br featuring "marine-50" and "primary-50" (soft blues/whites), creating a calm, airy atmosphere. The central focus is a white login card that stands out via a backdrop-blur and a light gray-200/60 border.
• Typography: The interface utilizes a clean sans-serif stack. It emphasizes hierarchy through small-caps styling for the "AI" brand text (red) and text-xs font-medium for instructional micro-copy ("Use your full work email address") in a secondary gray shade.
• Page Structure: A simple vertical stack (Logo -> Instruction -> Action Button) centered both horizontally and vertically using Flexbox (min-h-screen flex items-center justify-center).
• Reusable Components:
  • Auth Card: A rounded-2xl container with subtle shadowing and backdrop filtering.
  • Microsoft Button: A standardized OAuth button (rounded-xl) with a min-w-[320px] constraint to ensure significant presence on desktop while remaining responsive.
• Interactions: Based on the HTML, the button includes transition-colors with a light hover state (hover:bg-gray-50) and a focused ring offset for accessibility.
• Mobile Behavior: The layout is responsive via Tailwind utilities (w-full max-w-sm sm:max-w-md), ensuring the auth card scales appropriately for smaller screens while maintaining centered padding (px-4).

Use Cases

• Who should clone this: Developers building Internal Tools, B2B SaaS, or Enterprise platforms that rely exclusively on SSO/Microsoft identity providers.
• Effective Remixes: This pattern is perfect for quick status pages, minimal "Under Construction" sign-ups, or dedicated admin dashboard login screens.
• Remix Directions: Replace the Microsoft OAuth button with Google, Slack, or GitHub equivalents. The background gradient can be easily swapped for brand-specific colors or a dark-mode variant by updating the Tailwind gradient utility classes.
• Clone Scope: A full-page clone is recommended as the entire layout is concise enough to serve as a standalone boilerplate for an authentication route.