vvzvlad/gitmost
1
0
Fork 0
Code Issues 14 Pull Requests 12 Packages Projects Releases Activity

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

Browse Source 
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/
This commit is contained in:
vvzvlad
2026-06-18 00:12:26 +03:00
parent 81b103f40b
commit 4f6b667cf7
25 changed files with 403 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/index.html
View File

@@ -2,16 +2,17 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/brand/gitmost-favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no" />
<title>Docmost</title> <title>Gitmost</title>
<meta name="theme-color" content="#1f1f1f" media="(prefers-color-scheme: dark)" /> <meta name="theme-color" content="#0E1117" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#f6f7f9" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#f6f7f9" media="(prefers-color-scheme: light)" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-title" content="Docmost" /> <meta name="apple-mobile-web-app-title" content="Gitmost" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />
<!--meta-tags--> <!--meta-tags-->

9
apps/client/public/brand/gitmost-favicon.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96">
<rect width="96" height="96" rx="22" fill="#0E1117"></rect>
<g transform="translate(48 48) scale(0.94) translate(-48 -48)" fill="none">
<path d="M24 12V60" stroke="#E6EDF3" stroke-width="10" stroke-linecap="round"></path>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#E6EDF3" stroke-width="10" stroke-linecap="round"></path>
<circle cx="72" cy="24" r="13" fill="#3FB950"></circle>
<circle cx="24" cy="72" r="13" fill="#3FB950"></circle>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 552 B

17
apps/client/public/brand/gitmost-logo-dark.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7.25 -7.25 264.96 72.50" width="265" height="73" fill="none">
<g transform="scale(0.60417)">
<path d="M24 12V60" stroke="#1F2328" stroke-width="9" stroke-linecap="round"/>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#1F2328" stroke-width="9" stroke-linecap="round"/>
<circle cx="72" cy="24" r="12" fill="#3FB950"/>
<circle cx="24" cy="72" r="12" fill="#3FB950"/>
</g>
<g transform="translate(60.754 42.689) scale(0.054000 -0.054000)" fill="#1F2328">
<path transform="translate(0.000 0)" d="M49 245V260Q49 338 80.0 393.5Q111 449 163.0 478.5Q215 508 277 508Q347 508 383.5 483.0Q420 458 437 429H454V494H566V-94Q566 -143 538.0 -171.5Q510 -200 462 -200H130V-100H423Q452 -100 452 -70V73H435Q424 56 405.0 38.5Q386 21 355.0 9.0Q324 -3 277 -3Q215 -3 163.0 26.5Q111 56 80.0 111.5Q49 167 49 245ZM309 98Q371 98 412.0 137.5Q453 177 453 248V258Q453 330 412.5 369.0Q372 408 309 408Q247 408 205.5 369.0Q164 330 164 258V248Q164 177 205.5 137.5Q247 98 309 98Z"/>
<path transform="translate(599.000 0)" d="M73 0V494H188V0ZM130 557Q99 557 76.5 577.5Q54 598 54 632Q54 666 76.5 686.5Q99 707 130 707Q163 707 184.5 686.5Q206 666 206 632Q206 598 184.5 577.5Q163 557 130 557Z"/>
<path transform="translate(820.000 0)" d="M261 0Q213 0 184.5 28.5Q156 57 156 106V399H27V494H156V653H271V494H413V399H271V125Q271 95 299 95H398V0Z"/>
<path transform="translate(1237.000 0)" d="M73 0V494H186V439H203Q216 464 246.5 483.5Q277 503 328 503Q382 503 415.0 481.0Q448 459 465 425H481Q498 459 530.0 481.0Q562 503 621 503Q667 503 704.5 483.0Q742 463 764.5 424.0Q787 385 787 327V0H672V319Q672 362 649.0 384.5Q626 407 585 407Q540 407 513.5 377.5Q487 348 487 293V0H373V319Q373 362 350.0 384.5Q327 407 286 407Q240 407 214.0 377.5Q188 348 188 293V0Z"/>
<path transform="translate(2052.000 0)" d="M307 -14Q233 -14 174.5 16.5Q116 47 82.5 103.5Q49 160 49 239V255Q49 334 82.5 391.0Q116 448 174.5 478.0Q233 508 307 508Q381 508 439.0 478.0Q497 448 530.5 391.0Q564 334 564 255V239Q564 160 530.5 103.5Q497 47 439.0 16.5Q381 -14 307 -14ZM307 88Q370 88 410.0 128.5Q450 169 450 242V252Q450 325 410.0 365.5Q370 406 307 406Q244 406 204.0 365.5Q164 325 164 252V242Q164 169 204.0 128.5Q244 88 307 88Z"/>
<path transform="translate(2625.000 0)" d="M277 -14Q181 -14 119.0 28.0Q57 70 44 151L150 178Q157 140 175.0 118.0Q193 96 219.5 87.0Q246 78 277 78Q324 78 347.5 95.0Q371 112 371 138Q371 165 348.5 178.0Q326 191 280 200L249 205Q198 215 156.0 232.5Q114 250 88.5 280.5Q63 311 63 358Q63 430 116.5 469.0Q170 508 257 508Q340 508 394.0 471.0Q448 434 464 372L358 340Q350 382 323.0 399.5Q296 417 257 417Q217 417 195.5 403.0Q174 389 174 363Q174 337 196.0 324.0Q218 311 255 305L286 299Q341 289 385.5 273.0Q430 257 456.0 227.0Q482 197 482 146Q482 69 426.5 27.5Q371 -14 277 -14Z"/>
<path transform="translate(3100.000 0)" d="M261 0Q213 0 184.5 28.5Q156 57 156 106V399H27V494H156V653H271V494H413V399H271V125Q271 95 299 95H398V0Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

