Skip to main content
graphhub/brand
graphhub

Brand Guidelines

The visual language, color system, and usage rules for GraphHub. These guidelines keep the brand consistent across every surface.

THE MARK

graphhub
graphhub

DO

  • Use on light (#fafaf9) or dark (#0c0c0e) backgrounds
  • Maintain clear space equal to the mark's height on all sides
  • Use the full wordmark where space permits

DON'T

  • Don't recolor, rotate, or distort the mark
  • Don't apply drop shadows or outer glows
  • Don't place on busy or low-contrast backgrounds
  • Don't use the wordmark below 100px wide

COLOR SYSTEM

Click any swatch to copy its hex value.

Brand

Graph Nodes

Surfaces — Light

Surfaces — Dark

Text — Light

TYPOGRAPHY

GEIST SANS — UI & HEADINGS

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789

40px / semibold / lh 1.2

Visualize any codebase

16px / regular / lh 1.65

Replace github.com with graphhub.dev in any repo URL and explore its codebase as a living, interactive knowledge graph.

12px / semibold / tracking 0.08em / uppercase

Node Types · Connections · Statistics

GEIST MONO — CODE & LABELS

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789 · ./:;

16px / regular — URL input

https://github.com/owner/repo

13px / regular — node labels

parseGithubUrl · buildGraph · createSimulation

12px / regular — stats

· 1,842 nodes · 3,219 edges

GRAPH VOCABULARY

Every node type has a fixed color. Colors are consistent across light and dark mode.

Folder

A directory or module. The largest structural unit in the graph.

#7c7c8a

File

A source code file. Groups the functions and classes it defines.

#8b9dc4

Function

Any callable unit — function, method, arrow function, or closure.

#8aab96

Class

An object blueprint, struct, or interface definition.

#c4a96e

External

An import that resolves outside the repository boundary.

#8a7a9b

VOICE & TONE

Technical

We write for developers. Precision matters more than simplicity.

Minimal

One clear sentence beats three vague ones. Cut until it bleeds.

Honest

We state what the tool does. No 10× claims, no hype.

Visualize any GitHub repo as an interactive graph

Unlock the power of your codebase with AI-driven insights

Replace github.com → graphhub.dev

Get started in seconds with our revolutionary platform

1,842 nodes · 3,219 edges

Thousands of connections discovered automatically!