# Glyphfield

> Glyphfield is a free, open-source brand design studio that runs in a web browser at https://www.glyphfield.com/studio. A user defines one brand identity with its logos, colors, typography, and voice, and every Studio tool uses that identity to make brand books, moodboards, motion graphics, social images, slide decks, and UI components. Kevin Liu develops Glyphfield in public at https://github.com/Kevin-Liu-01/Glyphfield under the MIT License.

## What Glyphfield does

Glyphfield keeps a brand identity and every file made from it in one system. A change to a color, font, or logo in the identity reaches the boards, the brand book, the templates, the components, and the motion tools. The ID in parentheses after each Studio tool is the value of its `tool` query parameter, as in https://www.glyphfield.com/studio?tool=identity.

- Brand identity (`identity`): Edit the shared identity, asset library, font files, colors, voice, strategy, and system defaults used everywhere.
- Brand elements (`brand-elements`): Apply the active identity across digital, developer, social, editorial, event, and physical touchpoints.
- Moodboard (`design-board`): Compose the identity as an application showcase or complete system board, then export a high-resolution PNG.
- Brand book (`brand-book`): Read, review, and export a complete editorial brand book generated from the active identity system.
- Animation (`animation`): Animate text and images with deterministic packages and cubic Bézier timing.
- Lottie (`lottie`): Import, recolor, trim, preview, and export Lottie JSON or .lottie vector animation.
- Design Lab (`material`): Explore with loose layers on an open canvas, then frame type, images, stickers, effects, and shaders into export-ready artboards.
- OpenGraph (`opengraph`): Compose repeatable social previews with fonts, logos, and background assets.
- Color tokens (`colors`): Inspect semantic colors in HEX and OKLCH across light and dark surfaces.
- Typography (`typography`): Compare primary, secondary, accent, and code faces or load a local font file.
- Terminal card (`terminal`): Render Prism-tokenized TypeScript, Python, and Bash cards with matching PNG output.
- Partnership lockup (`partnership`): Build an optically balanced active-brand and partner logo lockup.
- Blog cover (`blog`): Create reusable editorial covers with controlled type and texture.
- Slide templates (`slides`): Build a complete 16:9 presentation system from multiple reusable slide layouts.
- Component library (`buttons`): Review core interface controls, navigation, forms, feedback, data, and commerce patterns.

The Studio includes a Starter identity and reference identities for Basement, General Translation, Ramp, Mintlify, Tailwind CSS, Vite+, Cloudflare, and Stripe. Users can copy any of them into a new project or start from an empty identity.

Design Lab is the general layer compositor. It places text, marks, images, stickers, shader layers, and effect layers on artboards and exports PNG, JPG, GIF, and MP4 files from 320 to 3840 pixels wide.

The Shader Library is shared by Design Lab, Animation, Lottie backgrounds, and the expression tools. It 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 catalog at https://www.glyphfield.com/api/materials lists every current material with its engine, controls, and defaults.

Glyphfield exports PNG, JPG, SVG, GIF, MP4, PDF, HTML email, JSON, `.lottie`, and ZIP files. The brand kit is a ZIP with W3C DTCG design tokens, CSS custom properties, a Tailwind CSS v4 theme, a brand.md guide for coding agents, the identity JSON, logos, and redistributable fonts. The component library produces React with Tailwind or HTML with CSS.

## Who it is for

Glyphfield is for designers, developers, and brand teams who want one brand identity to drive every asset they make. It is also built for AI coding agents such as Claude Code, Codex, and Cursor. Agents can set up an identity from a brand's own website or repository and then produce assets through the same contracts as the visual Studio.

## Accounts, storage, and privacy

Glyphfield has no accounts or sign-in. The Studio stores projects, open tabs, most tool drafts, and appearance settings in browser localStorage. It stores named designs, autosaves, and converted assets in IndexedDB. Uploaded images, logos, fonts, and Lottie files stay in the browser until the user exports them. `POST /api/generate` processes each request in memory, does not persist it, and does not fetch remote URLs.

## How agents connect

### HTTP API

The HTTP API is public and needs no key. The OpenAPI 3.1 document at https://www.glyphfield.com/openapi.json describes every route, and https://www.glyphfield.com/api/agent returns the agent manifest with policies, interfaces, and the generation schema.

`POST /api/generate` returns deterministic SVG templates and backgrounds, resolved brand-element briefs, and Design Lab `design-sequence` documents. A design-sequence response uses response-schema-1 and carries a version-3 compatibility `document`. Apply that document in the Studio first, then re-read the normalized CanvasDocument before further edits. The route rejects unknown top-level fields and request bodies over 5 MB. Read `GET /api/generate` for the current request schema before building a request.

### Studio Browser API