17
apps/client/public/brand/gitmost-logo-light.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7.25 -7.25 264.96 72.50" width="265" height="73" fill="none">
<g transform="scale(0.60417)">
<path d="M24 12V60" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"/>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"/>
<circle cx="72" cy="24" r="12" fill="#3FB950"/>
<circle cx="24" cy="72" r="12" fill="#3FB950"/>
</g>
<g transform="translate(60.754 42.689) scale(0.054000 -0.054000)" fill="#E6EDF3">
<path transform="translate(0.000 0)" d="M49 245V260Q49 338 80.0 393.5Q111 449 163.0 478.5Q215 508 277 508Q347 508 383.5 483.0Q420 458 437 429H454V494H566V-94Q566 -143 538.0 -171.5Q510 -200 462 -200H130V-100H423Q452 -100 452 -70V73H435Q424 56 405.0 38.5Q386 21 355.0 9.0Q324 -3 277 -3Q215 -3 163.0 26.5Q111 56 80.0 111.5Q49 167 49 245ZM309 98Q371 98 412.0 137.5Q453 177 453 248V258Q453 330 412.5 369.0Q372 408 309 408Q247 408 205.5 369.0Q164 330 164 258V248Q164 177 205.5 137.5Q247 98 309 98Z"/>
<path transform="translate(599.000 0)" d="M73 0V494H188V0ZM130 557Q99 557 76.5 577.5Q54 598 54 632Q54 666 76.5 686.5Q99 707 130 707Q163 707 184.5 686.5Q206 666 206 632Q206 598 184.5 577.5Q163 557 130 557Z"/>
<path transform="translate(820.000 0)" d="M261 0Q213 0 184.5 28.5Q156 57 156 106V399H27V494H156V653H271V494H413V399H271V125Q271 95 299 95H398V0Z"/>
<path transform="translate(1237.000 0)" d="M73 0V494H186V439H203Q216 464 246.5 483.5Q277 503 328 503Q382 503 415.0 481.0Q448 459 465 425H481Q498 459 530.0 481.0Q562 503 621 503Q667 503 704.5 483.0Q742 463 764.5 424.0Q787 385 787 327V0H672V319Q672 362 649.0 384.5Q626 407 585 407Q540 407 513.5 377.5Q487 348 487 293V0H373V319Q373 362 350.0 384.5Q327 407 286 407Q240 407 214.0 377.5Q188 348 188 293V0Z"/>
<path transform="translate(2052.000 0)" d="M307 -14Q233 -14 174.5 16.5Q116 47 82.5 103.5Q49 160 49 239V255Q49 334 82.5 391.0Q116 448 174.5 478.0Q233 508 307 508Q381 508 439.0 478.0Q497 448 530.5 391.0Q564 334 564 255V239Q564 160 530.5 103.5Q497 47 439.0 16.5Q381 -14 307 -14ZM307 88Q370 88 410.0 128.5Q450 169 450 242V252Q450 325 410.0 365.5Q370 406 307 406Q244 406 204.0 365.5Q164 325 164 252V242Q164 169 204.0 128.5Q244 88 307 88Z"/>
<path transform="translate(2625.000 0)" d="M277 -14Q181 -14 119.0 28.0Q57 70 44 151L150 178Q157 140 175.0 118.0Q193 96 219.5 87.0Q246 78 277 78Q324 78 347.5 95.0Q371 112 371 138Q371 165 348.5 178.0Q326 191 280 200L249 205Q198 215 156.0 232.5Q114 250 88.5 280.5Q63 311 63 358Q63 430 116.5 469.0Q170 508 257 508Q340 508 394.0 471.0Q448 434 464 372L358 340Q350 382 323.0 399.5Q296 417 257 417Q217 417 195.5 403.0Q174 389 174 363Q174 337 196.0 324.0Q218 311 255 305L286 299Q341 289 385.5 273.0Q430 257 456.0 227.0Q482 197 482 146Q482 69 426.5 27.5Q371 -14 277 -14Z"/>
<path transform="translate(3100.000 0)" d="M261 0Q213 0 184.5 28.5Q156 57 156 106V399H27V494H156V653H271V494H413V399H271V125Q271 95 299 95H398V0Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

