Welcome back · Lumen — centered-card (true cobalt)
A clean centered-card sign-in page on a soft off-white canvas with a single true-cobalt accent: sticky nav, a white rounded-3xl auth card (Google + GitHub social, floating-label email/password with a show/hide toggle, remember-me + forgot, gradient Sign in CTA), and ambient cobalt glows.
Summary
A full-bleed, single-column 'centered-card' sign-in page on a soft off-white canvas. A sticky translucent top nav (Lumen 'L' monogram logo, Product / Templates / Pricing / Docs links, a 'Need help?' link and a cobalt 'Start free' button) sits above a centered auth section. The center holds one max-w-[440px] white rounded-3xl card with a thin cobalt accent rail at the top: a cobalt logo tile, an extrabold 'Welcome back' heading and sub, a 2-up Google + GitHub social row, an 'or with email' divider, floating-label email + password fields (the password has a show/hide eye toggle), a 'Remember me' checkbox with a 'Forgot password?' link, and a full-width cobalt 'Sign in' CTA. Below the card sit a 'Create an account' link and a small security/Terms reassurance line. The background carries faint cobalt radial glows and a center-masked grid.
Style
Clean, modern SaaS auth aesthetic built on a single true-cobalt accent (a pigment-rich, violet-leaning blue, NOT stock Tailwind blue) over a soft off-white canvas and slate-grey neutrals. Inter throughout with tight tracking, generous rounding (rounded-3xl card, rounded-xl controls), and a layered, mixed cobalt gradient (not flat) for the logo tiles, the top accent rail and the primary button. Depth comes from a multi-stop card shadow, a glowing button shadow with an inset top highlight, faint cobalt radial background glows, and a center-masked faint grid. Inputs are bordered, filled shells with floating labels that animate up and turn cobalt on focus, plus a 4px cobalt focus ring.
Layout & Structure
A sticky full-bleed top nav above a single full-bleed auth main that vertically centers one card. The main is min-h-[calc(100vh-4rem)], grain background with the masked grid, and an inner max-w-6xl wrapper. The card itself is max-w-[440px], centered, with a header block (top accent rail, logo, heading, sub) over a body block (social row, divider, form). A footer sign-up link and a security/Terms line sit below the card. The layout reflows cleanly to a narrow single column on mobile (nav links and the 'Need help?' link hide; the card and its paddings shrink).
Sticky nav (full-bleed)
Auth section (full-bleed, centered)
Card header
Social auth row
Divider
Email + password form (floating labels)
Remember + forgot row
Primary CTA
Footer (below card)
Special Notes
Single TRUE-COBALT accent only (the cobalt ramp), a pigment-rich violet-leaning blue, NOT stock Tailwind blue (#2563eb). Keep the brand fill as the mixed gradient (background #2a2fd4 + linear-gradient(150deg, #3f46e8, #2a2fd4, #1f24ad)), not a flat color. This is a single centered-card layout (no split panel) on a full-bleed grain background with a sticky nav above. Preserve the exact field focus treatment (#2a2fd4 border + 4px rgba(42,47,212,0.12) ring + floating cobalt label) and the named shadows (card/btn/logo). Inter throughout, rounded-3xl card / rounded-xl controls / 14px-radius fields. The page reflows to a clean narrow single column on mobile (nav links + 'Need help?' hide). No em-dashes in copy.