Inside https://www.glyphfield.com/studio, the active tool registers `window.glyphfield.studio` and dispatches the `glyphfield:studio-api-ready` event. Call `describe()` for the tool's actions and their input and output contracts. Call `readSource()` for the tool's complete JSON source and `applySource(source)` to apply a change. Call `invoke(action, input)` for actions such as `design.export`. Use the Browser API for work the browser renders: Canvas, WebGL shaders, local files and fonts, Lottie, PNG, JPG, GIF, and MP4.

```js
const studio = window.glyphfield.studio;
if (studio.activeTool() !== 'material') throw new Error('Open Design Lab first.');
const artifact = await studio.invoke('design.export', { format: 'mp4', mode: 'shader-sequence', download: false });
if (!(artifact.blob instanceof Blob) || artifact.blob.size === 0) throw new Error('The export is empty.');
studio.download(artifact);
```

### Rules for agents

- Read the live catalogs at /api/labs and /api/materials. Tool and material counts change between releases.
- Call `describe()` before a tool-specific action. Use only the action names and control labels it returns.
- Preserve every unknown field when editing source. Make the smallest change, apply it with `applySource`, and re-read the source to confirm it.
- Pass files to the Browser API as `File` objects built from bytes the user authorized. A filesystem path string does not work.
- Run exports one at a time. Confirm that the returned Blob is non-empty and that its MIME type, extension, and dimensions match the request.
- For GIF and MP4, inspect multiple frames. GIF has no audio. If the browser cannot encode MP4, report that limit and keep the source.

### Agent Skills

The repository's `skills/` directory contains one Agent Skill package per workflow. Each package has a `SKILL.md` file that Codex and other Agent Skills clients can install, and https://www.glyphfield.com/docs/skills.md explains installation.

