From 720d31b56e25d6f4884e25895ce252835f339b6d Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 5 Jul 2026 17:49:55 -0500
Subject: [PATCH] feat(brand): SVG lockups + mark + social preview assets

Adds the vector source-of-truth for the v0.42.0 brand refresh:
- lockup.svg / lockup-light.svg: the wordmark + mark combination,
  light and light/dark variants
- mark.svg / mark-mono.svg: the standalone mark, colour and mono
- social-preview.svg: 1200x630 Open Graph / oEmbed card

These are the assets the new BrandMark / BrandWordmark / BrandLockup
components (commit 3 of this batch) consume, and the assets the
favicon / PWA manifest (commit 4) reference. They replace the
PNG-only brand directory committed in dfee7f9 with a vector
first-class set; PNG derivatives stay in the same dir for legacy
favicon / PWA paths.

This is the first commit in the v0.42.0 working-tree follow-up; the
previous v0.42.0 brand refresh landed as 9 commits (dfee7f9..3de91af)
in the prior round.
---
 client/public/brand/lockup-light.svg   | 25 +++++++++++++++++
 client/public/brand/lockup.svg         | 25 +++++++++++++++++
 client/public/brand/mark-mono.svg      |  9 ++++++
 client/public/brand/mark.svg           | 26 ++++++++++++++++++
 client/public/brand/social-preview.svg | 38 ++++++++++++++++++++++++++
 5 files changed, 123 insertions(+)
 create mode 100644 client/public/brand/lockup-light.svg
 create mode 100644 client/public/brand/lockup.svg
 create mode 100644 client/public/brand/mark-mono.svg
 create mode 100644 client/public/brand/mark.svg
 create mode 100644 client/public/brand/social-preview.svg

