ThemeContext Documentation

Extract design tokens from any website with AI. Get colors, typography, spacing, and more exported to JSON, CSS, Tailwind, or SCSS.

Use Cases

Without ThemeContext

• Manually inspecting CSS with DevTools
• Copy-pasting colors one by one
• Guessing font families and sizes
• Missing semantic meaning of colors

With ThemeContext

• Instant extraction of all design tokens
• AI-identified semantic colors (primary, secondary, background, text)
• Complete typography scale with font families and weights
• Ready-to-use code in your preferred format

Quick Start

Start extracting design tokens in minutes.

Using the Web Interface

The easiest way to get started is through our web interface:

1. Visit themecontext.com
2. Enter a website URL (e.g., https://stripe.com)
3. Click "Extract" and wait for the analysis
4. Browse colors, typography, and spacing
5. Download as ZIP or copy code snippets

Using the API

For programmatic access, use our REST API:

curl -X POST https://themecontext.com/api/extract \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_API_KEY" \
  -d '{"url": "https://stripe.com"}'

Using with AI Assistants

ThemeContext integrates natively with AI coding assistants via MCP:

# In your AI assistant prompt:
"Extract the design theme from stripe.com using ThemeContext"

# The assistant will use the MCP tools to:
# 1. Check if the theme already exists
# 2. Extract new theme if needed
# 3. Return formatted design tokens

Authentication

Secure your API access with API keys.

Getting an API Key

1. Sign in at themecontext.com/dashboard
2. Navigate to the API Keys section
3. Click "New Key" to generate a new API key
4. Copy and securely store your key

Using Your API Key

Include your API key in the X-API-Key header:

X-API-Key: tc_your_api_key_here

Example Request

const response = await fetch('https://themecontext.com/api/extract', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': process.env.THEMECONTEXT_API_KEY,
  },
  body: JSON.stringify({ url: 'https://example.com' }),
});

const theme = await response.json();

Multiple API Keys

You can create multiple API keys for different purposes:

• Development - For local development and testing
• Production - For your production applications
• CI/CD - For automated pipelines

Each key tracks its own usage statistics, making it easy to monitor consumption per environment.

Extract Theme API

Extract design tokens from any website URL.

Example Request

curl -X POST https://themecontext.com/api/extract \
  -H "Content-Type: application/json" \
  -H "X-API-Key: tc_your_api_key" \
  -d '{
    "url": "https://stripe.com",
    "options": {
      "formats": ["json", "css", "tailwind"]
    }
  }'

Example Response

{
  "success": true,
  "domain": "stripe.com",
  "extractedAt": "2026-01-24T10:30:00.000Z",
  "data": {
    "json": {
      "colors": {
        "semantic": {
          "primary": "#635bff",
          "secondary": "#0a2540",
          "background": ["#ffffff", "#f6f9fc"],
          "text": ["#0a2540", "#425466"]
        },
        "all": ["#635bff", "#0a2540", ...]
      },
      "typography": {
        "fonts": {
          "primary": "Söhne",
          "families": ["Söhne", "system-ui"]
        },
        "sizes": ["14px", "16px", "24px", "48px"],
        "weights": ["400", "500", "600"]
      }
    },
    "css": ":root { --color-primary: #635bff; ... }",
    "tailwind": { "theme": { "extend": { ... } } }
  }
}

Extractions API

Search, retrieve, and manage stored theme extractions.

Queue API

Manage the extraction processing queue.

Download API

Download complete theme packages as ZIP files.

ZIP Contents

The downloaded ZIP file contains:

MCP Server

Model Context Protocol integration for AI coding assistants.

ThemeContext provides an MCP server that enables AI assistants like Claude Code, Cursor, and Windsurf to directly access design tokens while coding.

What is MCP?

The Model Context Protocol (MCP) is a standard for connecting AI assistants to external data sources and tools. With ThemeContext's MCP server, you can:

• Ask your AI assistant to "get the Stripe design theme"
• Automatically apply design tokens to your code
• Extract themes from new websites on demand
• Get always up-to-date design system information

