io.github.KarstenKreh/standby-design-mcp

Official8 tools

by KarstenKreh · TypeScript

Generate design systems: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.

Generates design tokens: color palettes, typography scales, spacing, and icons.

Topics

color-palettedesign-systemdesign-tokensmcpmcp-servermodel-context-protocoloklchshadcn-uitailwindcsstypography

Captured live from the server via tools/list.

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.

Parameters (13)

urlstring
Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing settings from other tools are preserved. Omit to start fresh from defaults.
brandHexstring
Brand color as 6-digit hex, e.g. "#335A7F". The palette midpoint is derived from this.
themeNamestring
Name of the design system (appears in exports and page title).
modestring
"balanced": step 500 is always the perceptual midpoint (even light/dark distribution). "exact": step 500 keeps the input color's lightness.
chromaScalenumber
Surface saturation 0–1 (0 = grey surfaces, 1 = vibrant). Default 0.25.
bgColorHexstring
Surface tint color as hex, or "auto" to derive from the brand color (default).
errorColorHexstring
Error/destructive color as hex, or "auto" to derive from the brand hue (default).
brandPinboolean
Pin the primary token to the exact input hex instead of the palette step.
brandInvertboolean
For pinned brand: mirror lightness in dark mode (e.g. black buttons in light mode, white in dark).
errorPinboolean
errorInvertboolean
fgContrastModestring
Text color strategy on colored backgrounds.
accentsarray
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.

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.

Parameters (15)

urlstring
Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing settings from other tools are preserved. Omit to start fresh from defaults.
scaleModestring
"custom": compound ratio scale (default). "traditional": classical Renaissance point sizes per level.
baseSizenumber
Desktop base size in rem (default 1.0).
rationumber
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.
mobileBaseSizenumber
Mobile base size in rem (default = baseSize).
mobileRationumber
Explicit mobile scale ratio. Omit to auto-derive from ratio and autoShrink.
autoShrinknumber
Percent reduction for the auto-derived mobile ratio (default 25). Only used when mobileRatio is not set.
headingFontstring
Fontshare font slug for headings, e.g. "satoshi", "general-sans", "clash-display".
bodyFontstring
Fontshare font slug for body text.
monoFontstring
Font slug for code. System stacks: "system-mono", "consolas", "sf-mono".
headingWeightinteger
Font weight for headings (default 500).
lineHeightOverridesobject
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.
letterSpacingOverridesany
Per-level letter-spacing overrides in em, e.g. {"display": -0.05}.
traditionalAssignmentsobject
For traditional mode: desktop px size per level, e.g. {"display": 48, "h1": 36, ...}.
traditionalMobileAssignmentsobject
For traditional mode: mobile px size per level.

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.

Parameters (22)

urlstring
Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing settings from other tools are preserved. Omit to start fresh from defaults.
stylestring
Top-level visual style (default "paper").
borderRadiusinteger
Base radius in px; scales to a xs–xl radius set (default 8).
shadowEnabledboolean
shadowTypestring
Shadow rendering for paper style.
shadowStrengthnumber
Shadow alpha multiplier (default 1.0).
shadowBlurScalenumber
Shadow blur multiplier (default 1.0).
shadowScalenumber
Elevation level spread ratio (default 1.272).
shadowColorHexstring
Custom shadow color as hex, or "auto" (default).
shadowOffsetXinteger
Brutalist shadow X offset in px (default 2).
shadowOffsetYinteger
Brutalist shadow Y offset in px (default 4).
brutalistVariantstring
borderEnabledboolean
borderWidthnumber
Border width in px (default 1).
borderColorHexstring
Custom border color as hex, or "auto" (default).
glassDepthnumber
Glass displacement intensity (default 0.2).
glassBlurnumber
Glass backdrop blur (default 1.0).
glassDispersionnumber
Chromatic aberration intensity (default 0.4).
ringWidthinteger
Focus ring width in px (default 2).
ringOffsetinteger
Focus ring offset in px (default 2).
ringColorHexstring
Custom focus ring color as hex, or "auto" (default).
separationModestring
How surfaces separate from the background.

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.

Parameters (8)

urlstring
Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing settings from other tools are preserved. Omit to start fresh from defaults.
setstring
Icon set variant id to select explicitly, e.g. "lucide-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.
stylestring
Preferred icon style for the recommendation.
weightstring
Preferred stroke weight.
cornersstring
Preferred corner style (sharp = corporate/precise, rounded = friendly).
baseSizenumber
Base icon size (md) in rem (default 1.25).
scalenumber
Size scale ratio (default 1.272).
snapTo4pxboolean
Round sizes to the 4px grid (default true).

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.

