null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

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.
This commit is contained in:
null 2026-07-05 17:49:55 -05:00
parent 4b81600afe
commit 720d31b56e
5 changed files with 123 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/public/brand/lockup-light.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

25
client/public/brand/lockup.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

9
client/public/brand/mark-mono.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 674 B

26
client/public/brand/mark.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

38
client/public/brand/social-preview.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB