From 93b234d3805b5888d856e89712fe1f621d5b6ef2 Mon Sep 17 00:00:00 2001
From: scotej <134114466+scotej@users.noreply.github.com>
Date: Sat, 25 Jul 2026 22:49:14 +1000
Subject: [PATCH] feat(friends): cardstock texture behind the add-friend dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A whisper-quiet graph-paper grid on the 24px section rhythm plus a
faint accent wash from the top edge, defined once in index.css as
.texture-cardstock and built entirely from the live theme variables so
both themes flow through. Static background only — §6 motion rules and
the reduce-motion kill switch are untouched. DESIGN-SYSTEM §5 records
the sanctioned deviation.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 DESIGN-SYSTEM.md                             |  2 ++
 src/design/index.css                         | 34 ++++++++++++++++++++
 src/features/friends/AddFriendDialogView.tsx |  2 +-
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/DESIGN-SYSTEM.md b/DESIGN-SYSTEM.md
index 083606a..1060727 100644
--- a/DESIGN-SYSTEM.md
+++ b/DESIGN-SYSTEM.md
@@ -325,6 +325,8 @@ Three modes wired through the same token map:
 
 Theme switch is purely a re-render of the variable layer; component logic does not branch on theme.
 
+One sanctioned static texture exists: `.texture-cardstock` (`src/design/index.css`), a whisper-quiet graph-paper grid + top wash derived entirely from the live theme variables, used on the add-friend dialog surface (user-requested, 2026-07). It is a static background layer — §6's "no decorative motion" rules are untouched. Any further decorative surface remains a §7-rule-3 discussion, not a copy-paste.
+
 ## 6. Motion
 
 Use motion only when it serves comprehension. Five permitted uses:
diff --git a/src/design/index.css b/src/design/index.css
index ca6ee91..63d61f7 100644
--- a/src/design/index.css
+++ b/src/design/index.css
@@ -229,3 +229,37 @@
     scroll-behavior: auto !important;
   }
 }
+
+@layer components {
+  /* Sanctioned static texture (DESIGN-SYSTEM.md §5 note): a graph-paper
+     grid on the section spacing rhythm plus a faint warm wash bleeding
+     down from the top edge. Applied to the add-friend dialog surface.
+     Everything derives from the live theme variables, so both themes and
+     any future palette edit flow through untouched; it is a background
+     layer only — no motion, so §6 and the reduce-motion kill switch are
+     unaffected. Keep the color-mix strengths whisper-quiet: the contrast
+     gate (scripts/check-contrast.ts) compares token pairs, not rendered
+     layers, so a louder grid behind text-muted would slip past CI. */
+  .texture-cardstock {
+    background-image:
+      radial-gradient(
+        120% 60% at 50% 0%,
+        color-mix(in srgb, var(--accent-muted) 10%, transparent),
+        transparent 70%
+      ),
+      linear-gradient(
+        to right,
+        color-mix(in srgb, var(--border-subtle) 55%, transparent) 1px,
+        transparent 1px
+      ),
+      linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--border-subtle) 55%, transparent) 1px,
+        transparent 1px
+      );
+    background-size:
+      100% 100%,
+      24px 24px,
+      24px 24px;
+  }
+}
diff --git a/src/features/friends/AddFriendDialogView.tsx b/src/features/friends/AddFriendDialogView.tsx
index 707c955..abb7fc8 100644
--- a/src/features/friends/AddFriendDialogView.tsx
+++ b/src/features/friends/AddFriendDialogView.tsx
@@ -132,7 +132,7 @@ export function AddFriendDialogView({
           window minimum — the dialog is fixed-centered, so without it
           overflow clips equally off both screen edges with nothing to
           scroll (title, footer and close button all become unreachable). */}
-      <DialogContent className="max-h-[calc(100vh-4rem)] max-w-3xl overflow-y-auto">
+      <DialogContent className="texture-cardstock max-h-[calc(100vh-4rem)] max-w-3xl overflow-y-auto">
         {missingDisplayName ? (
           <MissingDisplayNamePanel onCancel={onCancel} />
         ) : mode === 'legacy' ? (