Design preview · not yet built

Account & guest/auth — restyled to the canon shell

Account is the signed-in page — guest becomes a member from here.

SizePortrait scrolls 375 · sideways is a slide deckNotes
Design brief — overview · scope · journey (closed)

← Design HQ · HTML on GitHub · PRD — Account & Security

The Account surface end-to-end — member page, guest mode, the AuthModal gate, and the WaitlistModal funnel (real content from AccountPage.tsx, AuthModal.tsx, WaitlistModal.tsx, restyled to the canon shell).

GuestPreviewBanner → retired, PreviewStatusBanner is current row actions = text links, never buttons GUEST badge = muted · MEMBER badge = white glow preview always opens AuthModal on Sign In, even from a Sign Up tap

The widths drawn here are samples of a fluid continuum, not the only states that exist — content (spacing, type, gaps, card/column widths) scales continuously between them, each clamp reading a named container. Structure (rail, row↔stack, grid columns) steps only at sm 640 · md 768 · lg 1024; radius, hairlines, and pills never scale. Kit: design-canon.md U8.

Reading order in this document: § Desktop journey first — every desktop frame, full flow, journey order — then § Mobile journey — 375 below it — every mobile frame, same order, laid out side by side as a wrapping grid (never a tall single-file column of phone screens). Two sections, never interleaved — a review-document convention only (this repo's design-canon.md § Mockup review reading order). Mobile 375px is still designed and scored FIRST in the /design ritual (kit canon U5/U8) — the two rules never conflate.

Part I · Active — build now
Signed in
1 · Account page — signed-in member (desktop)
MystFlo Platform Preview
· Peyton
Explore
Brain
Pulse
Team
Connects
Wishlist
Feedback
Support
FAQ
Account
Billing
Account
Your profile and security
Profile
PT
Peyton Ty
USR-2381
Full name
Email address
Company
Account status
Active · Created Mar 12, 2026 · ✓ Verified
Sign-in & security
Sign in with any active method. Your last used method is noted below.
Google
Last used: Jul 18, 2026, 9:04 AM
Connected
Email & Password
Password set: Jun 2, 2026
Change password →
Data & privacy
Everything we store about you, what we keep, and how to remove it.
WhatsApp Business 428 messages · 12 templates Erase data
Delete your account 30-day grace period Delete my account
Legal
Terms of Service Accepted Mar 12, 2026 · v2.1View Terms ↗
Privacy Policy Accepted Mar 12, 2026 · v2.1View Privacy Policy ↗
© 2026 MystFlo
AboutPricingFAQPrivacyTerms
Account page — member (AccountPage.tsx)
  • Identity block = the ONE contained surface (avatar, name/email, USR-2381 id chip); everything below is flat hairline rows.
  • Row actions are text links ("Change password →", "Erase data", "View Terms ↗") — never buttons.
  • "Verified" = colorless checkmark, not the source's green badge (open Peyton call).
2 · Guest mode — same Account page, logged out
What changes for a guest
  • Header: Member → GUEST badge (muted, no glow — status label, not a click target; auth via the header's Sign in / Get early access, UX-11); wallet pill → Sign in / Get early access text actions.
  • PreviewStatusBanner pill floats under the header for both audiences (dismissible, per-audience memory).
  • Profile fields disabled with "Guest User" / "guest@mystflo.com" placeholders; Account status = Inactive / "Created N/A"; every edit action → "Sign Up →".
  • Data & privacy + Legal sections absent for guests (gated on !isGuest) — not degraded, absent.
MystFlo Platform Preview
Sign in Get early access
Building in public. Assistants aren't live yet. Help build this → ✕
Explore
Brain
Pulse
Team
Connects
Wishlist
Feedback
Support
FAQ
Account
Billing
Account
Your profile and security
Profile
G
Guest User
Full name
Email address
Company
Account status
Inactive · Created N/A
Sign-in & security
Sign up to add a sign-in method.
Google
OAuth authentication
Sign Up →
Email & Password
Traditional authentication
Sign Up →
Data & privacy and Legal sections appear after you sign up.
© 2026 MystFlo
AboutPricingFAQPrivacyTerms
768 not yet drawn for this flow. Desktop and 375 are the contract.
MystFlo Platform
Preview
Account
Your profile and security
Profile
PT
Peyton Ty
USR-2381
Full name
Email address
Account status
Active·✓ Verified
Sign-in & security
Google
Connected
Connected
Email & Password
Set Jun 2, 2026
Change →
Mobile 375px
  • Field rows stack label-over-input (component's sm:flex-row breakpoint) — never a side-by-side squeeze under 375px.
2Guest mode — mobile 375px
MystFlo Platform
Get early access Sign in
Building in public. Help build →
Account
Profile
G
Guest User
Google
OAuth
Sign Up →
Email & Password
Traditional
Sign Up →
Guest mobile
  • Mobile header collapses to brand-only; Sign in / Get early access move to their own row (MobileActionBar).
  • The pill drops the subline (width).
AuthModal gate behavior
  • "Sign Up →" passes defaultMode="signup", but preview sign-up is closed (isPublicSignupOpen()) → modal forces the Sign In tab regardless of intent.
  • Sign Up tab reachable but shows an early-access invite, not a form — first-seen state is A, never B.
3Signup gate modal — AuthModal, centered dialog · State A
Auth
5 · How a guest becomes a member
Now
Browsing as Guest
GUEST badge · Account page fields disabled
→
Taps a gated action
"Sign Up →" or "Get early access"
Any edit row, or the header CTA
→
Preview is closed
AuthModal forces Sign In tab
Sign Up tab → early-access invite only
→
Joins the list
WaitlistModal · name + email/WhatsApp
"You're in" — waits to be let in
→
Invited
Real signup or sign-in unlocks
MEMBER badge · full Account page
Gate mechanics
  • The gate = Supabase's project-level "Allow new signups" toggle, not a per-field lock.
  • Every disabled field / "Sign Up →" row routes to the SAME AuthModal → lands on Sign In → Sign Up = early-access funnel into WaitlistModal.
  • No "member preview" tier — fully GUEST or fully MEMBER; a rejected Google OAuth callback redirects to ?earlyAccess=1 → same WaitlistModal.
  • Post-launch reopen changes only AuthModal's default tab + whether Sign Up renders invite or a real form. not built
768 not yet drawn for this flow. Desktop and 375 are the contract.
MystFlo Platform
Get early access Sign in
Account
Profile
G
Guest User
Google
OAuth
Sign Up →
Email & Password
Traditional
Sign Up →
Sign in to run assistants✕
Sign UpSign In
Continue with Google
Or
Email
PasswordForgot password?
Sign In
Or send me a magic link instead
State A — default open (preview)
  • Google button keeps its white Google-brand fill (sanctioned exception — brand mark, not status).
  • Email/password + "Forgot password?" + magic-link fallback all inline in ONE modal — no stacked modal for forgot/magic-sent.
3Signup gate modal — AuthModal, centered dialog · State B
MystFlo Platform
Get early access Sign in
Account
Profile
G
Guest User
Google
OAuth
Sign Up →
Email & Password
Traditional
Sign Up →
Sign up to run assistants✕
Sign UpSign In

We're building in public — assistants aren't live yet.

Join early access and we'll let you in as we open the doors.

Get early access
State B — Sign Up tab tapped
  • No real signup form renders (server rejects new accounts); "Get early access" closes AuthModal → opens WaitlistModal.
  • Post-launch reopen: this tab reverts to the real Google + email/password form. not built
4Waitlist modal — "Get early access" · form state
MystFlo Platform
Get early access Sign in
Account
Profile
G
Guest User
Google
OAuth
Sign Up →
Email & Password
Traditional
Sign Up →
Get early access✕

How should we reach you? (fill at least one)

US +1
Waitlist updates only. Nothing else.
Get early access
Form state
  • Name, then one combined "reach you" group (email + country-code/WhatsApp); at-least-one validation.
  • Opened from the guest gate only: quiet "Already got private access? Sign in →" line under submit (other usages don't carry it).
4Waitlist modal — "Get early access" · success state
MystFlo Platform
Get early access Sign in
Account
Profile
G
Guest User
Google
OAuth
Sign Up →
Email & Password
Traditional
Sign Up →
✓

You're in.

We'll message you on WhatsApp.

Browse and save favorites
Want to help build this?
Test early. Personal setup. Dedicated support. Get a slot for a custom-built assistant for your business.
Chat on WhatsApp →
Success state
  • Confirmation copy branches on channel (WhatsApp / email / both / "already on the list") — WhatsApp branch shown.
  • "Help build this" custom-build upsell panel appears on every success variant.
Part II · Future — build later
No deferred frames — everything above is the current build contract. The post-launch sign-up reopen is noted inline (frames 3 · 5, not built chips), not drawn; it gets a Future frame only once Peyton confirms timing.