One studio for turning a complete brand identity into motion, graphics, materials, templates, and agent-ready artifacts.

Open Studio · Documentation · Agent connection · MIT License

One identity, every surface

Glyphfield keeps the foundations and the outputs in the same system. Define a brand once, then use the active identity across focused Studio tools and a complete production catalog without rebuilding the context for every artifact.

Foundation	Expression	Application	Delivery
Logo family	Animation + Lottie	OpenGraph + social	PNG
Color tokens	Shader Library	Design Lab compositions	SVG
Typography	Dither + grain + materials	Templates + editorial	GIF
Voice + positioning	Design Lab surfaces	Product + documentation	JSON

The Studio ships with a Starter creation system plus complete reference identities for General Translation, Ramp, Mintlify, Tailwind CSS, Vite+, Cloudflare, and Stripe. Each reference connects a strategic idea to a recognizable graphic device and a set of real applications. Project tabs are independent local workspaces; closing a tab never deletes its brand.

Strategy before styling

Every built-in identity records the challenge, central concept, promise, pillars, personality, graphic device, composition rules, image direction, and application system behind the output. Moodboards turn that source into ten designed sections: strategy, logo architecture, color, typography, graphic grammar, product, campaign, developer, editorial, and physical work.

The reference library is an implementation study, not a generic skin pack. Ramp uses a savings ledger, Mintlify a knowledge beam, Tailwind a utility wave, Vite+ a convergence field, Cloudflare a network horizon, and Stripe a programmable field. General Translation remains black and white, organized by one stable translation frame through which language moves.

A design tool that agents can operate

The visual Studio and the public agent interface use the same identities, catalog, and generation language.

flowchart LR
  I[Brand identity] --> S[Studio tools]
  I --> A[Agent API]
  S --> O[Portable artifacts]
  A --> O
  O --> P[Product · Marketing · Docs · Motion]

Loading

• Humans compose, tune, preview, and download in /studio.
• Every artifact can open a right-side Code drawer for exact validated source edits that round-trip into the same visual controls and renderer.
• Agents discover capabilities through /llms.txt, /api/agent, and /openapi.json.
• POST /api/generate produces deterministic SVG templates, backgrounds, identity-aware element briefs, and apply-ready Design Lab shader sequences.
• Every active tool exposes window.glyphfield.studio: agents can enumerate and operate visible controls by accessible label, read/apply exact source, and generate or download authentic browser-rendered PNG, JPG, GIF, and MP4 files, including shader-sequence GIF and MP4.
• Browser projects and uploaded source files stay local; API generation is processed in memory and is not persisted.

Motion studies

Morph / fade	Type / delete

Both are generated from the Studio’s reusable animation model: reorderable text, logo, and image states; per-frame composition; configurable hold timing; cubic-bezier transitions; animated solid, gradient, and shader backgrounds; and frame-accurate GIF export. Lottie has its own focused vector editor for examples, local .lottie and JSON imports, trim, speed, direction, recoloring, playback, source download, and frame export.

Built for real brand work

• Design boards switch between a 16:9 showcase collage—campaign, product, social, editorial, device, apparel, and outdoor mockups—and a 4:5 system review, with export up to 4800 px wide.
• Design Lab composes multiple text layers, converted marks, imported images, and live shaders in one direct-manipulation canvas. Its layer rail carries previews, visibility, ordering, duplication, and per-layer controls, while the inspector handles exact content, appearance, aspect ratio, and developer handoff.
• The shared, quality-sorted Shader Library provides a live searchable catalog from Paper, WebGL, ShaderGradient, Fluid Energy, Shaders.com studies, and original Glyphfield renderers. Brand colors seed every material and the same controls drive library previews, canvases, and exports.
• Animation places real two-column motion previews and the Shader Library beneath its source sequence. Shader backgrounds remain editable per frame, while direct canvas-edge and corner handles change output dimensions without leaving the preview.
• Studio appearance persists light or dark mode, accent, canvas density, and a choice of Switzer, Be Vietnam Pro, Schibsted Grotesk, or Rethink Sans.
• Typography is an editable specimen lab with live copy, type scales, font families, weights, and code styles; Color tokens exposes click-to-edit HEX and OKLCH values with automatic contrast-aware brand marks.
• Templates include fourteen slide layouts plus blog, partnership, OpenGraph, terminal, email, and brand-element systems. Slide foreground groups use a direct-manipulation canvas with selection, drag, scale, keyboard nudge, and persistent front-to-back layer order.
• Visual inspectors and source drawers are two views of the same saved tool state. Identity, board, motion, Lottie, material, surface, template, foundation, and component configurations can all be edited directly.
• Fumadocs powers the feature, artifact, integration, and API guides.
• Landing, Studio, and every documentation page receive generated 1200 × 630 OpenGraph and Twitter artwork from one shared renderer. The current system uses a strict 60/40 composition, route-aware URL buttons, and a deterministic Paper Dithering Swirl frame in the new Glyphfield violet, lavender, and mint palette.

Run locally

pnpm install
pnpm dev

Open http://localhost:3012. The full workspace is at /studio and the documentation is at /docs.

pnpm typecheck
pnpm test
pnpm lint
pnpm build

Generate without the UI

curl -sS -X POST http://localhost:3012/api/generate \
  -H 'Content-Type: application/json' \
  -d '{
    "kind": "template",
    "template": "slides",
    "identity": { "preset": "gt" },
    "slideLayout": "title",
    "title": "Code is the source of truth.",
    "output": "raw"
  }' \
  -o gt-slide.svg

The API embeds bundled logo assets into generated SVG. Custom agents can send authorized images as base64 data URLs; Glyphfield never fetches remote asset URLs.

Resource	Purpose
/llms.txt	Operational agent runbook
Source editing	Visual/source round-trip workflow
Source formats	Exact browser document constraints
/api/agent	Versioned manifest and generation contract
/openapi.json	OpenAPI 3.1 document
/api/catalog	Structured Studio tool catalog
/api/identities	Built-in template and reference identities
/api/elements	Complete brand-element taxonomy

Project structure

src/app/          Next.js pages, docs, metadata images, and public API
src/components/   Studio workspaces, canvases, motion, and shared UI
src/lib/          Identity model, renderers, generators, and catalogs
content/docs/     Fumadocs product and integration documentation
public/           Fonts, reference assets, examples, and agent instructions

Library decisions for syntax rendering, OpenGraph, gradients, and shaders are recorded in Studio library routing.

License

Glyphfield is open-source software released under the MIT License. Bundled third-party marks and reference-brand assets remain the property of their respective owners.

Open-source code adapted inside Glyphfield is credited in Third-party notices.

Official brand references and source assets are documented in Identities and custom assets. Their inclusion does not imply endorsement, and the MIT license does not grant rights to third-party trademarks.