Skip to main content
Home/Recipes/Give GitHub Copilot brand context
Code & Tokens

Give GitHub Copilot brand context

Developer

Overview

Put the brand tokens where Copilot already reads: .github/copilot-instructions.md. Generate DESIGN.md, paste it in. Completions and Copilot Chat then have the real colors, type scale, and spacing as context. Without it Copilot fills styling with invented hex values.

GitHub Copilot reads repository custom instructions from .github/copilot-instructions.md and applies them to completions and Copilot Chat across the project. Without brand context it fills in wrong colors, arbitrary spacing, and system fonts. Generate DESIGN.md from the live site with Dembrandt and paste it into the instructions file. Suggestions then draw on the real token system: the primary, the type scale steps, the spacing rhythm, the border radii. Scaffolds come out closer to on-token, and Copilot Chat can cite brand values rather than guess. Less time correcting invented values after the fact.

Generate DESIGN.md

Terminal
dembrandt example.com --design-md
Add to .github/copilot-instructions.md
# Paste DESIGN.md content into .github/copilot-instructions.md,
# under a clear heading, then commit it.
## Design tokens (source of truth)
<paste DESIGN.md here>
## Rule
When generating UI, use only these tokens. No hardcoded
hex values, no system fonts, no arbitrary spacing.
Output

Repo-wide Copilot context. Completions and Copilot Chat stay on the brand token system.

Browse all

All recipes →

45 workflows