From 35d91a5c489e8793523adcc45bc07332dc03bb2d Mon Sep 17 00:00:00 2001 From: Lars Nolden Date: Fri, 11 Sep 2026 11:58:53 +0200 Subject: [PATCH] Swap in the traced duck logo and set the wordmark in Montserrat The sidebar brand mark was a hand-drawn inline path. Replace it with the delivered vector trace, served from the Vite public directory so the Go binary embeds it and the mark stays editable as an asset rather than as JSX. Its eye and chart bars are evenodd cutouts, so they read as the navy sidebar showing through. Set the wordmark in Montserrat Bold and the tagline in Montserrat Medium at 0.4em tracking. The subsets are bundled from @fontsource instead of linked from Google Fonts: the Content-Security-Policy allows fonts from 'self' only, and a self-hosted workspace should not fetch its own brand from a third party. Tracking moves from 2px to em so it holds at every breakpoint's tagline size. --- web/package-lock.json | 10 ++++++++++ web/package.json | 1 + web/public/finance-duck-icon.svg | 5 +++++ web/src/main.tsx | 13 ++++++------- web/src/styles.css | 8 ++++---- 5 files changed, 26 insertions(+), 11 deletions(-) create mode 100644 web/public/finance-duck-icon.svg diff --git a/web/package-lock.json b/web/package-lock.json index b3281d8..b762407 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -8,6 +8,7 @@ "name": "finance-duck-web", "version": "0.1.0", "dependencies": { + "@fontsource/montserrat": "^5.3.0", "lucide-react": "^0.468.0", "react": "^19.1.1", "react-dom": "^19.1.1" @@ -745,6 +746,15 @@ "node": ">=18" } }, + "node_modules/@fontsource/montserrat": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@fontsource/montserrat/-/montserrat-5.3.0.tgz", + "integrity": "sha512-iQPDtZOnmM5ih4JBGaMSXisRap0ixb9bAUw2hDtY7EjVfaqiiNlKtVuJl9XclxUwtwMMHNcWXfQR6zI9x05+Tg==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", diff --git a/web/package.json b/web/package.json index 7489323..058a722 100644 --- a/web/package.json +++ b/web/package.json @@ -9,6 +9,7 @@ "format": "prettier --write src package.json tsconfig.json vite.config.ts index.html" }, "dependencies": { + "@fontsource/montserrat": "^5.3.0", "lucide-react": "^0.468.0", "react": "^19.1.1", "react-dom": "^19.1.1" diff --git a/web/public/finance-duck-icon.svg b/web/public/finance-duck-icon.svg new file mode 100644 index 0000000..3bb02c8 --- /dev/null +++ b/web/public/finance-duck-icon.svg @@ -0,0 +1,5 @@ + + Finance-duck icon + Mint duck silhouette with a transparent eye and three ascending transparent chart bars. Flat-color vector trace of the generated logo. + + diff --git a/web/src/main.tsx b/web/src/main.tsx index b09669e..a9bc798 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -25,6 +25,11 @@ import { Accounts } from "./Accounts"; import { Classification } from "./Classification"; import { Settings } from "./Settings"; import { ErrorMessage } from "./ui"; +// Montserrat carries the wordmark. The subsets are bundled rather than fetched +// from Google Fonts: the Content-Security-Policy serves fonts from 'self' only, +// and a self-hosted workspace must not phone home to render its own brand. +import "@fontsource/montserrat/latin-500.css"; +import "@fontsource/montserrat/latin-700.css"; import "./styles.css"; const navigation = [ { id: "overview", label: "Overview", icon: LayoutDashboard }, @@ -158,13 +163,7 @@ function App() { }} > financeduck diff --git a/web/src/styles.css b/web/src/styles.css index 1f9e756..0a426d3 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -129,6 +129,7 @@ code { gap: 11px; color: #fff; margin: 0 12px 43px; + font-family: Montserrat, Inter, ui-sans-serif, sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.9px; @@ -138,19 +139,18 @@ code { place-items: center; width: 39px; height: 42px; - color: #53c6a0; } .brand-light { - font-weight: 400; color: #d0dbdf; } .brand small { display: block; font-size: 8px; - letter-spacing: 2px; + font-weight: 500; + letter-spacing: 0.4em; + text-transform: uppercase; color: #7f90a4; margin-top: 6px; - font-weight: 600; } .nav-label { font-size: 9px;