# Google Design (Material & Fonts) MCP server > Generate Material Design color schemes, search Material Symbols icons and look up Google Fonts. - Listing: https://mcp.tc/i/google-design - Connect: use the server's own URL `https://design.googleapis.com/mcp` (no sign-in); clients connect to it directly. The listing link is a page, not an MCP endpoint. - Type: remote (Streamable HTTP) - Auth: none - Category: [Design, Websites & CMS](https://mcp.tc/c/design) - Vendor: Google - Verified: yes, mcp.tc checked that this is the official server (https://mcp.tc/verify). It says who runs the server, not that it is safe. - Homepage: ## About Design MCP exposes Google's design intelligence to AI agents. It can build a Material Design color scheme from key colors, find Material icons by keyword, search Google Fonts by category or language, and describe a font family in detail. It runs as a hosted streamable HTTP endpoint at design.googleapis.com/mcp. No API key or sign-in is needed. The service is in preview, and all five tools are read-only. ## What it can do - Generate Material color schemes from primary, secondary, tertiary and background colors - Adjust contrast level and scheme variant for generated palettes - Search Material Icons and Material Symbols by usage, style or shape - Get instructions for using Material icons on the web - Search Google Fonts by category, language and platform - Get details on a font family: styles, weights and usage ## Tools (5) - `generate_color_scheme`: Create a Material Design color scheme with named color roles from one or more hex key colors. (read-only) - `search_icons`: Find Material icons matching keywords for usage, style or shape. (read-only) - `icons_instructions`: Return instructions for using Material Icons and Material Symbols on the web. (read-only) - `search_fonts`: Find fonts matching categories and languages, with platform and sort options. (read-only) - `describe_font`: Describe a font family: look and feel, styles, weights and usage. (read-only) ## Example prompts - "Generate a Material color scheme from the brand color #4285F4" - "Find Material Symbols icons for a settings screen" - "Suggest Google Fonts that support Japanese and suit a headline" - "Describe the Roboto font family and how to use it on the web" ## Install ### Claude Code 1. Run this in a terminal, in your project folder: ```bash claude mcp add --transport http google-design https://design.googleapis.com/mcp ``` 2. Start Claude Code and type `/mcp`. **google-design** should show as connected. Add `--scope user` to make it available in every project, not just this one. ### Claude Desktop 1. Open **Settings → Connectors** and click **Add custom connector**. 2. Name it **Google Design (Material & Fonts)** and paste this URL: ```url https://design.googleapis.com/mcp ``` 3. Click **Add**. Its tools appear in the chat’s tools menu. Claude Desktop’s JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too. ### claude.ai 1. Open the connector form on claude.ai. This button fills in the name and URL for you: [Add to claude.ai]() (opens connector settings) 2. Check that the URL reads `https://design.googleapis.com/mcp` and click **Add**. 3. Turn it on in a chat from the tools menu. Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under **Organization settings → Connectors**. ### ChatGPT 1. On chatgpt.com, open **Settings → Security and login** and turn on **Developer mode**. 2. Go to `chatgpt.com/plugins` and click **+** to create an app for a remote MCP server. 3. Paste `https://design.googleapis.com/mcp` as the server URL and choose **No authentication**. Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts. ### Cursor [Add to Cursor]() (opens Cursor) Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project): `mcp.json`: ```json { "mcpServers": { "google-design": { "url": "https://design.googleapis.com/mcp" } } } ``` ### VS Code [Install in VS Code]() (opens VS Code) Or from a terminal: ```bash code --add-mcp '{"name":"google-design","type":"http","url":"https://design.googleapis.com/mcp"}' ``` Or commit it to the repo in `.vscode/mcp.json`: `.vscode/mcp.json`: ```json { "servers": { "google-design": { "type": "http", "url": "https://design.googleapis.com/mcp" } } } ``` ### Devin Desktop 1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows): `mcp_config.json`: ```json { "mcpServers": { "google-design": { "serverUrl": "https://design.googleapis.com/mcp" } } } ``` 2. Refresh the MCP server list in Cascade. Devin Desktop is the new name for Windsurf. It reads `serverUrl` (or `url`) for remote servers. ### Codex ```bash codex mcp add google-design --url https://design.googleapis.com/mcp ``` Or edit `~/.codex/config.toml` directly: `config.toml`: ```toml [mcp_servers.google-design] url = "https://design.googleapis.com/mcp" ``` ### Gemini CLI ```bash gemini mcp add --transport http google-design https://design.googleapis.com/mcp ``` This adds it to the current project. Add `-s user` to use it everywhere. ### Any client Most clients accept this shape. Some name the URL field differently: `serverUrl` in Devin Desktop, `httpUrl` in Gemini CLI’s settings file. ```json { "mcpServers": { "google-design": { "type": "http", "url": "https://design.googleapis.com/mcp" } } } ``` Zed puts servers under `context_servers` in its settings. Cline needs `"type": "streamableHttp"`, or it assumes SSE. Client only starts local servers? Bridge it with `npx -y mcp-remote https://design.googleapis.com/mcp`. ## Details - Server version: ESF - MCP protocol version: 2025-11-25 - Last checked: 2026-10-03 (reachable) - Listed: 2026-10-03 - Updated: 2026-10-04 --- Source: https://mcp.tc/i/google-design (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report