> ## Documentation Index
> Fetch the complete documentation index at: https://deepline.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Context.dev: Contextdev Get Web Styleguide

> Get a website's brand style guide: colors, typography, spacing, shadows, and UI components. Includes inputs, outputs, SDK V2 examples, and Deepline cost.

Get a website's brand style guide: colors, typography, spacing, shadows, and UI components.

> [!NOTE]
>
> Tool ID: `contextdev_get_web_styleguide`

## Run this action

Use the TypeScript SDK for one call. Use `ctx.tools.execute(...)` inside a Play for durable calls, scheduled calls, or CSV processing.

```ts theme={"languages":{"custom":["/languages/deepline-prompt.json"]}}
import { Deepline } from 'deepline';

const deepline = await Deepline.connect();
const result = await deepline.tools.execute(
  'contextdev_get_web_styleguide',
  {
    "domain": "example.com",
    "directUrl": "https://example.com/resource",
    "maxAgeMs": 7776000000
  },
);

console.log(result.toolResponse.raw);
```

### CLI

```bash theme={"languages":{"custom":["/languages/deepline-prompt.json"]}}
deepline tools execute contextdev_get_web_styleguide --input '{
  "domain": "example.com",
  "directUrl": "https://example.com/resource",
  "maxAgeMs": 7776000000
}' --json
```

## Example response

The SDK returns this shape at `result.toolResponse.raw`. The example values illustrate the response.

```json theme={"languages":{"custom":["/languages/deepline-prompt.json"]}}
{
  "data": {
    "status": "example",
    "domain": "example.com",
    "styleguide": {
      "mode": "light",
      "colors": {
        "accent": "example",
        "background": "example",
        "text": "example"
      },
      "typography": {
        "headings": {}
      },
      "elementSpacing": {
        "xs": "example",
        "sm": "example",
        "md": "example",
        "lg": "example",
        "xl": "example"
      },
      "shadows": {
        "sm": "example",
        "md": "example",
        "lg": "example",
        "xl": "example",
        "inner": "example"
      },
      "fontLinks": {},
      "components": {
        "button": {}
      }
    }
  }
}
```

Use `deepline describe contextdev_get_web_styleguide --json` for the latest machine-readable contract.

## Input reference

Extract a comprehensive design system from a website including colors, typography, spacing, shadows, and UI components.

| Name | Type | Required | Default | Details |
| - | - | - | - | - |
| `payload.domain` | `string` | No | — | Domain name to extract styleguide from (e.g., 'example.com', 'google.com'). The domain will be automatically normalized and validated. You must provide either 'domain' or 'directUrl', but not both. Minimum length: 3. |
| `payload.directUrl` | `string` | No | — | A specific URL to fetch the styleguide from directly, bypassing domain resolution (e.g., '[https://example.com/design-system](https://example.com/design-system)'). When provided, the styleguide is extracted from this exact URL. You must provide either 'domain' or 'directUrl', but not both. Format: `uri`. |
| `payload.maxAgeMs` | `integer` | No | `7776000000` | Maximum age in milliseconds for cached brand data before the API performs a hard refresh. Defaults to 3 months (7776000000 ms). Values below 1 day (86400000 ms) are clamped to 1 day. values above 1 year (31536000000 ms) are clamped to 1 year. |
| `payload.timeoutMS` | `integer` | No | — | Optional timeout in milliseconds for the request. If the request takes longer than this value, it will be aborted with a 408 status code. Maximum allowed value is 300000ms (5 minutes). Minimum: 1000. Maximum: 300000. |
| `payload.colorScheme` | `"light" \| "dark"` | No | — | Optional browser color scheme to emulate for websites that respond to prefers-color-scheme. This value is part of the styleguide cache key. Allowed: `light`, `dark`. |
| `payload.tags` | `array` | No | — | Optional comma-separated caller-defined tags for tracking this request. Tags are recorded on the request's usage log and can be used to filter usage on the dashboard usage page. Up to 20 tags, each 1-50 characters. Maximum items: 20. |

<details>
  <summary>Show raw input schema</summary>

  ### Input JSON Schema

  ```json theme={"languages":{"custom":["/languages/deepline-prompt.json"]}}
  {
    "type": "object",
    "description": "Extract a comprehensive design system from a website including colors, typography, spacing, shadows, and UI components.",
    "properties": {
      "domain": {
        "type": "string",
        "description": "Domain name to extract styleguide from (e.g., 'example.com', 'google.com'). The domain will be automatically normalized and validated. You must provide either 'domain' or 'directUrl', but not both.",
        "minLength": 3
      },
      "directUrl": {
        "type": "string",
        "description": "A specific URL to fetch the styleguide from directly, bypassing domain resolution (e.g., 'https://example.com/design-system'). When provided, the styleguide is extracted from this exact URL. You must provide either 'domain' or 'directUrl', but not both.",
        "format": "uri"
      },
      "maxAgeMs": {
        "type": [
          "integer",
          "null"
        ],
        "description": "Maximum age in milliseconds for cached brand data before the API performs a hard refresh. Defaults to 3 months (7776000000 ms). Values below 1 day (86400000 ms) are clamped to 1 day; values above 1 year (31536000000 ms) are clamped to 1 year.",
        "default": 7776000000
      },
      "timeoutMS": {
        "type": "integer",
        "description": "Optional timeout in milliseconds for the request. If the request takes longer than this value, it will be aborted with a 408 status code. Maximum allowed value is 300000ms (5 minutes).",
        "minimum": 1000,
        "maximum": 300000
      },
      "colorScheme": {
        "type": "string",
        "description": "Optional browser color scheme to emulate for websites that respond to prefers-color-scheme. This value is part of the styleguide cache key.",
        "enum": [
          "light",
          "dark"
        ]
      },
      "tags": {
        "type": "array",
        "description": "Optional comma-separated caller-defined tags for tracking this request. Tags are recorded on the request's usage log and can be used to filter usage on the dashboard usage page. Up to 20 tags, each 1-50 characters.",
        "maxItems": 20,
        "items": {
          "type": "string",
          "minLength": 1,
          "maxLength": 50
        }
      }
    },
    "required": [],
    "additionalProperties": false
  }
  ```
