Using designtoken.md with GitHub Copilot

Generate your token file

Head to the designtoken.md generator and configure your design system:

• Pick your brand colors and let the generator build full color scales
• Configure typography — font families, sizes, and weights
• Set spacing and border-radius values
• Switch to the designtoken.md tab in the output panel
• Copy the output or download the file

Place it in your project root

Drop the file at the root of your project so Copilot can access it as context:

your-project/
├── designtoken.md    ← place it here
├── src/
├── package.json
└── ...

Copilot reads open files and project context to inform its suggestions. By placing designtoken.md at the top level and keeping it open in a tab, Copilot will reference the token values when generating inline suggestions and completions.

Start building with tokens

Keep designtoken.md open in a tab while you work. Copilot uses open files as context, so having the token file visible helps it suggest the right values.

You can also reference token names in comments to guide Copilot's suggestions:

// Build a card component using designtoken.md tokens
// Use --color-primary-500, --space-md, --radius-lg

function Card({ title, children }) {
  // Copilot will suggest token-based styles here
}

For Copilot Chat, reference the file directly in your prompts:

"Create a nav component using the design tokens from designtoken.md.
Use the color scale, spacing tokens, and typography settings."

Copilot will use the token values for inline suggestions and completions, keeping your UI consistent with your design system.

Before & after

See the difference tokens make in what your agent outputs:

<button style="
  background: blue;
  color: white;
  padding: 10px 20px;
">
  Click me
</button>

<button style="
  background: var(--color-primary-500);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
">
  Click me
</button>

With tokens, every suggestion Copilot makes uses your actual design values instead of arbitrary defaults.