diff --git a/ee/apps/den-web/app/(den)/_components/auth-panel.tsx b/ee/apps/den-web/app/(den)/_components/auth-panel.tsx
index b775c113b..a4c845cb9 100644
--- a/ee/apps/den-web/app/(den)/_components/auth-panel.tsx
+++ b/ee/apps/den-web/app/(den)/_components/auth-panel.tsx
@@ -7,6 +7,14 @@ import { isSamePathname } from "../_lib/client-route";
 import type { AuthMode } from "../_lib/den-flow";
 import { useDenFlow } from "../_providers/den-flow-provider";
 
+type PanelContent = {
+  title: string;
+  copy: string;
+  submitLabel: string;
+  togglePrompt?: string;
+  toggleActionLabel?: string;
+};
+
 function getDesktopGrant(url: string | null) {
   if (!url) return null;
   try {
@@ -52,7 +60,7 @@ function SocialButton({
   return (
     <button
       type="button"
-      className="flex w-full items-center justify-center gap-3 rounded-xl border border-gray-200 bg-white px-4 py-3 text-[14px] font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
+      className="den-button-secondary den-social-button"
       onClick={onClick}
       disabled={disabled}
     >
@@ -62,8 +70,6 @@ function SocialButton({
 }
 
 export function AuthPanel({
-  panelTitle,
-  panelCopy,
   prefilledEmail,
   prefillKey,
   initialMode = "sign-up",
@@ -71,9 +77,10 @@ export function AuthPanel({
   hideSocialAuth = false,
   hideEmailField = false,
   eyebrow = "Account",
+  signUpContent,
+  signInContent,
+  verificationContent,
 }: {
-  panelTitle?: string;
-  panelCopy?: string;
   prefilledEmail?: string;
   prefillKey?: string;
   initialMode?: AuthMode;
@@ -81,6 +88,9 @@ export function AuthPanel({
   hideSocialAuth?: boolean;
   hideEmailField?: boolean;
   eyebrow?: string;
+  signUpContent?: Partial<PanelContent>;
+  signInContent?: Partial<PanelContent>;
+  verificationContent?: Partial<PanelContent>;
 }) {
   const router = useRouter();
   const pathname = usePathname();
@@ -111,17 +121,37 @@ export function AuthPanel({
     resolveUserLandingRoute,
   } = useDenFlow();
 
+  const resolvedSignUpContent: PanelContent = {
+    title: "Get started.",
+    copy: "Free to try. Team plans from $50/mo.",
+    submitLabel: "Create account",
+    togglePrompt: "Have an account?",
+    toggleActionLabel: "Sign in",
+    ...signUpContent,
+  };
+
+  const resolvedSignInContent: PanelContent = {
+    title: "Welcome back.",
+    copy: "Sign in to open your team workspace.",
+    submitLabel: "Sign in",
+    togglePrompt: "Need an account?",
+    toggleActionLabel: "Create one",
+    ...signInContent,
+  };
+
+  const resolvedVerificationContent: PanelContent = {
+    title: "Verify your email.",
+    copy: "Enter the six-digit code from your inbox.",
+    submitLabel: "Verify email",
+    ...verificationContent,
+  };
+
   const desktopGrant = getDesktopGrant(desktopRedirectUrl);
-  const resolvedPanelTitle = verificationRequired
-    ? "Verify your email."
-    : panelTitle ?? (authMode === "sign-up" ? "Create your Cloud account." : "Sign in to Cloud.");
-  const resolvedPanelCopy = verificationRequired
-    ? "Enter the six-digit code from your inbox to finish setup."
-    : panelCopy ?? (
-      authMode === "sign-up"
-        ? "Start with email, GitHub, or Google."
-        : "Welcome back. Keep your team setup in sync across Cloud and desktop."
-    );
+  const activeContent = verificationRequired
+    ? resolvedVerificationContent
+    : authMode === "sign-in"
+      ? resolvedSignInContent
+      : resolvedSignUpContent;
   const showLockedEmailSummary = Boolean(prefilledEmail && lockEmail && hideEmailField);
 
   useEffect(() => {
@@ -147,31 +177,31 @@ export function AuthPanel({
   };
 
   return (
-    <div className="rounded-[28px] border border-gray-100 bg-white p-6 shadow-[0_10px_30px_-24px_rgba(15,23,42,0.22)] md:p-7">
-      <div className="grid gap-2">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400">
-          {eyebrow}
-        </p>
-        <h2 className="text-[28px] font-semibold tracking-[-0.04em] text-gray-900">{resolvedPanelTitle}</h2>
-        <p className="text-[14px] leading-relaxed text-gray-500">{resolvedPanelCopy}</p>
+    <div className="den-frame grid gap-5 p-6 md:p-7">
+      <div className="grid gap-3">
+        <p className="den-eyebrow">{eyebrow}</p>
+        <div className="grid gap-2">
+          <h2 className="den-title-lg">{activeContent.title}</h2>
+          <p className="den-copy">{activeContent.copy}</p>
+        </div>
       </div>
 
       {desktopAuthRequested ? (
-        <div className="mt-5 rounded-2xl border border-sky-100 bg-sky-50 p-4 text-[13px] text-sky-900">
-          Finish auth here and we&apos;ll send you back into the OpenWork desktop app.
+        <div className="den-notice is-info grid gap-3 text-[13px]">
+          <p className="m-0">Finish sign-in here, then jump back into the OpenWork desktop app.</p>
           {desktopRedirectUrl ? (
-            <div className="mt-4 grid gap-2">
-              <div className="flex flex-wrap gap-2">
+            <div className="grid gap-3">
+              <div className="flex flex-wrap gap-3">
                 <button
                   type="button"
-                  className="rounded-full border border-sky-200 bg-white px-4 py-2 text-xs font-medium text-sky-900 transition-colors hover:bg-sky-100"
+                  className="den-button-secondary w-full sm:w-auto"
                   onClick={() => window.location.assign(desktopRedirectUrl)}
                 >
                   Open OpenWork
                 </button>
                 <button
                   type="button"
-                  className="rounded-full border border-sky-200 bg-white px-4 py-2 text-xs font-medium text-sky-900 transition-colors hover:bg-sky-100"
+                  className="den-button-secondary w-full sm:w-auto"
                   onClick={() => void copyDesktopValue("link", desktopRedirectUrl)}
                 >
                   {copiedDesktopField === "link" ? "Copied link" : "Copy sign-in link"}
@@ -179,14 +209,14 @@ export function AuthPanel({
                 {desktopGrant ? (
                   <button
                     type="button"
-                    className="rounded-full border border-sky-200 bg-white px-4 py-2 text-xs font-medium text-sky-900 transition-colors hover:bg-sky-100"
+                    className="den-button-secondary w-full sm:w-auto"
                     onClick={() => void copyDesktopValue("code", desktopGrant)}
                   >
                     {copiedDesktopField === "code" ? "Copied code" : "Copy one-time code"}
                   </button>
                 ) : null}
               </div>
-              <p className="text-xs leading-5 text-sky-800/80">
+              <p className="m-0 text-xs leading-5 text-sky-800/80">
                 If OpenWork does not open automatically, copy the sign-in link or one-time code and paste it into the OpenWork desktop app.
               </p>
             </div>
@@ -195,7 +225,7 @@ export function AuthPanel({
       ) : null}
 
       <form
-        className="mt-5 grid gap-3"
+        className="grid gap-4"
         onSubmit={async (event) => {
           const next = verificationRequired
             ? await submitVerificationCode(event)
@@ -228,33 +258,24 @@ export function AuthPanel({
               <span>Continue with Google</span>
             </SocialButton>
 
-            <div
-              className="flex items-center gap-3 text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400"
-              aria-hidden="true"
-            >
-              <span className="h-px flex-1 bg-gray-200" />
+            <div className="den-divider" aria-hidden="true">
               <span>or</span>
-              <span className="h-px flex-1 bg-gray-200" />
             </div>
           </>
         ) : null}
 
         {showLockedEmailSummary ? (
-          <div className="rounded-2xl border border-gray-100 bg-gray-50 px-4 py-3">
-            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">
-              Invited email
-            </p>
-            <p className="mt-1 text-[14px] font-medium text-gray-900">{prefilledEmail}</p>
+          <div className="den-frame-inset grid gap-1 rounded-[1.5rem] px-4 py-3">
+            <p className="den-label">Invited email</p>
+            <p className="m-0 text-sm font-medium text-[var(--dls-text-primary)]">{prefilledEmail}</p>
           </div>
         ) : null}
 
         {!hideEmailField ? (
           <label className="grid gap-2">
-            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">
-              Email
-            </span>
+            <span className="den-label">Email</span>
             <input
-              className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-[14px] text-gray-900 outline-none transition focus:border-gray-300 focus:ring-4 focus:ring-gray-900/5 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
+              className="den-input disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
               type="email"
               value={email}
               onChange={(event) => setEmail(event.target.value)}
@@ -268,11 +289,9 @@ export function AuthPanel({
 
         {!verificationRequired ? (
           <label className="grid gap-2">
-            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">
-              Password
-            </span>
+            <span className="den-label">Password</span>
             <input
-              className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-[14px] text-gray-900 outline-none transition focus:border-gray-300 focus:ring-4 focus:ring-gray-900/5"
+              className="den-input"
               type="password"
               value={password}
               onChange={(event) => setPassword(event.target.value)}
@@ -282,11 +301,9 @@ export function AuthPanel({
           </label>
         ) : (
           <label className="grid gap-2">
-            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">
-              Verification code
-            </span>
+            <span className="den-label">Verification code</span>
             <input
-              className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-center text-[18px] font-semibold tracking-[0.35em] text-gray-900 outline-none transition focus:border-gray-300 focus:ring-4 focus:ring-gray-900/5"
+              className="den-input text-center text-[18px] font-semibold tracking-[0.35em]"
               type="text"
               inputMode="numeric"
               pattern="[0-9]*"
@@ -302,16 +319,10 @@ export function AuthPanel({
 
         <button
           type="submit"
-          className="flex w-full items-center justify-center gap-2 rounded-full bg-gray-900 px-5 py-3 text-[14px] font-medium text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
+          className="den-button-primary w-full"
           disabled={authBusy || desktopRedirectBusy}
         >
-          {authBusy || desktopRedirectBusy
-            ? "Working..."
-            : verificationRequired
-              ? "Verify email"
-              : authMode === "sign-in"
-                ? "Sign in to Cloud"
-                : "Create Cloud account"}
+          {authBusy || desktopRedirectBusy ? "Working..." : activeContent.submitLabel}
           {!authBusy && !desktopRedirectBusy ? <ArrowRight className="h-4 w-4" /> : null}
         </button>
 
@@ -319,7 +330,7 @@ export function AuthPanel({
           <div className="flex flex-col gap-3 sm:flex-row">
             <button
               type="button"
-              className="w-full rounded-full border border-gray-200 bg-white px-4 py-3 text-[13px] font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
+              className="den-button-secondary w-full"
               onClick={() => void resendVerificationCode()}
               disabled={authBusy || desktopRedirectBusy}
             >
@@ -327,7 +338,7 @@ export function AuthPanel({
             </button>
             <button
               type="button"
-              className="w-full rounded-full border border-gray-200 bg-white px-4 py-3 text-[13px] font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
+              className="den-button-secondary w-full"
               onClick={() => cancelVerification()}
               disabled={authBusy || desktopRedirectBusy}
             >
@@ -338,21 +349,27 @@ export function AuthPanel({
       </form>
 
       {!verificationRequired ? (
-        <div className="mt-4 flex items-center justify-between gap-3 border-t border-gray-200 pt-4 text-sm text-gray-500">
-          <p>{authMode === "sign-in" ? "Need an account?" : "Already have an account?"}</p>
+        <div className="flex items-center justify-between gap-3 border-t border-[var(--dls-border)] pt-4 text-sm text-[var(--dls-text-secondary)]">
+          <p className="m-0">
+            {authMode === "sign-in"
+              ? resolvedSignInContent.togglePrompt
+              : resolvedSignUpContent.togglePrompt}
+          </p>
           <button
             type="button"
-            className="font-medium text-gray-900 transition hover:opacity-70"
+            className="font-medium text-[var(--dls-text-primary)] transition hover:opacity-70"
             onClick={() => setAuthMode(authMode === "sign-in" ? "sign-up" : "sign-in")}
           >
-            {authMode === "sign-in" ? "Create account" : "Switch to sign in"}
+            {authMode === "sign-in"
+              ? resolvedSignInContent.toggleActionLabel
+              : resolvedSignUpContent.toggleActionLabel}
           </button>
         </div>
       ) : null}
 
       {showAuthFeedback ? (
         <div
-          className="mt-4 grid gap-1 rounded-2xl border border-gray-100 bg-gray-50 px-4 py-3 text-center text-[13px] text-gray-500"
+          className="den-frame-inset grid gap-1 rounded-[1.5rem] px-4 py-3 text-center text-[13px] text-[var(--dls-text-secondary)]"
           aria-live="polite"
         >
           <p>{authInfo}</p>
diff --git a/ee/apps/den-web/app/(den)/_components/auth-screen.tsx b/ee/apps/den-web/app/(den)/_components/auth-screen.tsx
index f4dbd3de4..4b47936ad 100644
--- a/ee/apps/den-web/app/(den)/_components/auth-screen.tsx
+++ b/ee/apps/den-web/app/(den)/_components/auth-screen.tsx
@@ -10,25 +10,23 @@ import { AuthPanel } from "./auth-panel";
 
 function FeatureCard({ title, body }: { title: string; body: string }) {
   return (
-    <div className="rounded-2xl border border-gray-100 bg-white p-5">
-      <p className="mb-2 text-[14px] font-medium text-gray-900">{title}</p>
-      <p className="text-[13px] leading-[1.6] text-gray-500">{body}</p>
+    <div className="den-stat-card grid gap-2">
+      <p className="m-0 text-[14px] font-medium text-[var(--dls-text-primary)]">{title}</p>
+      <p className="m-0 text-[13px] leading-[1.6] text-[var(--dls-text-secondary)]">{body}</p>
     </div>
   );
 }
 
 function LoadingPanel({ title, body }: { title: string; body: string }) {
   return (
-    <div className="rounded-[28px] border border-gray-100 bg-white p-6 shadow-[0_10px_30px_-24px_rgba(15,23,42,0.22)] md:p-7">
+    <div className="den-frame grid gap-3 p-6 md:p-7">
       <div className="grid gap-3">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400">
-          OpenWork Cloud
-        </p>
-        <h2 className="text-[28px] font-semibold tracking-[-0.04em] text-gray-900">{title}</h2>
-        <p className="text-[14px] leading-relaxed text-gray-500">{body}</p>
+        <p className="den-eyebrow">OpenWork Cloud</p>
+        <h2 className="den-title-lg">{title}</h2>
+        <p className="den-copy">{body}</p>
       </div>
-      <div className="mt-6 h-2 overflow-hidden rounded-full bg-gray-100">
-        <div className="h-full w-1/3 animate-pulse rounded-full bg-gray-900/80" />
+      <div className="h-2 overflow-hidden rounded-full bg-[var(--dls-hover)]">
+        <div className="h-full w-1/3 animate-pulse rounded-full bg-[var(--dls-accent)]" />
       </div>
     </div>
   );
@@ -70,7 +68,7 @@ export function AuthScreen() {
     <section className="den-page flex w-full items-center py-4 lg:min-h-[calc(100vh-2.5rem)]">
       <div className="grid w-full gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(360px,440px)]">
         <div className="order-2 flex flex-col gap-6 lg:order-1">
-          <div className="relative min-h-[300px] overflow-hidden rounded-[32px] border border-gray-100 px-7 py-8 md:px-10 md:py-10">
+          <div className="den-frame relative min-h-[300px] overflow-hidden px-7 py-8 md:px-10 md:py-10">
             <div className="absolute inset-0 z-0">
               <Dithering
                 speed={0}
@@ -104,13 +102,13 @@ export function AuthScreen() {
 
               <div className="grid gap-4">
                 <span className="inline-flex w-fit rounded-full border border-white/20 bg-white/15 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.18em] text-white backdrop-blur-md">
-                  Shared setups
+                  OpenWork Cloud
                 </span>
                 <h1 className="max-w-[12ch] text-[2.25rem] font-semibold leading-[0.95] tracking-[-0.06em] text-white md:text-[3rem]">
-                  Share your OpenWork setup with your team.
+                  One setup, every seat.
                 </h1>
                 <p className="max-w-[34rem] text-[15px] leading-7 text-white/80">
-                  Provision shared setups, invite your org, and keep background workspaces available across Cloud and desktop.
+                  Configure once. Your whole team gets the same tools, agents, and providers.
                 </p>
               </div>
             </div>
@@ -118,16 +116,16 @@ export function AuthScreen() {
 
           <div className="grid gap-4 md:grid-cols-3">
             <FeatureCard
-              title="Team sharing"
-              body="Package skills, MCPs, plugins, and config once so the whole org can use the same setup."
+              title="Shared config"
+              body="Set it up once, then push it to the org."
             />
             <FeatureCard
-              title="Cloud Hosted Agents"
-              body="Keep selected workflows running in the cloud without asking each teammate to run them locally."
+              title="Cloud agents"
+              body="Workflows that keep running while your team is away."
             />
             <FeatureCard
-              title="Custom LLM Providers"
-              body="Whether you want to use LiteLLM, Azure, or any other provider, you can use OpenWork to provision your team."
+              title="Your models"
+              body="Bring your own provider when the team is ready."
             />
           </div>
         </div>
diff --git a/ee/apps/den-web/app/(den)/_components/join-org-screen.tsx b/ee/apps/den-web/app/(den)/_components/join-org-screen.tsx
index e56055add..e615f956d 100644
--- a/ee/apps/den-web/app/(den)/_components/join-org-screen.tsx
+++ b/ee/apps/den-web/app/(den)/_components/join-org-screen.tsx
@@ -17,14 +17,16 @@ import { AuthPanel } from "./auth-panel";
 
 function LoadingCard({ title, body }: { title: string; body: string }) {
   return (
-    <section className="mx-auto grid w-full max-w-[40rem] gap-4 rounded-[32px] border border-gray-100 bg-white p-6 shadow-[0_10px_30px_-24px_rgba(15,23,42,0.22)] md:p-8">
-      <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400">OpenWork Cloud</p>
-      <div className="grid gap-2">
-        <h1 className="text-[2rem] font-semibold tracking-[-0.05em] text-gray-900">{title}</h1>
-        <p className="text-[14px] leading-relaxed text-gray-500">{body}</p>
-      </div>
-      <div className="h-2 overflow-hidden rounded-full bg-gray-100">
-        <div className="h-full w-1/3 animate-pulse rounded-full bg-gray-900/80" />
+    <section className="den-page py-4 lg:py-6">
+      <div className="den-frame grid max-w-[44rem] gap-4 p-6 md:p-7">
+        <p className="den-eyebrow">OpenWork Cloud</p>
+        <div className="grid gap-2">
+          <h1 className="den-title-lg">{title}</h1>
+          <p className="den-copy">{body}</p>
+        </div>
+        <div className="h-2 overflow-hidden rounded-full bg-[var(--dls-hover)]">
+          <div className="h-full w-1/3 animate-pulse rounded-full bg-[var(--dls-accent)]" />
+        </div>
       </div>
     </section>
   );
@@ -33,13 +35,13 @@ function LoadingCard({ title, body }: { title: string; body: string }) {
 function statusMessage(preview: DenInvitationPreview | null) {
   switch (preview?.invitation.status) {
     case "accepted":
-      return "This invitation has already been accepted.";
+      return "This invite has already been used.";
     case "canceled":
-      return "This invitation has been canceled.";
+      return "This invite was canceled.";
     case "expired":
-      return "This invitation has expired.";
+      return "This invite expired.";
     default:
-      return "This invitation is no longer available.";
+      return "This invite is no longer available.";
   }
 }
 
@@ -55,6 +57,7 @@ export function JoinOrgScreen({ invitationId }: { invitationId: string }) {
   const invitedEmailMatches = preview && user
     ? preview.invitation.email.trim().toLowerCase() === user.email.trim().toLowerCase()
     : false;
+  const roleLabel = preview ? formatRoleLabel(preview.invitation.role) : "";
 
   useEffect(() => {
     let cancelled = false;
@@ -87,7 +90,7 @@ export function JoinOrgScreen({ invitationId }: { invitationId: string }) {
           }
 
           setPreview(null);
-          setPreviewError(getErrorMessage(payload, response.status === 404 ? "This invitation is no longer available." : `Could not load the invitation (${response.status}).`));
+          setPreviewError(getErrorMessage(payload, response.status === 404 ? "This invite is no longer available." : `Could not load the invite (${response.status}).`));
           return;
         }
 
@@ -102,7 +105,7 @@ export function JoinOrgScreen({ invitationId }: { invitationId: string }) {
       } catch (error) {
         if (!cancelled) {
           setPreview(null);
-          setPreviewError(error instanceof Error ? error.message : "Could not load the invitation.");
+          setPreviewError(error instanceof Error ? error.message : "Could not load the invite.");
         }
       } finally {
         if (!cancelled) {
@@ -138,7 +141,7 @@ export function JoinOrgScreen({ invitationId }: { invitationId: string }) {
       );
 
       if (!response.ok) {
-        setJoinError(getErrorMessage(payload, response.status === 404 ? "This invitation could not be accepted." : `Could not join the organization (${response.status}).`));
+        setJoinError(getErrorMessage(payload, response.status === 404 ? "This invite could not be accepted." : `Could not join the organization (${response.status}).`));
         return;
       }
 
@@ -165,21 +168,23 @@ export function JoinOrgScreen({ invitationId }: { invitationId: string }) {
   }
 
   if (!sessionHydrated || previewBusy) {
-    return <LoadingCard title="Loading invitation." body="Checking the invitation details and your account state..." />;
+    return <LoadingCard title="Loading invite." body="Checking the invite details and your account state..." />;
   }
 
   if (!preview) {
     return (
-      <section className="mx-auto grid w-full max-w-[40rem] gap-6 rounded-[32px] border border-gray-100 bg-white p-6 shadow-[0_10px_30px_-24px_rgba(15,23,42,0.22)] md:p-8">
-        <div className="grid gap-2">
-          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400">OpenWork Cloud</p>
-          <h1 className="text-[2rem] font-semibold tracking-[-0.05em] text-gray-900">Invitation unavailable.</h1>
-          <p className="text-[14px] leading-relaxed text-gray-500">{previewError ?? "This invitation could not be loaded."}</p>
-        </div>
-        <div className="flex flex-wrap gap-3">
-          <Link href="/" className="inline-flex items-center rounded-full bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800">
-            Back to OpenWork Cloud
-          </Link>
+      <section className="den-page py-4 lg:py-6">
+        <div className="den-frame grid max-w-[44rem] gap-6 p-6 md:p-8">
+          <div className="grid gap-2">
+            <p className="den-eyebrow">OpenWork Cloud</p>
+            <h1 className="den-title-lg">This invite can't be opened.</h1>
+            <p className="den-copy">{previewError ?? "This invite could not be loaded."}</p>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <Link href="/" className="den-button-primary w-full sm:w-auto">
+              Back to OpenWork Cloud
+            </Link>
+          </div>
         </div>
       </section>
     );
@@ -187,38 +192,55 @@ export function JoinOrgScreen({ invitationId }: { invitationId: string }) {
 
   if (preview.invitation.status === "pending" && !user) {
     return (
-      <section className="mx-auto grid w-full max-w-[64rem] gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(360px,440px)]">
-        <div className="grid gap-6 rounded-[32px] border border-gray-100 bg-white p-6 shadow-[0_10px_30px_-24px_rgba(15,23,42,0.22)] md:p-8">
+      <section className="den-page grid gap-6 py-4 lg:grid-cols-[minmax(0,1fr)_minmax(360px,440px)] lg:py-6">
+        <div className="den-frame grid gap-6 p-6 md:p-8">
           <div className="grid gap-3">
-            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400">OpenWork Cloud</p>
+            <p className="den-eyebrow">OpenWork Cloud</p>
             <div className="grid gap-2">
-              <p className="text-[15px] font-medium text-gray-500">You&apos;ve been invited to</p>
-              <h1 className="text-[2.5rem] font-semibold tracking-[-0.06em] text-gray-900">{preview.organization.name}</h1>
+              <p className="den-copy">You've been invited to</p>
+              <h1 className="den-title-xl max-w-[12ch]">{preview.organization.name}</h1>
             </div>
-            <p className="text-[14px] leading-relaxed text-gray-500">Role: {formatRoleLabel(preview.invitation.role)}</p>
           </div>
 
-          <div className="grid gap-4 rounded-3xl border border-gray-100 bg-gray-50 p-5">
-            <div className="grid gap-1">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">Invited email</p>
-              <p className="text-[16px] font-medium text-gray-900">{preview.invitation.email}</p>
-            </div>
-            <p className="text-[14px] leading-relaxed text-gray-600">
-              Set a password for this invited email to create your OpenWork Cloud account, or switch to sign in if you already use it.
+          <div className="den-meta-row">
+            <span className="den-kicker">Role · {roleLabel}</span>
+          </div>
+
+          <div className="den-frame-inset grid gap-3 rounded-[1.5rem] p-5">
+            <p className="m-0 text-base font-medium text-[var(--dls-text-primary)]">
+              Your team is already set up and waiting.
             </p>
+            <p className="den-copy">Member access is ready as soon as you join.</p>
           </div>
         </div>
 
         <AuthPanel
           eyebrow="Invite"
-          panelTitle={`Join ${preview.organization.name}.`}
-          panelCopy="We prefilled your invited email so you can finish account setup without going through the generic signup flow first."
           prefilledEmail={preview.invitation.email}
           prefillKey={preview.invitation.id}
           initialMode="sign-up"
           lockEmail
           hideSocialAuth
           hideEmailField
+          signUpContent={{
+            title: `Join ${preview.organization.name}.`,
+            copy: "Pick a password and you're in.",
+            submitLabel: `Join ${preview.organization.name}`,
+            togglePrompt: "Already on Cloud?",
+            toggleActionLabel: "Sign in",
+          }}
+          signInContent={{
+            title: `Join ${preview.organization.name}.`,
+            copy: `Sign in as ${preview.invitation.email} to accept this invite.`,
+            submitLabel: "Sign in to join",
+            togglePrompt: "Need a new account?",
+            toggleActionLabel: "Create one",
+          }}
+          verificationContent={{
+            title: "Check your inbox.",
+            copy: `Enter the six-digit code sent to ${preview.invitation.email}.`,
+            submitLabel: "Verify and join",
+          }}
         />
       </section>
     );
@@ -227,68 +249,75 @@ export function JoinOrgScreen({ invitationId }: { invitationId: string }) {
   const showAcceptAction = preview.invitation.status === "pending" && Boolean(user) && invitedEmailMatches;
 
   return (
-    <section className="mx-auto grid w-full max-w-[40rem] gap-6 rounded-[32px] border border-gray-100 bg-white p-6 shadow-[0_10px_30px_-24px_rgba(15,23,42,0.22)] md:p-8">
-      <div className="grid gap-3">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400">OpenWork Cloud</p>
-        <div className="grid gap-2">
-          <p className="text-[15px] font-medium text-gray-500">You've been invited to</p>
-          <h1 className="text-[2.5rem] font-semibold tracking-[-0.06em] text-gray-900">{preview.organization.name}</h1>
+    <section className="den-page py-4 lg:py-6">
+      <div className="den-frame grid max-w-[44rem] gap-6 p-6 md:p-8">
+        <div className="grid gap-3">
+          <p className="den-eyebrow">OpenWork Cloud</p>
+          <div className="grid gap-2">
+            <p className="den-copy">You've been invited to</p>
+            <h1 className="den-title-xl max-w-[12ch]">{preview.organization.name}</h1>
+          </div>
         </div>
-        <p className="text-[14px] leading-relaxed text-gray-500">Role: {formatRoleLabel(preview.invitation.role)}</p>
-      </div>
 
-      {user ? (
-        <div className="rounded-2xl border border-gray-100 bg-gray-50 px-4 py-3 text-[13px] text-gray-700">
-          Signed in as <span className="font-medium text-gray-900">{user.email}</span>
+        <div className="den-meta-row">
+          <span className="den-kicker">Role · {roleLabel}</span>
+          {user ? <span>{user.email}</span> : null}
         </div>
-      ) : null}
 
-      {preview.invitation.status !== "pending" ? (
-        <div className="grid gap-4">
-          <p className="text-[15px] leading-relaxed text-gray-600">{statusMessage(preview)}</p>
-          <div className="flex flex-wrap gap-3">
-            <Link
-              href={user && invitedEmailMatches ? getOrgDashboardRoute(preview.organization.slug) : "/"}
-              className="inline-flex items-center rounded-full bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800"
-            >
-              {user && invitedEmailMatches ? "Open organization" : "Back to OpenWork Cloud"}
-            </Link>
+        {user ? (
+          <div className="den-frame-inset grid gap-1 rounded-[1.5rem] px-4 py-3">
+            <p className="den-label">Signed in as</p>
+            <p className="m-0 text-sm font-medium text-[var(--dls-text-primary)]">{user.email}</p>
           </div>
-        </div>
-      ) : !invitedEmailMatches ? (
-        <div className="grid gap-4">
-          <p className="text-[15px] leading-relaxed text-gray-600">
-            This invite was sent to <span className="font-medium text-gray-900">{preview.invitation.email}</span>. Sign in with that email to join the organization.
-          </p>
-          <div className="flex flex-wrap gap-3">
-            <button
-              type="button"
-              className="inline-flex items-center rounded-full bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
-              onClick={() => void handleSwitchAccount()}
-              disabled={joinBusy}
-            >
-              Use a different account
-            </button>
+        ) : null}
+
+        {preview.invitation.status !== "pending" ? (
+          <div className="grid gap-4">
+            <p className="den-copy">{statusMessage(preview)}</p>
+            <div className="flex flex-wrap gap-3">
+              <Link
+                href={user && invitedEmailMatches ? getOrgDashboardRoute(preview.organization.slug) : "/"}
+                className="den-button-primary w-full sm:w-auto"
+              >
+                {user && invitedEmailMatches ? "Open team" : "Back to OpenWork Cloud"}
+              </Link>
+            </div>
           </div>
-        </div>
-      ) : (
-        <div className="grid gap-4">
-          <p className="text-[15px] leading-relaxed text-gray-600">Click to join</p>
-          <div className="flex flex-wrap gap-3">
-            <button
-              type="button"
-              className="inline-flex items-center rounded-full bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
-              onClick={() => void handleAcceptInvitation()}
-              disabled={!showAcceptAction || joinBusy}
-            >
-              {joinBusy ? "Joining..." : "Join org"}
-            </button>
+        ) : !invitedEmailMatches ? (
+          <div className="grid gap-4">
+            <p className="den-copy">
+              This invite is for <span className="font-medium text-[var(--dls-text-primary)]">{preview.invitation.email}</span>. Switch accounts to continue.
+            </p>
+            <div className="flex flex-wrap gap-3">
+              <button
+                type="button"
+                className="den-button-primary w-full sm:w-auto"
+                onClick={() => void handleSwitchAccount()}
+                disabled={joinBusy}
+              >
+                Use a different account
+              </button>
+            </div>
           </div>
-        </div>
-      )}
+        ) : (
+          <div className="grid gap-4">
+            <p className="den-copy">You're one click away from the team workspace.</p>
+            <div className="flex flex-wrap gap-3">
+              <button
+                type="button"
+                className="den-button-primary w-full sm:w-auto"
+                onClick={() => void handleAcceptInvitation()}
+                disabled={!showAcceptAction || joinBusy}
+              >
+                {joinBusy ? "Joining..." : `Join ${preview.organization.name}`}
+              </button>
+            </div>
+          </div>
+        )}
 
-      {joinError ? <p className="text-[13px] text-rose-600">{joinError}</p> : null}
-      {previewError ? <p className="text-[13px] text-rose-600">{previewError}</p> : null}
+        {joinError ? <div className="den-notice is-error">{joinError}</div> : null}
+        {previewError ? <div className="den-notice is-error">{previewError}</div> : null}
+      </div>
     </section>
   );
 }
diff --git a/ee/apps/den-web/app/globals.css b/ee/apps/den-web/app/globals.css
index ad5a04fa7..052f11e57 100644
--- a/ee/apps/den-web/app/globals.css
+++ b/ee/apps/den-web/app/globals.css
@@ -333,6 +333,72 @@ body {
     color: #1d4ed8;
 }
 
+.den-social-button {
+    width: 100%;
+}
+
+.den-divider {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--dls-text-secondary);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+.den-divider::before,
+.den-divider::after {
+    content: "";
+    flex: 1 1 auto;
+    height: 1px;
+    background: var(--dls-border);
+}
+
+.den-meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--dls-text-secondary);
+    font-size: 0.92rem;
+}
+
+.den-bullet-list {
+    display: grid;
+    gap: 0.8rem;
+}
+
+.den-bullet-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    color: var(--dls-text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.65;
+}
+
+.den-bullet-dot {
+    width: 0.4rem;
+    height: 0.4rem;
+    margin-top: 0.55rem;
+    border-radius: 9999px;
+    flex: 0 0 auto;
+    background: #cbd5e1;
+}
+
+.den-link-inline {
+    color: var(--dls-text-primary);
+    font-weight: 600;
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+}
+
+.den-link-inline:hover {
+    opacity: 0.72;
+}
+
 .ow-shell {
     position: relative;
     min-height: 100vh;