standby-design-mcp

Generate a perceptually uniform OKLCH color palette from a brand color: 18-step scales for brand/surface/error/accents, semantic tokens (shadcn/ui compatible), light+dark modes. Returns a shareable standby.design/system URL and a compact summary. Always give that URL to the user — the link is the deliverable; it opens the live system in the browser. Use export_design_system for full CSS/Tailwind output.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."
    },
    "brandHex": {
      "type": "string",
      "description": "Brand color as 6-digit hex, e.g. \"#335A7F\". The palette midpoint is derived from this."
    },
    "themeName": {
      "type": "string",
      "maxLength": 60,
      "description": "Name of the design system (appears in exports and page title)."
    },
    "mode": {
      "type": "string",
      "enum": [
        "balanced",
        "exact"
      ],
      "description": "\"balanced\": step 500 is always the perceptual midpoint (even light/dark distribution). \"exact\": step 500 keeps the input color's lightness."
    },
    "chromaScale": {
      "type": "number",
      "minimum": 0,
      "maximum": 1,
      "description": "Surface saturation 0–1 (0 = grey surfaces, 1 = vibrant). Default 0.25."
    },
    "bgColorHex": {
      "type": "string",
      "description": "Surface tint color as hex, or \"auto\" to derive from the brand color (default)."
    },
    "errorColorHex": {
      "type": "string",
      "description": "Error/destructive color as hex, or \"auto\" to derive from the brand hue (default)."
    },
    "brandPin": {
      "type": "boolean",
      "description": "Pin the primary token to the exact input hex instead of the palette step."
    },
    "brandInvert": {
      "type": "boolean",
      "description": "For pinned brand: mirror lightness in dark mode (e.g. black buttons in light mode, white in dark)."
    },
    "errorPin": {
      "type": "boolean"
    },
    "errorInvert": {
      "type": "boolean"
    },
    "fgContrastMode": {
      "type": "string",
      "enum": [
        "best",
        "preferLight",
        "preferDark"
      ],
      "description": "Text color strategy on colored backgrounds."
    },
    "accents": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "minLength": 1,
            "maxLength": 30
          },
          "hex": {
            "type": "string",
            "description": "Hex color. Omit to auto-derive from the brand color (requires autoHue or a preset name: Success/Warning/Info)."
          },
          "autoHue": {
            "type": "number",
            "minimum": 0,
            "maximum": 360,
            "description": "OKLCH hue for auto-derived accents."
          },
          "pin": {
            "type": "boolean"
          },
          "invert": {
            "type": "boolean"
          }
        },
        "required": [
          "name"
        ],
        "additionalProperties": false
      },
      "maxItems": 3,
      "description": "Up to 3 additional named accent colors. Replaces the existing accent list when provided; pass [] to remove all accents. Default: Success/Warning/Info, auto-derived."
    }
  },
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1–H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Always give that URL to the user — the link is the deliverable. Use list_fonts to discover font slugs.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."
    },
    "scaleMode": {
      "type": "string",
      "enum": [
        "custom",
        "traditional"
      ],
      "description": "\"custom\": compound ratio scale (default). \"traditional\": classical Renaissance point sizes per level."
    },
    "baseSize": {
      "type": "number",
      "minimum": 0.5,
      "maximum": 2,
      "description": "Desktop base size in rem (default 1.0)."
    },
    "ratio": {
      "type": "number",
      "minimum": 1.05,
      "maximum": 1.7,
      "description": "Scale ratio for custom mode. Presets: 1.2 minor third, 1.25 major third, 1.272 golden-ratio-area (default, √φ), 1.333 perfect fourth, 1.618 golden ratio. The empirical perceptual corridor is 1.20–1.50."
    },
    "mobileBaseSize": {
      "type": "number",
      "minimum": 0.5,
      "maximum": 2,
      "description": "Mobile base size in rem (default = baseSize)."
    },
    "mobileRatio": {
      "type": "number",
      "minimum": 1,
      "maximum": 1.7,
      "description": "Explicit mobile scale ratio. Omit to auto-derive from ratio and autoShrink."
    },
    "autoShrink": {
      "type": "number",
      "minimum": 0,
      "maximum": 100,
      "description": "Percent reduction for the auto-derived mobile ratio (default 25). Only used when mobileRatio is not set."
    },
    "headingFont": {
      "type": "string",
      "description": "Fontshare font slug for headings, e.g. \"satoshi\", \"general-sans\", \"clash-display\"."
    },
    "bodyFont": {
      "type": "string",
      "description": "Fontshare font slug for body text."
    },
    "monoFont": {
      "type": "string",
      "description": "Font slug for code. System stacks: \"system-mono\", \"consolas\", \"sf-mono\"."
    },
    "headingWeight": {
      "type": "integer",
      "minimum": 100,
      "maximum": 900,
      "description": "Font weight for headings (default 500)."
    },
    "lineHeightOverrides": {
      "type": "object",
      "additionalProperties": {
        "type": "number"
      },
      "description": "Per-level line-height overrides, e.g. {\"h1\": 1.1, \"body-m\": 1.6}. Levels: display, h1–h6, body-l, body-m, body-s, caption."
    },
    "letterSpacingOverrides": {
      "$ref": "#/properties/lineHeightOverrides",
      "description": "Per-level letter-spacing overrides in em, e.g. {\"display\": -0.05}."
    },
    "traditionalAssignments": {
      "type": "object",
      "additionalProperties": {
        "type": "number"
      },
      "description": "For traditional mode: desktop px size per level, e.g. {\"display\": 48, \"h1\": 36, ...}."
    },
    "traditionalMobileAssignments": {
      "type": "object",
      "additionalProperties": {
        "type": "number"
      },
      "description": "For traditional mode: mobile px size per level."
    }
  },
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Generate shape tokens — radii, shadows, borders, focus rings — in one of four visual styles: "paper" (classic surfaces with layered shadows), "glass" (liquid glass), "neomorph" (soft neumorphism), "neobrutalism" (hard offset shadows). Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."
    },
    "style": {
      "type": "string",
      "enum": [
        "paper",
        "glass",
        "neomorph",
        "neobrutalism"
      ],
      "description": "Top-level visual style (default \"paper\")."
    },
    "borderRadius": {
      "type": "integer",
      "minimum": 0,
      "maximum": 64,
      "description": "Base radius in px; scales to a xs–xl radius set (default 8)."
    },
    "shadowEnabled": {
      "type": "boolean"
    },
    "shadowType": {
      "type": "string",
      "enum": [
        "normal",
        "flat"
      ],
      "description": "Shadow rendering for paper style."
    },
    "shadowStrength": {
      "type": "number",
      "minimum": 0,
      "maximum": 3,
      "description": "Shadow alpha multiplier (default 1.0)."
    },
    "shadowBlurScale": {
      "type": "number",
      "minimum": 0,
      "maximum": 3,
      "description": "Shadow blur multiplier (default 1.0)."
    },
    "shadowScale": {
      "type": "number",
      "minimum": 1,
      "maximum": 2,
      "description": "Elevation level spread ratio (default 1.272)."
    },
    "shadowColorHex": {
      "type": "string",
      "description": "Custom shadow color as hex, or \"auto\" (default)."
    },
    "shadowOffsetX": {
      "type": "integer",
      "minimum": -16,
      "maximum": 16,
      "description": "Brutalist shadow X offset in px (default 2)."
    },
    "shadowOffsetY": {
      "type": "integer",
      "minimum": -16,
      "maximum": 16,
      "description": "Brutalist shadow Y offset in px (default 4)."
    },
    "brutalistVariant": {
      "type": "string",
      "enum": [
        "outlined",
        "solid"
      ]
    },
    "borderEnabled": {
      "type": "boolean"
    },
    "borderWidth": {
      "type": "number",
      "minimum": 0,
      "maximum": 10,
      "description": "Border width in px (default 1)."
    },
    "borderColorHex": {
      "type": "string",
      "description": "Custom border color as hex, or \"auto\" (default)."
    },
    "glassDepth": {
      "type": "number",
      "minimum": -2,
      "maximum": 5,
      "description": "Glass displacement intensity (default 0.2)."
    },
    "glassBlur": {
      "type": "number",
      "minimum": 0,
      "maximum": 20,
      "description": "Glass backdrop blur (default 1.0)."
    },
    "glassDispersion": {
      "type": "number",
      "minimum": 0,
      "maximum": 2,
      "description": "Chromatic aberration intensity (default 0.4)."
    },
    "ringWidth": {
      "type": "integer",
      "minimum": 0,
      "maximum": 8,
      "description": "Focus ring width in px (default 2)."
    },
    "ringOffset": {
      "type": "integer",
      "minimum": 0,
      "maximum": 8,
      "description": "Focus ring offset in px (default 2)."
    },
    "ringStyle": {
      "type": "string",
      "enum": [
        "soft",
        "solid"
      ],
      "description": "Focus ring shape: \"soft\" (default) is a translucent halo at the edge plus a full-color border, \"solid\" is a hard outline set off by ringOffset."
    },
    "ringColorHex": {
      "type": "string",
      "description": "Custom focus ring color as hex, or \"auto\" (default)."
    },
    "separationMode": {
      "type": "string",
      "enum": [
        "shadow",
        "border",
        "contrast",
        "gap",
        "mixed"
      ],
      "description": "How surfaces separate from the background."
    }
  },
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Pick an icon set and generate icon sizing tokens (xs–2xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: material-outlined, material-filled, lucide, phosphor-regular, phosphor-bold, phosphor-thin, phosphor-fill, solar-linear, solar-bold, solar-broken, tabler-outline, tabler-filled, radix. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."
    },
    "set": {
      "type": "string",
      "description": "Icon set variant id to select explicitly, e.g. \"material-outlined\". One of: material-outlined, material-filled, lucide, phosphor-regular, phosphor-bold, phosphor-thin, phosphor-fill, solar-linear, solar-bold, solar-broken, tabler-outline, tabler-filled, radix. Pass \"auto\" to clear the selection and use the recommendation instead."
    },
    "style": {
      "type": "string",
      "enum": [
        "outlined",
        "filled",
        "duotone",
        "auto"
      ],
      "description": "Preferred icon style for the recommendation."
    },
    "weight": {
      "type": "string",
      "enum": [
        "thin",
        "regular",
        "bold",
        "auto"
      ],
      "description": "Preferred stroke weight."
    },
    "corners": {
      "type": "string",
      "enum": [
        "sharp",
        "rounded",
        "auto"
      ],
      "description": "Preferred corner style (sharp = corporate/precise, rounded = friendly)."
    },
    "baseSize": {
      "type": "number",
      "minimum": 0.5,
      "maximum": 3,
      "description": "Base icon size (md) in rem (default 1.25)."
    },
    "scale": {
      "type": "number",
      "minimum": 1,
      "maximum": 2,
      "description": "Size scale ratio (default 1.272)."
    },
    "snapTo4px": {
      "type": "boolean",
      "description": "Round sizes to the 4px grid (default true)."
    }
  },
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Generate spacing tokens (3xs–3xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."
    },
    "mode": {
      "type": "string",
      "enum": [
        "harmonic",
        "geometric"
      ],
      "description": "\"harmonic\": multiples of the base (default). \"geometric\": compound ratio steps."
    },
    "baseRem": {
      "type": "number",
      "minimum": 0.25,
      "maximum": 4,
      "description": "Base spacing in rem (default 1.0)."
    },
    "ratio": {
      "type": "number",
      "minimum": 1,
      "maximum": 2,
      "description": "Ratio for geometric mode (default 1.272)."
    },
    "multiplier": {
      "type": "number",
      "minimum": 0.25,
      "maximum": 4,
      "description": "Uniform scale factor on all tokens (default 1.0)."
    },
    "snap": {
      "type": "boolean",
      "description": "Snap token values to a sensible grid (default true)."
    },
    "breakpoints": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "minLength": 1
          },
          "minPx": {
            "type": "integer",
            "minimum": 0
          }
        },
        "required": [
          "name",
          "minPx"
        ],
        "additionalProperties": false
      },
      "description": "Replace the breakpoint list, e.g. [{\"name\":\"sm\",\"minPx\":640},...]. Defaults: sm 640, md 768, lg 1024, xl 1280, 2xl 1536."
    },
    "fluidMinVw": {
      "type": "integer",
      "minimum": 200,
      "maximum": 1000,
      "description": "Lower fluid viewport anchor in px (default 375)."
    },
    "fluidMaxVw": {
      "type": "integer",
      "minimum": 1000,
      "maximum": 3840,
      "description": "Upper fluid viewport anchor in px (default 1920)."
    },
    "containers": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "minLength": 1
          },
          "maxPx": {
            "type": "integer",
            "minimum": 0
          }
        },
        "required": [
          "name",
          "maxPx"
        ],
        "additionalProperties": false
      },
      "description": "Replace the container list. Defaults: prose 680, narrow 960, default 1200, wide 1440, full 1920."
    },
    "proseMaxCh": {
      "type": "integer",
      "minimum": 20,
      "maximum": 120,
      "description": "Prose measure in ch (default 65)."
    },
    "aspectRatios": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "minLength": 1
          },
          "w": {
            "type": "number",
            "exclusiveMinimum": 0
          },
          "h": {
            "type": "number",
            "exclusiveMinimum": 0
          }
        },
        "required": [
          "name",
          "w",
          "h"
        ],
        "additionalProperties": false
      },
      "description": "Replace the aspect ratio list, e.g. [{\"name\":\"video\",\"w\":16,\"h\":9}]."
    },
    "includeReciprocals": {
      "type": "boolean",
      "description": "Also export flipped (portrait) variants of each ratio (default true)."
    }
  },
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Generate spring-based motion tokens from two brand-character axes: energy (calm → lively, sets the tempo) and material (firm → elastic, sets how much spatial motion overshoots). Returns 6 primitive springs (spatial/effect × fast/default/slow), 11 semantic tokens (press, move, expand, enter, exit, fade, navigate.*, sheet.*, container) and the reduced-motion rule. Start from a preset, then fine-tune with energy/material. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable. Use export_design_system for CSS, design tokens or the LLM briefing; SwiftUI, Compose and Motion (JS) code is exported in the UI at standby.design/motion.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."
    },
    "preset": {
      "type": "string",
      "enum": [
        "calm-firm",
        "calm-elastic",
        "balanced",
        "lively-firm",
        "lively-elastic"
      ],
      "description": "Starting character. \"calm-firm\" (energy 15, material 15; premium, finance, luxury), \"calm-elastic\" (energy 15, material 85; wellness, lifestyle), \"balanced\" (energy 50, material 50; most products), \"lively-firm\" (energy 85, material 15; productivity, sports, dev tools), \"lively-elastic\" (energy 85, material 85; playful consumer apps, games). energy/material override the preset."
    },
    "energy": {
      "type": "number",
      "minimum": 0,
      "maximum": 100,
      "description": "0 = calm (slow, deliberate) … 100 = lively (quick, snappy). Default 50."
    },
    "material": {
      "type": "number",
      "minimum": 0,
      "maximum": 100,
      "description": "0 = firm (no overshoot) … 100 = elastic (visible bounce on spatial motion). Default 50."
    }
  },
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Decode a standby.design URL (or raw hash) and return an overview of the full design system: color palette, type scale, spacing & layout, shape tokens, motion springs, and icons — plus per-tool edit links. Always give the standby.design/system URL to the user — the link is the deliverable.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "A standby.design URL or raw unified hash (e.g. from a previous generate_* call or copied from the browser)."
    }
  },
  "required": [
    "url"
  ],
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Generate the full token code for a design system URL in one format: "css" (CSS custom properties incl. semantic shadcn/ui-compatible tokens), "tailwind" (Tailwind v4 @theme), "design-tokens" (W3C DTCG JSON — typography, spacing & motion), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections. Always give the returned standby.design/system URL to the user alongside the code — the link is the deliverable.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "A standby.design URL or raw unified hash."
    },
    "format": {
      "type": "string",
      "enum": [
        "css",
        "tailwind",
        "design-tokens",
        "llm-briefing",
        "font-embed"
      ],
      "description": "Output format."
    },
    "sections": {
      "type": "array",
      "items": {
        "type": "string",
        "enum": [
          "color",
          "type",
          "space",
          "shape",
          "symbol",
          "motion"
        ]
      },
      "description": "Which sections to include. Honoured by \"css\", \"tailwind\", \"llm-briefing\" and \"design-tokens\" (which only knows type, space and motion). By default color, type, space, shape and motion are always included — with their defaults when the URL does not configure them — and symbol only when the URL configures it. Ignored by \"font-embed\"."
    }
  },
  "required": [
    "url",
    "format"
  ],
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

