generate_color_palette

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.

Parameters13

url	string	optional	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	string	optional	Brand color as 6-digit hex, e.g. "#335A7F". The palette midpoint is derived from this.
themeName	string	optional	Name of the design system (appears in exports and page title).
mode	string	optional	"balanced": step 500 is always the perceptual midpoint (even light/dark distribution). "exact": step 500 keeps the input color's lightness.
chromaScale	number	optional	Surface saturation 0–1 (0 = grey surfaces, 1 = vibrant). Default 0.25.
bgColorHex	string	optional	Surface tint color as hex, or "auto" to derive from the brand color (default).
errorColorHex	string	optional	Error/destructive color as hex, or "auto" to derive from the brand hue (default).
brandPin	boolean	optional	Pin the primary token to the exact input hex instead of the palette step.
brandInvert	boolean	optional	For pinned brand: mirror lightness in dark mode (e.g. black buttons in light mode, white in dark).
errorPin	boolean	optional
errorInvert	boolean	optional
fgContrastMode	string	optional	Text color strategy on colored backgrounds.
accents	array	optional	Up to 10 additional named accent colors. Replaces the existing accent list when provided; pass [] to remove all accents. Default: Success/Warning/Info, auto-derived.

Raw schema

{
  "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": 10,
      "description": "Up to 10 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_type_scale

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.

Parameters15

url	string	optional	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	string	optional	"custom": compound ratio scale (default). "traditional": classical Renaissance point sizes per level.
baseSize	number	optional	Desktop base size in rem (default 1.0).
ratio	number	optional	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	number	optional	Mobile base size in rem (default = baseSize).
mobileRatio	number	optional	Explicit mobile scale ratio. Omit to auto-derive from ratio and autoShrink.
autoShrink	number	optional	Percent reduction for the auto-derived mobile ratio (default 25). Only used when mobileRatio is not set.
headingFont	string	optional	Fontshare font slug for headings, e.g. "satoshi", "general-sans", "clash-display".
bodyFont	string	optional	Fontshare font slug for body text.
monoFont	string	optional	Font slug for code. System stacks: "system-mono", "consolas", "sf-mono".
headingWeight	integer	optional	Font weight for headings (default 500).
lineHeightOverrides	object	optional	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	any	optional	Per-level letter-spacing overrides in em, e.g. {"display": -0.05}.
traditionalAssignments	object	optional	For traditional mode: desktop px size per level, e.g. {"display": 48, "h1": 36, ...}.
traditionalMobileAssignments	object	optional	For traditional mode: mobile px size per level.

Raw schema

{
  "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

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.

Parameters23

url	string	optional	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	string	optional	Top-level visual style (default "paper").
borderRadius	integer	optional	Base radius in px; scales to a xs–xl radius set (default 8).
shadowEnabled	boolean	optional
shadowType	string	optional	Shadow rendering for paper style.
shadowStrength	number	optional	Shadow alpha multiplier (default 1.0).
shadowBlurScale	number	optional	Shadow blur multiplier (default 1.0).
shadowScale	number	optional	Elevation level spread ratio (default 1.272).
shadowColorHex	string	optional	Custom shadow color as hex, or "auto" (default).
shadowOffsetX	integer	optional	Brutalist shadow X offset in px (default 2).
shadowOffsetY	integer	optional	Brutalist shadow Y offset in px (default 4).
brutalistVariant	string	optional
borderEnabled	boolean	optional
borderWidth	number	optional	Border width in px (default 1).
borderColorHex	string	optional	Custom border color as hex, or "auto" (default).
glassDepth	number	optional	Glass displacement intensity (default 0.2).
glassBlur	number	optional	Glass backdrop blur (default 1.0).
glassDispersion	number	optional	Chromatic aberration intensity (default 0.5).
ringWidth	integer	optional	Focus ring width in px (default 2).
ringOffset	integer	optional	Focus ring offset in px (default 2).
ringStyle	string	optional	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	string	optional	Custom focus ring color as hex, or "auto" (default).
separationMode	string	optional	How surfaces separate from the background.

Raw schema

{
  "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.5)."
    },
    "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#"
}

generate_icon_tokens

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.

Parameters8

url	string	optional	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	string	optional	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	string	optional	Preferred icon style for the recommendation.
weight	string	optional	Preferred stroke weight.
corners	string	optional	Preferred corner style (sharp = corporate/precise, rounded = friendly).
baseSize	number	optional	Base icon size (md) in rem (default 1.25).
scale	number	optional	Size scale ratio (default 1.272).
snapTo4px	boolean	optional	Round sizes to the 4px grid (default true).

Raw schema

{
  "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_space_tokens

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.

Parameters13

url	string	optional	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	string	optional	"harmonic": multiples of the base (default). "geometric": compound ratio steps.
baseRem	number	optional	Base spacing in rem (default 1.0).
ratio	number	optional	Ratio for geometric mode (default 1.272).
multiplier	number	optional	Uniform scale factor on all tokens (default 1.0).
snap	boolean	optional	Snap token values to a sensible grid (default true).
breakpoints	array	optional	Replace the breakpoint list, e.g. [{"name":"sm","minPx":640},...]. Defaults: sm 640, md 768, lg 1024, xl 1280, 2xl 1536.
fluidMinVw	integer	optional	Lower fluid viewport anchor in px (default 375).
fluidMaxVw	integer	optional	Upper fluid viewport anchor in px (default 1920).
containers	array	optional	Replace the container list. Defaults: prose 680, narrow 960, default 1200, wide 1440, full 1920.
proseMaxCh	integer	optional	Prose measure in ch (default 65).
aspectRatios	array	optional	Replace the aspect ratio list, e.g. [{"name":"video","w":16,"h":9}].
includeReciprocals	boolean	optional	Also export flipped (portrait) variants of each ratio (default true).

Raw schema

{
  "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_motion_tokens

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.

Parameters4

url	string	optional	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	string	optional	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	number	optional	0 = calm (slow, deliberate) … 100 = lively (quick, snappy). Default 50.
material	number	optional	0 = firm (no overshoot) … 100 = elastic (visible bounce on spatial motion). Default 50.

Raw schema

{
  "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#"
}

get_design_system

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.

Parameters1

url

string

required

A standby.design URL or raw unified hash (e.g. from a previous generate_* call or copied from the browser).

Raw schema

{
  "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#"
}

export_design_system

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 & layout, shape, icons and motion; color is not part of it), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections. Every format carries the standby.design/system share link. Always give that URL to the user alongside the code and keep it as a comment in the theme file of the target project — the link is the deliverable.

Parameters3

url	string	required	A standby.design URL or raw unified hash.
format	string	required	Output format.
sections	array	optional	Which sections to include. Honoured by "css", "tailwind", "llm-briefing" and "design-tokens" (which has no color section). 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".

Raw schema

{
  "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 has no color section). 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_fonts

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.

Parameters

No parameters.

Raw schema

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

get_design_rules

Universal design rules for building UI with design tokens: layout, flow (empty, loading and error states, dialogs), shape, surfaces, interaction and keyboard access, forms, content structure, 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 (61 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, Formular, Inhalt, Zustand, Typografie, Farbe, Stack.

Parameters5

category	string	optional	Only rules from this category: Layout, Fluss, Form, Fläche, Bedienung, Formular, Inhalt, Zustand, Typografie, Farbe, Stack.
platform	string	optional	Only rules that apply to this platform.
scope	string	optional	"universal" applies to every project, "stack" to one technology (e.g. Tailwind, React Native).
rules	array	optional	Rule slugs (from the summary) to return in full.
detail	string	optional	"summary" (default): one line per rule. "full": complete rule text. Defaults to "full" when rules are given.

Raw schema

{
  "type": "object",
  "properties": {
    "category": {
      "type": "string",
      "description": "Only rules from this category: Layout, Fluss, Form, Fläche, Bedienung, Formular, Inhalt, 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#"
}

Steps	Zone	Verwendung
25–100	Light Surfaces	Hintergründe, Cards, Elevated (Light)
200–800	Core Palette	Buttons, Links, Akzente, Text
825–875	Dark Surfaces	Hintergründe, Cards (Dark Mode)
900–975	High Contrast	Hintergründe (High Contrast Dark)

io.github.KarstenKreh/standby-design-mcp

🛠️ Key Features

🚀 Use Cases

⚡ Developer Benefits

⚠️ Limitations

Topics

generate_color_palette

generate_type_scale

generate_shape_tokens

generate_icon_tokens

generate_space_tokens

generate_motion_tokens

get_design_system

export_design_system

list_fonts

get_design_rules

standby.design

Struktur

Deployment (Hetzner + Docker + nginx)

DNS (Namecheap)

Color Palette Generator (`/color`)

Features

Verwendung

Zonenstruktur

Technologie

Install

Related servers

🛠️ Key Features

🚀 Use Cases

⚡ Developer Benefits

⚠️ Limitations

Topics

generate_color_palette

generate_type_scale

generate_shape_tokens

generate_icon_tokens

generate_space_tokens

generate_motion_tokens

get_design_system

export_design_system

list_fonts

get_design_rules

standby.design

Struktur

Deployment (Hetzner + Docker + nginx)

DNS (Namecheap)

Color Palette Generator (/color)

Features

Verwendung

Zonenstruktur

Technologie

Install

Related servers

Color Palette Generator (`/color`)