Skip to content
Eden Engine

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 callv1
Provider
Web & Business Data Network
Category
web-extraction
Provider price
$0.012285 per call
Latency p50 / p95
— / —
Success rate
—
Verified
—

Provider list price; Omnial MCP charges provider cost plus a platform markup on top.

Contract

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.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, as returned at the result path.",
  "additionalProperties": true
}

Pricing

Every real charge, itemised. A model that quietly omits one is a slow financial leak, so nothing here is rolled up, and a charge that only applies to some inputs says so rather than being added in.

Prices in this catalog are the provider's own list price, not your bill: Omnial MCP charges provider cost plus a platform markup on top, so what you are charged is higher than the figure shown. For the exact amount a specific call will cost, run omnial_execute with dry_run: true; that number includes the markup and is what we hold while the call runs. It is a quote, not a cap on the charge.

ChargeRate
Per call
Flat, regardless of what comes back
$0.012285
Cost basis
Not recorded

This tool's catalog entry does not record how its final bill is determined, so we will not tell you whether its cost is fixed before the call or reported by the provider afterwards. Either way what is held is a quote rather than a cap: you are charged what the call actually costs, bounded at 2x the quote.

Updated
Sep 23, 2026