List Fontshare font slugs usable in generate_type_scale (headingFont/bodyFont/monoFont), grouped by category. This is the bundled seed catalog — any valid Fontshare slug works even if not listed here.

{
  "type": "object",
  "properties": {},
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Universal design rules for building UI with design tokens: layout, flow (empty, loading and error states, dialogs), shape, surfaces, interaction states, typography, color and stack rules for Tailwind/React Native. The tokens say which values exist; these rules say how to use them. Call this before building or reviewing views. Without arguments it returns every rule as one line (31 rules); pass rules (slugs) or a category with detail "full" for the complete text including how to detect violations in code. Rule texts are in German. Categories: Layout, Fluss, Form, Fläche, Bedienung, Zustand, Typografie, Farbe, Stack.

{
  "type": "object",
  "properties": {
    "category": {
      "type": "string",
      "description": "Only rules from this category: Layout, Fluss, Form, Fläche, Bedienung, Zustand, Typografie, Farbe, Stack."
    },
    "platform": {
      "type": "string",
      "enum": [
        "web",
        "react-native"
      ],
      "description": "Only rules that apply to this platform."
    },
    "scope": {
      "type": "string",
      "enum": [
        "universal",
        "stack"
      ],
      "description": "\"universal\" applies to every project, \"stack\" to one technology (e.g. Tailwind, React Native)."
    },
    "rules": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "Rule slugs (from the summary) to return in full."
    },
    "detail": {
      "type": "string",
      "enum": [
        "summary",
        "full"
      ],
      "description": "\"summary\" (default): one line per rule. \"full\": complete rule text. Defaults to \"full\" when rules are given."
    }
  },
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}