--- title: Templates description: The finished layouts your brand ships again and again, with slots for the parts that change each time. --- > Source: https://www.heyarchetype.com/docs/brand/templates Templates are the layouts your brand publishes over and over: social posts and stories, email headers, ads, web pages, app screens, slides and documents. Agents are told to start from a template whenever one fits, so a request for "an Instagram story about our launch" comes back in your layout instead of a new one. ## How a template is built A template has a name, a type and one or more frames. Each frame is HTML and CSS drawn at a fixed size, such as 1080×1920 for a story. Colors and type are written as your [Foundations](/docs/brand/foundations) tokens, so they follow every change you make there. The parts that change from one use to the next are slots. A slot can be bound to your logo, a library photo, a token, an artifact or a line of text. Bindings are stored as references, so when you replace your logo, every template that shows it updates. ## Types and formats Templates are sorted into four tabs. Each tab only appears once it has something in it. | Type | Formats include | | --- | --- | | **Social** | Instagram, Facebook, LinkedIn, X, TikTok, YouTube and Pinterest posts, stories, covers and banners | | **Web** | Website pages (desktop, laptop, tablet, mobile), email newsletters and headers, display ads, Open Graph images | | **App** | Desktop web app screens, iOS and Android screens, App Store and Google Play screenshots | | **Files** | Slides (16:9 and 4:3), A4 and US Letter documents, flyers, posters and business cards | Every format uses the platform's published size. Use the **Format** menu above the grid to show only one format, such as LinkedIn · Carousel. ## Add a template Press **Add**. The **Add template** drawer has four tabs: - **Marketplace**: ready-made templates, already drawn in your colors, type, logo and photos. Switch type and platform at the top, tick the ones you want, and add them. - **Prompt**: describe the template in a sentence, for example "A story ad for one product, with three USPs and a clear Buy button. In Danish." Press **Design** and Claude designs it from your tokens, voice, logo and photos. The drawer shows roughly how many credits it uses, and closing it doesn't stop the design. - **Blank**: pick a type, a name and a format, then press **Add template**. - **Import**: drop a .fig file (in Figma, use **File → Save local copy**). The **Import from Figma** page opens, where you tick the frames to bring in, name the template, choose its type and press **Import**. Templates from the marketplace or an import are ordinary templates afterwards, and you can edit everything about them. ## A template's page Click a template to open it. Its frames sit on an infinite canvas: drag to pan, use ⌘ with the scroll wheel to zoom, and turn on **Inspect** to see each element's box model. A strip of thumbnails shows every frame: click one to open it, drag to reorder, or press **+** at the end to add a frame. The panel on the right has four tabs. ### Design Select an element on the canvas or in the layers list to change it in the inspector. You can drag and resize elements, and double-click copy to retype it in place, in your typeface. The Design tab is available on desktop. With an element selected, the inspector offers to turn it into a slot: - **Make this a slot** (or **Use a brand image** for a picture, **Make this editable** for text). - **Make this the content area**: marks the part of a screen or page that changes with every use, such as the body of an app screen inside its top bar and sidebar. Designs made from the template put their own content there and keep everything around it as drawn. Then bind the slot. The picker lists your **Logos**, **Images**, **Artifacts** and **Tokens**, plus **Content area** and **Leave as drawn**. Type to search, or type copy and choose to use it as the text. Tick **Apply to every frame** to bind the same slot on every frame at once. A slot whose logo, image, artifact or token was deleted shows as **Missing**. Select a picture to set how it sits in its box with **Fit** in the inspector: **Fill** covers the box and crops the rest, **Fit** shows the whole picture inside it, **Crop** lets you set the **Zoom** and **Focus**, and **Tile** repeats it at a **Tile size**. A bound photo fills its slot unless the frame's CSS says otherwise, and a bound logo is drawn whole. ### Details The template's **Description** (when to reach for it), **Type**, **Format**, **Frames**, **Handle**, **Source** and dates. The handle is the name agents fetch the template by. ### Code and Comments **Code** shows each frame's HTML and CSS; press **Edit code** to change them. **Comments** is a thread on the template, with @mentions. Changes on the Design, Details and Code tabs are held until you press **Save**. **Cancel** puts everything back. ## Page libraries A **Files** template with 7 or more fillable frames works as a page library, such as a brochure with many page types. Instead of filling every frame, Claude picks the pages each use needs, in the order it needs them. ## Ask Claude for a change Press **Edit** in the header to describe a change to the template. Claude proposes changes frame by frame, and you apply or discard them. Nothing changes until you apply. Each request uses AI credits. See [AI credits](/docs/billing/credits). ## Use a template Press **Use template** to make a design from it: Claude fills the text and photo slots for one piece of work, and the result is saved as a design. Save or cancel your edits first. See [Designs](/docs/create/designs). ## How agents use templates Agents get an index of your templates with each one's name, handle, type, and frames with their sizes and slot counts. Asking for one handle returns the finished markup with every binding resolved, so the logo, photos and colors are your real ones, plus a list of the slots meant to change. An agent that binds a photo to a slot can also set how it fits, the same as the **Fit** menu. When several templates fit and you haven't picked one, agents are told to ask you which to start from. Only templates that are **Complete** or have no status are served. See [Item states](/docs/workspace/states). ## Next steps :::cards - [Designs](/docs/create/designs): Turn a template into a finished piece. - [From Figma](/docs/import/figma): Bring frames in from a .fig file. - [MCP tools](/docs/agents/tools): How agents fetch a template. :::