From f54812485ec4e469d6b3b9274c097973d7f81179 Mon Sep 17 00:00:00 2001
From: RedStar <redstar071@proton.me>
Date: Sun, 18 Oct 2026 22:34:05 +0200
Subject: [PATCH] feat(web): split the sign-in pages into a form and a brand
 panel

Sign-in, sign-up, device approval and invitation now share one shell:
the form and the Code Zero mark on the left, and from 64rem a checkered
accent panel with a short pitch and the running version on the right.
Narrower screens keep the form alone in one column.

Controls in the layout are 44 px tall, button-styled links included,
and the copy lives in packages/i18n for both locales. The split layout
gives back the scrollbar gutter tokens.css reserves, which otherwise
left a canvas strip beside the panel where scrollbars are not overlaid.
Sign-in behaviour, capabilities and OAuth visibility are unchanged.
---
 apps/web/app/layouts/auth.vue          | 187 +++++++++++++++++++++++--
 apps/web/app/pages/(auth)/login.vue    |   2 +-
 apps/web/app/pages/(auth)/signup.vue   |   2 +-
 apps/web/app/pages/device.vue          |   2 +-
 apps/web/app/pages/invite.vue          |   2 +-
 apps/web/public/logo-mark.svg          |  26 ++++
 packages/i18n/locales/en/auth.json     |   5 +
 packages/i18n/locales/it/auth.json     |   5 +
 packages/i18n/schemas/auth.schema.json |  15 ++
 packages/ui/DESIGN.md                  |   7 +-
 10 files changed, 235 insertions(+), 18 deletions(-)
 create mode 100644 apps/web/public/logo-mark.svg

diff --git a/apps/web/app/layouts/auth.vue b/apps/web/app/layouts/auth.vue
index 43822642..b98ec565 100644
--- a/apps/web/app/layouts/auth.vue
+++ b/apps/web/app/layouts/auth.vue
@@ -1,16 +1,177 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-canvas text-ink">
-    <header class="h-16 flex items-center justify-end gap-3 px-4 md:px-6">
-      <LocaleSwitcher />
-      <ClientOnly>
-        <ColorModeToggle />
-        <template #fallback>
-          <span class="h-9 w-9 border border-line bg-raised" aria-hidden="true" />
-        </template>
-      </ClientOnly>
-    </header>
-    <main class="flex flex-1 items-center justify-center px-4 pb-16">
-      <slot />
-    </main>
+  <div class="auth-shell bg-canvas text-ink">
+    <div class="auth-entry">
+      <header class="auth-toolbar flex items-center justify-end gap-3 px-5 sm:px-8">
+        <LocaleSwitcher />
+        <ClientOnly>
+          <ColorModeToggle />
+          <template #fallback>
+            <span class="h-11 w-11" aria-hidden="true" />
+          </template>
+        </ClientOnly>
+      </header>
+      <main class="auth-main">
+        <div class="auth-form">
+          <NuxtLink
+            class="auth-brand focus-ring mb-10 inline-flex items-center gap-3 text-ink"
+            to="/"
+          >
+            <span class="auth-mark bg-accent" aria-hidden="true" />
+            <span class="text-base font-650 tracking-tight">Code Zero</span>
+          </NuxtLink>
+          <slot />
+        </div>
+      </main>
+    </div>
+    <aside class="auth-story" :aria-label="$t('auth.brand.label')">
+      <div class="auth-story-copy">
+        <h2 class="m-0 font-600 tracking-tight">{{ $t('auth.brand.title') }}</h2>
+        <p class="mb-0 mt-6 text-base leading-relaxed">{{ $t('auth.brand.description') }}</p>
+      </div>
+      <span class="auth-version mono">v{{ buildInfo.version }}</span>
+    </aside>
   </div>
 </template>
