Design system
Generated MCP reference for design system.
This page is generated from mcp-catalog.json. Do not edit it by hand.
Source: paper3 local extraction on 2026-05-29. Generated: 2026-05-29T11:34:45.044Z.
get_design_system
Get design system
Returns the site's design tokens: named colors and fonts inspired by Google's DESIGN.md. Tokens are exposed at :root as CSS variables — reference them with var(--color-<id>) and var(--font-<id>) in every write_html / update_styles call so token edits cascade across the whole site instantly. Default tokens: primary, secondary, accent, neutral, surface (colors) + display, body (fonts). Read this BEFORE writing any styles and again whenever you need to reach for a color or font. Read get_guide({topic:'design-system'}) once per session for the full discipline.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
_site | string | No | Optional target site formatted as <workspaceSlug>/<siteSlug>. Required when the workspace has multiple sites and no site header is set. |
Input schema
{
"type": "object",
"properties": {
"_site": {
"type": "string",
"description": "Optional target site formatted as <workspaceSlug>/<siteSlug>. Required when the workspace has multiple sites and no site header is set.",
"pattern": "^[^/]+/[^/]+$"
}
},
"additionalProperties": false
}replace_design_system
Replace design system
Replaces the entire design system with a new one. Use this for wholesale rebrands; otherwise prefer set_color_token / set_font_token to make surgical edits.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
designSystem | object | Yes | |
_site | string | No | Optional target site formatted as <workspaceSlug>/<siteSlug>. Required when the workspace has multiple sites and no site header is set. |
Input schema
{
"type": "object",
"properties": {
"designSystem": {
"type": "object",
"properties": {
"version": {
"type": "string"
},
"colors": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"type": "string"
},
"description": {
"type": "string"
}
},
"required": [
"id",
"value"
],
"additionalProperties": false
}
},
"fonts": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"family": {
"type": "string"
},
"googleFont": {
"type": "string"
},
"description": {
"type": "string"
}
},
"required": [
"id",
"family"
],
"additionalProperties": false
}
},
"gradients": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"type": "string"
},
"description": {
"type": "string"
}
},
"required": [
"id",
"value"
],
"additionalProperties": false
}
}
},
"required": [
"version",
"colors",
"fonts"
],
"additionalProperties": false
},
"_site": {
"type": "string",
"description": "Optional target site formatted as <workspaceSlug>/<siteSlug>. Required when the workspace has multiple sites and no site header is set.",
"pattern": "^[^/]+/[^/]+$"
}
},
"required": [
"designSystem"
],
"additionalProperties": false
}update_design_token
Set or delete design tokens (color / font / gradient / keyframe, one or many)
Upserts or removes design-system tokens — color, font, gradient, or @keyframes — in one tool. Pass kind to pick the namespace, op: 'set' to upsert or op: 'delete' to remove. Token edits cascade across the site instantly:
• kind: 'color' → var(--color-<id>). Default tokens: primary, secondary, accent, neutral, surface. Accept any CSS color (hex / rgb / oklch).
• kind: 'font' → var(--font-<id>). Default tokens: display (Playfair Display), body (Inter). family is the full CSS stack ('Inter, sans-serif'); googleFont is auto-filled when the family head matches a Google Font, so family: 'Inter, sans-serif' alone is enough — pass googleFont explicitly to override.
• kind: 'gradient' → var(--gradient-<id>). Compose stops from existing color tokens (var(--color-accent)) so a colour change cascades through. Examples: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%).
• kind: 'keyframe' → emits a real @keyframes <id> \{ ... \} rule. stops is \{ '0': \{...css\}, '100': \{...css\} \} keyed by percentage (0-100).
INPUT SHAPES:
• \{ kind, op, ...payload \} — one token operation.
• \{ ops: [\{ kind, op, ...\}, ...] \} — batch many in one call. Highly recommended when rebuilding a palette / typography pair / gradient set; the framing overhead per op drops linearly.
Delete shape: \{ kind, op: 'delete', tokenId \} for color/font/gradient; \{ kind: 'keyframe', op: 'delete', tokenId \} for keyframes. Set shape: \{ kind, op: 'set', token \} for color/font/gradient (the token carries id+value); \{ kind: 'keyframe', op: 'set', id, description?, stops \} for keyframes (flat shape).
Always pass via ops: [...] — even for a single token, wrap it in a one-element array. The top-level shape is fixed (flat \{ops\}) so the function-call schema stays compatible with strict providers like OpenAI; per-op variants live inside the array.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
ops | array | Yes | |
_site | string | No | Optional target site formatted as <workspaceSlug>/<siteSlug>. Required when the workspace has multiple sites and no site header is set. |
Input schema
{
"type": "object",
"properties": {
"ops": {
"type": "array",
"items": {
"anyOf": [
{
"type": "object",
"properties": {
"kind": {
"const": [
"color"
]
},
"op": {
"const": [
"set"
]
},
"token": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"type": "string"
},
"description": {
"type": "string"
}
},
"required": [
"id",
"value"
],
"additionalProperties": false
}
},
"required": [
"kind",
"op",
"token"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"kind": {
"const": [
"color"
]
},
"op": {
"const": [
"delete"
]
},
"tokenId": {
"type": "string"
}
},
"required": [
"kind",
"op",
"tokenId"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"kind": {
"const": [
"font"
]
},
"op": {
"const": [
"set"
]
},
"token": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"family": {
"type": "string"
},
"googleFont": {
"type": "string"
},
"description": {
"type": "string"
}
},
"required": [
"id",
"family"
],
"additionalProperties": false
}
},
"required": [
"kind",
"op",
"token"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"kind": {
"const": [
"font"
]
},
"op": {
"const": [
"delete"
]
},
"tokenId": {
"type": "string"
}
},
"required": [
"kind",
"op",
"tokenId"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"kind": {
"const": [
"gradient"
]
},
"op": {
"const": [
"set"
]
},
"token": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"type": "string"
},
"description": {
"type": "string"
}
},
"required": [
"id",
"value"
],
"additionalProperties": false
}
},
"required": [
"kind",
"op",
"token"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"kind": {
"const": [
"gradient"
]
},
"op": {
"const": [
"delete"
]
},
"tokenId": {
"type": "string"
}
},
"required": [
"kind",
"op",
"tokenId"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"kind": {
"const": [
"keyframe"
]
},
"op": {
"const": [
"set"
]
},
"id": {
"type": "string"
},
"description": {
"type": "string"
},
"stops": {
"type": "object",
"additionalProperties": {
"type": "object",
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
}
}
},
"required": [
"kind",
"op",
"id",
"stops"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"kind": {
"const": [
"keyframe"
]
},
"op": {
"const": [
"delete"
]
},
"tokenId": {
"type": "string"
}
},
"required": [
"kind",
"op",
"tokenId"
],
"additionalProperties": false
}
]
}
},
"_site": {
"type": "string",
"description": "Optional target site formatted as <workspaceSlug>/<siteSlug>. Required when the workspace has multiple sites and no site header is set.",
"pattern": "^[^/]+/[^/]+$"
}
},
"required": [
"ops"
],
"additionalProperties": false
}