diff --git a/client/public/brand/lockup-light.svg b/client/public/brand/lockup-light.svg
new file mode 100644
index 0000000..8a45415
--- /dev/null
+++ b/client/public/brand/lockup-light.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 220" role="img" aria-labelledby="title desc">
+  <title id="title">Bill Tracker logo</title>
+  <desc id="desc">Bill Tracker wordmark with a calm green checkmark bar chart.</desc>
+  <defs>
+    <linearGradient id="bt-trust" x1="46" x2="174" y1="178" y2="42" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1e9f93"/>
+      <stop offset="0.58" stop-color="#40c878"/>
+      <stop offset="1" stop-color="#96e6a1"/>
+    </linearGradient>
+    <filter id="bt-soft-shadow" x="-12%" y="-20%" width="128%" height="150%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#061014" flood-opacity="0.12"/>
+    </filter>
+  </defs>
+  <rect width="720" height="220" rx="34" fill="none"/>
+  <g filter="url(#bt-soft-shadow)">
+    <rect x="50" y="111" width="25" height="53" rx="7" fill="url(#bt-trust)" opacity="0.86"/>
+    <rect x="87" y="84" width="25" height="80" rx="7" fill="url(#bt-trust)" opacity="0.94"/>
+    <rect x="124" y="59" width="25" height="105" rx="7" fill="url(#bt-trust)"/>
+    <path d="M50 69 84 103 171 36" fill="none" stroke="#96e6a1" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    <path d="M50 69 84 103 171 36" fill="none" stroke="#40c878" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
+  </g>
+  <text x="205" y="119" fill="#101417" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="58" font-weight="760" letter-spacing="-1">Bill</text>
+  <text x="312" y="119" fill="#1f9f62" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="58" font-weight="760" letter-spacing="-1">Tracker</text>
+  <text x="208" y="154" fill="#5f716d" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="17" font-weight="560" letter-spacing="1.8">CALM COMMAND FOR HOUSEHOLD MONEY</text>
+</svg>
diff --git a/client/public/brand/lockup.svg b/client/public/brand/lockup.svg
new file mode 100644
index 0000000..3a5feee
--- /dev/null
+++ b/client/public/brand/lockup.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 220" role="img" aria-labelledby="title desc">
+  <title id="title">Bill Tracker logo</title>
+  <desc id="desc">Bill Tracker wordmark with a calm green checkmark bar chart.</desc>
+  <defs>
+    <linearGradient id="bt-trust" x1="46" x2="174" y1="178" y2="42" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1e9f93"/>
+      <stop offset="0.58" stop-color="#40c878"/>
+      <stop offset="1" stop-color="#96e6a1"/>
+    </linearGradient>
+    <filter id="bt-soft-shadow" x="-12%" y="-20%" width="128%" height="150%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#061014" flood-opacity="0.18"/>
+    </filter>
+  </defs>
+  <rect width="720" height="220" rx="34" fill="none"/>
+  <g filter="url(#bt-soft-shadow)">
+    <rect x="50" y="111" width="25" height="53" rx="7" fill="url(#bt-trust)" opacity="0.86"/>
+    <rect x="87" y="84" width="25" height="80" rx="7" fill="url(#bt-trust)" opacity="0.94"/>
+    <rect x="124" y="59" width="25" height="105" rx="7" fill="url(#bt-trust)"/>
+    <path d="M50 69 84 103 171 36" fill="none" stroke="#96e6a1" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    <path d="M50 69 84 103 171 36" fill="none" stroke="#40c878" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
+  </g>
+  <text x="205" y="119" fill="#f8faf9" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="58" font-weight="760" letter-spacing="-1">Bill</text>
+  <text x="312" y="119" fill="#40c878" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="58" font-weight="760" letter-spacing="-1">Tracker</text>
+  <text x="208" y="154" fill="#90a39d" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="17" font-weight="560" letter-spacing="1.8">CALM COMMAND FOR HOUSEHOLD MONEY</text>
+</svg>
diff --git a/client/public/brand/mark-mono.svg b/client/public/brand/mark-mono.svg
new file mode 100644
index 0000000..e693ba1
--- /dev/null
+++ b/client/public/brand/mark-mono.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title desc">
+  <title id="title">Bill Tracker monochrome mark</title>
+  <desc id="desc">A one-color Bill Tracker bar chart and checkmark.</desc>
+  <rect width="256" height="256" rx="58" fill="#101417"/>
+  <rect x="61" y="123" width="28" height="59" rx="8" fill="#f8faf9" opacity="0.74"/>
+  <rect x="101" y="95" width="28" height="87" rx="8" fill="#f8faf9" opacity="0.86"/>
+  <rect x="141" y="69" width="28" height="113" rx="8" fill="#f8faf9"/>
+  <path d="M62 80.5 97.5 116 190 45" fill="none" stroke="#f8faf9" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+</svg>
diff --git a/client/public/brand/mark.svg b/client/public/brand/mark.svg
new file mode 100644
index 0000000..6225950
--- /dev/null
+++ b/client/public/brand/mark.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title desc">
+  <title id="title">Bill Tracker mark</title>
+  <desc id="desc">A calm green bar chart with a checkmark showing bills under control.</desc>
+  <defs>
+    <linearGradient id="bt-trust" x1="48" x2="206" y1="210" y2="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1e9f93"/>
+      <stop offset="0.58" stop-color="#40c878"/>
+      <stop offset="1" stop-color="#96e6a1"/>
+    </linearGradient>
+    <linearGradient id="bt-ink" x1="34" x2="222" y1="34" y2="222" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#172025"/>
+      <stop offset="1" stop-color="#0f1417"/>
+    </linearGradient>
+    <filter id="bt-shadow" x="-20%" y="-20%" width="140%" height="145%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="10" stdDeviation="14" flood-color="#061014" flood-opacity="0.26"/>
+    </filter>
+  </defs>
+  <rect width="256" height="256" rx="58" fill="url(#bt-ink)"/>
+  <g filter="url(#bt-shadow)">
+    <rect x="61" y="123" width="28" height="59" rx="8" fill="url(#bt-trust)" opacity="0.86"/>
+    <rect x="101" y="95" width="28" height="87" rx="8" fill="url(#bt-trust)" opacity="0.94"/>
+    <rect x="141" y="69" width="28" height="113" rx="8" fill="url(#bt-trust)"/>
+    <path d="M62 80.5 97.5 116 190 45" fill="none" stroke="#96e6a1" stroke-linecap="round" stroke-linejoin="round" stroke-width="18"/>
+    <path d="M62 80.5 97.5 116 190 45" fill="none" stroke="#40c878" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
+  </g>
+</svg>
diff --git a/client/public/brand/social-preview.svg b/client/public/brand/social-preview.svg
new file mode 100644
index 0000000..6d83e57
--- /dev/null
+++ b/client/public/brand/social-preview.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
+  <title id="title">Bill Tracker social preview</title>
+  <desc id="desc">Premium calm Bill Tracker brand preview with the logo and tagline.</desc>
+  <defs>
+    <radialGradient id="glow-a" cx="28%" cy="18%" r="58%">
+      <stop offset="0" stop-color="#40c878" stop-opacity="0.26"/>
+      <stop offset="1" stop-color="#40c878" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glow-b" cx="80%" cy="80%" r="52%">
+      <stop offset="0" stop-color="#23b6a8" stop-opacity="0.18"/>
+      <stop offset="1" stop-color="#23b6a8" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="card" x1="150" x2="1050" y1="105" y2="525" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b2428"/>
+      <stop offset="1" stop-color="#11181b"/>
+    </linearGradient>
+    <linearGradient id="trust" x1="425" x2="570" y1="370" y2="180" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1e9f93"/>
+      <stop offset="0.58" stop-color="#40c878"/>
+      <stop offset="1" stop-color="#96e6a1"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="#101417"/>
+  <rect width="1200" height="630" fill="url(#glow-a)"/>
+  <rect width="1200" height="630" fill="url(#glow-b)"/>
+  <rect x="92" y="72" width="1016" height="486" rx="44" fill="url(#card)" stroke="#314047"/>
+  <g transform="translate(390 168)">
+    <rect x="0" y="126" width="32" height="70" rx="9" fill="url(#trust)" opacity="0.86"/>
+    <rect x="47" y="91" width="32" height="105" rx="9" fill="url(#trust)" opacity="0.94"/>
+    <rect x="94" y="57" width="32" height="139" rx="9" fill="url(#trust)"/>
+    <path d="M1 72 43 114 153 28" fill="none" stroke="#96e6a1" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
+    <path d="M1 72 43 114 153 28" fill="none" stroke="#40c878" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
+  </g>
+  <text x="575" y="290" fill="#f8faf9" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="78" font-weight="760" letter-spacing="-1.5">Bill</text>
+  <text x="728" y="290" fill="#40c878" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="78" font-weight="760" letter-spacing="-1.5">Tracker</text>
+  <text x="575" y="348" fill="#9cafaa" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="27" font-weight="560">Calm command for household money.</text>
+  <text x="575" y="411" fill="#6f837e" font-family="Inter, Roboto, ui-sans-serif, system-ui, sans-serif" font-size="18" font-weight="650" letter-spacing="3">SELF-HOSTED BILL PLANNING</text>
+</svg>