From c6ecd2b6fcc859cda2fe782a9a57e615e8fe789c Mon Sep 17 00:00:00 2001
From: EcstaceeLOR <abdulmuizademola9@gmail.com>
Date: Sun, 13 Sep 2026 22:54:18 +0100
Subject: [PATCH] feat: refresh ProofKey brand mark

---
 apps/web/public/favicon.svg           |  7 +++--
 apps/web/src/app/AppShell.tsx         |  9 +++----
 apps/web/src/components/BrandMark.tsx | 28 +++++++++++++++++++
 apps/web/src/styles.css               | 39 +++++----------------------
 4 files changed, 43 insertions(+), 40 deletions(-)
 create mode 100644 apps/web/src/components/BrandMark.tsx

diff --git a/apps/web/public/favicon.svg b/apps/web/public/favicon.svg
index a021462..0bd9567 100644
--- a/apps/web/public/favicon.svg
+++ b/apps/web/public/favicon.svg
@@ -1,5 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <rect width="64" height="64" rx="18" fill="#0f543a"/>
-  <path d="M19 16h12c11 0 17 5 17 14 0 8-6 14-17 14h-3v7h-9V16Zm9 8v12h3c5 0 8-2 8-6s-3-6-8-6h-3Z" fill="#d8e953"/>
-  <path d="m34 39 12 12" stroke="#ff6847" stroke-width="7" stroke-linecap="round"/>
+  <circle cx="23" cy="23" r="11" fill="#d8e953"/>
+  <circle cx="23" cy="23" r="5.5" fill="#0f543a"/>
+  <path d="m31 31 18 18M38.5 38.5l6-6M44 44l6-6" fill="none" stroke="#d8e953" stroke-linecap="round" stroke-linejoin="round" stroke-width="7"/>
+  <path d="m19.5 23 2.5 2.5 5-6.5" fill="none" stroke="#ff6847" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8"/>
+  <circle cx="49" cy="49" r="3.5" fill="#ff6847"/>
 </svg>
diff --git a/apps/web/src/app/AppShell.tsx b/apps/web/src/app/AppShell.tsx
index cdc4191..5425939 100644
--- a/apps/web/src/app/AppShell.tsx
+++ b/apps/web/src/app/AppShell.tsx
@@ -14,6 +14,7 @@ import {
 import { useState } from 'react';
 import { Link, NavLink, Outlet, useNavigation } from 'react-router';
 import { compactHash } from '../product.js';
+import { BrandMark } from '../components/BrandMark.js';
 import { WalletDialog } from '../components/WalletDialog.js';
 import { useRuntime } from './AppProviders.js';
 
@@ -46,9 +47,7 @@ export function AppShell() {
       <div className="ambient ambient-two" />
       <header className="topbar">
         <Link className="brand" to="/" aria-label="ProofKey home">
-          <span className="brand-mark">
-            <span />
-          </span>
+          <BrandMark />
           <span>ProofKey</span>
         </Link>
 
@@ -135,9 +134,7 @@ export function AppShell() {
       <footer className="site-footer">
         <div>
           <span className="brand compact">
-            <span className="brand-mark">
-              <span />
-            </span>
+            <BrandMark />
             ProofKey
           </span>
           <p>Proof-backed access for machines that work in the real world.</p>
diff --git a/apps/web/src/components/BrandMark.tsx b/apps/web/src/components/BrandMark.tsx
new file mode 100644
index 0000000..376a0d2
--- /dev/null
+++ b/apps/web/src/components/BrandMark.tsx
@@ -0,0 +1,28 @@
+export function BrandMark() {
+  return (
+    <span className="brand-mark" aria-hidden="true">
+      <svg viewBox="0 0 64 64" role="presentation">
+        <rect width="64" height="64" rx="18" fill="#0f543a" />
+        <circle cx="23" cy="23" r="11" fill="#d8e953" />
+        <circle cx="23" cy="23" r="5.5" fill="#0f543a" />
+        <path
+          d="m31 31 18 18M38.5 38.5l6-6M44 44l6-6"
+          fill="none"
+          stroke="#d8e953"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="7"
+        />
+        <path
+          d="m19.5 23 2.5 2.5 5-6.5"
+          fill="none"
+          stroke="#ff6847"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2.8"
+        />
+        <circle cx="49" cy="49" r="3.5" fill="#ff6847" />
+      </svg>
+    </span>
+  );
+}
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 727836d..767d3ad 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -119,42 +119,17 @@ input:focus-visible {
   text-decoration: none;
 }
 .brand-mark {
-  position: relative;
   display: block;
   width: 34px;
   height: 34px;
-  overflow: hidden;
-  border-radius: 10px;
-  background: var(--forest);
-}
-.brand-mark::before,
-.brand-mark::after,
-.brand-mark span {
-  position: absolute;
-  background: var(--lime);
-  content: '';
-}
-.brand-mark::before {
-  top: 8px;
-  left: 9px;
-  width: 7px;
-  height: 18px;
-  border-radius: 4px;
-}
-.brand-mark::after {
-  top: 8px;
-  left: 15px;
-  width: 11px;
-  height: 7px;
-  border-radius: 4px;
+  flex: 0 0 auto;
+  filter: drop-shadow(0 5px 9px rgba(15, 84, 58, 0.2));
 }
-.brand-mark span {
-  top: 17px;
-  left: 16px;
-  width: 12px;
-  height: 7px;
-  transform: rotate(45deg);
-  border-radius: 4px;
+
+.brand-mark svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 .brand.compact {
   font-size: 15px;