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

# Developer handoff

> Copy your brand's colour and font tokens as CSS, Tailwind or Figma tokens, and drop them into a project.

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.

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](/guides/sharing) 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.

<Screenshot name="guides/handoff/colours-code" alt="The Export tokens panel at the foot of the Colours page, on the Code tab, showing CSS custom properties and the start of a Tailwind config." />

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:

```css theme={null}
:root {
  --brand-color-primary-flame: #FFAA00;
  --brand-color-secondary-ember: #C2410C;
  --brand-color-neutral-wax: #F4E9DA;
  --brand-color-neutral-tin: #2B1D14;
}
```

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.

<Screenshot name="guides/handoff/colours-figma" alt="The Export tokens panel on the Figma Tokens tab, showing colours as JSON grouped by tag." />

## 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](/guides/playground), which gives CSS and Tailwind for every size.
* **Want the whole brand for an AI tool?** [ATLAS.md](/guides/atlas-md) includes these tokens along with everything else.

**Next:** [Teams and multiple brands](/guides/teams-and-brands): invite your team and run more than one brand.


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