+
+<script setup lang="ts">
+const buildInfo = useBuildInfo();
+
+useHead({ htmlAttrs: { 'data-layout': 'auth' } });
+</script>
+
+<style scoped>
+.auth-shell {
+  min-height: 100svh;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.auth-entry {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.auth-toolbar {
+  min-height: 5rem;
+}
+
+.auth-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1.5rem 5rem;
+}
+
+.auth-form {
+  width: 100%;
+  max-width: 24rem;
+}
+
+.auth-brand {
+  min-height: 2.75rem;
+  text-decoration: none;
+}
+
+.auth-mark {
+  width: 1.75rem;
+  height: 1.75rem;
+  mask: url('/logo-mark.svg') center / contain no-repeat;
+}
+
+.auth-form :deep(h1) {
+  font-size: clamp(1.5rem, 2vw, 1.875rem);
+  line-height: 1.25;
+}
+
+.auth-form :deep(input),
+.auth-form :deep(button),
+.auth-form :deep(.btn-subtle),
+.auth-toolbar :deep(button),
+.auth-toolbar :deep(select) {
+  min-height: 2.75rem;
+  font-size: 1rem;
+}
+
+.auth-toolbar :deep(button) {
+  min-width: 2.75rem;
+}
+
+.auth-form :deep(label > span) {
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.auth-form :deep(p),
+.auth-form :deep(.btn-link) {
+  font-size: 0.875rem;
+}
+
+.auth-form :deep(.btn-link) {
+  min-height: 2.75rem;
+  align-content: center;
+}
+
+.auth-story {
+  position: relative;
+  display: none;
+  min-width: 0;
+  padding: 4rem;
+  background-color: color-mix(in oklch, var(--cz-accent) 32%, var(--cz-panel));
+  /* The reference's checkerboard is a static brand texture, with no image or script cost. */
+  background-image: repeating-conic-gradient(
+    color-mix(in oklch, var(--cz-accent) 10%, transparent) 0% 25%,
+    transparent 0% 50%
+  );
+  background-size: 4rem 4rem;
+}
+
+.auth-story-copy {
+  max-width: 32rem;
+}
+
+.auth-story h2 {
+  font-size: clamp(2.25rem, 3.5vw, 3.75rem);
+  line-height: 1.1;
+  text-wrap: balance;
+}
+
+.auth-story p {
+  max-width: 29rem;
+  color: var(--cz-ink);
+}
+
+.auth-version {
+  position: absolute;
+  inset-block-end: 2.5rem;
+  inset-inline-start: 4rem;
+  color: var(--cz-ink);
+}
+
+@media (min-width: 64rem) {
+  .auth-shell {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .auth-story {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
+
+<style>
+/*
+ * The narrative panel runs to the viewport edge. The gutter `tokens.css` reserves for a scrollbar
+ * would leave a canvas-coloured strip beside it wherever scrollbars are not overlaid, and the
+ * split layout fits the viewport, so it gives the gutter back.
+ */
+@media (min-width: 64rem) {
+  html[data-layout='auth'] {
+    scrollbar-gutter: auto;
+  }
+}
+</style>
diff --git a/apps/web/app/pages/(auth)/login.vue b/apps/web/app/pages/(auth)/login.vue
index 4f2e66c5..3078b02d 100644
--- a/apps/web/app/pages/(auth)/login.vue
+++ b/apps/web/app/pages/(auth)/login.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="panel w-full max-w-88 p-6">
+  <section class="w-full">
     <h1 class="m-0 text-lg font-650 tracking-tight">{{ $t('auth.login.title') }}</h1>
     <p class="mb-6 mt-1 text-xs text-muted">{{ $t('auth.login.subtitle') }}</p>
 
diff --git a/apps/web/app/pages/(auth)/signup.vue b/apps/web/app/pages/(auth)/signup.vue
index d4f99ed2..4b880e33 100644
--- a/apps/web/app/pages/(auth)/signup.vue
+++ b/apps/web/app/pages/(auth)/signup.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="panel w-full max-w-88 p-6">
+  <section class="w-full">
     <h1 class="m-0 text-lg font-650 tracking-tight">{{ $t('auth.signup.title') }}</h1>
     <p class="mb-6 mt-1 text-xs text-muted">{{ $t('auth.login.subtitle') }}</p>
 
diff --git a/apps/web/app/pages/device.vue b/apps/web/app/pages/device.vue
index 7a88c3e3..6da18d0c 100644
--- a/apps/web/app/pages/device.vue
+++ b/apps/web/app/pages/device.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="panel w-full max-w-88 p-6">
+  <section class="w-full">
     <h1 class="m-0 text-lg font-650 tracking-tight">
       {{ stage === 'confirm' ? $t('auth.device.confirmTitle') : $t('auth.device.title') }}
     </h1>
diff --git a/apps/web/app/pages/invite.vue b/apps/web/app/pages/invite.vue
index 442efabd..fee3d511 100644
--- a/apps/web/app/pages/invite.vue
+++ b/apps/web/app/pages/invite.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="panel w-full max-w-88 p-6">
+  <section class="w-full">
     <h1 class="m-0 text-lg font-650 tracking-tight">{{ $t('auth.invite.title') }}</h1>
     <p v-if="organizationName" class="mb-6 mt-1 text-xs text-muted">{{ organizationName }}</p>
 
diff --git a/apps/web/public/logo-mark.svg b/apps/web/public/logo-mark.svg
new file mode 100644
index 00000000..20853028
--- /dev/null
+++ b/apps/web/public/logo-mark.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"
+     width="64" height="64" class="cz" role="img" aria-label="Code Zero">
+  <title>Code Zero</title>
+  <style>
+    .cz .ink{fill:var(--cz-ink,#EFF3EE)}
+    .cz .ink-s{stroke:var(--cz-ink,#EFF3EE)}
+    .cz .acc{fill:var(--cz-accent,#84E04F)}
+    @media (prefers-color-scheme: light){
+      .cz .ink{fill:var(--cz-ink,#0B140E)}
+      .cz .ink-s{stroke:var(--cz-ink,#0B140E)}
+      .cz .acc{fill:var(--cz-accent,#026C00)}
+    }
+  </style>
+  <defs>
+    <mask id="cutm" maskUnits="userSpaceOnUse"
+          x="-4.326" y="-23.04" width="72.653" height="110.08">
+      <rect x="-4.326" y="-23.04" width="72.653" height="110.08" fill="#fff"/>
+      <g fill="#000"><rect x="-9.28" y="27.467" width="82.56" height="9.066" transform="rotate(-62 32 32)"/></g>
+    </mask>
+    <clipPath id="clipm"><path d="M13.198,22.643A18.802,18.802 0 0 1 50.802,22.643L50.802,41.357A18.802,18.802 0 0 1 13.198,41.357Z"/></clipPath>
+  </defs>
+  <g mask="url(#cutm)" fill="none" stroke-width="6.385">
+    <path class="ink-s" d="M32,7.672A14.971,14.971 0 0 1 46.971,22.643L46.971,41.357A14.971,14.971 0 0 1 17.029,41.357L17.029,22.643A14.971,14.971 0 0 1 32,7.672Z" stroke="#EFF3EE"/>
+  </g>
+  <g class="acc" clip-path="url(#clipm)" fill="#84E04F"><rect x="-9.28" y="29.382" width="82.56" height="5.235" transform="rotate(-62 32 32)"/></g>
+</svg>
diff --git a/packages/i18n/locales/en/auth.json b/packages/i18n/locales/en/auth.json
index ce7d67b8..6aa19fd5 100644
--- a/packages/i18n/locales/en/auth.json
+++ b/packages/i18n/locales/en/auth.json
@@ -76,6 +76,11 @@
       "EMAIL_MISMATCH": "That invitation was issued for a different email address.",
       "SEAT_LIMIT_REACHED": "That organization has no seats left.",
       "ORG_DISABLED": "That organization is currently disabled."
+    },
+    "brand": {
+      "label": "About Code Zero",
+      "title": "Every change, backed by evidence.",
+      "description": "Review pull requests, verify fixes and keep control of what your agents can change. Open source, ready to self-host."
     }
   }
 }
diff --git a/packages/i18n/locales/it/auth.json b/packages/i18n/locales/it/auth.json
index 6ffa0e3c..c6efa024 100644
--- a/packages/i18n/locales/it/auth.json
+++ b/packages/i18n/locales/it/auth.json
@@ -76,6 +76,11 @@
       "EMAIL_MISMATCH": "Questo invito è stato emesso per un altro indirizzo email.",
       "SEAT_LIMIT_REACHED": "Questa organizzazione non ha più posti disponibili.",
       "ORG_DISABLED": "Questa organizzazione è attualmente disabilitata."
+    },
+    "brand": {
+      "label": "Informazioni su Code Zero",
+      "title": "Ogni modifica, verificata.",
+      "description": "Esamina le pull request, verifica le correzioni e mantieni il controllo sulle modifiche degli agenti. Open source, pronto per il self hosting."
     }
   }
 }
diff --git a/packages/i18n/schemas/auth.schema.json b/packages/i18n/schemas/auth.schema.json
index 40311af5..99ec44c0 100644
--- a/packages/i18n/schemas/auth.schema.json
+++ b/packages/i18n/schemas/auth.schema.json
@@ -234,6 +234,21 @@
             }
           },
           "additionalProperties": false
+        },
+        "brand": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string"
+            },
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false
diff --git a/packages/ui/DESIGN.md b/packages/ui/DESIGN.md
index 7b21383b..58e98b6f 100644
--- a/packages/ui/DESIGN.md
+++ b/packages/ui/DESIGN.md
@@ -15,7 +15,11 @@ pull request and say why.
 
 - Corners are square. `rounded-full` is allowed only for status dots and avatars.
 - No drop shadows and no decorative gradients. Depth comes from `canvas` → `panel` → `raised` and a
-  `line` border. The page grid (`--cz-grid`) and the marketing hero halo are the only gradients.
+  `line` border. The page grid (`--cz-grid`), marketing hero halo, and authentication checkerboard
+  are the registered background textures. The auth checkerboard uses the shared accent palette
+  to reproduce the supplied reference.
+
+The authentication layout uses the existing Code Zero mark in a monochrome accent treatment.
 
 ## Type
 
@@ -26,6 +30,7 @@ pull request and say why.
 
 ## Density
 
+- Authentication forms use 44 px controls and sentence-case 14 px labels to match the login reference.
 - The dashboard is dense: 36 px controls (`h-9`), `text-xs` body in panels.
 - The marketing site is comfortable: 44 px primary controls (`h-11`), `text-sm` and up.
 - Shared shortcuts (`panel`, `mono`, `focus-ring`, `btn-subtle`, `btn-accent`, `btn-icon`,