GlyphfieldCapability matrix
Compare what each Studio tool offers, with its JSON source document, Browser API actions, export formats and HTTP generation routes, in one table.
Every Studio tool has a JSON source document, accessible controls that the Browser API (window.glyphfield.studio) can operate through controls(), activate() and set(), and its own Browser API actions. describe().capabilities returns this record for the active tool, and /api/labs returns it for every tool.
Tools
| Tool | ID | Source document | Browser actions | Exports | HTTP |
|---|---|---|---|---|---|
| Brand identity | identity | Complete BrandIdentity | identity.* (12) | Identity JSON. Brand kit as ZIP, DTCG, CSS, Tailwind v4, brand.md or logo ZIP | /api/identities, /api/brand/validate, /api/brand/kit |
| Brand elements | brand-elements | glyphfield.brand-element version 2 | brand-element.export.* (3) | PNG at 1× or 2× the element size, HTML email, JSON brief | /api/elements, element-brief |
| Moodboard | design-board | glyphfield.moodboard version 2 | moodboard.export.* (3) | PNG up to 4800 px wide (Catalog at Ultra is 4800 × 7200), SVG, identity JSON | None |
| Brand book | brand-book | glyphfield.brand-book version 1 | brand-book.print | PDF through the print dialog, one 16 × 10 in page per sheet | None |
| Animation | animation | CanvasDocument schema 2 with metadata.animation | animation.* (12) | GIF, MP4 with audio, PNG poster, project file | None |
| Lottie | lottie | CanvasDocument schema 2 with metadata.studio | lottie.* (9) | PNG frame, GIF at 25 FPS, MP4 at 30 FPS, edited JSON or the .lottie archive | None |
| Design Lab | material | CanvasDocument schema 2 with Design Lab source version 4 | design.* (30) | PNG, JPG, GIF, MP4, shader-sequence GIF and MP4, project file | design-sequence |
| Color tokens | colors | Version 2: palette, colorPairings, colorSystem | colors.* (8) | OKLCH CSS, CSS variables, Tailwind v4 or DTCG, returned or copied to the clipboard | Through /api/brand/kit |
| Typography | typography | Version 2: roles, typeScale, specimen settings | typography.* (5) | CSS, Tailwind v4 or DTCG type tokens, returned or copied to the clipboard | Through /api/brand/kit |
| OpenGraph | opengraph | Expression document (CanvasDocument schema 2, expression source version 2) | opengraph.* (15) | PNG at 2×, SVG | template: opengraph, background |
| Terminal card | terminal | Expression document | terminal.* (19) | PNG at 2×, SVG | template: terminal |
| Partnership lockup | partnership | Expression document | partnership.* (18) | PNG at 2×, SVG | template: partnership |
| Blog cover | blog | Expression document | blog.* (15) | PNG at 2×, SVG | template: blog |
| Slide templates | slides | Expression document with one page per slide | slides.* (21) | PNG at 2×, SVG, PDF deck | template: slides |
| Component library | buttons | Version 2: pattern, content, system, palette, typography, theme, code format | components.* (3) | React with Tailwind, or HTML with CSS, returned or copied to the clipboard | None |
The action counts leave out the six standard actions that every tool has: source.read, source.apply, controls.list, control.activate, control.set and artifact.download. Studio Browser API lists every action. The 2× PNG exports of the expression tools are capped at 4800 px on the longest edge.
The Shader Library is a shared material browser and is not a tool of its own. Design Lab, Animation, Lottie and the expression tools use it, and /api/materials publishes it. Deterministic tactile backgrounds come from POST /api/generate with kind: "background".
Output formats
| Format | Producers | Behavior |
|---|---|---|
| SVG | HTTP templates and backgrounds, expression tools, Moodboard | Standalone files with the fonts and images embedded |
| PNG | Design Lab, Moodboard, Brand elements, expression tools, Lottie frame, Animation poster | Lossless still with transparency where the composition has it |
| JPG | Design Lab | Opaque still composited over the artboard background |
| GIF | Design Lab, Animation, Lottie | Palette-based motion without audio. Design Lab offers Blended loop or Raw motion |
| MP4 | Design Lab, Animation, Lottie | Encoded in the browser with H.264 tried first. Animation mixes in its audio |
| Brand book (print dialog), Slide templates (deck) | Brand book prints 16 × 10 in pages. Slide PDFs embed each page as a 2× image | |
| HTML | Brand elements email elements | 600 px table layout with inlined styles |
| JSON | Brand identity, element briefs, project files, tool source, Lottie | Keep the schema versions, IDs and unknown fields |
| ZIP | Brand kit, logo pack | Stored without compression |
.lottie | Lottie | The original archive |
| CSS, Tailwind, DTCG, Markdown | Brand kit, Color tokens, Typography | Written by the shared brand token serializers |
| TSX, HTML with CSS | Component library | Generated component code |
Formats and portability explains each format in detail.
Shared editing systems
| System | Behavior | Guarantee |
|---|---|---|
| Color control | Swatch, HEX, OKLCH, hue, optional opacity and a screen eyedropper where the browser supports it | One normalized value feeds the preview and the export |
| Canvas viewport | Zoom, fit, reset, pan, and wheel or trackpad zoom | Zoom and pan do not change the artifact's geometry |
| Editable layers | Select, multi-select, drag, resize, nudge, snap | One transform drives the canvas, the source, saved designs and the export |
| Layer lists | Add, duplicate, hide, lock, reorder, group, align, delete | Layer order is serialized by ID, and each layer owns its opacity |
| Source drawer | Apply code, Reset, Copy, Format, find and replace | Valid source updates the same state as the controls |
| Saved designs | Named checkpoints and autosave | IndexedDB stores the document, and a small recovery journal covers page unload |
| Browser API | Controls, source, actions, downloads | It uses the same validators and renderers as the visible interface |
Interface choice
- Use HTTP for deterministic artifacts that the generation contract fully describes, including batches.
- Use the Browser API for anything rendered with Canvas, WebGL or WebGPU, and for local files and browser codecs.
- Combine them when HTTP should author a Design Lab document and the browser should render it.
Choose the right interface compares the two in more detail.
Source format reference
Read and edit the JSON source behind each Studio tool, including the portable CanvasDocument, its validation rules, migrations and safe round trips.
Version compatibility
Identify the API, CanvasDocument, Design Lab, saved-design and Lottie version numbers, and migrate older source without losing newer state.