---
title: ToolRouter — Agent Use Case Guide
description: Step-by-step guide for completing a task with a specific AI agent using ToolRouter.
url: https://toolrouter.com/tools/brand-extract/use-cases/extract-brand-colors-typography/copilot
---
# How to Extract Brand Colors and Typography with Copilot

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.

## Setup

{"mcpServers":{"toolrouter":{"command":"npx","args":["-y","toolrouter-mcp"]}}}

## Steps

1. Add ToolRouter to your Copilot MCP configuration
2. Open Copilot Chat and ask: "Extract brand colors and typography from stripe.com"
3. Copilot calls ToolRouter and returns the palette and font details inline
4. Ask: "Generate a Tailwind CSS theme config from these brand elements"
5. Copilot produces framework-ready code you can paste directly into your project

## Example Prompt

```
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