- [skills/glyphfield-create](https://github.com/Kevin-Liu-01/Glyphfield/tree/main/skills/glyphfield-create): Layered Design Lab compositions and saved designs.
- [skills/glyphfield-api](https://github.com/Kevin-Liu-01/Glyphfield/tree/main/skills/glyphfield-api): Catalog discovery and deterministic HTTP generation.
- [skills/glyphfield-studio](https://github.com/Kevin-Liu-01/Glyphfield/tree/main/skills/glyphfield-studio): Live Studio operation, source round trips, and local files.
- [skills/glyphfield-export](https://github.com/Kevin-Liu-01/Glyphfield/tree/main/skills/glyphfield-export): Still and motion export and their verification.
- [skills/glyphfield-brand](https://github.com/Kevin-Liu-01/Glyphfield/tree/main/skills/glyphfield-brand): Brand identity setup from a brand's own sources, the health audit, and the brand kit.

## Machine-readable resources

- [Complete documentation](https://www.glyphfield.com/llms-full.txt): Every docs page as plain text in one file.
- [Agent manifest](https://www.glyphfield.com/api/agent): Policies, interfaces, execution rules, and the generation schema.
- [OpenAPI 3.1 document](https://www.glyphfield.com/openapi.json): Every public HTTP route.
- [Studio tool catalog](https://www.glyphfield.com/api/labs): Current Studio tools, IDs, and categories.
- [Shader and material catalog](https://www.glyphfield.com/api/materials): Current materials, engines, controls, palettes, and image effects.
- [Identity catalog](https://www.glyphfield.com/api/identities): Built-in brand identities.
- [Brand element catalog](https://www.glyphfield.com/api/elements): Brand element templates.
- [Combined catalog](https://www.glyphfield.com/api/catalog): Studio tools, the shader library, the Browser API, and Agent Skills in one response.
- [Generation contract](https://www.glyphfield.com/api/generate): Request schema for `POST /api/generate`.
- [Brand identity validation](https://www.glyphfield.com/api/brand/validate): BrandIdentity JSON Schema and stateless validation.
- [Brand kit files](https://www.glyphfield.com/api/brand/kit): DTCG tokens, CSS, Tailwind CSS v4, and brand.md from an identity.
- [Docs search](https://www.glyphfield.com/api/search?query=export): Full-text search over the documentation as JSON.
- [Sitemap](https://www.glyphfield.com/sitemap.xml): Every public page.
- [Source code](https://github.com/Kevin-Liu-01/Glyphfield): The MIT-licensed repository.
- [Third-party notices](https://github.com/Kevin-Liu-01/Glyphfield/blob/main/THIRD_PARTY_NOTICES.md): Licenses for adapted code and bundled packages.

## Docs

Every docs page is available as Markdown by adding `.md` to its URL.

- [Documentation overview](https://www.glyphfield.com/docs.md): What Glyphfield connects and where to start.
- [Getting started](https://www.glyphfield.com/docs/getting-started.md): Open the Studio, choose a project, set the identity, compose an artifact, and export it.
- [Studio overview](https://www.glyphfield.com/docs/studio.md): Projects, tabs, tools, tool search, persistence, and the Browser API.
- [Brand identity](https://www.glyphfield.com/docs/studio/brand-settings.md): The identity every tool reads, the brand health score, and the brand kit.
- [Brand elements](https://www.glyphfield.com/docs/studio/brand-elements.md): Identity templates for email, product UI, social, editorial, event, and print.
- [Moodboards](https://www.glyphfield.com/docs/studio/moodboards.md): Editable tile boards exported as PNG, SVG, or identity JSON.
- [Brand book](https://www.glyphfield.com/docs/studio/brand-book.md): The identity as an editorial standards document with PDF export.
- [Motion overview](https://www.glyphfield.com/docs/studio/motion.md): When to use Animation, Lottie, or Design Lab for motion.
- [Animation](https://www.glyphfield.com/docs/studio/animation.md): Scenes, keyframes, captions, audio, and GIF or MP4 export.
- [Lottie](https://www.glyphfield.com/docs/studio/lottie.md): Import, edit, recolor, trim, and export Lottie JSON or .lottie files.
- [Design Lab](https://www.glyphfield.com/docs/studio/design-lab.md): The layer compositor, its artboards, shortcuts, and limits.
- [Shader Library](https://www.glyphfield.com/docs/studio/shader-library.md): The shared catalog of live materials.
- [Color tokens](https://www.glyphfield.com/docs/studio/colors.md): OKLCH scales, light and dark roles, contrast, and token output.
- [Typography](https://www.glyphfield.com/docs/studio/typography.md): Type roles, the modular scale, variable font axes, and type tokens.
- [Expression tools](https://www.glyphfield.com/docs/studio/templates.md): OpenGraph, Terminal card, Partnership lockup, Blog cover, and Slide templates.
- [Component library](https://www.glyphfield.com/docs/studio/components.md): Brand-token components with React and HTML code.
- [Formats and portability](https://www.glyphfield.com/docs/artifacts/formats-and-portability.md): Every output format and its limits.
- [Storage and privacy](https://www.glyphfield.com/docs/artifacts/storage-and-privacy.md): Browser persistence, API request handling, and licensing.
- [Agent integration](https://www.glyphfield.com/docs/agents.md): How LLMs and coding agents use Glyphfield.
- [Choose the right interface](https://www.glyphfield.com/docs/agents/choose-interface.md): HTTP generation, the Browser API, or Markdown docs.
- [Connect an agent](https://www.glyphfield.com/docs/agents/connect.md): Discovery, generation, and saving the returned artifact.
- [Generation API](https://www.glyphfield.com/docs/agents/generate.md): Templates, backgrounds, element briefs, and Design Lab sequences.
- [Brand setup with an agent](https://www.glyphfield.com/docs/agents/brand-setup.md): Set up a complete identity from a brand's own sources.
- [Agent recipes](https://www.glyphfield.com/docs/agents/recipes.md): Complete programmatic workflows.
- [Skills overview](https://www.glyphfield.com/docs/skills.md): Install and combine the Glyphfield Agent Skills.
- [Endpoint reference](https://www.glyphfield.com/docs/reference/endpoints.md): Every public route.
- [Studio Browser API](https://www.glyphfield.com/docs/reference/browser-api.md): Methods, actions, and source round trips.
- [Capability matrix](https://www.glyphfield.com/docs/reference/capability-matrix.md): Every tool with its source, actions, exports, and HTTP routes.
- [Licensing](https://www.glyphfield.com/docs/reference/licensing.md): What the MIT License covers and which assets keep their own terms.

## Optional

- [Browser-agent workflow](https://www.glyphfield.com/docs/agents/browser-workflow.md): Studio operation for WebGL, Canvas, local files, and motion capture.
- [Identities and custom assets](https://www.glyphfield.com/docs/agents/identity-assets.md): Built-in identities, overrides, and local asset data.
- [Errors and limits](https://www.glyphfield.com/docs/agents/errors.md): Validation responses, request limits, and retries.
- [Source format reference](https://www.glyphfield.com/docs/reference/source-formats.md): CanvasDocument and tool source documents.
- [Version compatibility](https://www.glyphfield.com/docs/reference/version-compatibility.md): Schema versions and migrations.
- [Browser support](https://www.glyphfield.com/docs/reference/browser-support.md): Browser capabilities the Studio needs.
- [Self-hosting](https://www.glyphfield.com/docs/reference/self-hosting.md): Run Glyphfield locally or in production.
- [Troubleshooting](https://www.glyphfield.com/docs/reference/troubleshooting.md): Diagnose loading, storage, WebGL, and export failures.
- [Backup and restore](https://www.glyphfield.com/docs/artifacts/backup-and-restore.md): Preserve identities, source, assets, and rendered files.