Skip to main content
Glama

Colours, type and spacing

get_design_tokens
Read-only

Extract the design tokens a live page actually uses—color palette with contrast audit, type scale, radii, shadows, and spacing—to align new components with the existing product or spot accessibility issues.

Instructions

Extracts the design system the page actually uses: palette with contrast audit, type scale, radii, shadows and spacing. Use it to match a new component to an existing product, or to find accessibility problems in the live UI.

Tool call template

This tool declares no required parameters. Add optional parameters from the input schema as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {},
    "name": "get_design_tokens"
  }
}

Input Schema

NameRequiredDescriptionDefault
formatNoOutput shape. "css" emits custom properties.json

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.2.3

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint and openWorldHint, so the safety profile is covered; the description earns credit for adding that values are the ones the page "actually uses," signalling computed/rendered tokens rather than declared source files, and for disclosing that a contrast audit is computed as part of the result. It stops short of saying whether the whole page or only visible regions are sampled.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, zero filler: the first front-loads what is extracted and the second front-loads when to reach for it. Nothing is repeated from the name or title in a redundant way.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a parameterless read-only extraction tool with full schema coverage and no output schema, the description covers purpose, scope and use cases adequately. The one real gap is scope behaviour — no indication of whether it inspects the whole page, a selection, or only above-the-fold elements.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and the single `format` parameter already carries an enum and a description of the css mode. The prose adds no further meaning about output shapes (tailwind, scss) or defaults, so the schema does all the work and the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description gives a specific verb ("extracts") and a concrete resource ("the design system the page actually uses"), then enumerates the artifacts returned: palette with contrast audit, type scale, radii, shadows, spacing. It is clearly a read of live design tokens rather than a static config dump, though it does not explicitly contrast itself with the accessibility-oriented sibling (measure_accessibility), which overlaps on the contrast audit.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Two explicit use cases are named: matching a new component to an existing product, and finding accessibility problems in the live UI. That gives an agent a clear selection signal, but no when-not-to-use guidance or named alternative is offered for the accessibility case that overlaps with sibling tools.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.