Skip to content
Brand

Graphify Brand

Everything you need to represent Graphify correctly. Logos, colors, type, and the graphic elements that make us us.

Brand kitThe Graphify symbol drawn on the grid it is constructed from
Naming

Graphify, one word.

Capital G, no space, no suffix. Not Graphify.dev, not GraphifyAI, and never all caps outside a logo.

  • Graphify, in running text and in headlines. (do)
  • graphify, lowercase, when it is the command. (do)
  • Graphify CLI. Graphify MCP server. The product names, as written. (do)
  • GRAPHIFY, Graphify.dev, Graphify.ai, Graphify AI. (do not)
  • Graphify as a verb. (do not)
Symbol

Use the symbol on its own.

For avatars, favicons and tabs, where the wordmark does not fit. Keep the proportions, and use one of the three grounds below.

The Graphify symbol in ink on white
Ink on pageSVG
The Graphify symbol in white on green
White on greenSVG
The Graphify symbol in white on ink
White on inkSVG
  • Rotating it, or setting it on an angle. (do not)
  • Recoloring it outside the palette. (do not)
  • Putting it inside a circle, a square or a shadow. (do not)
Wordmark

The wordmark is the default.

Use it wherever there is room. The symbol on its own is for the cases where there is not.

The Graphify wordmark in ink on white
Ink on pageSVG
The Graphify wordmark in white on green
White on greenSVG
Typography

Geist, and Geist Mono.

Geist for headings and body. Geist Mono for labels, code, and anything the machine produced.

Geist · 450, 520

The code knowledge graph

Geist Mono · 450, 520

graphify index --watch

Colors

Four colors, and one gradient.

Green is an accent, not a ground: about one use a screen. The gradient is separate from the palette, and there is only one.

  • PageThe ground. Pure white, never off-white.#ffffffRGB 255, 255, 255
  • InkType, and the ground a dark section stands on.#062314RGB 6, 35, 20
  • GreenThe brand green. An accent: about one use a screen.#118d4fRGB 17, 141, 79
  • MintSelection and highlights.#4dea9cRGB 77, 234, 156

The gradient

  • Pine#072b19
  • Green#118d4f
  • Mint#4dea9c
  • Page#ffffff

The four stops, bottom to top. In use it is blurred 76px and bled 240px past the top and bottom of its container, with noise over it: a hard-edged copy of these stops is a different thing.

Motifs

The dash, the field, the isometric plane.

Three elements carry most of the site’s texture. Their values are fixed.

  • The dash

    Three pixels on, three off, at one pixel wide. Every rule, edge and border on the site uses it.

  • The field

    A generated particle field, in one of six hues. Use it behind code samples and quotes, not behind body text.

  • Isometric line work

    Illustrations sit on one isometric plane at thirty degrees, drawn in line rather than filled, using the dash above.

Screenshots

Four product screenshots.

The current set, at 1704px wide. They are in the kit as well, at full size.

  • Re-cropping them, or setting them on an angle. (do not)
  • Adding a shadow, a device frame or a browser chrome. (do not)

Try Graphify now.

Try for free