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 @@
+
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;