Skip to main content
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.
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 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.
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.

​
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.

​
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.

​
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.
Next: ATLAS.md export: your whole brand in one file for any AI.