MCP Installation

Set up ThemeContext MCP server in your AI assistant.

Claude Code

Add to your Claude Code MCP configuration:

{
  "mcpServers": {
    "themecontext": {
      "command": "npx",
      "args": ["-y", "themecontext-mcp"],
      "env": {
        "THEMECONTEXT_API_KEY": "tc_your_api_key"
      }
    }
  }
}

Cursor

Add to your Cursor MCP settings:

{
  "mcpServers": {
    "themecontext": {
      "command": "npx",
      "args": ["-y", "themecontext-mcp"],
      "env": {
        "THEMECONTEXT_API_KEY": "tc_your_api_key"
      }
    }
  }
}

Windsurf

Add to your Windsurf configuration:

{
  "mcpServers": {
    "themecontext": {
      "command": "npx",
      "args": ["-y", "themecontext-mcp"],
      "env": {
        "THEMECONTEXT_API_KEY": "tc_your_api_key"
      }
    }
  }
}

MCP Tools Reference

Available tools in the ThemeContext MCP server.

Example Usage

# Get existing theme
"Use themecontext to get the Stripe design theme and apply it to my button component"

# Extract new theme
"Extract the design theme from linear.app using themecontext"

# Search themes
"Search themecontext for tech company design themes"

Response Format

Understanding the theme data structure.

JSON Theme Structure

{
  "colors": {
    "semantic": {
      "primary": "#635bff",
      "secondary": "#0a2540",
      "accent": "#00d4ff",
      "background": ["#ffffff", "#f6f9fc", "#0a2540"],
      "text": ["#0a2540", "#425466", "#697386"],
      "border": ["#e6ebf1", "#c4c9d4"]
    },
    "all": ["#635bff", "#0a2540", ...]
  },
  "typography": {
    "fonts": {
      "primary": "Söhne",
      "secondary": "system-ui",
      "families": ["Söhne", "system-ui", "sans-serif"]
    },
    "sizes": [
      { "value": "14px", "usage": "body" },
      { "value": "16px", "usage": "body-lg" },
      { "value": "24px", "usage": "heading" }
    ],
    "weights": ["400", "500", "600", "700"]
  },
  "spacing": {
    "scale": ["4px", "8px", "12px", "16px", "24px", "32px", "48px"]
  },
  "borders": {
    "radii": ["4px", "8px", "12px", "9999px"]
  },
  "shadows": {
    "values": [
      "0 2px 4px rgba(0,0,0,0.1)",
      "0 4px 12px rgba(0,0,0,0.15)"
    ]
  }
}

Semantic Colors

Rate Limits

API usage limits and best practices.

Rate Limit Headers

Responses include rate limit information in headers:

X-RateLimit-Limit: 10
X-RateLimit-Remaining: 7
X-RateLimit-Reset: 1706097600

Best Practices

• Cache extracted themes locally to reduce API calls
• Use the /api/extractions/check/:domain endpoint before extracting
• Implement exponential backoff for retries
• Use the queue API for bulk extractions

Troubleshooting

Common issues and solutions.

Authentication Errors

401 - Missing API Key

Include your API key in the X-API-Key header:

curl -H "X-API-Key: tc_your_api_key" ...

401 - Invalid API Key

Verify your API key in the dashboard. Keys start with tc_.

Extraction Errors

Timeout Errors

Some websites take longer to load. Increase the timeout:

{
  "url": "https://example.com",
  "options": { "timeout": 60000 }
}

Website Blocked

Some websites block automated access. Try:

• Using a different page on the site
• Adding the URL to the queue for background processing
• Contacting us for enterprise solutions

MCP Issues

Tools Not Showing

Restart your AI assistant after updating MCP configuration.

API Key Not Working

Ensure the THEMECONTEXT_API_KEY environment variable is set correctly in your MCP config.

Getting Help

If you're still having issues:

• Check the GitHub issues
• Join our Discord community
• Email support@themecontext.com