Parameters (13)

urlstring
Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing settings from other tools are preserved. Omit to start fresh from defaults.
modestring
"harmonic": multiples of the base (default). "geometric": compound ratio steps.
baseRemnumber
Base spacing in rem (default 1.0).
rationumber
Ratio for geometric mode (default 1.272).
multipliernumber
Uniform scale factor on all tokens (default 1.0).
snapboolean
Snap token values to a sensible grid (default true).
breakpointsarray
Replace the breakpoint list, e.g. [{"name":"sm","minPx":640},...]. Defaults: sm 640, md 768, lg 1024, xl 1280, 2xl 1536.
fluidMinVwinteger
Lower fluid viewport anchor in px (default 375).
fluidMaxVwinteger
Upper fluid viewport anchor in px (default 1920).
containersarray
Replace the container list. Defaults: prose 680, narrow 880, default 1200, wide 1440.
proseMaxChinteger
Prose measure in ch (default 65).
aspectRatiosarray
Replace the aspect ratio list, e.g. [{"name":"video","w":16,"h":9}].
includeReciprocalsboolean
Also export flipped (portrait) variants of each ratio (default true).

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, and icons — plus per-tool edit links. Always give the standby.design/system URL to the user — the link is the deliverable.

Parameters (1)

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

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), "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.

Parameters (3)

urlstringrequired
A standby.design URL or raw unified hash.
formatstringrequired
Output format.
sectionsarray
Which sections to include. Default: all configured sections (symbol only when configured).

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.

No parameters.

README.md3 KBView on GitHub

standby.design

Multi-Tool-Hub unter standby.design — kleine Tools für Designer und Entwickler. Kein Framework, kein Build-Step, reines HTML/CSS/JS.

Struktur

code

/
├── index.html        # Hub-Seite (standby.design)
├── color/
│   └── index.html    # Color Palette Generator (standby.design/color)
├── Dockerfile
├── nginx.conf
├── docker-compose.yml
└── deploy.sh

Deployment (Hetzner + Docker + nginx)

bash

./deploy.sh

Setzt voraus: SSH-Key unter C:/Local Data/Repositories/SSH Keys/hetzner_ed25519.

DNS (Namecheap)

A-Record für standby.design und www.standby.design → 46.225.131.97

Color Palette Generator (`/color`)

Ein interaktiver, client-seitiger Palette-Generator im OKLCH-Farbraum — keine Dependencies, kein Build-Step.

Features

Brand + Slated: Generiert automatisch eine volle Palette (Brand) und eine gedämpfte Variante mit 50% Chroma (Slated)
18 Abstufungen: Feine Gradierung für Light Surfaces (25–100), Core Palette (200–800), Dark Surfaces (825–875) und High Contrast (925–975)
Zwei Modi:
- Balanced Midpoint — 500 = perzeptueller Mittelwert (L=0.50), symmetrisch um den hellsten Punkt des Farbtons
- Exact Brand Match — 500 = exakt die Eingabefarbe, Helligkeit + Chroma werden gleichmäßig darum herum skaliert
Click-to-Copy: Einzelne Hex- und OKLCH-Werte per Klick kopieren
Code-Export: Fertige CSS Custom Properties (OKLCH + Hex Fallback) zum Kopieren
Surface-Demo: Live-Vorschau für Light Mode, Dark Mode und High Contrast Surfaces
Grau-sicher: Neutrale Eingaben (z.B. #757575) erzeugen saubere Grau-Paletten ohne Farbstich

Verwendung

index.html im Browser öffnen
Hex-Farbcode eingeben (mit oder ohne #)
Modus wählen (Balanced Midpoint / Exact Brand Match)
Palette generieren — fertig

Zonenstruktur

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)

Technologie

Reines HTML + CSS + JavaScript (zero dependencies)
OKLCH ↔ OKLab ↔ Linear sRGB ↔ sRGB Konvertierung
Binäre Suche für sRGB-Gamut-Clamping
Parabolische Chroma-Envelope für natürliche Sättigungsverteilung

Install

claude_desktop_config.json

{
  "mcpServers": {
    "standby-design-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "standby-design-mcp@0.1.5"
      ]
    }
  }
}