auth split brand signup trial auth split brand signup proof trial product story split auth with stronger brand panel signup page with proof and story
Auth Split Brand
Fetch pattern JSON:
curl https://webspire.de/patterns/auth/split-brand.json split-brand.html
<section class="ws-auth-split-brand flex min-h-screen" style="--ws-auth-bg: var(--ws-color-surface); --ws-auth-text: var(--ws-color-text); --ws-auth-text-soft: var(--ws-color-text-muted); --ws-auth-border: var(--ws-color-border); --ws-auth-accent: var(--ws-color-primary);">
<div class="hidden flex-1 bg-slate-950 p-12 text-white lg:flex lg:flex-col lg:justify-between"> <!-- ws-ok -->
<div>
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-white/60">Orbit Workspace</p>
<h1 class="mt-6 max-w-md text-4xl font-semibold leading-tight">A stronger brand split when the product story matters during sign-up.</h1>
</div>
<div class="max-w-lg space-y-4">
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
<p class="text-sm text-white/80">“Setup took less than a day and the approval flow finally stopped being messy.”</p>
<p class="mt-3 text-sm font-medium">Lina Bauer, Operations Lead</p>
</div>
<div class="grid grid-cols-3 gap-4 text-sm">
<div>
<p class="text-2xl font-semibold">18</p>
<p class="text-white/60">workspaces</p>
</div>
<div>
<p class="text-2xl font-semibold">94%</p>
<p class="text-white/60">activation</p>
</div>
<div>
<p class="text-2xl font-semibold">7d</p>
<p class="text-white/60">to launch</p>
</div>
</div>
</div>
</div>
<div class="flex flex-1 items-center justify-center bg-[var(--ws-auth-bg)] px-6 py-12">
<div class="w-full max-w-md">
<p class="text-lg font-semibold text-[var(--ws-auth-text)]">Create your workspace</p>
<p class="mt-2 text-sm text-[var(--ws-auth-text-soft)]">Use the right side for product proof and brand context, not just decoration.</p>
<form class="mt-8 space-y-5">
<div>
<label for="brand-work-email" class="block text-sm font-medium text-[var(--ws-auth-text)]">Work email</label>
<input id="brand-work-email" type="email" placeholder="maya@company.com" class="mt-1.5 w-full rounded-xl border border-[var(--ws-auth-border)] px-3 py-2.5 text-sm text-[var(--ws-auth-text)] focus:border-[var(--ws-auth-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-accent)]/15" />
</div>
<div>
<label for="brand-password" class="block text-sm font-medium text-[var(--ws-auth-text)]">Password</label>
<input id="brand-password" type="password" placeholder="8+ characters" class="mt-1.5 w-full rounded-xl border border-[var(--ws-auth-border)] px-3 py-2.5 text-sm text-[var(--ws-auth-text)] focus:border-[var(--ws-auth-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-accent)]/15" />
</div>
<button type="submit" class="w-full rounded-xl bg-[var(--ws-auth-accent)] px-4 py-2.5 text-sm font-semibold text-white">Start free trial</button>
</form>
<p class="mt-6 text-sm text-[var(--ws-auth-text-soft)]">Already using Orbit? <a href="#" class="font-semibold text-[var(--ws-auth-accent)]">Sign in</a></p>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
authsplitbrandsignuptrial
Slots
| Name | Required | Description |
|---|---|---|
| panel | Yes | Branded side with proof, message, and social evidence. |
| form | Yes | Focused signup form for the actual account action. |
Brand-led split auth variant for sign-up flows where the side panel should do real persuasion work instead of acting as empty decoration.