diff --git a/README.md b/README.md index dc207f7..3494498 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Bill Tracker

- Bill Tracker — Calm command for household money + Bill Tracker — Calm command for household money

Bill Tracker is a private, self-hosted bill planning app for households and diff --git a/client/lib/brand.ts b/client/lib/brand.ts index ae9f523..777200e 100644 --- a/client/lib/brand.ts +++ b/client/lib/brand.ts @@ -6,12 +6,19 @@ export const BRAND = { assets: { logo: '/brand/lockup.svg', logoLight: '/brand/lockup-light.svg', + logoPng: '/brand/logo.png', mark: '/brand/mark.svg', - favicon: '/brand/mark.svg', + markPng: '/brand/mark.png', + monoMark: '/brand/mark-mono.svg', + favicon: '/brand/favicon.svg', + faviconIco: '/brand/favicon.ico', appleTouchIcon: '/brand/apple-touch-icon.png', pwa192: '/brand/pwa-192.png', pwa512: '/brand/pwa-512.png', + pwaMaskable512: '/brand/pwa-maskable-512.png', socialPreview: '/brand/social-preview.svg', + socialPreviewPng: '/brand/social-preview.png', + emptyState: '/brand/empty-state.svg', legacyLogo: '/img/logo.png', }, colors: { @@ -34,15 +41,15 @@ export type BrandGlyphName = | 'snowball' | 'security'; -export const BRAND_GLYPHS: Record = { - tracker: { label: 'Tracker' }, - bills: { label: 'Bills' }, - calendar: { label: 'Calendar' }, - analytics: { label: 'Analytics' }, - data: { label: 'Data' }, - banking: { label: 'Banking' }, - snowball: { label: 'Snowball' }, - security: { label: 'Security' }, +export const BRAND_GLYPHS: Record = { + tracker: { label: 'Tracker', asset: '/brand/glyphs/tracker.svg' }, + bills: { label: 'Bills', asset: '/brand/glyphs/bills.svg' }, + calendar: { label: 'Calendar', asset: '/brand/glyphs/calendar.svg' }, + analytics: { label: 'Analytics', asset: '/brand/glyphs/analytics.svg' }, + data: { label: 'Data', asset: '/brand/glyphs/data-banking.svg' }, + banking: { label: 'Banking', asset: '/brand/glyphs/data-banking.svg' }, + snowball: { label: 'Snowball', asset: '/brand/glyphs/snowball-payoff.svg' }, + security: { label: 'Security', asset: '/brand/glyphs/admin-security.svg' }, }; export const ADMIN_GLYPH = { label: 'Admin' } as const; diff --git a/client/lib/version.ts b/client/lib/version.ts index 15a05c4..b838b01 100644 --- a/client/lib/version.ts +++ b/client/lib/version.ts @@ -58,7 +58,7 @@ export const RELEASE_NOTES: ReleaseNotes = { }, ], image: { - src: '/brand/social-preview.svg', + src: '/brand/social-preview.png', alt: 'Bill Tracker brand preview', }, }; diff --git a/client/public/brand/apple-touch-icon.png b/client/public/brand/apple-touch-icon.png index d7969dc..e4a2a4b 100644 Binary files a/client/public/brand/apple-touch-icon.png and b/client/public/brand/apple-touch-icon.png differ diff --git a/client/public/brand/empty-state.svg b/client/public/brand/empty-state.svg new file mode 100644 index 0000000..5f1bbac --- /dev/null +++ b/client/public/brand/empty-state.svg @@ -0,0 +1,31 @@ + + Bill Tracker empty-state illustration + Quiet ledger cards, a checkmark chart, and calm status dots. + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/brand/favicon.ico b/client/public/brand/favicon.ico new file mode 100644 index 0000000..1fac710 Binary files /dev/null and b/client/public/brand/favicon.ico differ diff --git a/client/public/brand/favicon.svg b/client/public/brand/favicon.svg new file mode 100644 index 0000000..6df2050 --- /dev/null +++ b/client/public/brand/favicon.svg @@ -0,0 +1,21 @@ + + Bill Tracker favicon + A compact green checkmark and bar chart mark. + + + + + + + + + + + + + + + + + + diff --git a/client/public/brand/glyphs/admin-security.svg b/client/public/brand/glyphs/admin-security.svg new file mode 100644 index 0000000..75fb560 --- /dev/null +++ b/client/public/brand/glyphs/admin-security.svg @@ -0,0 +1,8 @@ + + Admin and security glyph + A shield with a confirmation check for secure administration. + + + + + diff --git a/client/public/brand/glyphs/analytics.svg b/client/public/brand/glyphs/analytics.svg new file mode 100644 index 0000000..89c7759 --- /dev/null +++ b/client/public/brand/glyphs/analytics.svg @@ -0,0 +1,10 @@ + + Analytics glyph + A calm trend line with two data points. + + + + + + + diff --git a/client/public/brand/glyphs/bills.svg b/client/public/brand/glyphs/bills.svg new file mode 100644 index 0000000..6f8c232 --- /dev/null +++ b/client/public/brand/glyphs/bills.svg @@ -0,0 +1,8 @@ + + Bills glyph + A receipt with ledger lines and a checkmark. + + + + + diff --git a/client/public/brand/glyphs/calendar.svg b/client/public/brand/glyphs/calendar.svg new file mode 100644 index 0000000..0801567 --- /dev/null +++ b/client/public/brand/glyphs/calendar.svg @@ -0,0 +1,9 @@ + + Calendar glyph + A calendar page with one quiet payment check. + + + + + + diff --git a/client/public/brand/glyphs/data-banking.svg b/client/public/brand/glyphs/data-banking.svg new file mode 100644 index 0000000..3be5100 --- /dev/null +++ b/client/public/brand/glyphs/data-banking.svg @@ -0,0 +1,10 @@ + + Data and banking glyph + A banking column connected to a data store. + + + + + + + diff --git a/client/public/brand/glyphs/snowball-payoff.svg b/client/public/brand/glyphs/snowball-payoff.svg new file mode 100644 index 0000000..d2a541c --- /dev/null +++ b/client/public/brand/glyphs/snowball-payoff.svg @@ -0,0 +1,9 @@ + + Snowball and payoff glyph + Two growing payoff circles following an upward path. + + + + + + diff --git a/client/public/brand/glyphs/tracker.svg b/client/public/brand/glyphs/tracker.svg new file mode 100644 index 0000000..701c662 --- /dev/null +++ b/client/public/brand/glyphs/tracker.svg @@ -0,0 +1,17 @@ + + Tracker glyph + Three rising bars with a checkmark for bill tracking. + + + + + + + + + + + + + + diff --git a/client/public/brand/logo.png b/client/public/brand/logo.png index 6885b04..2a16d5b 100644 Binary files a/client/public/brand/logo.png and b/client/public/brand/logo.png differ diff --git a/client/public/brand/mark.png b/client/public/brand/mark.png new file mode 100644 index 0000000..ba78ee9 Binary files /dev/null and b/client/public/brand/mark.png differ diff --git a/client/public/brand/pwa-192.png b/client/public/brand/pwa-192.png index bbcce15..955bf50 100644 Binary files a/client/public/brand/pwa-192.png and b/client/public/brand/pwa-192.png differ diff --git a/client/public/brand/pwa-512.png b/client/public/brand/pwa-512.png index 37dae82..8ee2184 100644 Binary files a/client/public/brand/pwa-512.png and b/client/public/brand/pwa-512.png differ diff --git a/client/public/brand/pwa-maskable-512.png b/client/public/brand/pwa-maskable-512.png new file mode 100644 index 0000000..4f38d80 Binary files /dev/null and b/client/public/brand/pwa-maskable-512.png differ diff --git a/client/public/brand/pwa-maskable.svg b/client/public/brand/pwa-maskable.svg new file mode 100644 index 0000000..ed2e67b --- /dev/null +++ b/client/public/brand/pwa-maskable.svg @@ -0,0 +1,26 @@ + + Bill Tracker maskable PWA icon + A padded Bill Tracker mark for maskable app icon surfaces. + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/brand/social-preview.png b/client/public/brand/social-preview.png new file mode 100644 index 0000000..dffce88 Binary files /dev/null and b/client/public/brand/social-preview.png differ diff --git a/docs/BRAND.md b/docs/BRAND.md index f137414..e3c3b69 100644 --- a/docs/BRAND.md +++ b/docs/BRAND.md @@ -49,10 +49,15 @@ Primary source files live in `client/public/brand/`. - `lockup.svg` - primary logo for dark surfaces. - `lockup-light.svg` - primary logo for light surfaces. +- `logo.png` - raster export of the primary logo for docs and non-SVG contexts. - `mark.svg` - compact app mark and favicon. +- `mark.png` - raster export of the compact app mark. - `mark-mono.svg` - single-color mark for constrained contexts. -- `social-preview.svg` - Open Graph, README, release, or marketplace preview. -- `pwa-192.png`, `pwa-512.png`, `apple-touch-icon.png` - install surfaces. +- `favicon.svg`, `favicon.ico` - browser tab and legacy favicon surfaces. +- `social-preview.svg`, `social-preview.png` - Open Graph, README, release, or marketplace preview. +- `empty-state.svg` - reusable empty-state illustration style. +- `pwa-192.png`, `pwa-512.png`, `pwa-maskable.svg`, `pwa-maskable-512.png`, `apple-touch-icon.png` - install surfaces. +- `glyphs/*.svg` - standalone product glyph source files. Rules: @@ -65,14 +70,15 @@ Rules: Bill Tracker has a small proprietary product glyph set for page identity only: -- Tracker -- Bills -- Calendar -- Analytics -- Data -- Banking -- Snowball -- Security/Admin +| Product area | Asset | +| --- | --- | +| Tracker | `client/public/brand/glyphs/tracker.svg` | +| Bills | `client/public/brand/glyphs/bills.svg` | +| Calendar | `client/public/brand/glyphs/calendar.svg` | +| Analytics | `client/public/brand/glyphs/analytics.svg` | +| Data / Banking | `client/public/brand/glyphs/data-banking.svg` | +| Snowball / Payoff | `client/public/brand/glyphs/snowball-payoff.svg` | +| Admin / Security | `client/public/brand/glyphs/admin-security.svg` | Rules: diff --git a/index.html b/index.html index 7b27cb0..d1dff15 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,21 @@ - + + - + + + + - + diff --git a/vite.config.mjs b/vite.config.mjs index 856ad2a..f54cb21 100644 --- a/vite.config.mjs +++ b/vite.config.mjs @@ -23,13 +23,28 @@ export default defineConfig({ VitePWA({ registerType: 'autoUpdate', includeAssets: [ + 'brand/favicon.svg', + 'brand/favicon.ico', 'brand/mark.svg', + 'brand/mark.png', 'brand/mark-mono.svg', 'brand/lockup.svg', 'brand/lockup-light.svg', + 'brand/logo.png', + 'brand/empty-state.svg', 'brand/social-preview.svg', + 'brand/social-preview.png', + 'brand/pwa-maskable.svg', + 'brand/glyphs/tracker.svg', + 'brand/glyphs/bills.svg', + 'brand/glyphs/calendar.svg', + 'brand/glyphs/analytics.svg', + 'brand/glyphs/data-banking.svg', + 'brand/glyphs/snowball-payoff.svg', + 'brand/glyphs/admin-security.svg', 'brand/pwa-192.png', 'brand/pwa-512.png', + 'brand/pwa-maskable-512.png', ], manifest: { name: 'Bill Tracker', @@ -41,7 +56,8 @@ export default defineConfig({ start_url: '/', icons: [ { src: '/brand/pwa-192.png', sizes: '192x192', type: 'image/png' }, - { src: '/brand/pwa-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' }, + { src: '/brand/pwa-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' }, + { src: '/brand/pwa-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }, ], }, workbox: {