Identity source
Logo families, source assets, fonts, color roles, voice, and layout rules stay connected.
One studio for the whole brand.
Build identity systems, motion, graphics, and product-ready artifacts in one connected workspace that people and agents can use together.
Free and open source under the MIT License.
Storyboard
Foundations in. Useful artifacts out.
Every tool inherits the active identity, preserves the right aspect ratio, and exposes only the controls needed for the artifact it makes.
Brand applications
Compose moodboards, email, decks, product UI, editorial graphics, and physical pieces.
Motion system
Morph text, logos, images, and live backgrounds with editable curves and deterministic timing.
Material lab
Use shader materials, grain, dither, gradients, grids, and image treatments behind any mark.
Editable canvas
Select, drag, resize, layer, add sticker treatments, and export from a direct-manipulation canvas.
Agent interface
Agents discover the same identities and tools, then generate stable SVG and browser artifacts.
Current Studio. Real brand materials.
Tune the identity, compose live materials, and carry the same system into every output.
General TranslationEvery language. One source.
- 40
- Assets
- 4
- Fonts
- 8
- Colors
One source.Product language stays connected to code, context, and delivery.
TypographyRasmus InterDisplayRasmus InterBody / Accent
Color system
Core roles stay synchronized across every tool.
{
"assets": 40,
"colors": 8,
"fonts": 2,
"identity": "General Translation"
}Build the brand where it will live.
Email, product surfaces, editorial graphics, and physical pieces inherit the same source identity.
Every language. One source.
The principles, promise, and strategy behind every brand decision.
Design the mark and its motion together.
Apply live type, material, depth, and timing to a mark, then reuse the result across every export.
Welcome
Plug the system into any agent.
Tune the identity visually, then hand an agent the exact same typed values. Every control maps directly to one portable generation contract.
15Lab plugins
/api/labs342Live shaders
/api/materials1Shared contract
/api/agent{"type":{"size":40,"weight":500,"leading":0.98,"tracking":-0.7},"material":{"strength":0.68,"grain":12},"motion":{"speed":0.34,"duration":1.6}}One source.Any surface.
Claude
CodexFrequently asked questions
The short version of what Glyphfield is, what it makes, and how people and agents work from the same brand system.
- 01What is Glyphfield?
- Glyphfield is a free, open-source brand design studio that runs in a web browser. You define a brand identity once, and every Studio tool uses it to make brand books, moodboards, motion, social images, slides, and UI components.
- 02Is Glyphfield free and open source?
- Glyphfield is free to use at www.glyphfield.com, and its source code is on GitHub under the MIT License. Bundled third-party brand marks, fonts, and shader packages keep their own licenses.
- 03Do I need an account, and where is my work stored?
- Glyphfield has no accounts or sign-in. The Studio keeps projects, drafts, and named designs in your browser’s localStorage and IndexedDB, and uploaded images and fonts stay in the browser. The generation API processes requests in memory and does not store them.
- 04What can I make with Glyphfield?
- The Studio has tools for brand identity, brand elements, moodboards, brand books, animation, Lottie files, layered Design Lab compositions, color tokens, typography, OpenGraph images, terminal cards, partnership lockups, blog covers, slide decks, and a component library. Every tool reads the same saved identity, so a color or font change reaches the boards, the brand book, templates, components, and motion.
- 05What file formats can Glyphfield export?
- Glyphfield exports PNG, JPG, SVG, GIF, MP4, PDF, HTML email, JSON, and Lottie files. The brand kit adds W3C DTCG design tokens, CSS custom properties, a Tailwind CSS v4 theme, and a brand.md guide. The component library produces React with Tailwind or HTML with CSS.
- 06Which shader engines does Glyphfield include?
- The Shader Library combines Paper Shaders (Apache-2.0), the Shaders.com WebGPU components (MIT), ShaderGradient (MIT), and original Glyphfield shaders. It also includes a fluid simulation adapted from Pavel Dobryakov’s WebGL Fluid Simulation (MIT) and a cloth material adapted from HoloCloth (MIT). The /api/materials endpoint lists every material with its engine.
- 07Can AI agents use Glyphfield?
- AI agents can generate SVG and JSON through the HTTP API described at /openapi.json. Inside the Studio, agents operate every tool through the window.glyphfield.studio Browser API. The documentation is available as plain text at /llms.txt and /llms-full.txt and as Markdown by adding .md to any docs URL, and the repository includes installable Agent Skills.
Free, open source, and built to extend.
Read the source, fork the Studio, add a tool, or connect an agent. Glyphfield is MIT licensed and the artifact format is documented.