6
apps/client/public/brand/gitmost-mark-dark.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" fill="none">
<path d="M24 12V60" stroke="#1F2328" stroke-width="9" stroke-linecap="round"></path>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#1F2328" stroke-width="9" stroke-linecap="round"></path>
<circle cx="72" cy="24" r="12" fill="#3FB950"></circle>
<circle cx="24" cy="72" r="12" fill="#3FB950"></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B

6
apps/client/public/brand/gitmost-mark-light.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" fill="none">
<path d="M24 12V60" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"></path>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"></path>
<circle cx="72" cy="24" r="12" fill="#3FB950"></circle>
<circle cx="24" cy="72" r="12" fill="#3FB950"></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B

BIN
apps/client/public/icons/app-icon-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
apps/client/public/icons/app-icon-512x512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
apps/client/public/icons/favicon-16x16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 509 B

After

Width:  |  Height:  |  Size: 525 B

BIN
apps/client/public/icons/favicon-32x32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 881 B

After

Width:  |  Height:  |  Size: 1010 B

8
apps/client/public/manifest.json
View File

@@ -1,10 +1,10 @@
{ {
"name": "Docmost", "name": "Gitmost",
"short_name": "Docmost", "short_name": "Gitmost",
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "#222", "background_color": "#0E1117",
"theme_color": "#222", "theme_color": "#0E1117",
"icons": [ "icons": [
{ {
"src": "icons/favicon-16x16.png", "src": "icons/favicon-16x16.png",

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

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

33
apps/client/src/components/ui/brand-logo.tsx Normal file
View File

@@ -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" }}
/>
);
}

3
apps/client/src/components/ui/error-404.tsx
View File

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

13
apps/client/src/features/auth/components/auth-layout.tsx
View File

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

2
apps/client/src/lib/config.ts
View File

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

31
docs/brand/README.md Normal file
View File

@@ -0,0 +1,31 @@
# Gitmost brand assets
Canonical home for the Gitmost logo, marks and brand guide.
See [gitmost-brand-guide.html](./gitmost-brand-guide.html) for usage rules
(colors, clear space, don'ts).
## Files
| File | Use |
| --- | --- |
| `gitmost-brand-guide.html` | Brand guide — open in a browser. |
| `gitmost-logo-dark.svg` | Primary horizontal logo (mark + wordmark), dark ink — for light backgrounds. |
| `gitmost-logo-light.svg` | Primary horizontal logo, light ink — for dark backgrounds. |
| `gitmost-icon.svg` | App icon — mark on a dark `#0E1117` tile (256px). |
| `gitmost-favicon.svg` | Favicon — mark on a dark tile, heavier strokes for small sizes. |
| `gitmost-mark-dark.svg` | Bare mark, dark strokes — for light backgrounds. |
| `gitmost-mark-light.svg` | Bare mark, light strokes — for dark backgrounds. |
| `gitmost-mark-mono.svg` | Single-color mark (print, engraving, B/W). |
## Runtime copies
The web client serves the assets it needs from `apps/client/public/brand/`
(logos, marks, favicon) and `apps/client/public/icons/` (PNG favicons and PWA
app icons rasterized from `gitmost-favicon.svg` / `gitmost-icon.svg`). When a
brand asset here changes, refresh those copies.
## Wordmark
The wordmark is "gitmost" set in Space Grotesk SemiBold (600), tracking
-0.04em, all lowercase. In `gitmost-logo-*.svg` the text is converted to
outlines, so no font is required at runtime.

195
docs/brand/gitmost-brand-guide.html Normal file
View File

@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
body { margin:0; background:#fff; -webkit-font-smoothing:antialiased; }
.doc { box-sizing:border-box; max-width:8.5in; margin:0 auto; background:inherit;
padding:48px clamp(24px,5vw,0.75in) 96px; font-family:'Sora',sans-serif;
color:#1F2328; font-size:15px; line-height:1.65; }
.doc-frame { width:100%; border-collapse:collapse; }
.doc-frame td { padding:0; }
.running-hdr, .running-ftr, .hdr-space, .ftr-space { display:none; }
h1,h2,h3 { text-wrap:balance; font-family:'Space Grotesk',sans-serif; }
p,li { text-wrap:pretty; }
h1 { font-size:34px; font-weight:600; letter-spacing:-0.025em; line-height:1.1; margin:0 0 6px; }
h2 { font-size:20px; font-weight:600; letter-spacing:-0.02em; margin:46px 0 14px; padding-top:18px; border-top:1px solid #ECEEF0; }
h3 { font-size:15px; font-weight:600; letter-spacing:-0.01em; margin:24px 0 8px; }
p { margin:0 0 14px; }
code,.mono { font-family:'JetBrains Mono',monospace; font-size:0.86em; }
.lead { font-size:17px; color:#3D444D; line-height:1.6; margin:0 0 8px; }
table.spec { width:100%; border-collapse:collapse; margin:10px 0 6px; font-size:14px; }
table.spec th { text-align:left; font-weight:600; font-family:'Space Grotesk',sans-serif; color:#6E7781; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; padding:0 0 9px; border-bottom:1px solid #D9DCDF; }
table.spec td { padding:11px 0; border-bottom:1px solid #ECEEF0; vertical-align:middle; }
figure { margin:0; }
@page { size:letter; margin:0; }
@media print {
html { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
html,body { margin:0; padding:0; }
.doc { max-width:none !important; margin:0 !important; padding:0 0.75in !important; box-shadow:none !important; border:none !important; }
#dc-root,.sc-host { height:auto !important; }
.hdr-space,.ftr-space { display:table-cell; height:0.75in !important; }
.running-hdr,.running-ftr { display:flex !important; justify-content:space-between; align-items:baseline; position:fixed !important; left:0; right:0; margin:0 !important; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:#9AA4AE; font-family:'Space Grotesk',sans-serif; }
.running-hdr { top:0; padding:0.35in 0.75in 0 !important; }
.running-ftr { bottom:0; padding:0 0.75in 0.35in !important; }
h1,h2,h3 { break-after:avoid; }
figure,pre,blockquote,img,svg,tr,.card { break-inside:avoid; }
p,li { orphans:3; widows:3; }
.screen-only { display:none !important; }
}
</style>
</helmet>
<main class="doc">
<header class="running-hdr"><span>Gitmost · Logo</span><span>Brand guide v1</span></header>
<table class="doc-frame" role="presentation">
<thead><tr><td class="hdr-space"></td></tr></thead>
<tbody><tr><td>
<h1>Gitmost Logo</h1>
<p class="lead">A short guide to the mark, wordmark, color and icons. Gitmost is a fork of Docmost with git features — the visual language is built around the idea of a document under version control.</p>
<!-- primary lockup -->
<figure style="margin:26px 0 6px;border:1px solid #ECEEF0;border-radius:6px;padding:48px;display:flex;align-items:center;justify-content:center;gap:4px;">
<img src="./gitmost-mark-dark.svg" width="58" height="58" alt="Gitmost mark"/>
<span style="font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:54px;letter-spacing:-0.04em;color:#1F2328;line-height:1;">gitmost</span>
</figure>
<p style="font-size:13px;color:#9AA4AE;margin-top:10px;">Primary horizontal logo: mark + wordmark.</p>
<h2>Concept</h2>
<p>The mark is a <strong>git-branch</strong> pictogram: a vertical commit line and a branch that resolves into a separate node. It reads instantly as version control. The green nodes carry the “git” idea on top of a neutral structure — so the mark works both as an app icon and as a single-color favicon.</p>
<p>The wordmark is deliberately lowercase and calm: the product is a tool, not a billboard. The geometric grotesk Space Grotesk lends a technical feel without being cold.</p>
<h2>Construction</h2>
<div style="display:flex;gap:28px;align-items:center;flex-wrap:wrap;">
<figure style="background:#0E1117;border-radius:14px;padding:26px;flex:none;">
<img src="./gitmost-mark-light.svg" width="120" height="120" alt="Mark geometry"/>
</figure>
<div style="flex:1;min-width:280px;">
<p style="margin-bottom:10px;">The mark is built from four primitives on a 96×96 grid:</p>
<ul style="margin:0 0 8px;padding-left:20px;">
<li>vertical line — the main branch;</li>
<li>quarter-arc — the branch-off;</li>
<li>top node — the diverged commit;</li>
<li>bottom node — the head of the main branch.</li>
</ul>
<p style="margin:0;">Stroke weight is <span class="mono">9</span> units, node radius <span class="mono">12</span>, with round line caps. Keep these proportions at any scale; never stretch the mark non-uniformly.</p>
</div>
</div>
<h2>Clear space &amp; minimum size</h2>
<p>Minimum clear space around the logo equals <strong>the node diameter</strong> (≈ the x-height of the wordmark). Keep text, other logos and layout edges out of this zone.</p>
<table class="spec">
<thead><tr><th>Context</th><th>Minimum size</th></tr></thead>
<tbody>
<tr><td>Mark (icon)</td><td class="mono">16 px</td></tr>
<tr><td>Horizontal logo</td><td class="mono">mark height ≥ 20 px</td></tr>
<tr><td>Print</td><td class="mono">mark ≥ 6 mm</td></tr>
</tbody>
</table>
<h2>Color</h2>
<table class="spec">
<thead><tr><th style="width:54px;">&nbsp;</th><th>HEX</th><th>Use</th></tr></thead>
<tbody>
<tr><td><span style="display:inline-block;width:36px;height:36px;border-radius:7px;background:#3FB950;"></span></td><td class="mono">#3FB950</td><td>Accent — git green. Mark nodes, active states.</td></tr>
<tr><td><span style="display:inline-block;width:36px;height:36px;border-radius:7px;background:#56D364;"></span></td><td class="mono">#56D364</td><td>Light accent. Optional — highlights / gradation.</td></tr>
<tr><td><span style="display:inline-block;width:36px;height:36px;border-radius:7px;background:#0E1117;"></span></td><td class="mono">#0E1117</td><td>Icon tile, dark UI background.</td></tr>
<tr><td><span style="display:inline-block;width:36px;height:36px;border-radius:7px;background:#E6EDF3;border:1px solid #E0E2E4;"></span></td><td class="mono">#E6EDF3</td><td>Mark structure on dark backgrounds.</td></tr>
<tr><td><span style="display:inline-block;width:36px;height:36px;border-radius:7px;background:#1F2328;"></span></td><td class="mono">#1F2328</td><td>Mark structure and text on light backgrounds.</td></tr>
</tbody>
</table>
<h2>Wordmark</h2>
<figure style="border:1px solid #ECEEF0;border-radius:6px;padding:30px 34px;margin:6px 0 14px;">
<div style="font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:52px;letter-spacing:-0.04em;color:#1F2328;line-height:1;">gitmost</div>
</figure>
<table class="spec">
<thead><tr><th>Property</th><th>Value</th></tr></thead>
<tbody>
<tr><td>Typeface</td><td class="mono">Space Grotesk</td></tr>
<tr><td>Weight</td><td class="mono">600 · SemiBold</td></tr>
<tr><td>Tracking</td><td class="mono">-0.04em</td></tr>
<tr><td>Case</td><td>all lowercase — never “Gitmost” or all-caps in the logo</td></tr>
<tr><td>Color</td><td>single color: <span class="mono">#1F2328</span> on light, <span class="mono">#E6EDF3</span> on dark</td></tr>
</tbody>
</table>
<p>An allowed accent variant sets “git” in <span class="mono">#3FB950</span> and leaves “most” neutral. Use sparingly (marketing, headers), never as the primary logo.</p>
<h2>App icon &amp; favicon</h2>
<div style="display:flex;gap:24px;flex-wrap:wrap;margin:8px 0 6px;">
<figure class="card" style="flex:1;min-width:240px;border:1px solid #ECEEF0;border-radius:6px;padding:26px;">
<div style="font-size:12px;color:#9AA4AE;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:18px;">Icon</div>
<div style="display:flex;align-items:flex-end;gap:18px;">
<img src="./gitmost-icon.svg" width="84" height="84" alt="" style="border-radius:20px;"/>
<img src="./gitmost-icon.svg" width="52" height="52" alt="" style="border-radius:12px;"/>
</div>
<div class="mono" style="font-size:12px;color:#9AA4AE;margin-top:16px;">gitmost-icon.svg</div>
</figure>
<figure class="card" style="flex:1;min-width:240px;border:1px solid #ECEEF0;border-radius:6px;padding:26px;">
<div style="font-size:12px;color:#9AA4AE;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:18px;">Favicon</div>
<div style="display:flex;align-items:flex-end;gap:18px;">
<img src="./gitmost-favicon.svg" width="32" height="32" alt="" style="border-radius:7px;"/>
<img src="./gitmost-favicon.svg" width="24" height="24" alt="" style="border-radius:5px;"/>
<img src="./gitmost-favicon.svg" width="16" height="16" alt="" style="border-radius:4px;"/>
</div>
<div class="mono" style="font-size:12px;color:#9AA4AE;margin-top:16px;">gitmost-favicon.svg</div>
</figure>
</div>
<p>The icon is the mark on a <span class="mono">#0E1117</span> tile with ~23% corner radius. The favicon uses slightly heavier strokes for legibility at 16 px. On a light tile, use the inverse: green background, dark mark.</p>
<h2>Color variants</h2>
<div style="display:flex;gap:18px;flex-wrap:wrap;margin:8px 0;">
<figure class="card" style="flex:1;min-width:150px;border:1px solid #ECEEF0;border-radius:6px;padding:28px;display:flex;flex-direction:column;align-items:center;gap:14px;">
<img src="./gitmost-mark-dark.svg" width="48" height="48" alt=""/>
<span style="font-size:12px;color:#6E7781;">On light</span>
</figure>
<figure class="card" style="flex:1;min-width:150px;background:#0E1117;border-radius:6px;padding:28px;display:flex;flex-direction:column;align-items:center;gap:14px;">
<img src="./gitmost-mark-light.svg" width="48" height="48" alt=""/>
<span style="font-size:12px;color:#7D8590;">On dark</span>
</figure>
<figure class="card" style="flex:1;min-width:150px;border:1px solid #ECEEF0;border-radius:6px;padding:28px;display:flex;flex-direction:column;align-items:center;gap:14px;">
<img src="./gitmost-mark-mono.svg" width="48" height="48" alt=""/>
<span style="font-size:12px;color:#6E7781;">Mono — one color</span>
</figure>
</div>
<h2>Don’ts</h2>
<ul style="margin:0 0 8px;padding-left:20px;">
<li>don’t recolor the nodes to an arbitrary color — accent is only <span class="mono">#3FB950</span>;</li>
<li>don’t stretch, skew or rotate the mark;</li>
<li>don’t capitalize or all-caps the name in the logo;</li>
<li>don’t swap the wordmark typeface;</li>
<li>don’t add shadows, outlines or gradients to the mark;</li>
<li>don’t place the logo on a busy background without a tile / clear space.</li>
</ul>
<h2>Files</h2>
<table class="spec">
<thead><tr><th>File</th><th>Use</th></tr></thead>
<tbody>
<tr><td class="mono">gitmost-icon.svg</td><td>App icon, dark tile (256px)</td></tr>
<tr><td class="mono">gitmost-favicon.svg</td><td>Favicon, heavier strokes for small sizes</td></tr>
<tr><td class="mono">gitmost-mark-dark.svg</td><td>Bare mark for light backgrounds</td></tr>
<tr><td class="mono">gitmost-mark-light.svg</td><td>Bare mark for dark backgrounds</td></tr>
<tr><td class="mono">gitmost-mark-mono.svg</td><td>Single-color mark (print, engraving, B/W)</td></tr>
</tbody>
</table>
<p style="color:#6E7781;font-size:13px;margin-top:6px;">The wordmark uses the system typeface Space Grotesk and is not embedded in the SVG. For print outside a browser, convert the logo text to outlines.</p>
</td></tr></tbody>
<tfoot><tr><td class="ftr-space"></td></tr></tfoot>
</table>
<footer class="running-ftr"><span>Gitmost</span><span>Logo brand guide</span></footer>
</main>
</x-dc>
</body>
</html>

9
docs/brand/gitmost-favicon.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96">
<rect width="96" height="96" rx="22" fill="#0E1117"></rect>
<g transform="translate(48 48) scale(0.94) translate(-48 -48)" fill="none">
<path d="M24 12V60" stroke="#E6EDF3" stroke-width="10" stroke-linecap="round"></path>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#E6EDF3" stroke-width="10" stroke-linecap="round"></path>
<circle cx="72" cy="24" r="13" fill="#3FB950"></circle>
<circle cx="24" cy="72" r="13" fill="#3FB950"></circle>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 552 B

9
docs/brand/gitmost-icon.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
<rect width="256" height="256" rx="60" fill="#0E1117"></rect>
<g transform="translate(128 128) scale(2.15) translate(-48 -48)" fill="none">
<path d="M24 12V60" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"></path>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"></path>
<circle cx="72" cy="24" r="12" fill="#3FB950"></circle>
<circle cx="24" cy="72" r="12" fill="#3FB950"></circle>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 558 B

17
docs/brand/gitmost-logo-dark.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7.25 -7.25 264.96 72.50" width="265" height="73" fill="none">
<g transform="scale(0.60417)">
<path d="M24 12V60" stroke="#1F2328" stroke-width="9" stroke-linecap="round"/>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#1F2328" stroke-width="9" stroke-linecap="round"/>
<circle cx="72" cy="24" r="12" fill="#3FB950"/>
<circle cx="24" cy="72" r="12" fill="#3FB950"/>
</g>
<g transform="translate(60.754 42.689) scale(0.054000 -0.054000)" fill="#1F2328">
<path transform="translate(0.000 0)" d="M49 245V260Q49 338 80.0 393.5Q111 449 163.0 478.5Q215 508 277 508Q347 508 383.5 483.0Q420 458 437 429H454V494H566V-94Q566 -143 538.0 -171.5Q510 -200 462 -200H130V-100H423Q452 -100 452 -70V73H435Q424 56 405.0 38.5Q386 21 355.0 9.0Q324 -3 277 -3Q215 -3 163.0 26.5Q111 56 80.0 111.5Q49 167 49 245ZM309 98Q371 98 412.0 137.5Q453 177 453 248V258Q453 330 412.5 369.0Q372 408 309 408Q247 408 205.5 369.0Q164 330 164 258V248Q164 177 205.5 137.5Q247 98 309 98Z"/>
<path transform="translate(599.000 0)" d="M73 0V494H188V0ZM130 557Q99 557 76.5 577.5Q54 598 54 632Q54 666 76.5 686.5Q99 707 130 707Q163 707 184.5 686.5Q206 666 206 632Q206 598 184.5 577.5Q163 557 130 557Z"/>
<path transform="translate(820.000 0)" d="M261 0Q213 0 184.5 28.5Q156 57 156 106V399H27V494H156V653H271V494H413V399H271V125Q271 95 299 95H398V0Z"/>
<path transform="translate(1237.000 0)" d="M73 0V494H186V439H203Q216 464 246.5 483.5Q277 503 328 503Q382 503 415.0 481.0Q448 459 465 425H481Q498 459 530.0 481.0Q562 503 621 503Q667 503 704.5 483.0Q742 463 764.5 424.0Q787 385 787 327V0H672V319Q672 362 649.0 384.5Q626 407 585 407Q540 407 513.5 377.5Q487 348 487 293V0H373V319Q373 362 350.0 384.5Q327 407 286 407Q240 407 214.0 377.5Q188 348 188 293V0Z"/>
<path transform="translate(2052.000 0)" d="M307 -14Q233 -14 174.5 16.5Q116 47 82.5 103.5Q49 160 49 239V255Q49 334 82.5 391.0Q116 448 174.5 478.0Q233 508 307 508Q381 508 439.0 478.0Q497 448 530.5 391.0Q564 334 564 255V239Q564 160 530.5 103.5Q497 47 439.0 16.5Q381 -14 307 -14ZM307 88Q370 88 410.0 128.5Q450 169 450 242V252Q450 325 410.0 365.5Q370 406 307 406Q244 406 204.0 365.5Q164 325 164 252V242Q164 169 204.0 128.5Q244 88 307 88Z"/>
<path transform="translate(2625.000 0)" d="M277 -14Q181 -14 119.0 28.0Q57 70 44 151L150 178Q157 140 175.0 118.0Q193 96 219.5 87.0Q246 78 277 78Q324 78 347.5 95.0Q371 112 371 138Q371 165 348.5 178.0Q326 191 280 200L249 205Q198 215 156.0 232.5Q114 250 88.5 280.5Q63 311 63 358Q63 430 116.5 469.0Q170 508 257 508Q340 508 394.0 471.0Q448 434 464 372L358 340Q350 382 323.0 399.5Q296 417 257 417Q217 417 195.5 403.0Q174 389 174 363Q174 337 196.0 324.0Q218 311 255 305L286 299Q341 289 385.5 273.0Q430 257 456.0 227.0Q482 197 482 146Q482 69 426.5 27.5Q371 -14 277 -14Z"/>
<path transform="translate(3100.000 0)" d="M261 0Q213 0 184.5 28.5Q156 57 156 106V399H27V494H156V653H271V494H413V399H271V125Q271 95 299 95H398V0Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

17
docs/brand/gitmost-logo-light.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7.25 -7.25 264.96 72.50" width="265" height="73" fill="none">
<g transform="scale(0.60417)">
<path d="M24 12V60" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"/>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"/>
<circle cx="72" cy="24" r="12" fill="#3FB950"/>
<circle cx="24" cy="72" r="12" fill="#3FB950"/>
</g>
<g transform="translate(60.754 42.689) scale(0.054000 -0.054000)" fill="#E6EDF3">
<path transform="translate(0.000 0)" d="M49 245V260Q49 338 80.0 393.5Q111 449 163.0 478.5Q215 508 277 508Q347 508 383.5 483.0Q420 458 437 429H454V494H566V-94Q566 -143 538.0 -171.5Q510 -200 462 -200H130V-100H423Q452 -100 452 -70V73H435Q424 56 405.0 38.5Q386 21 355.0 9.0Q324 -3 277 -3Q215 -3 163.0 26.5Q111 56 80.0 111.5Q49 167 49 245ZM309 98Q371 98 412.0 137.5Q453 177 453 248V258Q453 330 412.5 369.0Q372 408 309 408Q247 408 205.5 369.0Q164 330 164 258V248Q164 177 205.5 137.5Q247 98 309 98Z"/>
<path transform="translate(599.000 0)" d="M73 0V494H188V0ZM130 557Q99 557 76.5 577.5Q54 598 54 632Q54 666 76.5 686.5Q99 707 130 707Q163 707 184.5 686.5Q206 666 206 632Q206 598 184.5 577.5Q163 557 130 557Z"/>
<path transform="translate(820.000 0)" d="M261 0Q213 0 184.5 28.5Q156 57 156 106V399H27V494H156V653H271V494H413V399H271V125Q271 95 299 95H398V0Z"/>
<path transform="translate(1237.000 0)" d="M73 0V494H186V439H203Q216 464 246.5 483.5Q277 503 328 503Q382 503 415.0 481.0Q448 459 465 425H481Q498 459 530.0 481.0Q562 503 621 503Q667 503 704.5 483.0Q742 463 764.5 424.0Q787 385 787 327V0H672V319Q672 362 649.0 384.5Q626 407 585 407Q540 407 513.5 377.5Q487 348 487 293V0H373V319Q373 362 350.0 384.5Q327 407 286 407Q240 407 214.0 377.5Q188 348 188 293V0Z"/>
<path transform="translate(2052.000 0)" d="M307 -14Q233 -14 174.5 16.5Q116 47 82.5 103.5Q49 160 49 239V255Q49 334 82.5 391.0Q116 448 174.5 478.0Q233 508 307 508Q381 508 439.0 478.0Q497 448 530.5 391.0Q564 334 564 255V239Q564 160 530.5 103.5Q497 47 439.0 16.5Q381 -14 307 -14ZM307 88Q370 88 410.0 128.5Q450 169 450 242V252Q450 325 410.0 365.5Q370 406 307 406Q244 406 204.0 365.5Q164 325 164 252V242Q164 169 204.0 128.5Q244 88 307 88Z"/>
<path transform="translate(2625.000 0)" d="M277 -14Q181 -14 119.0 28.0Q57 70 44 151L150 178Q157 140 175.0 118.0Q193 96 219.5 87.0Q246 78 277 78Q324 78 347.5 95.0Q371 112 371 138Q371 165 348.5 178.0Q326 191 280 200L249 205Q198 215 156.0 232.5Q114 250 88.5 280.5Q63 311 63 358Q63 430 116.5 469.0Q170 508 257 508Q340 508 394.0 471.0Q448 434 464 372L358 340Q350 382 323.0 399.5Q296 417 257 417Q217 417 195.5 403.0Q174 389 174 363Q174 337 196.0 324.0Q218 311 255 305L286 299Q341 289 385.5 273.0Q430 257 456.0 227.0Q482 197 482 146Q482 69 426.5 27.5Q371 -14 277 -14Z"/>
<path transform="translate(3100.000 0)" d="M261 0Q213 0 184.5 28.5Q156 57 156 106V399H27V494H156V653H271V494H413V399H271V125Q271 95 299 95H398V0Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

6
docs/brand/gitmost-mark-dark.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" fill="none">
<path d="M24 12V60" stroke="#1F2328" stroke-width="9" stroke-linecap="round"></path>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#1F2328" stroke-width="9" stroke-linecap="round"></path>
<circle cx="72" cy="24" r="12" fill="#3FB950"></circle>
<circle cx="24" cy="72" r="12" fill="#3FB950"></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B

6
docs/brand/gitmost-mark-light.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" fill="none">
<path d="M24 12V60" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"></path>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#E6EDF3" stroke-width="9" stroke-linecap="round"></path>
<circle cx="72" cy="24" r="12" fill="#3FB950"></circle>
<circle cx="24" cy="72" r="12" fill="#3FB950"></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B

6
docs/brand/gitmost-mark-mono.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" fill="none">
<path d="M24 12V60" stroke="#1F2328" stroke-width="9" stroke-linecap="round"></path>
<path d="M72 36A36 36 0 0 1 36 72" stroke="#1F2328" stroke-width="9" stroke-linecap="round"></path>
<circle cx="72" cy="24" r="12" fill="#1F2328"></circle>
<circle cx="24" cy="72" r="12" fill="#1F2328"></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B