> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brandatlas.pro/llms.txt
> Use this file to discover all available pages before exploring further.

# The Playground

> Try your colours on posters and your fonts on a type scale, keep the versions you like, and copy them as code or Figma tokens.

export const Screenshot = ({name, alt}) => {
  const SHOW_SCREENSHOTS = true;
  if (!SHOW_SCREENSHOTS) return null;
  return <Frame>
      <img className="block dark:hidden" src={`/images/${name}-light.png`} alt={alt} />
      <img className="hidden dark:block" src={`/images/${name}-dark.png`} alt={alt} />
    </Frame>;
};

**Plans:** Scout, Keeper and Guardian. How many versions you can keep depends on your plan.

The Playground is a room for quick design tools. It reads the colours on your **Colours** page and the fonts on your **Fonts** page, and lets you try them out. Nothing you do here changes your Atlas, so experiment freely.

There are two tools: **Colour Studio** and **Type Scale Studio**.

1. Click **Playground** in the sidebar, under **Treasures**.
2. Click a tool to open it. **Playground** at the top takes you back.

<Screenshot name="guides/playground/tiles" alt="The Playground with the Colour Studio and Type Scale Studio tiles." />

If your Colours or Fonts page is still empty, the tool says so and offers **Go to Colours** or **Go to Fonts**. Add a [Colour palette or Brand font block](/guides/brand-blocks) there first.

## Colour Studio

Put your palette on a poster and find the combinations that work.

1. Pick a layout from the row of small posters above the big one: Swiss, Cover, Split, Exhibition, Specimen or Jacket. The poster is set in your own brand fonts.
2. Click **Settings** to open the side panel.
3. Under **Your colours**, choose which colour plays each part: **Main** (the background), **Support** (the blocks), **Highlight** (the small bright bits) and **Text** (the words). Pick from your palette, or try any colour with the picker.
4. Under **The balance**, slide how much of the poster each colour takes. The three always add up to the whole poster.
5. Under **Your words**, type your own headline.

<Screenshot name="guides/playground/colour-studio" alt="Colour Studio showing a poster in the Tallowby colours, with the six layouts above it." />

To compare ideas, click **Compare** to take a snapshot (up to four), then **Side by side** to see them next to what you have now. Snapshots clear when you leave the page.

<Screenshot name="guides/playground/colour-settings" alt="Colour Studio with its settings panel open on Your colours, showing Main, Support, Highlight and Text, and Keep it at the bottom." />

## Type Scale Studio

Set your fonts on a scale, so every heading size follows from one reading size and one ratio.

1. Use **Ladder** to see every size stacked, or **In use** to see the scale set on a sample magazine page.
2. Click **Settings**. Under **Size and growth**, set the **Reading size** and **How fast sizes grow**, from Minor second (1.067) up to Golden (1.618), or **Your own number**.
3. Under **Big headlines**, **Section titles**, **Paragraphs** and **Numbers**, choose the typeface, weight, line spacing and letter spacing for each.
4. Under **Your words**, type your own preview text and pick the preview colours.

<Screenshot name="guides/playground/type-scale" alt="Type Scale Studio in the In use view, with a sample page set from the scale." />

## Keep and copy

Both tools work the same way at the foot of the **Settings** panel.

1. Type a name in **Name this one** (or **Name this scale**) and click **Keep it**. Kept versions show under the tool. Click one to bring it back.
2. Click **Copy code** to copy CSS custom properties and a Tailwind theme, or **Figma tokens** to copy JSON for Figma. Each kept version has the same buttons.
3. To free a slot, delete a kept version.

| Plan | Colour Studio | Type Scale Studio |
| - | - | - |
| Scout | 3 kept | 1 kept |
| Keeper | 6 kept | 2 kept |
| Guardian | 9 kept | 3 kept |

## Good to know

* **Kept versions belong to the brand.** Everyone on your team sees them and can keep their own.
* **Unsaved changes are lost when you leave.** Keep a version if you want to come back to it.
* **There is no image download.** The tools copy code and tokens, not pictures.
* To hand your colours and fonts to a developer, see [Developer handoff](/handoff).

**Next:** [ATLAS.md export](/guides/atlas-md): your whole brand in one file for any AI.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.