</details>

## Output reference

| Name | Type | Required | Default | Details |
| - | - | - | - | - |
| `result.data` | `object` | Yes | — | — |
| `result.data.status` | `string` | No | — | — |
| `result.data.domain` | `string` | No | — | — |
| `result.data.styleguide` | `object` | No | — | — |
| `result.data.styleguide.mode` | `"light" \| "dark"` | Yes | — | Allowed: `light`, `dark`. |
| `result.data.styleguide.colors` | `object` | Yes | — | — |
| `result.data.styleguide.colors.accent` | `string` | Yes | — | — |
| `result.data.styleguide.colors.background` | `string` | Yes | — | — |
| `result.data.styleguide.colors.text` | `string` | Yes | — | — |
| `result.data.styleguide.typography` | `object` | Yes | — | — |
| `result.data.styleguide.typography.headings` | `object` | Yes | — | — |
| `result.data.styleguide.typography.headings.h1` | `object` | No | — | — |
| `result.data.styleguide.typography.headings.h1.fontFamily` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h1.fontFallbacks` | `array` | Yes | — | — |
| `result.data.styleguide.typography.headings.h1.fontSize` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h1.fontWeight` | `number` | Yes | — | — |
| `result.data.styleguide.typography.headings.h1.lineHeight` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h1.letterSpacing` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h2` | `object` | No | — | — |
| `result.data.styleguide.typography.headings.h2.fontFamily` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h2.fontFallbacks` | `array` | Yes | — | — |
| `result.data.styleguide.typography.headings.h2.fontSize` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h2.fontWeight` | `number` | Yes | — | — |
| `result.data.styleguide.typography.headings.h2.lineHeight` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h2.letterSpacing` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h3` | `object` | No | — | — |
| `result.data.styleguide.typography.headings.h3.fontFamily` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h3.fontFallbacks` | `array` | Yes | — | — |
| `result.data.styleguide.typography.headings.h3.fontSize` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h3.fontWeight` | `number` | Yes | — | — |
| `result.data.styleguide.typography.headings.h3.lineHeight` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h3.letterSpacing` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h4` | `object` | No | — | — |
| `result.data.styleguide.typography.headings.h4.fontFamily` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h4.fontFallbacks` | `array` | Yes | — | — |
| `result.data.styleguide.typography.headings.h4.fontSize` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h4.fontWeight` | `number` | Yes | — | — |
| `result.data.styleguide.typography.headings.h4.lineHeight` | `string` | Yes | — | — |
| `result.data.styleguide.typography.headings.h4.letterSpacing` | `string` | Yes | — | — |
| `result.data.styleguide.typography.p` | `object` | No | — | — |
| `result.data.styleguide.typography.p.fontFamily` | `string` | Yes | — | — |
| `result.data.styleguide.typography.p.fontFallbacks` | `array` | Yes | — | — |
| `result.data.styleguide.typography.p.fontSize` | `string` | Yes | — | — |
| `result.data.styleguide.typography.p.fontWeight` | `number` | Yes | — | — |
| `result.data.styleguide.typography.p.lineHeight` | `string` | Yes | — | — |
| `result.data.styleguide.typography.p.letterSpacing` | `string` | Yes | — | — |
| `result.data.styleguide.elementSpacing` | `object` | Yes | — | — |
| `result.data.styleguide.elementSpacing.xs` | `string` | Yes | — | — |
| `result.data.styleguide.elementSpacing.sm` | `string` | Yes | — | — |
| `result.data.styleguide.elementSpacing.md` | `string` | Yes | — | — |

The table shows the first 50 fields. Expand the raw schema below for every field.

> [!NOTE]
>
> This output schema is too large for an inline display. Read the complete live contract with `deepline describe contextdev_get_web_styleguide --json`.

## Deepline cost

* Pricing model: `provider_usage` (provider usage).
* Estimated Deepline credits: `0.01` per pricing unit.

## Related documentation

* [Context.dev provider guide](https://deepline.com/docs/providers/contextdev/guide.md)
* [SDK V2 quickstart](https://deepline.com/docs/sdk-v2/quickstart.md)
* [SDK reference](https://deepline.com/docs/sdk-v2/sdk-reference.md)
* [Run tools across a CSV](https://deepline.com/docs/sdk-v2/batch-csv.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.