Skip to main content
Plans: Scout, Keeper and Guardian. Your Colours and Fonts pages end with an Export tokens panel. It turns the swatches and fonts on the page into code a developer can paste straight into a project, so the website uses exactly the colours and type in your Atlas. Send a developer this page, or a share link to the two pages: the panel shows there too.

​
Copy the tokens

  1. Open Colours (or Fonts) from the sidebar.
  2. Scroll past the page’s content to Dev tokens, Export tokens.
  3. Choose Code for CSS and Tailwind, or Figma Tokens for a JSON file a Figma tokens plugin can import.
  4. Click Copy at the top right. It shows Copied for a moment.
The panel appears once the page has at least one swatch or font. The tokens are read from the page itself, so when the page changes, the tokens change with it.

​
What the Code tab gives you

The Code tab holds two parts in one block. Split them before you paste. CSS custom properties. One variable per colour, named from its tag and name:
On the Fonts page it is one variable per typeface, named by its role (--font-primary, --font-secondary and so on), with a fallback stack. If you uploaded font files, @font-face rules come first. A Tailwind config in the tailwind.config.js style, with the same values under theme.extend.colors (as primary-flame and so on) or theme.extend.fontFamily.

​
Drop it into a project

  1. Paste the CSS block into your global stylesheet, for example globals.css. Use the variables anywhere: color: var(--brand-color-primary-flame);.
  2. Tailwind v3: merge the extend part into your tailwind.config.js. Then use classes such as bg-primary-flame or font-primary.
  3. Tailwind v4: there is no config file to merge. Declare the colours in your CSS instead, for example @theme { --color-primary-flame: #FFAA00; }, and the same classes work.
  4. Fonts: host the font files in your project yourself, from the foundry or Google Fonts, and point the src of each @font-face rule at your copy. The file links in the copied code only work for people signed in to your Atlas.

​
Good to know

  • Tag your colours Primary, Secondary, Accent or Neutral in the Colour palette block. The tag becomes part of each name; an untagged colour counts as Neutral. Two colours with the same tag and name produce the same variable, so give each a different name.
  • Set each font’s Role (primary, secondary, tertiary or mono) and Family in its Brand font block. The role names the variable, and the family picks the fallback stack.
  • Type sizes are not in this panel. Copy them from a kept scale in the Playground’s Type Scale Studio, which gives CSS and Tailwind for every size.
  • Want the whole brand for an AI tool? ATLAS.md includes these tokens along with everything else.
Next: Teams and multiple brands: invite your team and run more than one brand.