From fd94e824df3f901cbcb3ac70f3556ce07638d280 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:11:07 +0100
Subject: [PATCH 01/45] refactor(web): align dashboard tokens with Charter
 palette

---
 apps/web/tailwind.config.ts | 38 ++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 9f4d7b5..db2fdcb 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -10,9 +10,9 @@ const config: Config = {
       colors: {
         // Charter palette — deep slate canvas with a restrained teal accent.
         canvas: {
-          DEFAULT: '#0b0f14',
-          raised: '#111823',
-          overlay: '#1a2534',
+          DEFAULT: '#EEEBE2',
+          raised: '#FBFAF6',
+          overlay: '#E2DED3',
         },
         // Primary ink. CSS-variable-backed so each root layout owns its value:
         // the dashboard falls back to its light-on-dark text, while the
@@ -21,24 +21,24 @@ const config: Config = {
         // (#e6edf3 / #8b98a9 / #5a6675), so omitting the variable — as the
         // dashboard does — renders it identically.
         ink: {
-          DEFAULT: 'rgb(var(--color-ink, 230 237 243) / <alpha-value>)',
-          muted: 'rgb(var(--color-ink-muted, 139 152 169) / <alpha-value>)',
-          faint: 'rgb(var(--color-ink-faint, 90 102 117) / <alpha-value>)',
+          DEFAULT: 'rgb(var(--color-ink, 20 23 31) / <alpha-value>)',
+          muted: 'rgb(var(--color-ink-muted, 76 78 82) / <alpha-value>)',
+          faint: 'rgb(var(--color-ink-faint, 112 110 103) / <alpha-value>)',
         },
         accent: {
-          DEFAULT: '#2dd4bf',
-          hover: '#5eead4',
-          muted: '#134e4a',
+          DEFAULT: '#D8A93B',
+          hover: '#E2B84F',
+          muted: '#F0DFB2',
         },
         // Info semantic — for neutral status (pending requests, informational badges)
         info: {
-          DEFAULT: '#60a5fa',
-          muted: '#1e3a5f',
+          DEFAULT: '#9A7218',
+          muted: '#F0DFB2',
         },
-        line: '#1e2a3a',
-        danger: '#f87171',
-        warn: '#fbbf24',
-        ok: '#34d399',
+        line: '#14171F',
+        danger: '#B8462F',
+        warn: '#9A7218',
+        ok: '#3F8F5F',
         // Marketing (landing) palette — soft rounded neo-brutalism on light
         // paper. Additive: the dashboard never references these tokens. Gold is
         // the only decorative color; green and red are state-only. The footer
@@ -51,10 +51,10 @@ const config: Config = {
       },
       // Custom shadows for depth and glow effects
       boxShadow: {
-        'inner-highlight': 'inset 0 1px 0 rgba(255, 255, 255, 0.03)',
-        'glow-accent': '0 0 12px rgba(45, 212, 191, 0.2)',
-        'glow-warn': '0 0 8px rgba(251, 191, 36, 0.4)',
-        'glow-danger': '0 0 12px rgba(248, 113, 113, 0.15)',
+        'inner-highlight': 'none',
+        'glow-accent': 'none',
+        'glow-warn': 'none',
+        'glow-danger': 'none',
         // Neo-brutalist offset shadows for the marketing surfaces: a hard ink
         // edge with no blur. Hover collapses the 4px offset toward the surface.
         brutal: '4px 4px 0 #14171F',

From 20a15bbd81b9aeab154883e35e77508c1d6685a8 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:14:44 +0100
Subject: [PATCH 02/45] refactor(web): adopt Charter typography in app shell

---
 apps/web/app/(app)/layout.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index 8c86e4a..2fb2760 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Inter, JetBrains_Mono } from 'next/font/google';
+import { IBM_Plex_Mono, Inter, Space_Grotesk } from 'next/font/google';
 import type { ReactNode } from 'react';
 
 import { SiteHeader } from '@/components/site-header';
@@ -9,14 +9,23 @@ import '../globals.css';
 // One sans family, one mono. The mono carries addresses, hashes, and amounts —
 // anything where character alignment aids scanning; the sans carries everything
 // else. Both are wired to the CSS variables globals.css references.
-const sans = Inter({
+const display = Space_Grotesk({
   subsets: ['latin'],
-  variable: '--font-sans',
+  weight: ['700'],
+  variable: '--font-display',
   display: 'swap',
 });
 
-const mono = JetBrains_Mono({
+const body = Inter({
   subsets: ['latin'],
+  weight: ['400', '500'],
+  variable: '--font-body',
+  display: 'swap',
+});
+
+const mono = IBM_Plex_Mono({
+  subsets: ['latin'],
+  weight: ['500'],
   variable: '--font-mono',
   display: 'swap',
 });
@@ -29,8 +38,8 @@ export const metadata: Metadata = {
 
 export default function AppLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={`${sans.variable} ${mono.variable}`}>
-      <body className="min-h-screen">
+    <html lang="en" className={`app-root ${display.variable} ${body.variable} ${mono.variable}`}>
+      <body className="min-h-screen font-body">
         <Providers>
           <SiteHeader />
           <main className="mx-auto w-full max-w-6xl px-6 py-10">{children}</main>

From cd968c6c410babc8e28da83ae7bfe068eab6ebb5 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:16:16 +0100
Subject: [PATCH 03/45] refactor(web): switch app root to light paper theme

---
 apps/web/app/globals.css | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 5f62651..0ef56e5 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -3,18 +3,25 @@
 @tailwind utilities;
 
 :root {
-  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-display: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
 }
 
 html {
-  color-scheme: dark;
+  color-scheme: light;
 }
 
 body {
   @apply bg-canvas text-ink antialiased;
 }
 
+.app-root {
+  --color-ink: 20 23 31;
+  --color-ink-muted: 76 78 82;
+  --color-ink-faint: 112 110 103;
+}
+
 /* The marketing (landing) group opts into the light neo-brutalist theme. It
    owns its own <html>/<body> via the (marketing) route group, so scoping the
    override to this class leaves the dashboard's dark defaults untouched.
@@ -98,16 +105,16 @@ dialog[open]::backdrop {
   }
 }
 
-/* Thin, unobtrusive scrollbars that match the dark canvas. */
+/* Thin scrollbars that sit quietly against the warm paper canvas. */
 * {
   scrollbar-width: thin;
-  scrollbar-color: #1e2a3a transparent;
+  scrollbar-color: #14171f transparent;
 }
 *::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 *::-webkit-scrollbar-thumb {
-  background-color: #1e2a3a;
+  background-color: #14171f;
   border-radius: 4px;
 }

From 91b95257f87bf0fbef96b9c2dc418b63d38fa6bf Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:18:57 +0100
Subject: [PATCH 04/45] refactor(web): remove gradient from loading shimmer

---
 apps/web/app/globals.css | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 0ef56e5..30ee38d 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -51,19 +51,16 @@ body {
 .shimmer::after {
   content: '';
   position: absolute;
-  inset: 0;
+  inset-block: 0;
+  left: 0;
+  width: 35%;
   transform: translateX(-100%);
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.04) 50%,
-    transparent 100%
-  );
+  background: rgb(251 250 246 / 0.72);
   animation: shimmer 1.6s ease-in-out infinite;
 }
 @keyframes shimmer {
   100% {
-    transform: translateX(100%);
+    transform: translateX(390%);
   }
 }
 
@@ -101,7 +98,7 @@ dialog[open]::backdrop {
 @media (prefers-reduced-transparency: reduce) {
   dialog[open]::backdrop {
     backdrop-filter: none;
-    background-color: rgb(11 15 20 / 0.92);
+    background-color: rgb(20 23 31 / 0.82);
   }
 }
 

From 4c7cf9055bffa93aa1190e571be34461b19bf67e Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:20:10 +0100
Subject: [PATCH 05/45] feat(web): add accessible dashboard content frame

---
 apps/web/app/(app)/layout.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index 2fb2760..e2eb929 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -41,8 +41,19 @@ export default function AppLayout({ children }: { children: ReactNode }) {
     <html lang="en" className={`app-root ${display.variable} ${body.variable} ${mono.variable}`}>
       <body className="min-h-screen font-body">
         <Providers>
+          <a
+            href="#app-content"
+            className="sr-only rounded-card border-2 border-ink bg-ledger-gold px-4 py-2 font-medium text-ink shadow-brutal focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-modal"
+          >
+            Skip to dashboard content
+          </a>
           <SiteHeader />
-          <main className="mx-auto w-full max-w-6xl px-6 py-10">{children}</main>
+          <main
+            id="app-content"
+            className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 sm:py-10 lg:px-8 lg:py-12"
+          >
+            {children}
+          </main>
         </Providers>
       </body>
     </html>

From 4581189fdfdef6f56229d48b38c15b284bb843b7 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:21:12 +0100
Subject: [PATCH 06/45] refactor(web): restyle dashboard header surface

---
 apps/web/components/site-header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/site-header.tsx b/apps/web/components/site-header.tsx
index 4cc111b..6cf70ed 100644
--- a/apps/web/components/site-header.tsx
+++ b/apps/web/components/site-header.tsx
@@ -11,8 +11,8 @@ import { WalletButton } from './wallet-button';
 
 export function SiteHeader() {
   return (
-    <header className="sticky top-0 z-sticky border-b border-line bg-gradient-to-b from-canvas/95 to-canvas/75 backdrop-blur">
-      <div className="mx-auto flex h-14 w-full max-w-6xl items-center justify-between px-6">
+    <header className="sticky top-0 z-sticky border-b-2 border-ink bg-paper-raised">
+      <div className="mx-auto flex min-h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 py-2 sm:px-6 lg:px-8">
         <Link
           href="/app"
           className="group inline-flex items-center gap-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"

From 1f32f10da1e449155e3a1faefa643cb82147f01f Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:23:12 +0100
Subject: [PATCH 07/45] refactor(web): give app header a Charter wordmark

---
 apps/web/components/site-header.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/site-header.tsx b/apps/web/components/site-header.tsx
index 6cf70ed..f6aff55 100644
--- a/apps/web/components/site-header.tsx
+++ b/apps/web/components/site-header.tsx
@@ -15,14 +15,12 @@ export function SiteHeader() {
       <div className="mx-auto flex min-h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 py-2 sm:px-6 lg:px-8">
         <Link
           href="/app"
-          className="group inline-flex items-center gap-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+          className="group inline-flex items-center gap-2.5 rounded-badge focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper-raised"
         >
-          <span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-accent-muted text-accent">
-            <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="currentColor" aria-hidden>
-              <path d="M8 1 2 4v4c0 3.3 2.6 6.3 6 7 3.4-.7 6-3.7 6-7V4L8 1zm0 2.2 4 2v2.8c0 2.3-1.7 4.4-4 5-2.3-.6-4-2.7-4-5V5.2l4-2z" />
-            </svg>
+          <span className="inline-flex h-9 w-9 items-center justify-center rounded-badge border-2 border-ink bg-ledger-gold font-display text-base text-ink shadow-[2px_2px_0_#14171F] transition-transform duration-150 group-hover:translate-x-0.5 group-hover:translate-y-0.5">
+            C
           </span>
-          <span className="text-sm font-semibold tracking-tight text-ink">Charter</span>
+          <span className="font-display text-lg text-ink">Charter</span>
         </Link>
 
         <WalletButton />

From 73a52a49a88e74b4be6c5c50ff2d985c592ccaee Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:24:34 +0100
Subject: [PATCH 08/45] feat(web): add dashboard and docs header links

---
 apps/web/components/site-header.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/site-header.tsx b/apps/web/components/site-header.tsx
index f6aff55..0e95f52 100644
--- a/apps/web/components/site-header.tsx
+++ b/apps/web/components/site-header.tsx
@@ -23,7 +23,23 @@ export function SiteHeader() {
           <span className="font-display text-lg text-ink">Charter</span>
         </Link>
 
-        <WalletButton />
+        <div className="flex items-center gap-2 sm:gap-3">
+          <Link
+            href="/app"
+            className="hidden rounded-badge px-3 py-2 text-sm font-medium text-ink-muted transition-colors hover:bg-canvas-overlay hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink sm:inline-flex"
+          >
+            Organizations
+          </Link>
+          <a
+            href="https://chusdrter.gitbook.io/chusdrter-docs"
+            target="_blank"
+            rel="noreferrer"
+            className="hidden rounded-badge px-3 py-2 text-sm font-medium text-ink-muted transition-colors hover:bg-canvas-overlay hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink sm:inline-flex"
+          >
+            Docs <span aria-hidden className="ml-1">↗</span>
+          </a>
+          <WalletButton />
+        </div>
       </div>
     </header>
   );

From b68df53f761bea3ac99e591aaf1cb4e803e5f822 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:25:45 +0100
Subject: [PATCH 09/45] refactor(web): restyle wallet connect action

---
 apps/web/components/wallet-button.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/wallet-button.tsx b/apps/web/components/wallet-button.tsx
index a5e9c22..f7b8b8a 100644
--- a/apps/web/components/wallet-button.tsx
+++ b/apps/web/components/wallet-button.tsx
@@ -31,10 +31,11 @@ export function WalletButton() {
           onClick={() => void connect()}
           disabled={connecting}
           className={cn(
-            'inline-flex h-9 items-center gap-2 rounded-lg px-4 text-sm font-medium',
-            'bg-accent text-canvas transition-colors duration-150',
-            'hover:bg-accent-hover',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas',
+            'inline-flex min-h-10 items-center gap-2 rounded-card border-2 border-ink px-4 text-sm font-medium',
+            'bg-ledger-gold text-ink shadow-brutal transition-[background-color,box-shadow,transform] duration-150',
+            'hover:bg-accent-hover hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-brutal-pressed',
+            'active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-pressed',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper-raised',
             'disabled:cursor-not-allowed disabled:opacity-60',
           )}
         >

From 48635ddacb6c7ca9df38ab1f3c453c40d16237be Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:27:06 +0100
Subject: [PATCH 10/45] refactor(web): restyle connected wallet control

---
 apps/web/components/wallet-button.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/wallet-button.tsx b/apps/web/components/wallet-button.tsx
index f7b8b8a..38c9138 100644
--- a/apps/web/components/wallet-button.tsx
+++ b/apps/web/components/wallet-button.tsx
@@ -75,15 +75,17 @@ function AccountPill({ address, network }: { address: string; network: string })
         type="button"
         popoverTarget={popoverId}
         className={cn(
-          'inline-flex h-9 items-center gap-2 rounded-lg border border-line px-3 text-sm',
-          'bg-canvas-raised text-ink transition-colors duration-150',
-          'hover:border-accent-muted hover:bg-canvas-overlay',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas',
+          'inline-flex min-h-10 items-center gap-2 rounded-card border-2 border-ink px-3 text-sm',
+          'bg-paper-raised text-ink shadow-brutal transition-[background-color,box-shadow,transform] duration-150',
+          'hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-brutal-pressed',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper-raised',
         )}
       >
-        <span className="inline-flex h-1.5 w-1.5 rounded-full bg-ok" aria-hidden />
+        <span className="inline-flex h-2 w-2 rounded-full border border-ink bg-signal-green" aria-hidden />
         <span className="font-mono text-ink">{truncateAddress(address)}</span>
-        <span className="hidden text-xs text-ink-faint sm:inline">{network}</span>
+        <span className="hidden rounded-pill border-2 border-ink px-2 py-0.5 text-[10px] font-medium text-ink-muted sm:inline">
+          {network}
+        </span>
       </button>
 
       <div

From 2b62dcdf08d9360fd922710a31d9d1d0fef2cf9f Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:28:47 +0100
Subject: [PATCH 11/45] refactor(web): rebuild wallet account popover

---
 apps/web/components/wallet-button.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/wallet-button.tsx b/apps/web/components/wallet-button.tsx
index 38c9138..df64969 100644
--- a/apps/web/components/wallet-button.tsx
+++ b/apps/web/components/wallet-button.tsx
@@ -92,22 +92,22 @@ function AccountPill({ address, network }: { address: string; network: string })
         popover="auto"
         id={popoverId}
         className={cn(
-          'mt-2 w-64 rounded-xl border border-line bg-canvas-raised p-3 text-sm shadow-2xl',
+          'mt-2 w-72 rounded-card border-2 border-ink bg-paper-raised p-4 text-sm shadow-brutal',
           // Anchor to the trigger's right edge; the popover sits in the top layer
           // so it is never clipped by the header.
-          'inset-[unset] right-4 top-14 left-[unset]',
+          'inset-[unset] right-4 top-16 left-[unset]',
         )}
       >
-        <p className="text-xs uppercase tracking-wide text-ink-faint">Connected account</p>
-        <p className="mt-1 break-all font-mono text-xs text-ink-muted">{address}</p>
+        <p className="font-display text-base text-ink">Connected account</p>
+        <p className="mt-2 break-all font-mono text-xs leading-relaxed text-ink-muted">{address}</p>
         <div className="mt-3 flex items-center gap-2">
           <button
             type="button"
             onClick={() => void copy()}
             className={cn(
-              'inline-flex h-8 flex-1 items-center justify-center rounded-lg border border-line px-3 text-xs font-medium text-ink',
-              'transition-colors duration-150 hover:bg-canvas-overlay',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent',
+              'inline-flex h-9 flex-1 items-center justify-center rounded-card border-2 border-ink bg-paper-raised px-3 text-xs font-medium text-ink shadow-[2px_2px_0_#14171F]',
+              'transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink',
             )}
           >
             {copied ? 'Copied' : 'Copy address'}
@@ -116,8 +116,8 @@ function AccountPill({ address, network }: { address: string; network: string })
             type="button"
             onClick={() => void disconnect()}
             className={cn(
-              'inline-flex h-8 flex-1 items-center justify-center rounded-lg px-3 text-xs font-medium',
-              'text-danger transition-colors duration-150 hover:bg-danger/10',
+              'inline-flex h-9 flex-1 items-center justify-center rounded-card border-2 border-ink bg-paper-raised px-3 text-xs font-medium shadow-[2px_2px_0_#14171F]',
+              'text-danger transition-[background-color,box-shadow,transform] duration-150 hover:bg-danger/10 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none',
               'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger',
             )}
           >

From 37f1bab809503e3db07e126bd1dc9310be8ec395 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:30:44 +0100
Subject: [PATCH 12/45] refactor(web): restyle shared text inputs

---
 apps/web/components/form.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/form.tsx b/apps/web/components/form.tsx
index 2c1df8d..57325a5 100644
--- a/apps/web/components/form.tsx
+++ b/apps/web/components/form.tsx
@@ -35,12 +35,12 @@ export function FieldError({ children }: { children: ReactNode }) {
 /** The shared input treatment: dark surface, accent focus ring, mono opt-in. */
 const inputClass = (mono?: boolean, invalid?: boolean) =>
   cn(
-    'mt-1.5 block w-full rounded-lg border bg-canvas-raised px-3 py-2 text-sm text-ink placeholder:text-ink-faint',
-    'transition-colors duration-150',
-    'focus:outline-none focus:ring-1',
+    'mt-2 block min-h-11 w-full rounded-badge border-2 bg-paper-raised px-3.5 py-2.5 text-sm text-ink placeholder:text-ink-faint',
+    'transition-[background-color,box-shadow] duration-150',
+    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-paper',
     invalid
-      ? 'border-danger/60 focus:border-danger focus:ring-danger'
-      : 'border-line hover:border-accent-muted focus:border-accent focus:ring-accent',
+      ? 'border-danger focus:border-danger focus:ring-danger'
+      : 'border-ink hover:bg-white focus:border-ink focus:ring-ledger-gold',
     'disabled:cursor-not-allowed disabled:opacity-50',
     mono && 'font-mono',
   );

From e8d63da5d6a24326bfe268acae96921014103502 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:33:08 +0100
Subject: [PATCH 13/45] refactor(web): restyle shared select controls

---
 apps/web/components/form.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/form.tsx b/apps/web/components/form.tsx
index 57325a5..da5b23a 100644
--- a/apps/web/components/form.tsx
+++ b/apps/web/components/form.tsx
@@ -96,7 +96,7 @@ export function Select({
   children: ReactNode;
 }) {
   return (
-    <div className="relative mt-1.5">
+    <div className="relative mt-2">
       <select
         id={id}
         value={value}
@@ -104,12 +104,12 @@ export function Select({
         disabled={disabled}
         aria-invalid={invalid || undefined}
         className={cn(
-          'block w-full appearance-none rounded-lg border bg-canvas-raised py-2 pl-3 pr-9 text-sm text-ink',
-          'transition-colors duration-150',
-          'focus:outline-none focus:ring-1',
+          'block min-h-11 w-full appearance-none rounded-badge border-2 bg-paper-raised py-2.5 pl-3.5 pr-10 text-sm text-ink',
+          'transition-[background-color,box-shadow] duration-150',
+          'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-paper',
           invalid
-            ? 'border-danger/60 focus:border-danger focus:ring-danger'
-            : 'border-line hover:border-accent-muted focus:border-accent focus:ring-accent',
+            ? 'border-danger focus:border-danger focus:ring-danger'
+            : 'border-ink hover:bg-white focus:border-ink focus:ring-ledger-gold',
           'disabled:cursor-not-allowed disabled:opacity-50',
         )}
       >

From ff12a3f1c1047a09f863aa3920e065c51a906a8d Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:35:07 +0100
Subject: [PATCH 14/45] refactor(web): restyle shared action buttons

---
 apps/web/components/form.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/form.tsx b/apps/web/components/form.tsx
index da5b23a..8769a56 100644
--- a/apps/web/components/form.tsx
+++ b/apps/web/components/form.tsx
@@ -147,9 +147,9 @@ export function PrimaryButton({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        'inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-accent px-5 text-sm font-medium text-canvas',
-        'transition-[background-color,transform] duration-150 hover:bg-accent-hover active:translate-y-[0.5px]',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas',
+        'inline-flex min-h-10 items-center justify-center gap-2 rounded-card border-2 border-ink bg-ledger-gold px-5 text-sm font-medium text-ink shadow-brutal',
+        'transition-[background-color,box-shadow,transform] duration-150 hover:bg-accent-hover hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-brutal-pressed active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-pressed',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper',
         'disabled:cursor-not-allowed disabled:opacity-60',
       )}
     >
@@ -179,9 +179,9 @@ export function SecondaryButton({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        'inline-flex h-9 items-center justify-center rounded-lg border border-line px-4 text-sm font-medium text-ink',
-        'transition-[color,background-color,border-color,transform] duration-150 hover:border-accent-muted hover:bg-canvas-overlay active:translate-y-[0.5px]',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas',
+        'inline-flex min-h-10 items-center justify-center rounded-card border-2 border-ink bg-paper-raised px-4 text-sm font-medium text-ink shadow-brutal',
+        'transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-brutal-pressed active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-pressed',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper',
         'disabled:cursor-not-allowed disabled:opacity-50',
       )}
     >

From 2655d7afc02026511390ef3a4e23d31e16be8697 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:37:45 +0100
Subject: [PATCH 15/45] refactor(web): rebuild loading and empty state surfaces

---
 apps/web/components/states.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/states.tsx b/apps/web/components/states.tsx
index e08d620..320e062 100644
--- a/apps/web/components/states.tsx
+++ b/apps/web/components/states.tsx
@@ -44,13 +44,13 @@ function Panel({
   tone?: 'neutral' | 'danger';
 }) {
   return (
-    <div className="flex flex-col items-center gap-4 rounded-xl border border-line bg-canvas-raised px-6 py-14 text-center">
+    <div className="flex flex-col items-center gap-4 rounded-card border-2 border-ink bg-paper-raised px-6 py-14 text-center shadow-brutal">
       <span
         className={cn(
-          'inline-flex h-12 w-12 items-center justify-center rounded-full ring-1 ring-inset',
+          'inline-flex h-12 w-12 items-center justify-center rounded-badge border-2 border-ink',
           tone === 'danger'
-            ? 'bg-danger/10 text-danger ring-danger/20 shadow-glow-danger'
-            : 'bg-accent-muted text-accent ring-accent/20 shadow-glow-accent',
+            ? 'bg-flag-red/10 text-flag-red'
+            : 'bg-ledger-gold text-ink',
         )}
       >
         {icon}
@@ -126,9 +126,9 @@ export function ErrorState({
         type="button"
         onClick={onRetry}
         className={cn(
-          'inline-flex h-9 items-center rounded-lg border border-line px-4 text-sm font-medium text-ink',
-          'transition-colors duration-150 hover:border-accent-muted hover:bg-canvas-overlay',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas',
+          'inline-flex min-h-10 items-center rounded-card border-2 border-ink bg-paper-raised px-4 text-sm font-medium text-ink shadow-brutal',
+          'transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-brutal-pressed',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper',
         )}
       >
         Try again

From 0ed33c11414b5bfb0328e43beffb6c535a9cc890 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:40:36 +0100
Subject: [PATCH 16/45] refactor(web): rebuild modal dialog surface

---
 apps/web/components/modal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/modal.tsx b/apps/web/components/modal.tsx
index 62fa98c..a93a1a5 100644
--- a/apps/web/components/modal.tsx
+++ b/apps/web/components/modal.tsx
@@ -59,12 +59,12 @@ export function Modal({
       }}
       aria-labelledby="modal-title"
       aria-describedby={description ? 'modal-description' : undefined}
-      className="z-modal m-auto w-full max-w-md rounded-2xl border border-line bg-canvas-raised p-0 text-ink shadow-2xl backdrop:bg-canvas/70 backdrop:backdrop-blur-sm"
+      className="z-modal m-auto w-[calc(100%-2rem)] max-w-md rounded-card border-2 border-ink bg-paper-raised p-0 text-ink shadow-brutal backdrop:bg-ink/55"
     >
       <div className="p-6" onClick={(e) => e.stopPropagation()}>
         <div className="mb-5 flex items-start justify-between gap-4">
           <div className="space-y-1">
-            <h2 id="modal-title" className="text-base font-semibold text-ink">
+            <h2 id="modal-title" className="font-display text-xl text-ink">
               {title}
             </h2>
             {description && (
@@ -77,7 +77,7 @@ export function Modal({
             type="button"
             onClick={onClose}
             aria-label="Close"
-            className="-mr-1 -mt-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-ink-faint transition-colors duration-150 hover:bg-canvas-overlay hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-badge border-2 border-ink bg-paper-raised text-ink shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink"
           >
             <svg viewBox="0 0 16 16" className="h-4 w-4" fill="none" aria-hidden>
               <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />

From f35f1ab449b43fc265e5f6951f353c18b60c2fc4 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:43:26 +0100
Subject: [PATCH 17/45] refactor(web): align request badges with semantic
 palette

---
 apps/web/components/request-status-badge.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/request-status-badge.tsx b/apps/web/components/request-status-badge.tsx
index e712e17..64acd91 100644
--- a/apps/web/components/request-status-badge.tsx
+++ b/apps/web/components/request-status-badge.tsx
@@ -13,10 +13,10 @@ import type { RequestStatus } from '../lib/indexer';
 import { cn } from '../lib/format';
 
 const STYLES: Record<RequestStatus, string> = {
-  Pending: 'border-info/30 bg-info/10 text-info',
-  Executed: 'border-ok/30 bg-ok/10 text-ok',
-  Rejected: 'border-danger/30 bg-danger/10 text-danger',
-  Cancelled: 'border-line bg-canvas-overlay text-ink-faint',
+  Pending: 'border-ink bg-ledger-gold/35 text-ink',
+  Executed: 'border-ink bg-signal-green text-white',
+  Rejected: 'border-ink bg-flag-red text-white',
+  Cancelled: 'border-ink bg-canvas-overlay text-ink-muted',
 };
 
 export function RequestStatusBadge({
@@ -29,7 +29,7 @@ export function RequestStatusBadge({
   return (
     <span
       className={cn(
-        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-medium',
+        'inline-flex items-center rounded-pill border-2 px-2.5 py-0.5 text-[11px] font-medium',
         STYLES[status],
         className,
       )}

From b3256a5e1d03eb5eadec1c6227dd75e990ba3b0e Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:46:49 +0100
Subject: [PATCH 18/45] refactor(web): promote threshold meter in request
 progress

---
 apps/web/components/approval-progress.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/approval-progress.tsx b/apps/web/components/approval-progress.tsx
index b46adee..bdce0bc 100644
--- a/apps/web/components/approval-progress.tsx
+++ b/apps/web/components/approval-progress.tsx
@@ -36,16 +36,16 @@ export function ApprovalProgress({
 
   return (
     <span className={cn('inline-flex items-center gap-2', className)}>
-      <span className="flex items-center gap-0.5" aria-hidden>
+      <span className="flex h-4 items-center gap-0.5 rounded-pill border-2 border-ink bg-paper-raised p-0.5" aria-hidden>
         {Array.from({ length: threshold }).map((_, i) => (
           <span
             key={i}
             className={cn(
-              'h-1.5 w-4 rounded-full transition-colors duration-150',
+              'h-full w-4 first:rounded-l-pill last:rounded-r-pill transition-colors duration-150',
               i < filled
-                ? met
-                  ? 'bg-ok shadow-[0_0_6px_rgba(52,211,153,0.45)]'
-                  : 'bg-accent'
+                ? met && i === threshold - 1
+                  ? 'bg-signal-green'
+                  : 'bg-ledger-gold'
                 : 'bg-canvas-overlay',
             )}
           />

From 6c3f82676466c768a349369b56e41fb6f44fd515 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:48:49 +0100
Subject: [PATCH 19/45] refactor(web): turn addresses into tactile copy
 controls

---
 apps/web/components/copy-address.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/copy-address.tsx b/apps/web/components/copy-address.tsx
index a1a6f0f..63f2f9a 100644
--- a/apps/web/components/copy-address.tsx
+++ b/apps/web/components/copy-address.tsx
@@ -37,9 +37,9 @@ export function CopyAddress({
       title={address}
       aria-label={copied ? 'Address copied' : `Copy address ${address}`}
       className={cn(
-        'group inline-flex items-center gap-1.5 rounded-md font-mono text-ink-muted',
-        'transition-colors duration-150 hover:text-ink',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent',
+        'group inline-flex items-center gap-1.5 rounded-badge border-2 border-ink bg-paper-raised px-2 py-1 font-mono text-xs text-ink-muted',
+        'transition-[background-color,transform] duration-150 hover:bg-canvas-overlay hover:text-ink hover:translate-x-0.5 hover:translate-y-0.5',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink',
         className,
       )}
     >

From 25821752e63bf2dd6be18f07a3520f50cee8a0c9 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:49:49 +0100
Subject: [PATCH 20/45] refactor(web): add treasury orientation banner

---
 apps/web/components/org-directory.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/org-directory.tsx b/apps/web/components/org-directory.tsx
index f5b3a92..76aa405 100644
--- a/apps/web/components/org-directory.tsx
+++ b/apps/web/components/org-directory.tsx
@@ -25,16 +25,16 @@ export function OrgDirectory() {
   return (
     <section>
       {/* Orientation band: one line on what Charter is, for first-time visitors. */}
-      <div className="mb-6 flex items-start gap-3 rounded-xl border border-line bg-canvas-raised px-5 py-4 shadow-inner-highlight">
+      <div className="mb-8 flex items-start gap-4 rounded-card border-2 border-ink bg-ledger-gold px-5 py-5 shadow-brutal sm:px-6">
         <span
-          className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-accent-muted text-accent"
+          className="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-badge border-2 border-ink bg-paper-raised text-ink"
           aria-hidden
         >
           <svg viewBox="0 0 16 16" className="h-4 w-4" fill="currentColor">
             <path d="M8 1 2 4v4c0 3.3 2.6 6.3 6 7 3.4-.7 6-3.7 6-7V4L8 1zm0 2.2 4 2v2.8c0 2.3-1.7 4.4-4 5-2.3-.6-4-2.7-4-5V5.2l4-2z" />
           </svg>
         </span>
-        <p className="text-sm leading-relaxed text-ink-muted">
+        <p className="max-w-3xl text-sm leading-relaxed text-ink">
           <span className="font-medium text-ink">Charter</span> is a treasury operations
           layer for Stellar organizations. Set budget caps, route disbursements through
           approvals, and settle on-chain.

From 0317669cd9a44f7e3ebf8434dfbdde5b59624282 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:50:55 +0100
Subject: [PATCH 21/45] refactor(web): strengthen organization directory
 heading

---
 apps/web/components/org-directory.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/org-directory.tsx b/apps/web/components/org-directory.tsx
index 76aa405..1e3715f 100644
--- a/apps/web/components/org-directory.tsx
+++ b/apps/web/components/org-directory.tsx
@@ -41,16 +41,19 @@ export function OrgDirectory() {
         </p>
       </div>
 
-      <div className="mb-6 flex items-center justify-between">
+      <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
         <div>
-          <h1 className="text-xl font-semibold text-ink">Organizations</h1>
-          <p className="mt-0.5 text-sm text-ink-muted">
-            Stellar treasuries indexed on-chain
+          <p className="mb-2 font-mono text-xs font-medium uppercase tracking-[0.08em] text-ink-muted">
+            Treasury directory
+          </p>
+          <h1 className="font-display text-4xl leading-none text-ink sm:text-[40px]">Organizations</h1>
+          <p className="mt-3 text-sm text-ink-muted">
+            Policy-controlled Stellar treasuries indexed on-chain.
           </p>
         </div>
         <Link
           href="/new"
-          className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-accent px-4 text-sm font-medium text-canvas transition-[background-color,transform] duration-150 hover:bg-accent-hover active:translate-y-[0.5px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+          className="inline-flex min-h-10 items-center gap-1.5 rounded-card border-2 border-ink bg-ledger-gold px-4 text-sm font-medium text-ink shadow-brutal transition-[background-color,box-shadow,transform] duration-150 hover:bg-accent-hover hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-brutal-pressed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper"
         >
           <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" aria-hidden>
             <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />

From 43fc02e3c24503851ab687f1e68b1e19e08050f4 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:52:58 +0100
Subject: [PATCH 22/45] refactor(web): frame organization list as ledger
 surface

---
 apps/web/components/org-directory.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/org-directory.tsx b/apps/web/components/org-directory.tsx
index 1e3715f..6a92449 100644
--- a/apps/web/components/org-directory.tsx
+++ b/apps/web/components/org-directory.tsx
@@ -99,7 +99,7 @@ export function OrgDirectory() {
 
 function OrgList({ orgs }: { orgs: Org[] }) {
   return (
-    <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised shadow-inner-highlight">
+    <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
       {orgs.map((org) => (
         <OrgRow key={org.id} org={org} />
       ))}
@@ -158,7 +158,7 @@ function OrgRow({ org }: { org: Org }) {
 
 function OrgListSkeleton() {
   return (
-    <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised shadow-inner-highlight">
+    <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
       {Array.from({ length: 3 }).map((_, i) => (
         <li key={i} className="flex items-center gap-4 px-6 py-5">
           <Skeleton className="h-9 w-9 shrink-0 rounded-lg" />

From 52260c5331ebeef9923d4e8ef4cd5e803e01e12b Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:55:08 +0100
Subject: [PATCH 23/45] refactor(web): redesign organization ledger rows

---
 apps/web/components/org-directory.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/org-directory.tsx b/apps/web/components/org-directory.tsx
index 6a92449..d507c38 100644
--- a/apps/web/components/org-directory.tsx
+++ b/apps/web/components/org-directory.tsx
@@ -112,11 +112,11 @@ function OrgRow({ org }: { org: Org }) {
     <li>
       <Link
         href={`/org/${org.treasuryAddress}`}
-        className="group flex items-center gap-4 px-6 py-5 transition-colors duration-150 hover:bg-canvas-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent first:rounded-t-xl last:rounded-b-xl"
+        className="group flex items-center gap-4 px-4 py-5 transition-colors duration-150 hover:bg-ledger-gold/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink sm:px-6"
       >
         {/* Org initial avatar */}
         <span
-          className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-accent-muted text-sm font-semibold text-accent"
+          className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-badge border-2 border-ink bg-ledger-gold font-display text-base text-ink shadow-[2px_2px_0_#14171F]"
           aria-hidden
         >
           {org.name.charAt(0).toUpperCase()}
@@ -124,10 +124,10 @@ function OrgRow({ org }: { org: Org }) {
 
         {/* Name + admin */}
         <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-medium text-ink group-hover:text-accent transition-colors duration-150">
+          <p className="truncate font-display text-lg text-ink transition-colors duration-150">
             {org.name}
           </p>
-          <p className="mt-0.5 font-mono text-xs text-ink-faint">
+          <p className="mt-1 font-mono text-xs text-ink-muted">
             {truncateAddress(org.adminAddress)}
           </p>
         </div>

From 7355621b17ab15045379aa99eb05fff4b307e984 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:56:07 +0100
Subject: [PATCH 24/45] refactor(web): match empty directory action styling

---
 apps/web/components/org-directory.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/org-directory.tsx b/apps/web/components/org-directory.tsx
index d507c38..f378eee 100644
--- a/apps/web/components/org-directory.tsx
+++ b/apps/web/components/org-directory.tsx
@@ -82,7 +82,7 @@ export function OrgDirectory() {
           action={
             <Link
               href="/new"
-              className="inline-flex h-9 items-center rounded-lg bg-accent px-4 text-sm font-medium text-canvas transition-[background-color,transform] duration-150 hover:bg-accent-hover active:translate-y-[0.5px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+              className="inline-flex min-h-10 items-center rounded-card border-2 border-ink bg-ledger-gold px-4 text-sm font-medium text-ink shadow-brutal transition-[background-color,box-shadow,transform] duration-150 hover:bg-accent-hover hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-brutal-pressed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper"
             >
               Create organization
             </Link>

From c662d72568cbfd703e9e150ec0aa396364f17f73 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:58:17 +0100
Subject: [PATCH 25/45] refactor(web): rebuild treasury identity header

---
 apps/web/components/treasury-dashboard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index b192940..8838ed9 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -122,11 +122,11 @@ export function TreasuryDashboard({ treasury }: { treasury: string }) {
   const isAdmin = address !== null && adminAddress !== null && address === adminAddress;
 
   return (
-    <div className="space-y-10">
+    <div className="space-y-12">
       <nav>
         <Link
           href="/app"
-          className="inline-flex items-center gap-1.5 rounded text-sm text-ink-muted transition-colors duration-150 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+          className="inline-flex items-center gap-1.5 rounded-badge border-2 border-ink bg-paper-raised px-3 py-2 text-sm font-medium text-ink shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink"
         >
           <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" aria-hidden>
             <path d="M10 4 6 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -197,15 +197,15 @@ function OrgHeader({
   }
 
   return (
-    <header className="flex items-start gap-4">
+    <header className="flex items-start gap-4 border-b-2 border-ink pb-8">
       <span
-        className="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-accent-muted text-lg font-semibold text-accent"
+        className="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-card border-2 border-ink bg-ledger-gold font-display text-xl text-ink shadow-brutal"
         aria-hidden
       >
         {org.data.name.charAt(0).toUpperCase()}
       </span>
       <div className="min-w-0 space-y-2">
-        <h1 className="truncate text-2xl font-semibold text-ink">{org.data.name}</h1>
+        <h1 className="truncate font-display text-4xl leading-none text-ink">{org.data.name}</h1>
         <dl className="flex flex-wrap items-center gap-x-6 gap-y-1 text-xs">
           <div className="flex items-center gap-2">
             <dt className="text-ink-faint">Treasury</dt>

From edb9a687e754a0ac35c79d24e81e16f34b68d8c0 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 15:59:27 +0100
Subject: [PATCH 26/45] refactor(web): make treasury balance the primary ledger
 signal

---
 apps/web/components/treasury-dashboard.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index 8838ed9..3314e70 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -243,14 +243,9 @@ function BalancePanel({
   approverCount: number | null;
 }) {
   return (
-    <section className="relative overflow-hidden rounded-2xl border border-line bg-gradient-to-br from-canvas-raised to-canvas-raised/95 px-6 py-6 shadow-inner-highlight">
-      {/* Decorative accent glow behind the figure. Collapses under reduced-transparency. */}
-      <div
-        aria-hidden
-        className="pointer-events-none absolute -left-16 -top-20 h-64 w-64 rounded-full bg-[radial-gradient(circle,rgba(45,212,191,0.12),transparent_70%)] blur-2xl [@media(prefers-reduced-transparency:reduce)]:hidden"
-      />
+    <section className="relative overflow-hidden rounded-card border-2 border-ink bg-ledger-gold px-5 py-6 shadow-brutal sm:px-7 sm:py-7">
       <div className="relative">
-        <p className="text-xs font-medium uppercase tracking-wide text-ink-faint">
+        <p className="font-mono text-xs font-medium uppercase tracking-[0.08em] text-ink">
           Treasury balance
         </p>
         <div className="mt-2">
@@ -272,12 +267,12 @@ function BalancePanel({
           )}
 
           {balance.isSuccess && (
-            <p className="font-mono text-4xl font-semibold leading-none tracking-tight tabular-nums text-ink">
+            <p className="font-mono text-4xl font-medium leading-none tabular-nums text-ink sm:text-5xl">
               {formatAmount(balance.data)}
             </p>
           )}
         </div>
-        <p className="mt-2 text-xs text-ink-muted">Live from the treasury contract.</p>
+        <p className="mt-3 text-xs text-ink">Live from the treasury contract.</p>
 
         {/* At-a-glance treasury state. */}
         <div className="mt-5 flex flex-wrap gap-2">

From cd7902a4aa0dacb0d6de29637d12f1959a670f54 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:00:47 +0100
Subject: [PATCH 27/45] refactor(web): restyle treasury summary chips

---
 apps/web/components/treasury-dashboard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index 3314e70..5b77e9f 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -311,10 +311,10 @@ function SummaryChip({
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs',
+        'inline-flex items-center gap-1.5 rounded-pill border-2 border-ink bg-paper-raised px-3 py-1.5 text-xs text-ink',
         tone === 'info'
-          ? 'border-info/30 bg-info/10 text-info'
-          : 'border-line bg-canvas-overlay text-ink-muted',
+          ? 'text-ink'
+          : 'text-ink-muted',
       )}
     >
       {value === null ? (
@@ -323,7 +323,7 @@ function SummaryChip({
         <span
           className={cn(
             'font-mono font-medium tabular-nums',
-            tone === 'info' ? 'text-info' : 'text-ink',
+            'text-ink',
           )}
         >
           {value}

From 0ba01fe12299137025b9d4b6983edaac9e7aa72d Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:01:52 +0100
Subject: [PATCH 28/45] refactor(web): align allocation meter with ledger motif

---
 apps/web/components/treasury-dashboard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index 5b77e9f..d401aee 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -432,16 +432,16 @@ function AllocationBar({ categories }: { categories: Category[] }) {
 
   // A small fixed cycle of accent-family tints keeps adjacent segments legible
   // without introducing a second hue — the palette stays teal end to end.
-  const tints = ['bg-accent', 'bg-accent/70', 'bg-accent/45', 'bg-info/60', 'bg-info/40'];
+  const tints = ['bg-ledger-gold', 'bg-ledger-gold/80', 'bg-ledger-gold/60', 'bg-ledger-gold/40'];
 
   return (
     <div className="space-y-2">
-      <div className="flex h-2.5 overflow-hidden rounded-full bg-canvas-overlay shadow-inner-highlight">
+      <div className="flex h-4 gap-0.5 overflow-hidden rounded-pill border-2 border-ink bg-paper-raised p-0.5">
         {segments.map((seg, i) => (
           <div
             key={seg.categoryId}
             className={cn(
-              'h-full first:rounded-l-full last:rounded-r-full',
+              'h-full first:rounded-l-pill last:rounded-r-pill',
               tints[i % tints.length],
               !seg.active && 'opacity-40',
             )}
@@ -453,7 +453,7 @@ function AllocationBar({ categories }: { categories: Category[] }) {
       <div className="flex flex-wrap gap-x-4 gap-y-1">
         {segments.map((seg, i) => (
           <span key={seg.categoryId} className="inline-flex items-center gap-1.5 text-xs text-ink-muted">
-            <span className={cn('h-2 w-2 rounded-full', tints[i % tints.length], !seg.active && 'opacity-40')} aria-hidden />
+            <span className={cn('h-2.5 w-2.5 rounded-sm border border-ink', tints[i % tints.length], !seg.active && 'opacity-40')} aria-hidden />
             {seg.name}
             <span className="font-mono tabular-nums text-ink-faint">{Math.round(seg.pct)}%</span>
           </span>

From 08a8a100b4bd873675a7eaee1c6751202b2d94be Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:03:12 +0100
Subject: [PATCH 29/45] refactor(web): frame budget categories as policy ledger

---
 apps/web/components/treasury-dashboard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index d401aee..22f8bb9 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -356,7 +356,7 @@ function CategoriesSection({
   return (
     <section className="space-y-4">
       <div className="flex items-center justify-between gap-4">
-        <h2 className="text-lg font-semibold text-ink">Budget categories</h2>
+        <h2 className="font-display text-2xl text-ink">Budget categories</h2>
         {canManage && (
           <PrimaryButton onClick={() => setCreating(true)}>
             <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" aria-hidden>
@@ -394,7 +394,7 @@ function CategoriesSection({
       )}
 
       {categories.isSuccess && categories.data.length > 0 && (
-        <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised shadow-inner-highlight">
+        <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
           {categories.data.map((category) => (
             <CategoryRow
               key={category.categoryId}
@@ -530,7 +530,7 @@ function CategoryRow({
 
 function CategoriesSkeleton() {
   return (
-    <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised shadow-inner-highlight">
+    <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
       {Array.from({ length: 3 }).map((_, i) => (
         <li key={i} className="space-y-2.5 px-6 py-5">
           <div className="flex items-center justify-between">

From b2fbb6d07543066f9a96f8ff926660202ba89421 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:06:28 +0100
Subject: [PATCH 30/45] refactor(web): redesign category usage meters

---
 apps/web/components/treasury-dashboard.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index 22f8bb9..e002790 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -483,7 +483,7 @@ function CategoryRow({
         <div className="flex items-center gap-2.5">
           <span className="text-sm font-medium text-ink">{category.name}</span>
           {!category.active && (
-            <span className="rounded-full border border-line px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-ink-faint">
+            <span className="rounded-pill border-2 border-ink bg-canvas-overlay px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-ink-muted">
               Paused
             </span>
           )}
@@ -503,7 +503,7 @@ function CategoryRow({
 
       <div className="mt-2.5 flex items-center gap-3">
         <div
-          className="h-2 flex-1 overflow-hidden rounded-full bg-canvas-overlay shadow-inner-highlight"
+          className="h-4 flex-1 overflow-hidden rounded-pill border-2 border-ink bg-paper-raised p-0.5"
           role="progressbar"
           aria-valuenow={Math.round(pct)}
           aria-valuemin={0}
@@ -511,12 +511,7 @@ function CategoryRow({
           aria-label={`${category.name} cap usage`}
         >
           <div
-            className={cn(
-              'h-full rounded-full bg-gradient-to-r transition-[width] duration-300 ease-out motion-reduce:transition-none',
-              nearCap
-                ? 'from-warn to-warn shadow-glow-warn'
-                : 'from-accent to-accent-hover',
-            )}
+            className="h-full rounded-pill bg-ledger-gold transition-[width] duration-300 ease-out motion-reduce:transition-none"
             style={{ width: `${pct}%` }}
           />
         </div>

From 6cb80aa25c3e8c20df260b1d05716378c13dcd62 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:07:58 +0100
Subject: [PATCH 31/45] refactor(web): frame request queue as approval ledger

---
 apps/web/components/treasury-dashboard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index e002790..0dd7c5f 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -577,7 +577,7 @@ function RequestsSection({
   return (
     <section className="space-y-4">
       <div className="flex items-center justify-between gap-4">
-        <h2 className="text-lg font-semibold text-ink">Requests</h2>
+        <h2 className="font-display text-2xl text-ink">Requests</h2>
         {canSubmit && (
           <PrimaryButton onClick={() => setCreating(true)}>
             <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" aria-hidden>
@@ -611,7 +611,7 @@ function RequestsSection({
       )}
 
       {requests.isSuccess && requests.data.length > 0 && (
-        <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised shadow-inner-highlight">
+        <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
           {requests.data.map((request) => (
             <RequestRow
               key={request.requestId}
@@ -708,7 +708,7 @@ function RequestRow({
 
 function RequestsSkeleton() {
   return (
-    <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised shadow-inner-highlight">
+    <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
       {Array.from({ length: 3 }).map((_, i) => (
         <li key={i} className="flex items-center justify-between px-6 py-5">
           <div className="space-y-2">

From 14c49b3d409635fed4dc4019b4b92ce8fca5b9a3 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:08:53 +0100
Subject: [PATCH 32/45] refactor(web): improve request row hierarchy and mobile
 flow

---
 apps/web/components/treasury-dashboard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index 0dd7c5f..3b6a6ca 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -657,12 +657,12 @@ function RequestRow({
   const isPending = request.status === 'Pending';
 
   return (
-    <li className="flex items-center justify-between gap-4 px-6 py-5">
+    <li className="flex flex-col items-stretch justify-between gap-4 px-4 py-5 sm:flex-row sm:items-center sm:px-6">
       <div className="min-w-0 space-y-1">
         <div className="flex items-center gap-2.5">
           <Link
             href={`/org/${treasuryId}/requests/${request.requestId}`}
-            className="truncate rounded text-sm font-medium text-ink transition-colors duration-150 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            className="truncate rounded-badge font-display text-lg text-ink underline-offset-4 transition-colors duration-150 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink"
           >
             {categoryName}
           </Link>
@@ -681,7 +681,7 @@ function RequestRow({
         </p>
       </div>
 
-      <div className="flex shrink-0 items-center gap-4">
+      <div className="flex shrink-0 items-center justify-between gap-4 sm:justify-end">
         <div className="flex flex-col items-end gap-1">
           <span className="font-mono text-sm font-medium tabular-nums text-ink">
             {formatAmount(request.amount)}

From f39e85fa6673226bfa4c48ca97b5e203cc29b3c0 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:12:03 +0100
Subject: [PATCH 33/45] refactor(web): rebuild organization creation header

---
 apps/web/app/(app)/new/page.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/(app)/new/page.tsx b/apps/web/app/(app)/new/page.tsx
index 7dbf5df..08c8047 100644
--- a/apps/web/app/(app)/new/page.tsx
+++ b/apps/web/app/(app)/new/page.tsx
@@ -8,11 +8,11 @@ import { NewOrgForm } from '@/components/new-org-form';
  */
 export default function NewOrgPage() {
   return (
-    <div className="mx-auto max-w-xl">
-      <nav className="mb-6">
+    <div className="mx-auto max-w-2xl">
+      <nav className="mb-8">
         <Link
           href="/app"
-          className="inline-flex items-center gap-1.5 text-sm text-ink-muted transition-colors duration-150 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded"
+          className="inline-flex items-center gap-1.5 rounded-badge border-2 border-ink bg-paper-raised px-3 py-2 text-sm font-medium text-ink shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink"
         >
           <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" aria-hidden>
             <path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -21,9 +21,10 @@ export default function NewOrgPage() {
         </Link>
       </nav>
 
-      <header className="mb-8">
-        <h1 className="text-xl font-semibold text-ink">New organization</h1>
-        <p className="mt-1 text-sm text-ink-muted">
+      <header className="mb-8 border-b-2 border-ink pb-8">
+        <p className="mb-2 font-mono text-xs uppercase tracking-[0.08em] text-ink-muted">Factory deployment</p>
+        <h1 className="font-display text-4xl leading-none text-ink sm:text-[40px]">New organization</h1>
+        <p className="mt-4 max-w-xl text-sm leading-relaxed text-ink-muted">
           Deploy a treasury contract. You&rsquo;ll be its admin, and the approver set
           you define governs every disbursement.
         </p>

From 54da556186ab2cb4f6448abb67b0146aade73bf8 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:14:35 +0100
Subject: [PATCH 34/45] refactor(web): frame organization deployment form

---
 apps/web/components/new-org-form.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/new-org-form.tsx b/apps/web/components/new-org-form.tsx
index 2a361b8..992168b 100644
--- a/apps/web/components/new-org-form.tsx
+++ b/apps/web/components/new-org-form.tsx
@@ -177,7 +177,7 @@ export function NewOrgForm() {
 
   if (address === null) {
     return (
-      <div className="rounded-xl border border-line bg-canvas-raised px-6 py-10 text-center">
+      <div className="rounded-card border-2 border-ink bg-paper-raised px-6 py-10 text-center shadow-brutal">
         <p className="text-sm text-ink-muted">Connect your wallet to create an organization.</p>
       </div>
     );
@@ -190,7 +190,7 @@ export function NewOrgForm() {
         reset();
         mutate(form);
       }}
-      className="space-y-6"
+      className="space-y-6 rounded-card border-2 border-ink bg-paper-raised p-5 shadow-brutal sm:p-7"
     >
       {/* Name */}
       <div>

From 16c0f938f06c493e6d4c1ff4e96e3a2092233712 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:17:17 +0100
Subject: [PATCH 35/45] refactor(web): redesign approver controls

---
 apps/web/components/new-org-form.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/new-org-form.tsx b/apps/web/components/new-org-form.tsx
index 992168b..60f2e1f 100644
--- a/apps/web/components/new-org-form.tsx
+++ b/apps/web/components/new-org-form.tsx
@@ -73,9 +73,9 @@ function ApproversField({
             disabled={disabled}
             aria-label={`Approver ${i + 1}`}
             className={cn(
-              'block flex-1 rounded-lg border border-line bg-canvas-raised px-3 py-2 font-mono text-sm text-ink placeholder:text-ink-faint',
-              'transition-colors duration-150 hover:border-accent-muted',
-              'focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent',
+              'block min-h-11 flex-1 rounded-badge border-2 border-ink bg-paper-raised px-3.5 py-2.5 font-mono text-sm text-ink placeholder:text-ink-faint',
+              'transition-colors duration-150 hover:bg-white',
+              'focus:outline-none focus:ring-2 focus:ring-ledger-gold focus:ring-offset-2 focus:ring-offset-paper-raised',
               'disabled:cursor-not-allowed disabled:opacity-50',
             )}
           />
@@ -86,8 +86,8 @@ function ApproversField({
               disabled={disabled}
               aria-label="Remove approver"
               className={cn(
-                'inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-line text-ink-faint',
-                'transition-colors duration-150 hover:border-danger/50 hover:text-danger',
+                'inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-badge border-2 border-ink bg-paper-raised text-ink-muted shadow-[2px_2px_0_#14171F]',
+                'transition-[background-color,box-shadow,transform] duration-150 hover:bg-danger/10 hover:text-danger hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none',
                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger',
                 'disabled:cursor-not-allowed disabled:opacity-50',
               )}
@@ -105,8 +105,8 @@ function ApproversField({
         onClick={add}
         disabled={disabled}
         className={cn(
-          'inline-flex h-8 items-center gap-1.5 rounded-lg border border-line px-3 text-xs font-medium text-ink-muted',
-          'transition-colors duration-150 hover:border-accent-muted hover:text-ink',
+          'inline-flex h-9 items-center gap-1.5 rounded-card border-2 border-ink bg-paper-raised px-3 text-xs font-medium text-ink shadow-[2px_2px_0_#14171F]',
+          'transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent',
           'disabled:cursor-not-allowed disabled:opacity-50',
         )}

From f43325449bb3402e3b7f804e8590745c5bc89dd0 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:20:31 +0100
Subject: [PATCH 36/45] refactor(web): make request decisions tactile

---
 apps/web/components/request-actions.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/request-actions.tsx b/apps/web/components/request-actions.tsx
index 660429f..ed9b85c 100644
--- a/apps/web/components/request-actions.tsx
+++ b/apps/web/components/request-actions.tsx
@@ -65,7 +65,7 @@ export function RequestActions({
   if (!canApprove && !isRequester) return null;
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex flex-wrap items-center justify-end gap-2">
       {errorText !== null && (
         <span className="mr-1 text-xs text-danger" role="alert">
           {errorText}
@@ -79,8 +79,7 @@ export function RequestActions({
             onClick={() => approve.mutate()}
             disabled={approve.isPending}
             className={cn(
-              'rounded-md px-2 py-1 text-xs font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50',
-              'text-accent hover:bg-canvas-overlay hover:text-accent-hover',
+              'rounded-badge border-2 border-ink bg-ledger-gold px-2.5 py-1 text-xs font-medium text-ink shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-accent-hover hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink disabled:opacity-50',
             )}
           >
             {approve.isPending ? '…' : 'Approve'}
@@ -91,8 +90,7 @@ export function RequestActions({
             onClick={() => reject.mutate()}
             disabled={reject.isPending}
             className={cn(
-              'rounded-md px-2 py-1 text-xs font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50',
-              'text-ink-muted hover:bg-canvas-overlay hover:text-danger',
+              'rounded-badge border-2 border-ink bg-paper-raised px-2.5 py-1 text-xs font-medium text-danger shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-danger/10 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink disabled:opacity-50',
             )}
           >
             {reject.isPending ? '…' : 'Reject'}
@@ -106,8 +104,7 @@ export function RequestActions({
           onClick={() => cancel.mutate()}
           disabled={cancel.isPending}
           className={cn(
-            'rounded-md px-2 py-1 text-xs font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50',
-            'text-ink-muted hover:bg-canvas-overlay hover:text-ink',
+            'rounded-badge border-2 border-ink bg-paper-raised px-2.5 py-1 text-xs font-medium text-ink-muted shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink disabled:opacity-50',
           )}
         >
           {cancel.isPending ? '…' : 'Cancel'}

From 4e0926b345dadc5363b79c91545a1546342d6ae6 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:26:12 +0100
Subject: [PATCH 37/45] refactor(web): restyle category administration controls

---
 apps/web/components/category-admin-actions.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/category-admin-actions.tsx b/apps/web/components/category-admin-actions.tsx
index bebd6ad..2f6343e 100644
--- a/apps/web/components/category-admin-actions.tsx
+++ b/apps/web/components/category-admin-actions.tsx
@@ -58,7 +58,7 @@ export function CategoryAdminActions({
       <button
         type="button"
         onClick={() => setEditing(true)}
-        className="rounded-md px-2 py-1 text-xs font-medium text-ink-muted transition-colors duration-150 hover:bg-canvas-overlay hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+        className="rounded-badge border-2 border-ink bg-paper-raised px-2.5 py-1 text-xs font-medium text-ink shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink"
       >
         Edit
       </button>
@@ -68,10 +68,10 @@ export function CategoryAdminActions({
         onClick={() => toggle.mutate()}
         disabled={toggle.isPending}
         className={cn(
-          'rounded-md px-2 py-1 text-xs font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50',
+          'rounded-badge border-2 border-ink bg-paper-raised px-2.5 py-1 text-xs font-medium shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink disabled:opacity-50',
           category.active
-            ? 'text-ink-muted hover:bg-canvas-overlay hover:text-warn'
-            : 'text-accent hover:bg-canvas-overlay hover:text-accent-hover',
+            ? 'text-ink-muted hover:bg-ledger-gold/20 hover:text-ink'
+            : 'text-ink hover:bg-ledger-gold/30',
         )}
       >
         {toggle.isPending ? '…' : category.active ? 'Pause' : 'Resume'}

From 4633ce698b11e1d9a5b57c6839da6851d145d528 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:28:02 +0100
Subject: [PATCH 38/45] refactor(web): rebuild request detail header

---
 apps/web/components/request-detail.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/request-detail.tsx b/apps/web/components/request-detail.tsx
index 84eff38..3ed54a3 100644
--- a/apps/web/components/request-detail.tsx
+++ b/apps/web/components/request-detail.tsx
@@ -57,7 +57,7 @@ export function RequestDetail({
     <nav>
       <Link
         href={`/org/${treasury}`}
-        className="inline-flex items-center gap-1.5 rounded text-sm text-ink-muted transition-colors duration-150 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+        className="inline-flex items-center gap-1.5 rounded-badge border-2 border-ink bg-paper-raised px-3 py-2 text-sm font-medium text-ink shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink"
       >
         <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" aria-hidden>
           <path d="M10 4 6 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -138,10 +138,10 @@ function RequestBody({
   return (
     <div className="space-y-8">
       {/* Header — identity and headline amount */}
-      <header className="flex flex-wrap items-start justify-between gap-4">
+      <header className="flex flex-wrap items-start justify-between gap-6 border-b-2 border-ink pb-8">
         <div className="space-y-2">
           <div className="flex items-center gap-3">
-            <h1 className="text-2xl font-semibold text-ink">Request #{request.requestId}</h1>
+            <h1 className="font-display text-4xl leading-none text-ink">Request #{request.requestId}</h1>
             <RequestStatusBadge status={request.status} />
           </div>
           <p className="text-sm text-ink-muted">
@@ -149,7 +149,7 @@ function RequestBody({
           </p>
         </div>
         <div className="text-right">
-          <p className="font-mono text-3xl font-semibold tabular-nums text-ink">
+          <p className="font-mono text-4xl font-medium tabular-nums text-ink">
             {formatAmount(request.amount)}
           </p>
           <p className="mt-1 text-xs text-ink-faint">Disbursement amount</p>

From f1396eb259a22c6db73e9460273299b9cb9bf775 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:30:17 +0100
Subject: [PATCH 39/45] refactor(web): rebuild request detail ledger panels

---
 apps/web/components/request-detail.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/request-detail.tsx b/apps/web/components/request-detail.tsx
index 3ed54a3..4427f1f 100644
--- a/apps/web/components/request-detail.tsx
+++ b/apps/web/components/request-detail.tsx
@@ -157,8 +157,8 @@ function RequestBody({
       </header>
 
       {/* Detail fields */}
-      <section className="rounded-xl border border-line bg-canvas-raised">
-        <dl className="divide-y divide-line">
+      <section className="overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
+        <dl className="divide-y-2 divide-ink">
           <DetailRow label="Recipient">
             <CopyAddress address={request.recipient} />
           </DetailRow>
@@ -183,7 +183,7 @@ function RequestBody({
       {/* Approvals */}
       <section className="space-y-4">
         <div className="flex items-center justify-between gap-4">
-          <h2 className="text-lg font-semibold text-ink">Approvals</h2>
+          <h2 className="font-display text-2xl text-ink">Approvals</h2>
           <ApprovalProgress
             approvals={request.approvals.length}
             threshold={threshold.data ?? null}
@@ -197,7 +197,7 @@ function RequestBody({
         />
 
         {isPending && walletAddress !== null && (
-          <div className="flex items-center justify-end gap-3 rounded-xl border border-line bg-canvas-raised px-5 py-4">
+          <div className="flex flex-col items-stretch justify-end gap-4 rounded-card border-2 border-ink bg-ledger-gold/25 px-5 py-4 shadow-brutal sm:flex-row sm:items-center">
             <span className="mr-auto text-sm text-ink-muted">
               {isApprover
                 ? request.approvals.includes(walletAddress)
@@ -219,7 +219,7 @@ function RequestBody({
         )}
 
         {isPending && walletAddress === null && (
-          <p className="rounded-xl border border-line bg-canvas px-5 py-4 text-sm text-ink-muted">
+          <p className="rounded-card border-2 border-ink bg-paper-raised px-5 py-4 text-sm text-ink-muted shadow-brutal">
             Connect a wallet to approve, reject, or cancel this request.
           </p>
         )}

From 4038884a483cf3834ea12892a111f5e3130f3dd2 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:32:07 +0100
Subject: [PATCH 40/45] refactor(web): redesign approver roster ledger

---
 apps/web/components/request-detail.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/request-detail.tsx b/apps/web/components/request-detail.tsx
index 4427f1f..95dcb1f 100644
--- a/apps/web/components/request-detail.tsx
+++ b/apps/web/components/request-detail.tsx
@@ -252,7 +252,7 @@ function ApproverRoster({
 }) {
   if (approvers.isPending) {
     return (
-      <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised">
+      <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
         {Array.from({ length: 3 }).map((_, i) => (
           <li key={i} className="flex items-center justify-between px-5 py-3.5">
             <Skeleton className="h-4 w-48 rounded" />
@@ -282,14 +282,14 @@ function ApproverRoster({
 
   if (rows.length === 0) {
     return (
-      <p className="rounded-xl border border-line bg-canvas-raised px-5 py-4 text-sm text-ink-muted">
+      <p className="rounded-card border-2 border-ink bg-paper-raised px-5 py-4 text-sm text-ink-muted shadow-brutal">
         This treasury has no approvers configured yet.
       </p>
     );
   }
 
   return (
-    <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised">
+    <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
       {rows.map(({ address, inSet }) => {
         const hasApproved = approved.includes(address);
         return (
@@ -297,12 +297,12 @@ function ApproverRoster({
             <div className="flex min-w-0 items-center gap-2">
               <CopyAddress address={address} />
               {address === requester && (
-                <span className="rounded-full border border-line px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-ink-faint">
+                <span className="rounded-pill border-2 border-ink bg-canvas-overlay px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-ink-muted">
                   Requester
                 </span>
               )}
               {!inSet && (
-                <span className="rounded-full border border-line px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-ink-faint">
+                <span className="rounded-pill border-2 border-ink bg-canvas-overlay px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-ink-muted">
                   Former approver
                 </span>
               )}

From abc35558bb760c479f3a81fc10cd7bf5cd39d73b Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:35:59 +0100
Subject: [PATCH 41/45] refactor(web): finish deployment form controls

---
 apps/web/components/new-org-form.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/new-org-form.tsx b/apps/web/components/new-org-form.tsx
index 60f2e1f..4f835ec 100644
--- a/apps/web/components/new-org-form.tsx
+++ b/apps/web/components/new-org-form.tsx
@@ -107,7 +107,7 @@ function ApproversField({
         className={cn(
           'inline-flex h-9 items-center gap-1.5 rounded-card border-2 border-ink bg-paper-raised px-3 text-xs font-medium text-ink shadow-[2px_2px_0_#14171F]',
           'transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink',
           'disabled:cursor-not-allowed disabled:opacity-50',
         )}
       >
@@ -249,9 +249,9 @@ export function NewOrgForm() {
             onChange={(e) => set('threshold', Math.max(1, Math.min(maxThreshold, Number(e.target.value))))}
             disabled={isPending}
             className={cn(
-              'w-20 rounded-lg border border-line bg-canvas-raised px-3 py-2 text-sm text-ink',
-              'transition-colors duration-150 hover:border-accent-muted',
-              'focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent',
+              'w-20 rounded-badge border-2 border-ink bg-paper-raised px-3 py-2.5 font-mono text-sm text-ink',
+              'transition-colors duration-150 hover:bg-white',
+              'focus:outline-none focus:ring-2 focus:ring-ledger-gold focus:ring-offset-2 focus:ring-offset-paper-raised',
               'disabled:cursor-not-allowed disabled:opacity-50',
             )}
           />
@@ -275,9 +275,9 @@ export function NewOrgForm() {
           type="submit"
           disabled={isPending || form.name.trim() === '' || form.token.trim() === ''}
           className={cn(
-            'inline-flex h-9 items-center gap-2 rounded-lg bg-accent px-5 text-sm font-medium text-canvas',
-            'transition-colors duration-150 hover:bg-accent-hover',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas',
+            'inline-flex min-h-10 items-center gap-2 rounded-card border-2 border-ink bg-ledger-gold px-5 text-sm font-medium text-ink shadow-brutal',
+            'transition-[background-color,box-shadow,transform] duration-150 hover:bg-accent-hover hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-brutal-pressed',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper',
             'disabled:cursor-not-allowed disabled:opacity-60',
           )}
         >

From f775caa14d55fe7fd33ab0c4ff540cf3d58dfd28 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:38:13 +0100
Subject: [PATCH 42/45] refactor(web): align modal notice surfaces

---
 apps/web/components/category-form-modal.tsx  | 2 +-
 apps/web/components/submit-request-modal.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/category-form-modal.tsx b/apps/web/components/category-form-modal.tsx
index 0290975..e96984b 100644
--- a/apps/web/components/category-form-modal.tsx
+++ b/apps/web/components/category-form-modal.tsx
@@ -141,7 +141,7 @@ function CategoryForm({
       <div>
         <Label htmlFor="category-name">Name</Label>
         {isEdit ? (
-          <p className="mt-1.5 rounded-lg border border-line bg-canvas px-3 py-2 text-sm text-ink-muted">
+          <p className="mt-2 rounded-badge border-2 border-ink bg-canvas-overlay px-3.5 py-2.5 text-sm text-ink-muted">
             {mode.category.name}
           </p>
         ) : (
diff --git a/apps/web/components/submit-request-modal.tsx b/apps/web/components/submit-request-modal.tsx
index 63a310b..54038d0 100644
--- a/apps/web/components/submit-request-modal.tsx
+++ b/apps/web/components/submit-request-modal.tsx
@@ -78,7 +78,7 @@ export function SubmitRequestModal({
     >
       {active.length === 0 ? (
         <div className="space-y-5">
-          <p className="rounded-lg border border-line bg-canvas px-4 py-3 text-sm text-ink-muted">
+          <p className="rounded-badge border-2 border-ink bg-canvas-overlay px-4 py-3 text-sm text-ink-muted">
             There are no active categories to request against. Ask an admin to
             create one or resume a paused category first.
           </p>

From b19ddfbbee5cb3bed71eabae499a9553b9eb95b5 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:40:04 +0100
Subject: [PATCH 43/45] refactor(web): align request detail skeletons

---
 apps/web/components/request-detail.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/request-detail.tsx b/apps/web/components/request-detail.tsx
index 95dcb1f..04d6e3a 100644
--- a/apps/web/components/request-detail.tsx
+++ b/apps/web/components/request-detail.tsx
@@ -345,8 +345,8 @@ function RequestDetailSkeleton() {
         </div>
         <Skeleton className="h-9 w-40 rounded-lg" />
       </header>
-      <div className="rounded-xl border border-line bg-canvas-raised">
-        <div className="divide-y divide-line">
+      <div className="overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
+        <div className="divide-y-2 divide-ink">
           {Array.from({ length: 4 }).map((_, i) => (
             <div key={i} className="flex items-center justify-between px-5 py-4">
               <Skeleton className="h-4 w-24 rounded" />
@@ -357,7 +357,7 @@ function RequestDetailSkeleton() {
       </div>
       <div className="space-y-4">
         <Skeleton className="h-6 w-32 rounded" />
-        <ul className="divide-y divide-line rounded-xl border border-line bg-canvas-raised">
+        <ul className="divide-y-2 divide-ink overflow-hidden rounded-card border-2 border-ink bg-paper-raised shadow-brutal">
           {Array.from({ length: 3 }).map((_, i) => (
             <li key={i} className="flex items-center justify-between px-5 py-3.5">
               <Skeleton className="h-4 w-48 rounded" />

From aa3f9ad0230e3693cebf77a25f293ecefd69fd53 Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:42:39 +0100
Subject: [PATCH 44/45] refactor(web): restyle treasury retry action

---
 apps/web/components/treasury-dashboard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/treasury-dashboard.tsx b/apps/web/components/treasury-dashboard.tsx
index 3b6a6ca..f27115b 100644
--- a/apps/web/components/treasury-dashboard.tsx
+++ b/apps/web/components/treasury-dashboard.tsx
@@ -259,7 +259,7 @@ function BalancePanel({
               <button
                 type="button"
                 onClick={() => void balance.refetch()}
-                className="rounded-md text-xs font-medium text-accent transition-colors duration-150 hover:text-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+                className="rounded-badge border-2 border-ink bg-paper-raised px-2.5 py-1 text-xs font-medium text-ink shadow-[2px_2px_0_#14171F] transition-[background-color,box-shadow,transform] duration-150 hover:bg-canvas-overlay hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink"
               >
                 Retry
               </button>

From 7e9d2986db39c2591af6835c4b03cc53fe5ae81c Mon Sep 17 00:00:00 2001
From: fadesany <fuhadadesanya0@gmail.com>
Date: Fri, 14 Aug 2026 16:46:02 +0100
Subject: [PATCH 45/45] refactor(web): standardize transaction error callouts

---
 apps/web/components/category-form-modal.tsx  | 2 +-
 apps/web/components/new-org-form.tsx         | 2 +-
 apps/web/components/submit-request-modal.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/category-form-modal.tsx b/apps/web/components/category-form-modal.tsx
index e96984b..4e4b6f2 100644
--- a/apps/web/components/category-form-modal.tsx
+++ b/apps/web/components/category-form-modal.tsx
@@ -175,7 +175,7 @@ function CategoryForm({
       </div>
 
       {bannerError !== null && (
-        <p role="alert" className="rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger">
+        <p role="alert" className="rounded-badge border-2 border-danger bg-danger/10 px-4 py-3 text-sm text-danger">
           {bannerError}
         </p>
       )}
diff --git a/apps/web/components/new-org-form.tsx b/apps/web/components/new-org-form.tsx
index 4f835ec..7ddeb87 100644
--- a/apps/web/components/new-org-form.tsx
+++ b/apps/web/components/new-org-form.tsx
@@ -264,7 +264,7 @@ export function NewOrgForm() {
 
       {/* Error */}
       {errorMessage !== null && (
-        <p role="alert" className="rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger">
+        <p role="alert" className="rounded-badge border-2 border-danger bg-danger/10 px-4 py-3 text-sm text-danger">
           {errorMessage}
         </p>
       )}
diff --git a/apps/web/components/submit-request-modal.tsx b/apps/web/components/submit-request-modal.tsx
index 54038d0..3f7df2b 100644
--- a/apps/web/components/submit-request-modal.tsx
+++ b/apps/web/components/submit-request-modal.tsx
@@ -286,7 +286,7 @@ function RequestForm({
         <p
           role="alert"
           className={cn(
-            'rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger',
+            'rounded-badge border-2 border-danger bg-danger/10 px-4 py-3 text-sm text-danger',
           )}
         >
           {bannerError}