Skip to content

docs(planning): design for Locked App Mode (white-label own-domain web + per-product native app) #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
izzywdev merged 4 commits into from
Jul 14, 2026
Merged

docs(planning): design for Locked App Mode (white-label own-domain web + per-product native app) #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
85e6e34
docs(planning): design for Locked App Mode (white-label own-domain we…
claude Jul 14, 2026
aba834a
fix(deps): resync root package-lock.json with backend/security devDeps
claude Jul 14, 2026
103008e
test(locked-app-mode): approved white-label frames + Playwright frame…
claude Jul 14, 2026
036145c
fix(feature-flags): drop non-existent optional dep that breaks npm ci…
claude Jul 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions design/frames/locked-app-mode/01-white-label-login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!-- @dsCard group="Locked App Mode" viewport="1180x760" name="(a) White-label login" subtitle="Locked domain sign-in — product brand only, FuzeFront hidden" -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Locked App Mode — (a) White-label login</title>
<link rel="stylesheet" href="tokens.css" />
<style>
/* A locked product owns its OWN brand on its OWN domain. FuzeFront provides
the auth, but nothing here names or shows FuzeFront. Product accent is a
manifest.branding.accentColor override of the DS --accent-color token. */
:root { --brand-accent: #ff4d6d; --brand-accent-2: #ffb36b; }
.locked-login {
min-height: 100vh; display: grid; grid-template-columns: 1.1fr 0.9fr;
background:
radial-gradient(1000px 480px at 85% -10%, rgba(255,77,109,0.20), transparent 60%),
radial-gradient(820px 420px at 5% 110%, rgba(255,179,107,0.14), transparent 60%),
var(--bg-primary);
}
.pane-brand { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-10) var(--space-12); }
.brand-lockup { display: flex; align-items: center; gap: var(--space-3); }
.brand-lockup .glyph { font-size: 34px; }
.brand-lockup .brand-name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); letter-spacing: var(--tracking-display); }
.pitch h1 { font-family: var(--font-display); font-size: 46px; line-height: 1.05; margin: 0 0 var(--space-4); max-width: 16ch; }
.pitch h1 .accent { color: var(--brand-accent); }
.pitch p { color: var(--text-secondary); font-size: var(--text-lg); max-width: 46ch; }
.brand-foot { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-tertiary); }
.brand-foot a { color: var(--text-tertiary); text-decoration: none; }
.pane-auth { display: flex; align-items: center; justify-content: center; padding: var(--space-10); border-left: 1px solid var(--border-color); }
.auth-card {
width: 100%; max-width: 380px; background: var(--bg-tertiary); border: 1px solid var(--border-color);
border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-md);
}
.auth-card h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.auth-card .sub { color: var(--text-tertiary); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); margin-bottom: 6px; }
.field input {
width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius-md);
background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); font-size: var(--text-sm);
}
.btn-brand {
width: 100%; padding: 11px 14px; border: none; border-radius: var(--radius-md); cursor: pointer;
background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-2));
color: #fff; font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-top: var(--space-2);
}
.divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--text-tertiary); font-size: var(--text-2xs); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.btn-social {
width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer;
background: var(--bg-primary); color: var(--text-primary); font-size: var(--text-sm); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.url-chip { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 4px 10px; }
.reviewer-note { position: fixed; bottom: 10px; left: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); opacity: 0.6; }
</style>
</head>
<body data-frame="01-white-label-login">
<div class="locked-login" data-mode="locked" data-whitelabel="true" data-app="fuzesocial">
<div class="pane-brand" data-owner="app">
<div class="brand-lockup">
<span class="glyph">💬</span>
<span class="brand-name">FuzeSocial</span>
</div>
<div class="pitch">
<h1>Where your world stays <span class="accent">connected</span>.</h1>
<p>Sign in to your FuzeSocial account. One place for your feed, messages, and communities.</p>
</div>
<div class="brand-foot">
<span class="url-chip">www.fuzesocial.com · mode=locked</span>
<a href="#">Terms</a><a href="#">Privacy</a><a href="#">Support</a>
</div>
</div>
<div class="pane-auth">
<div class="auth-card">
<h2>Sign in</h2>
<p class="sub">Welcome back to FuzeSocial.</p>
<div class="field"><label>Email</label><input type="email" value="you@fuzesocial.com" /></div>
<div class="field"><label>Password</label><input type="password" value="••••••••••" /></div>
<button class="btn-brand" data-action="login">Sign in to FuzeSocial</button>
<div class="divider">or</div>
<button class="btn-social" data-action="social-google"><span>🔵</span> Continue with Google</button>
</div>
</div>
</div>
<!-- Design-review annotation (NOT part of the shipped product surface): auth is
served by the FuzeFront platform same-origin, but is invisible to the user. -->
<div class="reviewer-note">design-review note · auth via hidden FuzeFront platform (same-origin) · not shown to end users</div>
</body>
</html>
85 changes: 85 additions & 0 deletions design/frames/locked-app-mode/02-locked-shell.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!-- @dsCard group="Locked App Mode" viewport="1180x760" name="(b) Locked product shell" subtitle="Product runs full-screen — its own chrome, no FuzeFront launcher / org-switcher / return-to-portal" -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Locked App Mode — (b) Locked product shell</title>
<link rel="stylesheet" href="tokens.css" />
<style>
:root { --brand-accent: #ff4d6d; }
.locked-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-primary); }
/* The PRODUCT's own top bar (data-owner="app") — NOT the FuzeFront portal topbar.
No 9-dots launcher, no org switcher, no "return to portal". */
.app-topbar {
display: flex; align-items: center; gap: var(--space-6);
padding: var(--space-4) var(--space-8); border-bottom: 1px solid var(--border-color);
background: var(--bg-secondary);
}
.app-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.app-brand .glyph { font-size: 22px; }
.app-nav { display: flex; gap: var(--space-5); }
.app-nav a { text-decoration: none; color: var(--text-secondary); font-size: var(--text-sm); padding: 6px 2px; border-bottom: 2px solid transparent; }
.app-nav a.active { color: var(--text-primary); border-bottom-color: var(--brand-accent); }
.app-topbar .spacer { flex: 1; }
.app-topbar .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-accent), #ffb36b); }
.app-body { flex: 1; display: grid; grid-template-columns: 220px 1fr; }
/* Product-owned side nav — again the app's, not the portal's. */
.app-side { border-right: 1px solid var(--border-color); padding: var(--space-6) var(--space-4); background: var(--bg-secondary); }
.app-side .item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; }
.app-side .item.active { background: var(--bg-tertiary); color: var(--text-primary); }
.feed { padding: var(--space-8); max-width: 620px; }
.composer { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); color: var(--text-tertiary); }
.post { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); }
.post .who { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.post .who .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--seam); }
.post .who b { font-size: var(--text-sm); }
.post p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
/* Reviewer-only annotation strip — clearly OUTSIDE .locked-app. Documents that
the platform services are active but hidden. Not shipped to end users. */
.infra-annotation { border-top: 1px dashed var(--border-color); padding: var(--space-4) var(--space-8); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.infra-annotation .lead { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid rgba(52,211,153,0.4); color: var(--success-color); }
</style>
</head>
<body data-frame="02-locked-shell">
<div class="locked-app" data-mode="locked" data-chrome="none" data-app="fuzesocial" data-launcher="absent" data-org-switcher="absent" data-return-portal="absent">
<header class="app-topbar" data-owner="app">
<div class="app-brand"><span class="glyph">💬</span> FuzeSocial</div>
<nav class="app-nav">
<a class="active" href="#">Home</a>
<a href="#">Explore</a>
<a href="#">Messages</a>
<a href="#">Communities</a>
</nav>
<div class="spacer"></div>
<div class="avatar" title="Your FuzeSocial profile"></div>
</header>
<div class="app-body">
<aside class="app-side" data-owner="app">
<div class="item active">🏠 Home</div>
<div class="item">🔎 Explore</div>
<div class="item">✉️ Messages</div>
<div class="item">👥 Communities</div>
<div class="item">⚙️ Settings</div>
</aside>
<main class="feed">
<div class="composer">What's happening on FuzeSocial?</div>
<article class="post"><div class="who"><span class="dot"></span><b>Ava Chen</b></div><p>Locked-mode means my whole team just sees FuzeSocial — clean, ours, on our domain.</p></article>
<article class="post"><div class="who"><span class="dot"></span><b>Marco Diaz</b></div><p>Notifications and DMs feel instant. Didn't even know there was a platform underneath.</p></article>
<article class="post"><div class="who"><span class="dot"></span><b>Priya N.</b></div><p>Signed in once, everything just worked. 🔒</p></article>
</main>
</div>
</div>
<!-- Design-review annotation only — proves platform infra is ACTIVE but INVISIBLE.
Lives outside .locked-app; never shipped to the end user. -->
<div class="infra-annotation" data-role="design-annotation">
<span class="lead">powered by hidden FuzeFront platform ·</span>
<span class="chip" data-infra="auth" data-state="on">● authN</span>
<span class="chip" data-infra="authz" data-state="on">● authZ</span>
<span class="chip" data-infra="billing" data-state="on">● billing</span>
<span class="chip" data-infra="payments" data-state="on">● payments</span>
<span class="chip" data-infra="notifications" data-state="on">● notifications</span>
<span class="chip" data-infra="sockets" data-state="on">● sockets</span>
</div>
</body>
</html>
55 changes: 55 additions & 0 deletions design/frames/locked-app-mode/03-locked-mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!-- @dsCard group="Locked App Mode" viewport="375x760" name="(c) Locked mobile shell" subtitle="375px white-label product surface — touch nav, no FuzeFront chrome" -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Locked App Mode — (c) Locked mobile shell</title>
<link rel="stylesheet" href="tokens.css" />
<style>
:root { --brand-accent: #ff4d6d; }
body { display: grid; place-items: center; background: var(--bg-primary); padding: var(--space-6) 0; }
/* 375px phone canvas — the mobile locked surface / TWA viewport. */
.phone { width: 375px; min-height: 720px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.m-topbar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
.m-topbar .glyph { font-size: 20px; }
.m-topbar .name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); }
.m-topbar .spacer { flex: 1; }
.m-topbar .avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-accent), #ffb36b); }
.m-feed { flex: 1; padding: 14px; overflow: auto; }
.m-composer { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 12px 14px; color: var(--text-tertiary); font-size: var(--text-sm); margin-bottom: 12px; }
.m-post { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 12px; }
.m-post .who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.m-post .who .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--seam); }
.m-post .who b { font-size: var(--text-sm); }
.m-post p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
/* Bottom tab bar — touch nav with safe-area padding (TWA). Product's own. */
.m-tabbar { display: flex; justify-content: space-around; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.m-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--text-tertiary); min-width: 56px; min-height: 44px; justify-content: center; }
.m-tab.active { color: var(--brand-accent); }
.m-tab .ic { font-size: 18px; }
</style>
</head>
<body data-frame="03-locked-mobile">
<div class="phone" data-mode="locked" data-app="fuzesocial" data-viewport="375" data-whitelabel="true">
<header class="m-topbar" data-owner="app">
<span class="glyph">💬</span><span class="name">FuzeSocial</span>
<span class="spacer"></span>
<span class="avatar"></span>
</header>
<main class="m-feed">
<div class="m-composer">What's happening?</div>
<article class="m-post"><div class="who"><span class="dot"></span><b>Ava Chen</b></div><p>Feels like a native app because it is one — locked to FuzeSocial.</p></article>
<article class="m-post"><div class="who"><span class="dot"></span><b>Marco Diaz</b></div><p>Push notifications land instantly. 🔔</p></article>
<article class="m-post"><div class="who"><span class="dot"></span><b>Priya N.</b></div><p>No app-switcher, no clutter — just my feed.</p></article>
</main>
<nav class="m-tabbar" data-owner="app">
<div class="m-tab active"><span class="ic">🏠</span>Home</div>
<div class="m-tab"><span class="ic">🔎</span>Explore</div>
<div class="m-tab"><span class="ic">➕</span>Post</div>
<div class="m-tab"><span class="ic">🔔</span>Alerts</div>
<div class="m-tab"><span class="ic">👤</span>You</div>
</nav>
</div>
</body>
</html>
67 changes: 67 additions & 0 deletions design/frames/locked-app-mode/04-native-app-home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!-- @dsCard group="Locked App Mode" viewport="375x760" name="(d) Separate native apps" subtitle="Each product is its own installed app (own package id) — not one container" -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Locked App Mode — (d) Separate native apps</title>
<link rel="stylesheet" href="tokens.css" />
<style>
body { display: grid; place-items: center; background: var(--bg-primary); padding: var(--space-6) 0; }
.phone { width: 375px; min-height: 720px; border: 1px solid var(--border-color); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
background:
radial-gradient(700px 360px at 80% -5%, rgba(110,92,255,0.22), transparent 60%),
radial-gradient(620px 320px at 0% 110%, rgba(41,211,230,0.16), transparent 60%),
var(--bg-primary);
}
.home-head { padding: 22px 20px 6px; }
.home-head .clock { font-family: var(--font-display); font-size: 40px; font-weight: var(--weight-bold); }
.home-head .date { color: var(--text-secondary); font-size: var(--text-sm); }
.hint { padding: 4px 20px 14px; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; align-content: start; padding: 14px 20px; }
.app-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.app-icon .tile { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; font-size: 28px; box-shadow: var(--shadow-md); }
.app-icon .label { font-size: 11px; color: var(--text-primary); text-align: center; }
.app-icon .pkg { font-family: var(--font-mono); font-size: 8px; color: var(--text-tertiary); }
.t-social { background: linear-gradient(135deg, #ff4d6d, #ffb36b); }
.t-market { background: linear-gradient(135deg, #6e5cff, #29d3e6); }
.t-chat { background: linear-gradient(135deg, #22c55e, #10b981); }
.t-keys { background: linear-gradient(135deg, #f59e0b, #f97316); }
.dock { display: flex; justify-content: space-around; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); }
.dock .tile { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--bg-tertiary); border: 1px solid var(--border-color); }
</style>
</head>
<body data-frame="04-native-app-home">
<!-- The phone home screen: on desktop these products live behind one 9-dots
launcher; on mobile each is its OWN installed app (own package id + signing
key + assetlinks), locked to that product. No single "FuzeFront container". -->
<div class="phone" data-model="separate-native-apps" data-container="absent">
<div class="home-head">
<div class="clock">9:41</div>
<div class="date">Tuesday, July 14</div>
</div>
<div class="hint">Each icon = a separate signed app, locked to one product</div>
<div class="grid">
<a class="app-icon" data-app="fuzesocial" data-packageid="com.fuzefront.fuzesocial" href="03-locked-mobile.html">
<span class="tile t-social">💬</span><span class="label">FuzeSocial</span>
<span class="pkg">com.fuzefront.fuzesocial</span>
</a>
<a class="app-icon" data-app="fuzemarket" data-packageid="com.fuzefront.fuzemarket" href="#">
<span class="tile t-market">🛒</span><span class="label">FuzeMarket</span>
<span class="pkg">com.fuzefront.fuzemarket</span>
</a>
<a class="app-icon" data-app="fuzechat" data-packageid="com.fuzefront.fuzechat" href="#">
<span class="tile t-chat">💭</span><span class="label">FuzeChat</span>
<span class="pkg">com.fuzefront.fuzechat</span>
</a>
<a class="app-icon" data-app="fuzekeys" data-packageid="com.fuzefront.fuzekeys" href="#">
<span class="tile t-keys">🔑</span><span class="label">FuzeKeys</span>
<span class="pkg">com.fuzefront.fuzekeys</span>
</a>
</div>
<div class="dock">
<span class="tile">📞</span><span class="tile">✉️</span><span class="tile">🌐</span><span class="tile">📷</span>
</div>
</div>
</body>
</html>
Loading
Loading