Website Design System Extractor (Colors, Fonts, Spacing, Components)
omnial/web-styleguide
Given a website domain, returns its extracted design system: the accent/background/text color palette, heading and paragraph typography (family, size, weight, line height), a 5-step spacing scale, a 5-step shadow scale, and ready-to-use CSS for primary/secondary/link buttons and cards. Supports emulating a light or dark color scheme for sites that adapt to it.
activeper callv5
Price
Up to $0.0346 per call; you pay what the call used
You pay the price shown. If a call turns out to cost more than its quote, you pay the actual price, capped at twice the quote. No monthly minimum. Top-ups start at $5.00.
Data source
Data from the web page you request.
Use it
Your AI assistant does the work: it finds this tool, shows you the price first, runs it, and you are charged when the run finishes. There is nothing to set up for this tool in particular.
Connect once and your AI can find and run this tool, and any other it needs.
For developers: the calls your assistant makes
agent
// 1. search: find the tool
omnial_search({ query: "what you need" })
// 2. inspect: price and input schema
omnial_inspect({ tool: "omnial/web-styleguide" })
// 3. learn: read the usage guide at runtime
omnial_learn({ tool: "omnial/web-styleguide" })
// 4. run: price the exact call first, then run it
omnial_execute({ tool: "omnial/web-styleguide", input: { /* see input_schema */ }, dry_run: true })
omnial_execute({ tool: "omnial/web-styleguide", input: { /* ... */ } })
// 5. settle: the call is charged when it finishes, nothing to doNot connected yet? Point your MCP client at https://mcp.eden-engine.com/mcp, then copy a config for your client.
Pricing
Every charge this tool can incur.
| Charge | Price |
|---|---|
Per call | $0.0346 |
- Updated
- Oct 27, 2026
Input and output schemas
Input schema
input_schema.json
{
"type": "object",
"anyOf": [
{
"required": [
"domain"
]
},
{
"required": [
"directUrl"
]
}
],
"properties": {
"domain": {
"type": "string",
"minLength": 3,
"description": "Domain to extract the styleguide from, e.g. 'example.com'. Mutually exclusive with directUrl."
},
"maxAgeMs": {
"type": "integer",
"default": 7776000000,
"maximum": 9007199254740991,
"minimum": 0,
"description": "Maximum age in milliseconds of cached design data before the platform hard-refreshes it. Default 7776000000 (3 months); values are clamped to [86400000 (1 day), 31536000000 (1 year)]."
},
"directUrl": {
"type": "string",
"format": "uri",
"description": "Exact URL to use, bypassing domain resolution (e.g. 'https://example.com/pricing'). Mutually exclusive with domain."
},
"timeoutMS": {
"type": "integer",
"maximum": 300000,
"minimum": 1000,
"description": "Upstream timeout in milliseconds (max 300000). The call is aborted past this point. Keep it below the endpoint's requestTimeoutMs so the provider answers before the platform's own budget expires."
},
"colorScheme": {
"enum": [
"light",
"dark"
],
"type": "string",
"description": "Browser color scheme to emulate for sites that honor prefers-color-scheme."
}
},
"additionalProperties": false
}Output schema
output_schema.json
{
"type": "object",
"properties": {
"domain": {
"type": "string",
"description": "The resolved domain the styleguide was extracted from."
},
"status": {
"type": "string",
"description": "'ok' on both real calls observed."
},
"styleguide": {
"type": "object",
"properties": {
"mode": {
"type": "string",
"description": "The color scheme this extraction reflects, 'light' or 'dark'."
},
"colors": {
"type": "object",
"properties": {
"text": {
"type": "string",
"description": "Hex color, the primary body text color."
},
"accent": {
"type": "string",
"description": "Hex color, the site's primary brand/accent color."
},
"background": {
"type": "string",
"description": "Hex color, the page background."
}
},
"description": "The site's core color palette.",
"additionalProperties": true
},
"shadows": {
"type": "object",
"properties": {
"lg": {
"type": "string"
},
"md": {
"type": "string"
},
"sm": {
"type": "string"
},
"xl": {
"type": "string"
},
"inner": {
"type": "string"
}
},
"description": "A 5-step CSS box-shadow scale. Observed as the literal string 'none' for most steps on both real calls -- a site that uses shadows sparingly is common, not an extraction gap.",
"additionalProperties": true
},
"components": {
"type": "object",
"properties": {
"card": {
"type": "object",
"properties": {
"css": {
"type": "string",
"description": "A single, ready-to-paste CSS declaration block for this component."
},
"padding": {
"type": "string"
},
"boxShadow": {
"type": "string"
},
"textColor": {
"type": "string"
},
"borderColor": {
"type": "string"
},
"borderStyle": {
"type": "string"
},
"borderWidth": {
"type": "string"
},
"borderRadius": {
"type": "string"
},
"backgroundColor": {
"type": "string"
}
},
"additionalProperties": true
},
"button": {
"type": "object",
"properties": {
"link": {
"type": "object",
"properties": {
"css": {
"type": "string",
"description": "A single, ready-to-paste CSS declaration block for this button variant."
},
"color": {
"type": "string"
},
"padding": {
"type": "string"
},
"fontSize": {
"type": "string"
},
"minWidth": {
"type": "string"
},
"boxShadow": {
"type": "string"
},
"minHeight": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontWeight": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderStyle": {
"type": "string"
},
"borderWidth": {
"type": "string"
},
"borderRadius": {
"type": "string"
},
"fontFallbacks": {
"type": "array",
"items": {
"type": "string"
}
},
"textDecoration": {
"type": "string"
},
"backgroundColor": {
"type": "string"
}
},
"additionalProperties": true
},
"primary": {
"type": "object",
"properties": {
"css": {
"type": "string",
"description": "A single, ready-to-paste CSS declaration block for this button variant."
},
"color": {
"type": "string"
},
"padding": {
"type": "string"
},
"fontSize": {
"type": "string"
},
"minWidth": {
"type": "string"
},
"boxShadow": {
"type": "string"
},
"minHeight": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontWeight": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderStyle": {
"type": "string"
},
"borderWidth": {
"type": "string"
},
"borderRadius": {
"type": "string"
},
"fontFallbacks": {
"type": "array",
"items": {
"type": "string"
}
},
"textDecoration": {
"type": "string"
},
"backgroundColor": {
"type": "string"
}
},
"additionalProperties": true
},
"secondary": {
"type": "object",
"properties": {
"css": {
"type": "string",
"description": "A single, ready-to-paste CSS declaration block for this button variant."
},
"color": {
"type": "string"
},
"padding": {
"type": "string"
},
"fontSize": {
"type": "string"
},
"minWidth": {
"type": "string"
},
"boxShadow": {
"type": "string"
},
"minHeight": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontWeight": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderStyle": {
"type": "string"
},
"borderWidth": {
"type": "string"
},
"borderRadius": {
"type": "string"
},
"fontFallbacks": {
"type": "array",
"items": {
"type": "string"
}
},
"textDecoration": {
"type": "string"
},
"backgroundColor": {
"type": "string"
}
},
"additionalProperties": true
}
},
"additionalProperties": true
}
},
"description": "Extracted, ready-to-use CSS styling for common UI components.",
"additionalProperties": true
},
"typography": {
"type": "object",
"properties": {
"p": {
"type": "object",
"properties": {
"fontSize": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontWeight": {
"type": "number"
},
"lineHeight": {
"type": "string"
},
"fontFallbacks": {
"type": "array",
"items": {
"type": "string"
},
"description": "Ordered CSS font-family fallback stack."
},
"letterSpacing": {
"type": "string"
}
},
"additionalProperties": true
},
"headings": {
"type": "object",
"properties": {
"h1": {
"type": "object",
"properties": {
"fontSize": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontWeight": {
"type": "number"
},
"lineHeight": {
"type": "string"
},
"fontFallbacks": {
"type": "array",
"items": {
"type": "string"
},
"description": "Ordered CSS font-family fallback stack."
},
"letterSpacing": {
"type": "string"
}
},
"additionalProperties": true
},
"h2": {
"type": "object",
"properties": {
"fontSize": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontWeight": {
"type": "number"
},
"lineHeight": {
"type": "string"
},
"fontFallbacks": {
"type": "array",
"items": {
"type": "string"
},
"description": "Ordered CSS font-family fallback stack."
},
"letterSpacing": {
"type": "string"
}
},
"additionalProperties": true
},
"h3": {
"type": "object",
"properties": {
"fontSize": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontWeight": {
"type": "number"
},
"lineHeight": {
"type": "string"
},
"fontFallbacks": {
"type": "array",
"items": {
"type": "string"
},
"description": "Ordered CSS font-family fallback stack."
},
"letterSpacing": {
"type": "string"
}
},
"additionalProperties": true
},
"h4": {
"type": "object",
"properties": {
"fontSize": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontWeight": {
"type": "number"
},
"lineHeight": {
"type": "string"
},
"fontFallbacks": {
"type": "array",
"items": {
"type": "string"
},
"description": "Ordered CSS font-family fallback stack."
},
"letterSpacing": {
"type": "string"
}
},
"additionalProperties": true
}
},
"additionalProperties": true
}
},
"description": "Font styling for each heading level (h1-h4) and body paragraph text.",
"additionalProperties": true
},
"elementSpacing": {
"type": "object",
"properties": {
"lg": {
"type": "string"
},
"md": {
"type": "string"
},
"sm": {
"type": "string"
},
"xl": {
"type": "string"
},
"xs": {
"type": "string"
}
},
"description": "A 5-step CSS spacing scale extracted from the page, in pixels.",
"additionalProperties": true
}
},
"additionalProperties": true
},
"finalDOMState": {
"type": "string",
"description": "How the page finished loading before extraction ran, e.g. 'loaded' on both real calls observed. Other states are unconfirmed."
},
"cache_metadata": {
"type": "object",
"properties": {
"age_ms": {
"type": "number",
"description": "Age of the cached result in milliseconds, 0 on a fresh extraction (miss)."
},
"status": {
"type": "string",
"description": "Observed values: 'hit' (cached), 'miss' (freshly extracted)."
}
},
"description": "Whether this result was served from cache or freshly extracted.",
"additionalProperties": true
}
},
"description": "The extracted styleguide record.",
"additionalProperties": true
}