feat(brand): roll out Gitmost logo, favicon and app name

Replace the bare brand text on pages with the Gitmost logo lockup
(mark + "gitmost" wordmark) and use the mark as the favicon.

- add generated logo lockups (text outlined from Space Grotesk SemiBold)
  in dark/light ink variants; add reusable theme-aware <BrandLogo> component
- use BrandLogo in the global header (mark-only on mobile, full lockup on
  desktop) and on auth pages, dropping the old Docmost icon + plain text
- point favicon to /brand/gitmost-favicon.svg (SVG primary + PNG fallbacks);
  regenerate favicon/app-icon PNGs from the brand SVGs
- rename app name Docmost -> Gitmost (getAppName, index.html title/apple
  title, manifest name); use getAppName() in the 404 title
- align theme/background colors to the brand tile (#0E1117)
- move brand guide and logos into docs/brand/ (canonical home) with a README,
  and serve runtime copies from apps/client/public/brand/

apps/client/src/components/layouts/global/app-header.tsx

@@ -1,10 +1,10 @@
 import {
   Box,
   Group,
-  Text,
   Tooltip,
 } from "@mantine/core";
 import classes from "./app-header.module.css";
+import { BrandLogo } from "@/components/ui/brand-logo";
 import TopMenu from "@/components/layouts/global/top-menu.tsx";
 import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
@@ -69,21 +69,11 @@ export function AppHeader() {
 
           <Link to="/home" className={classes.brand} aria-label="Gitmost">
             <Box hiddenFrom="sm" className={classes.brandIcon}>
-              <img
-                src="/icons/favicon-32x32.png"
-                alt="Gitmost"
-                width={22}
-                height={22}
-              />
+              <BrandLogo markOnly height={26} />
+            </Box>
+            <Box visibleFrom="sm" className={classes.brandIcon}>
+              <BrandLogo height={30} />
             </Box>
-            <Text
-              size="lg"
-              fw={600}
-              style={{ userSelect: "none" }}
-              visibleFrom="sm"
-            >
-              Gitmost
-            </Text>
           </Link>
 
           <Group ml={50} gap={5} className={classes.links} visibleFrom="sm">

apps/client/src/components/ui/brand-logo.tsx

@@ -0,0 +1,33 @@
+import { useComputedColorScheme } from "@mantine/core";
+
+type BrandLogoProps = {
+  // When true, render the mark only; otherwise render the full lockup (mark + wordmark).
+  markOnly?: boolean;
+  // Logo height in pixels; width scales automatically to preserve aspect ratio.
+  height?: number;
+  className?: string;
+};
+
+export function BrandLogo({
+  markOnly = false,
+  height = 28,
+  className,
+}: BrandLogoProps) {
+  // Detect the active color scheme and pick the contrasting ink variant.
+  // "*-light" = light ink for dark backgrounds, "*-dark" = dark ink for light backgrounds.
+  const colorScheme = useComputedColorScheme("light");
+  const variant = colorScheme === "dark" ? "light" : "dark";
+
+  const src = markOnly
+    ? `/brand/gitmost-mark-${variant}.svg`
+    : `/brand/gitmost-logo-${variant}.svg`;
+
+  return (
+    <img
+      src={src}
+      alt="Gitmost"
+      className={className}
+      style={{ height, width: "auto", display: "block", userSelect: "none" }}
+    />
+  );
+}

apps/client/src/components/ui/error-404.tsx

@@ -3,6 +3,7 @@ import classes from "./error-404.module.css";
 import { Link } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
+import { getAppName } from "@/lib/config";
 
 export function Error404() {
   const { t } = useTranslation();
@@ -10,7 +11,7 @@ export function Error404() {
   return (
     <>
       <Helmet>
-        <title>{t("404 page not found")} - Docmost</title>
+        <title>{t("404 page not found")} - {getAppName()}</title>
       </Helmet>
       <Container className={classes.root}>
         <Title className={classes.title}>{t("404 page not found")}</Title>

apps/client/src/features/auth/components/auth-layout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Group, Text } from "@mantine/core";
+import { Group } from "@mantine/core";
 import classes from "./auth.module.css";
+import { BrandLogo } from "@/components/ui/brand-logo";
 
 type AuthLayoutProps = {
   children: React.ReactNode;
@@ -10,15 +11,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
   return (
     <>
       <Group justify="center" gap={8} className={classes.logo}>
-        <img
-          src="/icons/favicon-32x32.png"
-          alt="Gitmost"
-          width={22}
-          height={22}
-        />
-        <Text size="28px" fw={700} style={{ userSelect: "none" }}>
-          Gitmost
-        </Text>
+        <BrandLogo height={40} />
       </Group>
       <main>{children}</main>
     </>

apps/client/src/lib/config.ts

@@ -10,7 +10,7 @@ declare global {
 }
 
 export function getAppName(): string {
-  return "Docmost";
+  return "Gitmost";
 }
 
 export function getAppUrl(): string {