Getting started

Create a project, define its shared identity, explore tools, and export the first artifact.

Open the Studio

Run the app locally and open the Studio:

pnpm install
pnpm dev

The local Studio runs at http://localhost:3012/studio.

1. Choose a project

The tab bar contains three project kinds:

Starter is a neutral template for a new identity.
General Translation is a complete example with the GT logo family and black-and-white system.
My brands are local identities you create or duplicate.

Closing a tab only closes its view. The project remains available under All projects. Deleting a custom project removes its saved browser data.

2. Set the foundations

Open Brand settings and edit the identity source:

Brand and short names
Website, tagline, positioning, and description
Dark and light logo marks
Semantic colors
Display, body, accent, and code typography
Multilingual greetings
Voice principles, phrases, avoided language, and audiences

Every generator reads the active identity. A change here flows into boards, templates, components, brand elements, and exports.

3. Find a tool

Use the left navigation or press ⌘K / Ctrl+K and search for a capability such as email, logo, dither, slide, or terminal.

The 15 tools are grouped into Elements, Boards, Motion, Foundations, Expressions, and Components.

4. Edit and inspect

Most tools use the same layout:

The left inspector controls content, layout, surface, and uploaded assets.
The center canvas renders the current artifact.
The canvas toolbar supports zoom out, zoom in, reset, and fit.
The top-right action downloads the artifact or production brief.

Use Visual settings to switch light, dark, or automatic system appearance and choose Switzer, Be Vietnam Pro, Schibsted Grotesk, or Rethink Sans for the interface. Studio appearance never changes the selected brand surface or exported colors.

5. Export

Download actions are specific to each tool. Common outputs include:

PNG for rasterized templates, boards, backgrounds, and graphics
GIF for motion and animated shaders
JSON for identities and element production briefs
SVG from the agent API

Continue with Download and use artifacts.