# GitGraf Brand Guidelines

Version 1.1 · 29 August 2026

GitGraf’s identity expresses one idea: every change in an AI-built system should connect to a clear, trustworthy signal. The three-node branching mark is the primary symbol. Its blue-to-cyan gradient conveys movement from code to verified production.

## Primary Assets

Use the horizontal logo whenever width permits. Use the standalone mark for app icons, avatars, favicons, or compact product surfaces. Use the stacked lockup only when a square composition is preferable.

| Use | Asset |
| --- | --- |
| Dark interface or dark artwork | `gitgraf-logo-on-dark.svg` |
| Light interface or print | `gitgraf-logo-on-light.svg` |
| Compact product surface | `gitgraf-mark.svg` |
| Square presentation | `gitgraf-logo-stacked-on-dark.svg` or `gitgraf-logo-stacked-on-light.svg` |
| Single-color production | `gitgraf-logo-mono-white.svg` or `gitgraf-logo-mono-black.svg` |

SVG is the preferred production format. Use the supplied PNG exports only where vector artwork is unsupported.

`gitgraf-wordmark.svg` and `gitgraf-mark-mono.svg` are drawn with
`fill="currentColor"` so they take the colour of whatever inlines them. Inline
them in your markup and set `color`. Referenced through an `<img>` tag they have
no colour to inherit and will render black — use `gitgraf-logo-mono-white.svg` or
`gitgraf-logo-mono-black.svg` there instead, which carry explicit fills. Every
lockup already sets its own colour and is safe in an `<img>`.

## Clear Space & Minimum Size

- Keep clear space equal to at least one endpoint-node radius around every edge of the mark or lockup.
- Do not place text, borders, or high-contrast imagery inside the clear-space area.
- The standalone mark may be used down to 16 × 16px.
- Keep the horizontal lockup at 96px wide or larger.
- At very small sizes, use the supplied favicon PNGs instead of scaling a large raster export.

## Color

| Token | Hex | Role |
| --- | --- | --- |
| Void | `#020611` | Primary dark canvas |
| Ink | `#06101F` | Light-theme wordmark and dark text |
| White | `#F7F9FD` | Dark-theme wordmark and primary text |
| Electric Blue | `#0757FF` | Primary brand signal and actions |
| Signal Blue | `#078DFF` | Gradient transition and status emphasis |
| Cyan | `#11DDF4` | Gradient endpoint and active signal |
| Muted | `#93A4BE` | Secondary dark-theme text |
| Success | `#22D98A` | Verified and healthy status |

The primary gradient runs from Electric Blue through Signal Blue to Cyan. Preserve the supplied gradient direction and stop positions; do not rebuild the gradient from memory.

## Backgrounds

- On near-black, navy, or photographic dark backgrounds, use `gitgraf-logo-on-dark.svg`.
- On white, paper, or pale neutral backgrounds, use `gitgraf-logo-on-light.svg`.
- When contrast is uncertain, use a supplied monochrome lockup.
- Never place the gradient mark directly over a similarly saturated blue or cyan area.

## Don’ts

- Do not alter the mark’s geometry, endpoint proportions, or spacing.
- Do not rotate, skew, stretch, outline, or add drop shadows to the logo.
- Do not recolor individual branches.
- Do not typeset a replacement wordmark.
- Do not place the logo inside an unapproved badge or shape.
- Do not use generated showcase backgrounds as the logo itself; the vector files remain the source of truth.

## Favicons & App Icons

The `icons` directory includes 16, 32, 48, 180, 192, 512, and 1024px raster marks, all transparent. `favicon.ico` contains common browser sizes. `favicon.svg` is the preferred modern browser icon. Use `icon-192.png` and `icon-512.png` in the web app manifest.

For Apple touch surfaces use `apple-touch-icon.png`, not `gitgraf-mark-180.png`. iOS composites transparency onto black rather than onto the brand void, so the touch icon is rendered separately on an opaque `#020611` tile with its own padding.

## Social Artwork

- Open Graph: `gitgraf-open-graph-1200x630.png`
- Social banner: `gitgraf-social-banner-1500x500.png`

Keep social artwork copy concise and inside platform-safe margins. Do not crop the primary lockup.

## Typography

The wordmark is **Inter Display SemiBold**, tracked at **+0.0156em**. It ships as
outlines, so no published asset depends on the font being installed.

The face was identified by measuring the approved source artwork rather than by
eye.

*Weight* is settled by the stem-to-x-height ratio: the source measures 0.2310,
against 0.2326 for Inter SemiBold and 0.2386 for Inter Display SemiBold. That
picks SemiBold clearly, but it does **not** separate the two optical sizes — on
this measure alone text Inter is marginally the closer of the two.

*Optical size* is settled by the G-bbox-to-x-height ratio, where the two faces
are far apart: the source measures 1.4389, against 1.4564 for Inter Display and
1.3685 for text Inter. The source sits within 1.2% of Display and 5.1% from
text. A full-wordmark raster fit agrees and is not close — IoU 0.786 for Inter
Display SemiBold against 0.626 for Inter SemiBold.

Tracking is the value that reproduces the source's proportions: +0.0156em gives
aspect 4.4380 against the source's measured 4.4375.

For supporting copy set alongside the logo, use Inter at its natural metrics.
Reserve Inter Display for display sizes, roughly 24px and above.

## File Provenance

The production vectors are built as true resolution-independent geometry by
`scripts/build-brand.py`, from the approved source artwork
`ChatGPT Image Aug 28, 2026, 05_35_39 PM.png`.

- **Mark** — 18 cubic Bézier segments, tangent-continuous at every joint
  (measured tangent discontinuity: mean 0.0006°, max 0.0035°, against 17.26°
  mean for the v1.0 polygons) with a minimum curvature radius of 0.26 units, so
  no segment folds back. Fidelity to the source is IoU 0.9930.
  `scripts/build-brand.py` asserts both properties on every build.
- **Wordmark** — real Inter Display SemiBold outlines converted from the
  subset vendored at `assets/fonts/` (SIL Open Font License 1.1).
- **Lockups** — proportioned from measurements of the source artwork: the
  wordmark is 64.00 units against the mark's 87.71, separated by a 21.43-unit
  gap, reproducing the source lockup aspect of 4.608 to within 0.2%.

Superseded in v1.1: the v1.0 vectors were produced by polygon approximation
(`cv2.approxPolyDP`) of the source raster — 80 straight segments for the mark and
315 for the wordmark, with a mean tangent-direction jump of 17.26° at every
joint. That is what made the curves read as faceted at display sizes. The old
`scripts/build-brand-vectors.legacy.py` is retained only to document that
process; it aborts via `sys.exit` and cannot regenerate anything.

Showcase backgrounds are generated separately and the approved vector logo is
composited on top, so the showcase never substitutes generated typography or
geometry for the source logo.

For questions or co-branding approval, contact `hello@gitgraf.com`.