Authentication & Settings
10 Variants
Sign In
Centred sign-in card on an accent mesh: Google and GitHub buttons, an or divider, email and password with remember-me and reset link, full-width CTA.
WiseOwl
Welcome back
Sign in to see your accounts, budgets and household.
providers.map((provider) => ( <Button key={provider.label} variant="outline" cla…or
New to WiseOwl? Create a free account
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
Sign Up
Centred account-creation card on an accent mesh: SSO buttons, or divider, name, email and password with helper text, full-width CTA and a short legal line.
WiseOwl
Create your free account
Free for one person with two linked accounts. No card required.
providers.map((provider) => ( <Button key={provider.label} variant="outline" cla…or
By creating an account you agree to the Terms and Privacy Policy.
Already have an account? Sign in
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
Forgot Password
Centred password-reset card on an accent mesh with a back-to-sign-in link, a single email field, full-width CTA and a delivery hint.
WiseOwl
Reset your password
Enter the email on your account and we will send a reset link. It works once and expires in 30 minutes.
The link comes from help@wiseowl.app. Check your spam folder if it has not arrived in a few minutes.
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
Verify Code
Centred one-time-code card on an accent mesh: six full-width OTP slots, verify CTA, resend link with a countdown and a change-email escape.
WiseOwl
Enter your verification code
We sent a 6-digit code to maya.okafor@example.com. It expires in 10 minutes.
No code yet? Resend code in 0:42
Wrong address? Change email
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
Split Screen Sign In
Full-height split: a scrimmed living-room photo with a member quote on the left, a sign-in form on the theme canvas on the right; photo hides below md.
WiseOwl
Sign in to your household
Pick up where you left off. Your partner sees the same numbers the moment you update a budget.
New to WiseOwl? Create a free account
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
SSO-First Sign In
Centred card on an accent mesh that leads with full-width provider buttons, then an or-use-email divider, email field and CTA, and a legal line.
WiseOwl
Sign in to WiseOwl
Use the account you already trust. We never see your provider password.
providers.map((provider) => ( <Button key={provider.label} size="lg" variant="ou…or use email
By continuing you agree to the Terms of Service and Privacy Policy.
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
Magic Link Sign In
Centred passwordless card on an accent mesh: labelled email field with a check-your-inbox hint, email-link CTA and a password fallback.
WiseOwl
Sign in without a password
We will email you a secure link that signs you in on this device.
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
Settings Panel
Preferences page with overline-headed sections of label-and-description rows and right-aligned switches, a theme segmented control, and save actions.
Preferences
Choose what WiseOwl tells you about and how the app looks on this device.
Notifications
Bill reminders
Two days before any bill or subscription is due.
Budget limits
When a category reaches 80% and 100% of its limit.
Large transactions
Any single charge over $250.00.
Weekly summary
A short recap every Sunday at 9:00 am.
Appearance
Theme
Follow your device or pick one.
Hide balances on open
Blur amounts until you tap them.
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
Account Settings
Tabbed account settings: a profile tab with avatar and editable details, a security tab and a notifications tab of switches. Use it as a page, or put it inside a Dialog for a modal version.
Account settings
Manage your profile, sign-in and notifications.
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.
Sign In Card
Compact embeddable sign-in card with email, password, full-width CTA and a reset link; no section or backdrop.
When to Use & Guidelines
- Ideal for user-facing flows requiring trust and clarity.
- Fully responsive across desktop, tablet, and mobile breakpoints.
- 100% semantic token purity — remaps seamlessly across all themes.