> For the complete documentation index, see [llms.txt](https://cardstock-studio.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards.md).

# Templates - Design your Cards

A <mark style="color:$success;">**Template**</mark> is the visual layout of a single card or component. The <mark style="color:$success;">**Canvas**</mark> is in the middle of the screen.

<figure><picture><source srcset="/files/U5rkvvrzynaR0VBZT1qt" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FRLkHmPHhHC4QbYQSPSSF%2FScreenshot%202026-05-19%20at%204.40.20%E2%80%AFPM.png?alt=media&amp;token=97547e9c-5534-4975-adb2-9a0db47bfe1a" alt=""></picture><figcaption><p><strong>Layers</strong> &#x26; <strong>Variables</strong> on the left, <strong>Canvas</strong> in the middle, with <strong>Components</strong> and <strong>Conditionals</strong> on the right</p></figcaption></figure>

<mark style="color:$success;">**Layers**</mark> are stacked in the panel on the left side of the window, with each representing a single element in your design.&#x20;

Select a Layer to show its <mark style="color:$success;">**Components**</mark> in the panel on the right. Each Component generally handles one aspect of the Layer. Each Layer has a *Transform*, and will generally have a *Main Component* — *Image*, *Text*, *Custom* *Shape*, etc.

Add additional Components to add features to the layer, such as *Drop Shadow*, *Border*, *Gradient Fill*, and so on. <mark style="color:$success;">**Properties**</mark> are the values associated with each Component.

Each template can be populated with <mark style="color:$success;">**Variables**</mark>, which are the per-card unique values in your deck. Points, colors, icons, images — whatever per-card differences may exist in your deck. This are displayed in the left panel, by clicking the "Variables" tab.

{% hint style="success" %}
Click the <picture><source srcset="/files/wEtgWAtq6PckOI0iekR1" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FoWDjKeV32mdOx3gDiY7X%2FLink%20Light.png?alt=media&amp;token=16a0e627-83bf-4731-8558-457be14e7abd" alt="" data-size="line"></picture> icon next to a property to link it to a Variable. This is how each card gets unique values in the Deck.
{% endhint %}

Individual Properties can be modified by <mark style="color:$success;">**Conditionals**</mark>, which are logical operators similar to "If...Then" statements. Conditionals can be set up by clicking the "Conditionals" tab in the right panel, or by clicking the <picture><source srcset="/files/2NTJkGoUkhbKTzffYsU3" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FNVBRwnzTp9SgsX65YBdh%2FLightning%20Light.png?alt=media&amp;token=e6c63e29-f18e-408b-b27f-1b189dd3391b" alt="" data-size="line"></picture> icon next to a property.

***

## Learn more about designing your cards:

#### :point\_right: [Layers](/docs/design/templates-design-your-cards/layers.md) make up the static or dynamic elements of your card.

#### :point\_right: [Components](/docs/design/templates-design-your-cards/components.md) are added to Layers to add effects like Outline, Gradient Fill, Drop Shadow, and more.

#### :point\_right: [Variables](/docs/design/templates-design-your-cards/variables.md) allow you to change values per card in the Deck (points, cost, flavor text, images, colors, etc).&#x20;

#### :point\_right: [Conditionals](/docs/design/templates-design-your-cards/conditionals.md) allow Properties on Components to be modified based on Variables or other values.

#### :point\_right: [Images](/docs/design/images.md) are used in the Image Layer.

#### :point\_right: [Shapes](/docs/design/shapes.md) can be used in the Custom Shape Layer.

#### :point\_right: [Text Style Presets](/docs/design/text-style-presets.md) allow you to define re-usable styles, including in-line text styles & in-line icons.

#### :point\_right: [Global Values](/docs/design/global-values.md) are are project-wide Variables allowing you to define once, and use in many Templates at once — change the value in one place to effect all uses of it.

#### :point\_right: [Prefabs](/docs/design/prefabs.md) are saved groups of Layers, Components, and Property settings that can be re-used. Change the values in the Prefab, and all instances of the Prefab are updated. Prefab instances can override values, and skip being updated.

***

## Create a Template

When you'er in a project, click the <img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FdswSYal6ahxnK6UCMIcu%2FScreenshot%202026-05-20%20at%204.51.55%E2%80%AFPM.png?alt=media&amp;token=7e0ba7a0-9f17-4ea6-b105-1513f7fdd934" alt="" data-size="line"> button to create a new Template. Template names must be unique per project.

### Custom Size

You can choose a standard size for your template from the options shown, or a custom width and height, along with an orientation. All of these can be changed later without affecting your design.

### From Preset

Optionally you can choose a <mark style="color:$success;">**Template Preset**</mark>. *Cardstock Studio* ships with most of the templates required by The Game Crafter as Template Presets, with the correct size (including bleed), and the guide image provided by The Game Crafter.

You can also create your own Template Presets by right-clicking any existing Template, and choosing *Make Preset*.

***

## Import a Template

Use the \[BUTTON] button to import a Template. Templates exported as JSON will import but will not include any artwork, while those exported as a Package will import and also import any artwork that isn't already in the Project.

***

## Template Options

Right-click the template in the Templates view to see options.

### Export Template

This option will export the Template layout as JSON, but does not include any artwork or shapes.

### Export as Package

This exports the full Template including artwork, which can then be imported into another project.

{% hint style="info" %}
All projects can be exported for print, or use with The Game Crafter and other services. Paid subscription is required to export/import full package files.
{% endhint %}

### Duplicate

This makes a full copy of the Template.

### Make Preset

Selecting this will make the Template a "Template Preset", which will show up in the "From Preset" menu when making a new Template.

Any changes you make to this Template will be represented in new uses of the Template Preset, but will not modify existing Templates which were created from the Template Preset.

### Delete

When you delete a Template, it is moved to a "Deleted" state. You can then retreive it, or choose to delete it forever, which can not be undone.

***

## Template Settings

When no Layer is selected, the right panel will display the Template Settings. Here you can change the Card Size, Shape, Orientation, and Dimensions.\
\
You can also add bleed, to visually design the card with bleed in mind, and curved edges, so you can see what the card would look like if corners were curved on the final print.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
