patterns
Authentication surfaces
Clerk for the flow mechanics, Wolf tokens for the look. Split layout by default; single-column centred for brief flows like password reset.
Read the full specSplit layout — brand panel + form
Desktop default. Brand panel anchors identity; form panel centres a 440px stack.
Centred single-column — brief flows
Used for password reset, email verification, and the investor portal.
Community Wolf
Check your email
We sent a sign-in link to thandi@example.com. Click it from any device to continue.
Clerk theming — Wolf variables
Use Clerk's appearance prop to reference Wolf CSS variables and element classnames. Never recolour buttons inline.
- colorPrimaryvar(--primary)
- colorBackgroundvar(--background)
- colorDangervar(--destructive)
- borderRadiusvar(--radius)
- fontFamilyvar(--font-sans)
- fontFamilyButtonsvar(--font-sans)
tsx
<SignIn
appearance={{
variables: {
colorPrimary: "var(--primary)",
colorBackground: "var(--background)",
colorText: "var(--foreground)",
colorDanger: "var(--destructive)",
borderRadius: "var(--radius)",
fontFamily: "var(--font-sans)",
},
elements: {
card: "shadow-none border-0 bg-transparent",
headerTitle: "font-display text-2xl font-semibold",
formButtonPrimary: "bg-primary text-primary-foreground hover:bg-primary/90",
footerActionLink: "text-primary hover:text-primary/80",
},
}}
/>Security-conscious error copy
Never leak account existence. Keep wrong-password and no-such-user identical. Per error-states §3.1.
- Wrong credentials (either field)Either the email or password is wrong. Try again.
- Email not verifiedCheck your inbox for a verification link. [Resend]
- Too many attemptsToo many tries. Wait a minute before trying again.
- Unverified deviceFor security, we need to verify this device. Check your email.