Authentication

Authentication 10 · One field

A full-page minimal start: a big logo, one question and a single email field with a round arrow button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[680px] place-items-center bg-white px-4 py-16'><div class='flex w-full max-w-md flex-col items-center text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-14 w-auto'><h1 class='mt-12 text-3xl font-semibold tracking-tight text-black'>What is your email?</h1><form class='mt-8 flex w-full items-center gap-2 rounded-full border border-neutral-300 p-1.5 pl-5 focus-within:border-black'><input type='email' placeholder='you@company.com' class='min-w-0 flex-1 bg-transparent text-sm outline-none'><button type='button' class='grid h-10 w-10 place-items-center rounded-full bg-black text-white'>→</button></form><p class='mt-6 text-xs text-neutral-500'>We will check if you already have an account.</p></div></section>

Authentication 09 · Dark sign in

A black page with a dark card, the white logo and a white sign-in button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[680px] place-items-center bg-black px-4 py-16'><div class='w-full max-w-sm rounded-2xl border border-neutral-800 bg-neutral-950 p-8'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo-light.png' alt='Windcraft' class='mx-auto h-7 w-auto'><h1 class='mt-8 text-center text-2xl font-semibold tracking-tight text-white'>Sign in</h1><form class='mt-8 space-y-4'><input type='email' placeholder='Email' class='w-full rounded-lg border border-neutral-800 bg-black px-3 py-2.5 text-sm text-white placeholder-neutral-500 outline-none focus:border-white'><input type='password' placeholder='Password' class='w-full rounded-lg border border-neutral-800 bg-black px-3 py-2.5 text-sm text-white placeholder-neutral-500 outline-none focus:border-white'><button type='button' class='w-full rounded-lg bg-white py-2.5 text-sm font-semibold text-black hover:bg-neutral-200'>Sign in</button></form><p class='mt-6 text-center text-sm text-neutral-500'>No account? <a href='#' class='font-medium text-white'>Sign up</a></p></div></section>

Authentication 08 · Verification code

Six separate boxes for a one-time code with a resend link.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[600px] place-items-center bg-neutral-50 px-4 py-16'><div class='w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-10 text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='mx-auto h-6 w-auto'><h1 class='mt-8 text-2xl font-semibold tracking-tight text-black'>Check your email</h1><p class='mt-2 text-sm text-neutral-600'>Enter the 6-digit code we sent you.</p><div class='mt-8 flex justify-center gap-2'><input maxlength='1' class='h-14 w-11 rounded-lg border border-neutral-300 text-center text-xl font-semibold outline-none focus:border-black'><input maxlength='1' class='h-14 w-11 rounded-lg border border-neutral-300 text-center text-xl font-semibold outline-none focus:border-black'><input maxlength='1' class='h-14 w-11 rounded-lg border border-neutral-300 text-center text-xl font-semibold outline-none focus:border-black'><input maxlength='1' class='h-14 w-11 rounded-lg border border-neutral-300 text-center text-xl font-semibold outline-none focus:border-black'><input maxlength='1' class='h-14 w-11 rounded-lg border border-neutral-300 text-center text-xl font-semibold outline-none focus:border-black'><input maxlength='1' class='h-14 w-11 rounded-lg border border-neutral-300 text-center text-xl font-semibold outline-none focus:border-black'></div><button type='button' class='mt-8 w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Verify</button><p class='mt-5 text-sm text-neutral-500'>Did not get it? <a href='#' class='font-medium text-black'>Resend code</a></p></div></section>

Authentication 07 · Reset password

Choose a new password: two fields, a short rule list and one button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[640px] place-items-center bg-white px-4 py-16'><div class='w-full max-w-sm'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><h1 class='mt-8 text-2xl font-semibold tracking-tight text-black'>Choose a new password</h1><form class='mt-6 space-y-4'><label class='block text-sm font-medium text-black'>New password<input type='password' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><label class='block text-sm font-medium text-black'>Confirm password<input type='password' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><ul class='space-y-1 text-xs text-neutral-500'><li>✓ At least 8 characters</li><li>✓ One number</li></ul><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Save password</button></form></div></section>

Authentication 06 · Forgot password

A short card asking for the email to send a reset link, with a back link.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[600px] place-items-center bg-neutral-50 px-4 py-16'><div class='w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-8'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><h1 class='mt-8 text-2xl font-semibold tracking-tight text-black'>Forgot your password?</h1><p class='mt-2 text-sm text-neutral-600'>Enter your email and we will send a reset link.</p><form class='mt-6 space-y-3'><input type='email' placeholder='you@company.com' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Send reset link</button></form><a href='#' class='mt-6 block text-center text-sm text-neutral-500 hover:text-black'>← Back to sign in</a></div></section>

