Graphify Brand
Everything you need to represent Graphify correctly. Logos, colors, type, and the graphic elements that make us us.
Brand kitGraphify, 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)
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.
- 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)
The wordmark is the default.
Use it wherever there is room. The symbol on its own is for the cases where there is not.
Symbol and wordmark, locked up.
Keep the spacing between the two as drawn. Leave clear space around the lockup of at least the symbol’s height, and do not set it below 96px wide.
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
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.
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.
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)



