Capability matrix
Compare the visual Studio, source documents, HTTP generation, browser automation, persistence, and exports.
Product capabilities
| Capability | Authentic browser result | Editable source | Programmatic route |
|---|---|---|---|
| Brand identity | Shared marks, assets, colors, typography, strategy, voice, defaults | Complete BrandIdentity | /api/identities; identity object in generation requests; Browser API |
| Brand elements | Application previews and JSON brief | Selected application override | /api/elements, element-brief, Browser API |
| Moodboard | Application showcase or full system board; PNG | Composition and export state | Browser API |
| Brand book | Navigable standards document; print/PDF workflow | Derived from identity | Browser API controls; identity source is authoritative |
| Animation | Text/logo/image sequences, live materials, audio; GIF/MP4 | Frames, timing, material, output, audio clips | Browser API |
| Lottie | Vector playback, recolor, trim, live background; PNG/JSON/.lottie | Raw Lottie JSON when available | Browser API |
| Shader Library | Quality-sorted authentic materials shared by Design Lab and Animation | Stored in host documents by material ID and settings | /api/materials, Browser API |
| Design Lab | Layered composition; PNG/JPG/GIF/MP4 and shader-sequence GIF/MP4 | CanvasDocument v2 + Design Lab source v4 | design-sequence, Browser API |
| Deterministic backgrounds | Gradient, grain, dither, pattern, tactile surface SVG | Versioned request/response | background generation |
| OpenGraph | 1200 × 630 social image; PNG | Tool composition | Browser API; deterministic pieces from generation API |
| Color tokens | HEX/OKLCH inspection and copied CSS variables | Identity-bound colors | Browser API; identity fields over HTTP |
| Typography | Role specimens and local font preview | Identity type roles | Browser API |
| Terminal card | Syntax-highlighted card; PNG | Tool configuration | Browser API |
| Partnership | Dual-mark composition; PNG/SVG | Tool configuration | template: partnership, Browser API |
| Blog cover | Editorial cover; PNG/SVG | Tool configuration | template: blog, Browser API |
| Slides | 14 production layouts; PNG/SVG | Content, layout, assets, transforms | template: slides, Browser API |
| Components | Identity-aware interactive variants | Component configuration | Browser API; element briefs for production intent |


Shared editing systems
| System | Behavior | Persistence/output invariant |
|---|---|---|
| Color control | Native picker, HEX, OKLCH, optional opacity | One normalized value feeds preview and export |
| Canvas viewport | Zoom, fit, reset, pan, wheel/trackpad navigation | View transform never changes artifact geometry |
| Editable layers | Select, multi-select, drag, resize, rotate/nudge where supported | Same transform drives canvas, source, saved design, and export |
| Layer dock | Add, duplicate, hide, reorder, group, align, delete | Ordered IDs are serialized; opacity belongs to each layer |
| Shader controls | Size 0.1×–10×, colors, center, detail, motion, frame history | Material ID/settings are shared across preview and capture |
| Converter effects | Bayer, ASCII, halftone, posterize with explicit foreground/background | Effect layer remains non-destructive and independently opaque |
| Text effects | Solid, Bayer/dither, halftone, scan/gradient families | Effects work on text glyph masks, not only logo icons |
| Source drawer | Apply, reset, close, inline validation | Valid source updates the same live state as controls |
| Saved designs | Named snapshots and full autosave | IndexedDB stores the portable document; recovery journal protects unload timing |
| Browser API | Discover controls/actions, read/apply source, invoke export | Programmatic operations use the same validators and renderers |
Export support
| Format | Main producers | Important behavior |
|---|---|---|
| SVG | HTTP templates/backgrounds | Standalone, deterministic, best canonical server artifact |
| PNG | Design Lab, Moodboard, Lottie frame, templates and expressions | Lossless still with transparency where supported |
| JPG | Design Lab | Smaller opaque still composited against the selected background |
| GIF | Design Lab and Animation | Palette-controlled motion; raw or verified seamless closure; never audio |
| MP4 | Design Lab and Animation | Higher-fidelity motion; Animation can mix timeline audio |
| Brand book print/export flow | Snapshot of the current identity-derived book | |
| JSON | Identity, briefs, source documents, Lottie | Preserve schema/version and authorized asset dependencies |
.lottie | Lottie | Original binary animation archive |
Interface choice
- Choose HTTP for deterministic and batchable artifacts fully described by the generation contract.
- Choose the Browser API for the real Canvas/WebGL/local-file renderer.
- Combine them when HTTP should author exact Design Lab source and the browser should render it.
- Use human Studio controls when visual judgment is the task; the resulting source remains available to an agent afterward.
Every navigable Studio tool publishes Browser API control automation. Source and tool-specific actions vary, so call describe() before operation. See Choose an interface and Studio Browser API.