Authentication 05 · Social buttons

Sign-in with two social buttons, a divider, and an email form underneath.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[700px] place-items-center bg-white px-4 py-16'><div class='w-full max-w-sm'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='mx-auto h-7 w-auto'><h1 class='mt-8 text-center text-2xl font-semibold tracking-tight text-black'>Continue to Windcraft</h1><div class='mt-8 space-y-3'><button type='button' class='flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-300 py-2.5 text-sm font-medium text-black hover:bg-neutral-50'>Continue with GitHub</button><button type='button' class='flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-300 py-2.5 text-sm font-medium text-black hover:bg-neutral-50'>Continue with Google</button></div><div class='my-6 flex items-center gap-4 text-xs uppercase tracking-widest text-neutral-400'><span class='h-px flex-1 bg-neutral-200'></span>or<span class='h-px flex-1 bg-neutral-200'></span></div><form class='space-y-3'><input type='email' placeholder='Email' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Continue with email</button></form></div></section>

Authentication 04 · Email link

A passwordless screen: one email field and a button that sends a sign-in link.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[600px] place-items-center bg-neutral-50 px-4 py-16'><div class='w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-10 text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='mx-auto h-7 w-auto'><h1 class='mt-8 text-2xl font-semibold tracking-tight text-black'>Sign in with email</h1><p class='mt-2 text-sm text-neutral-600'>We will send you a link. No password needed.</p><form class='mt-8 space-y-3'><input type='email' placeholder='you@company.com' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Send me a link</button></form></div></section>

Authentication 03 · Sign up

Create-account card with name, email and password fields, a terms note and a black button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[720px] place-items-center bg-white px-4 py-16'><div class='w-full max-w-sm'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-7 w-auto'><h1 class='mt-8 text-3xl font-semibold tracking-tight text-black'>Create your account</h1><p class='mt-2 text-neutral-600'>Start designing in a minute.</p><form class='mt-8 space-y-4'><label class='block text-sm font-medium text-black'>Name<input type='text' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><label class='block text-sm font-medium text-black'>Email<input type='email' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><label class='block text-sm font-medium text-black'>Password<input type='password' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><span class='mt-1.5 block text-xs font-normal text-neutral-500'>At least 8 characters.</span></label><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Create account</button></form><p class='mt-4 text-xs text-neutral-500'>By continuing you agree to the Terms and the Privacy policy.</p></div></section>

Authentication 02 · Split with quote

Two halves: a black panel with the white logo and a short quote, and a white half with the form.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[680px] md:grid-cols-2'><div class='hidden flex-col justify-between bg-black p-12 md:flex'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo-light.png' alt='Windcraft' class='h-7 w-auto self-start'><blockquote><p class='text-2xl font-medium leading-snug text-white'>“What I draw is the code I ship. No handoff, no rebuild.”</p><footer class='mt-4 text-sm text-neutral-400'>Sample quote, name and role</footer></blockquote></div><div class='grid place-items-center bg-white px-6 py-16'><div class='w-full max-w-sm'><h1 class='text-3xl font-semibold tracking-tight text-black'>Welcome back</h1><p class='mt-2 text-neutral-600'>Sign in to open your projects.</p><form class='mt-8 space-y-4'><input type='email' placeholder='Email' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><input type='password' placeholder='Password' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Sign in</button></form></div></div></section>

Authentication 01 · Sign in card

A centered white sign-in card with the logo, email and password fields and a black button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='grid min-h-[680px] place-items-center bg-neutral-50 px-4 py-16'><div class='w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='mx-auto h-7 w-auto'><h1 class='mt-8 text-center text-2xl font-semibold tracking-tight text-black'>Sign in</h1><form class='mt-8 space-y-4'><label class='block text-sm font-medium text-black'>Email<input type='email' placeholder='you@company.com' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><label class='block text-sm font-medium text-black'><span class='flex justify-between'>Password<a href='#' class='font-normal text-neutral-500 hover:text-black'>Forgot?</a></span><input type='password' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white hover:bg-neutral-800'>Sign in</button></form><p class='mt-6 text-center text-sm text-neutral-500'>New here? <a href='#' class='font-medium text-black'>Create an account</a></p></div></section>