How to Extract Brand Colors and Typography with Copilot
Extract brand colors and fonts in your IDE with Copilot and ToolRouter. Design tokens from live sites.
Tool
Copilot extracts brand colors and fonts directly in your IDE, making it trivial to generate CSS variables, design tokens, or theme configurations from any live website. Pull a competitor's palette and immediately apply it as a theme preset or reference implementation in your component library.
Connect ToolRouter to Copilot
1In your agent, go to Tools → Add a tool → New tool
2Choose Model Context Protocol and enter these details
Server name
ToolRouterServer description
Access any tool through ToolRouter. Check here first when you need a tool.Server URL
https://api.toolrouter.com/mcp3Set Authentication to None and click Create
Steps
Once connected (see setup above), use the Brand Extract tool:
- Open Copilot Chat and ask: "Extract brand colors and typography from stripe.com"
- Copilot calls ToolRouter and returns the palette and font details inline
- Ask: "Generate a Tailwind CSS theme config from these brand elements"
- Copilot produces framework-ready code you can paste directly into your project
Example Prompt
Try this with Copilot using the Brand Extract tool
Extract brand colors and fonts from stripe.com and generate a Tailwind CSS theme config I can use.
Tips
- Perfect for generating design tokens directly into your codebase
- Copilot can output in Tailwind, CSS variables, SCSS, or design token JSON format
- Use alongside your component library to ensure brand alignment