io.github.KarstenKreh/standby-design-mcp

Measured conclusion: Deep-tested. L2 outcome: tools_ok.

Generate design systems: OKLCH colors, fluid type scales, spacing, shape, icon and motion tokens.

Add to your agent

Copy this into your MCP client config:

{
  "mcpServers": {
    "standby-design-mcp": {
      "url": "https://mcp.standby.design/mcp",
      "transport": "streamable-http"
    }
  }
}

Measured tools (10)

• generate_color_palette read-only

  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.

  Parameters:

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

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• generate_type_scale read-only

  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.

  Parameters:

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

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• generate_shape_tokens read-only

  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.

  Parameters:

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

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• generate_icon_tokens read-only

  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.

  Parameters:

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

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• generate_space_tokens read-only

  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.

  Parameters:

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

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• generate_motion_tokens read-only

  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.

  Parameters:

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

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• get_design_system read-only

  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.

  Parameters:

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

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• export_design_system read-only

  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.

  Parameters:

  • url (required) — string — A standby.design URL or raw unified hash.
  • format (required) — string — Output format.
  • sections — array — 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".

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• list_fonts read-only

  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.

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

• get_design_rules read-only

  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 (62 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.

  Parameters:

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

  Hints: read-only yes · destructive not declared · idempotent not declared · open-world no

Repository

Measured by MCPYP probing. Untested fields are omitted, never estimated. Listing is always free; MCPYP never proxies calls or stores user tokens.