standby-design-mcp 0.1.2 → 0.1.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Karsten Kreh
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Karsten Kreh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,15 @@
-# @standby/mcp-server
+# standby-design-mcp
+
+[![npm](https://img.shields.io/npm/v/standby-design-mcp)](https://www.npmjs.com/package/standby-design-mcp)
+[![MCP Registry](https://img.shields.io/badge/MCP_Registry-io.github.KarstenKreh%2Fstandby--design--mcp-blue)](https://registry.modelcontextprotocol.io/?search=standby)
+[![License: MIT](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
 
 MCP server for [standby.design](https://standby.design) — generate and export
-production-ready design systems directly from Claude (or any MCP client),
-without touching the web UI.
+production-ready **design systems** directly from Claude (or any MCP client):
+**OKLCH color palettes**, **fluid type scales**, **spacing & layout**,
+**shape tokens** (radii, shadows, glass, neobrutalism) and **icon tokens**,
+exportable as **CSS custom properties**, **Tailwind v4 themes**, or
+**W3C design tokens (DTCG)** — shadcn/ui compatible.
 
 All computation is shared with the standby.design web apps (`packages/core` +
 `system-react/src/lib`), so results are identical to what the UI produces.

package/dist/http.js

@@ -1583,7 +1583,7 @@ function registerGenerateTools(server) {
     "generate_color_palette",
     {
       title: "Generate color palette",
-      description: "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. Use export_design_system for full CSS/Tailwind output.",
+      description: "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 \u2014 the link is the deliverable; it opens the live system in the browser. Use export_design_system for full CSS/Tailwind output.",
       inputSchema: {
         url: URL_PARAM,
         brandHex: z.string().optional().describe('Brand color as 6-digit hex, e.g. "#335A7F". The palette midpoint is derived from this.'),
@@ -1673,7 +1673,7 @@ ${colorSummary(state, palette)}`);
     "generate_type_scale",
     {
       title: "Generate type scale",
-      description: "Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1\u2013H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Use list_fonts to discover font slugs.",
+      description: "Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1\u2013H6, 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 \u2014 the link is the deliverable. Use list_fonts to discover font slugs.",
       inputSchema: {
         url: URL_PARAM,
         scaleMode: z.enum(["custom", "traditional"]).optional().describe('"custom": compound ratio scale (default). "traditional": classical Renaissance point sizes per level.'),
@@ -1745,7 +1745,7 @@ ${typeSummary(state, scale)}`);
     "generate_shape_tokens",
     {
       title: "Generate shape tokens",
-      description: 'Generate shape tokens \u2014 radii, shadows, borders, focus rings \u2014 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.',
+      description: 'Generate shape tokens \u2014 radii, shadows, borders, focus rings \u2014 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 \u2014 the link is the deliverable.',
       inputSchema: {
         url: URL_PARAM,
         style: z.enum(["paper", "glass", "neomorph", "neobrutalism"]).optional().describe('Top-level visual style (default "paper").'),
@@ -1820,7 +1820,7 @@ ${shapeSummary(state)}`);
     "generate_icon_tokens",
     {
       title: "Generate icon tokens",
-      description: `Pick an icon set and generate icon sizing tokens (xs\u20132xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: ${SET_IDS.join(", ")}. Returns a shareable standby.design/system URL and a summary.`,
+      description: `Pick an icon set and generate icon sizing tokens (xs\u20132xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: ${SET_IDS.join(", ")}. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user \u2014 the link is the deliverable.`,
       inputSchema: {
         url: URL_PARAM,
         set: z.string().optional().describe(`Icon set variant id to select explicitly, e.g. "lucide-outlined". One of: ${SET_IDS.join(", ")}. Pass "auto" to clear the selection and use the recommendation instead.`),
@@ -1861,7 +1861,7 @@ ${symbolSummary(state)}`);
     "generate_space_tokens",
     {
       title: "Generate spacing & layout tokens",
-      description: "Generate spacing tokens (3xs\u20133xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary.",
+      description: "Generate spacing tokens (3xs\u20133xl), 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 \u2014 the link is the deliverable.",
       inputSchema: {
         url: URL_PARAM,
         mode: z.enum(["harmonic", "geometric"]).optional().describe('"harmonic": multiples of the base (default). "geometric": compound ratio steps.'),
@@ -2135,7 +2135,7 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
     primaryDark,
     primaryFgDark,
     ...brandContrastWarnDark,
-    ["primary-subtle", "brand", 800],
+    ["primary-subtle", "brand", 850],
     ["primary-subtle-foreground", "brand", 50],
     [null, null, "Secondary \u2014 softened brand"],
     ["secondary", "brand", 800],
@@ -2144,26 +2144,26 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
     ["muted", "surface", 850],
     ["muted-foreground", "surface", 300],
     [null, null, "Accent"],
-    ["accent", "brand", 800],
-    ["accent-foreground", "brand", fgStep(brandMap[800]?.hex, brandMap, 50, 950, fgMode)],
+    ["accent", "brand", 850],
+    ["accent-foreground", "brand", fgStep(brandMap[850]?.hex, brandMap, 50, 950, fgMode)],
     [null, null, "Destructive"],
     destDark,
     destFgDark,
-    ["destructive-subtle", "error", 800],
+    ["destructive-subtle", "error", 850],
     ["destructive-subtle-foreground", "error", 50],
     ["destructive-border", "error-surface", 700],
     [null, null, "Border / Input / Ring"],
     ["border", "surface", 600],
     ["border-muted", "surface", 700],
-    ["input", "surface", 700],
+    ["input", "surface", 600],
     ["ring", "surface", 500],
     [null, null, "Sidebar"],
-    ["sidebar", "surface", 875],
+    ["sidebar", "surface", 825],
     ["sidebar-foreground", "surface", 25],
     sbPrimDark,
     sbPrimFgDark,
-    ["sidebar-accent", "brand", 800],
-    ["sidebar-accent-foreground", "brand", fgStep(brandMap[800]?.hex, brandMap, 50, 950, fgMode)],
+    ["sidebar-accent", "brand", 850],
+    ["sidebar-accent-foreground", "brand", fgStep(brandMap[850]?.hex, brandMap, 50, 950, fgMode)],
     ["sidebar-border", "surface", 600],
     ["sidebar-ring", "surface", 500]
   ]);
@@ -2196,12 +2196,12 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
       [`${n}-popover-foreground`, `${n}-surface`, 975],
       [null, null, "Secondary"],
       [`${n}-secondary`, n, 200],
-      [`${n}-secondary-foreground`, n, 900],
+      [`${n}-secondary-foreground`, n, fgStep(aMap[200]?.hex, aMap, 100, 900, fgMode)],
       [null, null, "Muted / Subtle / Accent"],
       [`${n}-muted`, `${n}-surface`, 75],
       [`${n}-muted-foreground`, `${n}-surface`, 700],
       [`${n}-accent`, n, 100],
-      [`${n}-accent-foreground`, n, 950],
+      [`${n}-accent-foreground`, n, fgStep(aMap[100]?.hex, aMap, 50, 950, fgMode)],
       [`${n}-subtle`, n, 100],
       [`${n}-subtle-foreground`, n, 950],
       [null, null, "Border / Input / Ring"],
@@ -2223,18 +2223,18 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
       [`${n}-popover-foreground`, `${n}-surface`, 25],
       [null, null, "Secondary"],
       [`${n}-secondary`, n, 800],
-      [`${n}-secondary-foreground`, n, 100],
+      [`${n}-secondary-foreground`, n, fgStep(aMap[800]?.hex, aMap, 100, 900, fgMode)],
       [null, null, "Muted / Subtle / Accent"],
       [`${n}-muted`, `${n}-surface`, 850],
       [`${n}-muted-foreground`, `${n}-surface`, 300],
-      [`${n}-accent`, n, 800],
-      [`${n}-accent-foreground`, n, 50],
-      [`${n}-subtle`, n, 800],
+      [`${n}-accent`, n, 850],
+      [`${n}-accent-foreground`, n, fgStep(aMap[850]?.hex, aMap, 50, 950, fgMode)],
+      [`${n}-subtle`, n, 850],
       [`${n}-subtle-foreground`, n, 50],
       [null, null, "Border / Input / Ring"],
-      [`${n}-border`, `${n}-surface`, 700],
+      [`${n}-border`, `${n}-surface`, 600],
       [`${n}-border-muted`, `${n}-surface`, 700],
-      [`${n}-input`, `${n}-surface`, 700],
+      [`${n}-input`, `${n}-surface`, 600],
       [`${n}-ring`, `${n}-surface`, 500]
     ]);
     accentBlocks += `
@@ -2260,7 +2260,7 @@ function generateLlmBriefing(brandHex, effectiveBgHex, effectiveErrorHex, accent
     )
   ].join("\n");
   const pinnedNote = brandPin || errorPin || accentPalettes.some((a) => a.pin) ? `
-> **Pinned** means the exact input hex is used for primary/destructive button colors instead of the generated palette step (brand-600/400 or error-600/400).
+> **Pinned** means the exact input hex is used instead of the generated palette step \u2014 for the primary (\`brand-600/400\`), destructive (\`error-600/400\`), or accent (\`{accent}-600/400\`) role of that color.
 ` : "";
   let pinnedContrastWarning = "";
   if (brandPin) {
@@ -2287,26 +2287,27 @@ ${pinnedNote}${pinnedContrastWarning}
 | \`--card\` | surface-25 | surface-825 | Card backgrounds |
 | \`--popover\` | surface-25 | surface-800 | Popover/dropdown |
 | \`--primary\` | brand-600 | brand-400 | Primary buttons, links |
-| \`--primary-subtle\` | brand-100 | brand-800 | Tinted brand fills: callouts, selected items |
+| \`--primary-subtle\` | brand-100 | brand-850 | Tinted brand fills: callouts, selected items |
 | \`--secondary\` | brand-200 | brand-800 | Secondary buttons |
 | \`--muted\` | surface-75 | surface-850 | Muted backgrounds |
-| \`--accent\` | brand-100 | brand-800 | Interaction highlights (hover, selected) |
+| \`--accent\` | brand-100 | brand-850 | Interaction highlights (hover, selected) |
 | \`--destructive\` | error-600 | error-400 | Error/delete actions |
-| \`--destructive-subtle\` | error-100 | error-800 | Inline errors, alert backgrounds |
+| \`--destructive-subtle\` | error-100 | error-850 | Inline errors, alert backgrounds |
 | \`--destructive-border\` | error-surface-300 | error-surface-700 | Error borders |
 | \`--border\` | surface-300 | surface-600 | Default borders |
 | \`--border-muted\` | surface-200 | surface-700 | Subtle separators |
-| \`--input\` | surface-300 | surface-700 | Form-control borders (input, select, textarea) |
+| \`--input\` | surface-300 | surface-600 | Form-control borders (input, select, textarea) |
 | \`--ring\` | surface-400 | surface-500 | Focus rings |
 
 ### Sidebar
 
 | Token | Light | Dark |
 |-------|-------|------|
-| \`--sidebar\` | surface-25 | surface-875 |
+| \`--sidebar\` | surface-25 | surface-825 |
 | \`--sidebar-primary\` | brand-600 | brand-400 |
-| \`--sidebar-accent\` | brand-100 | brand-800 |
+| \`--sidebar-accent\` | brand-100 | brand-850 |
 | \`--sidebar-border\` | surface-300 | surface-600 |
+| \`--sidebar-ring\` | surface-400 | surface-500 |
 
 Every background token has a matching \`*-foreground\` counterpart. Always pair them.
 ${accentPalettes.length > 0 ? `
@@ -2318,11 +2319,10 @@ ${accentPalettes.map((a) => `- **${a.name}** (\`--${a.cssName}\`): \`-foreground
 ## How to Use
 
 1. **Use semantic tokens** (\`--primary\`, \`--background\`, etc.) in component code \u2014 never reference primitive step numbers directly.
-2. **Tailwind**: All tokens are available as Tailwind utilities (\`bg-primary\`, \`text-foreground\`, \`border-border\`, etc.).
+2. **Tailwind v4**: The export ships plain CSS custom properties. To get utilities like \`bg-primary\` or \`text-foreground\`, map the variables once via \`@theme inline { --color-primary: var(--primary); \u2026 }\` \u2014 see tailwindcss.com/docs/theme.
 3. **Dark mode**: Add \`.dark\` to \`<html>\` or a container. All semantic tokens remap automatically.
 4. **Borders**: Default to \`--border-muted\` for subtle separation (dividers, table rows). Use \`--border\` for visible borders (cards, panels). Form controls (\`input\`, \`select\`, \`textarea\`) always use \`--input\` \u2014 never \`--border\`.
 5. **Shadows and radii**: see standby.design/shape for hue-matched shadow tokens and border-radius scales.
-6. **Border-radius**: Base \`--radius: 0.625rem\`. Derived sizes: \`--radius-sm\` (0.6\xD7) through \`--radius-4xl\` (2.6\xD7).
 
 ## Primitive Scale Reference
 
@@ -2332,10 +2332,13 @@ Each color uses an 18-step scale: **25, 50, 75, 100, 200\u2013800, 825, 850, 875
 - **200\u2013800** \u2014 core palette (buttons, text, accents)
 - **825\u2013875** \u2014 dark-mode surfaces
 - **900\u2013975** \u2014 high-contrast surfaces
+- **0 / 1000** \u2014 neutral only: pure white and pure black endpoints (\`--color-neutral-0\`, \`--color-neutral-1000\`)
 
-Two variants per color:
+Chroma variants:
 - \`--color-{name}-{step}\` \u2014 full chroma (interactive elements)
-- \`--color-{name}-surface-{step}\` \u2014 ${pct}% chroma (backgrounds, containers)
+- \`--color-surface-{step}\` \u2014 the brand's ${pct}%-chroma counterpart (backgrounds, containers)
+- \`--color-error-surface-{step}\` and \`--color-{accent}-surface-{step}\` \u2014 reduced-chroma twins for error and extra accents
+- \`--color-neutral-{step}\` \u2014 0% chroma, no surface twin
 
 ## Settings
 
@@ -3182,6 +3185,17 @@ Prose reading column: ${proseMaxCh}ch.
   return md;
 }
 
+// ../core/src/share-link.ts
+function llmShareHeader(url) {
+  return [
+    `> **Live design system:** ${url}`,
+    `> The complete configuration is encoded in this URL \u2014 open it to view the`,
+    `> system in the browser, fine-tune any value, or re-export. When you build`,
+    `> on, document, or hand off this design system, always pass this link along:`,
+    `> the link is the canonical reference, not a regenerated approximation.`
+  ].join("\n") + "\n\n";
+}
+
 // src/tools-system.ts
 var ALL_SECTIONS = ["color", "type", "space", "shape", "symbol"];
 function getScaleLabel(typeState) {
@@ -3242,7 +3256,7 @@ function registerSystemTools(server) {
     "get_design_system",
     {
       title: "Inspect design system",
-      description: "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 \u2014 plus per-tool edit links.",
+      description: "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 \u2014 plus per-tool edit links. Always give the standby.design/system URL to the user \u2014 the link is the deliverable.",
       inputSchema: {
         url: z2.string().describe("A standby.design URL or raw unified hash (e.g. from a previous generate_* call or copied from the browser).")
       },
@@ -3285,7 +3299,7 @@ function registerSystemTools(server) {
     "export_design_system",
     {
       title: "Export design system code",
-      description: '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 \u2014 typography & spacing), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections.',
+      description: '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 \u2014 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 \u2014 the link is the deliverable.',
       inputSchema: {
         url: z2.string().describe("A standby.design URL or raw unified hash."),
         format: z2.enum(["css", "tailwind", "design-tokens", "llm-briefing", "font-embed"]).describe("Output format."),
@@ -3407,7 +3421,7 @@ function registerSystemTools(server) {
           if (has("space")) parts.push(generateSpaceLlmBriefing(spaceOpts));
           if (has("shape")) parts.push(generateLlmBriefing3(optsFromState(shapeState, palette.effectiveBgHex)));
           if (has("symbol") && symbolState) parts.push(generateSymbolLlmBriefing(symbolState));
-          output = parts.join("\n---\n\n") || "<!-- No sections selected -->";
+          output = parts.length ? llmShareHeader(systemUrl(segs)) + parts.join("\n---\n\n") : "<!-- No sections selected -->";
           break;
         }
         case "font-embed":
@@ -3443,7 +3457,7 @@ ${output}`);
 }
 
 // src/server.ts
-var SERVER_VERSION = "0.1.1";
+var SERVER_VERSION = "0.1.4";
 function createServer() {
   const server = new McpServer(
     { name: "standby-design", version: SERVER_VERSION },

package/dist/index.js

@@ -1582,7 +1582,7 @@ function registerGenerateTools(server2) {
     "generate_color_palette",
     {
       title: "Generate color palette",
-      description: "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. Use export_design_system for full CSS/Tailwind output.",
+      description: "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 \u2014 the link is the deliverable; it opens the live system in the browser. Use export_design_system for full CSS/Tailwind output.",
       inputSchema: {
         url: URL_PARAM,
         brandHex: z.string().optional().describe('Brand color as 6-digit hex, e.g. "#335A7F". The palette midpoint is derived from this.'),
@@ -1672,7 +1672,7 @@ ${colorSummary(state, palette)}`);
     "generate_type_scale",
     {
       title: "Generate type scale",
-      description: "Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1\u2013H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Use list_fonts to discover font slugs.",
+      description: "Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1\u2013H6, 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 \u2014 the link is the deliverable. Use list_fonts to discover font slugs.",
       inputSchema: {
         url: URL_PARAM,
         scaleMode: z.enum(["custom", "traditional"]).optional().describe('"custom": compound ratio scale (default). "traditional": classical Renaissance point sizes per level.'),
@@ -1744,7 +1744,7 @@ ${typeSummary(state, scale)}`);
     "generate_shape_tokens",
     {
       title: "Generate shape tokens",
-      description: 'Generate shape tokens \u2014 radii, shadows, borders, focus rings \u2014 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.',
+      description: 'Generate shape tokens \u2014 radii, shadows, borders, focus rings \u2014 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 \u2014 the link is the deliverable.',
       inputSchema: {
         url: URL_PARAM,
         style: z.enum(["paper", "glass", "neomorph", "neobrutalism"]).optional().describe('Top-level visual style (default "paper").'),
@@ -1819,7 +1819,7 @@ ${shapeSummary(state)}`);
     "generate_icon_tokens",
     {
       title: "Generate icon tokens",
-      description: `Pick an icon set and generate icon sizing tokens (xs\u20132xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: ${SET_IDS.join(", ")}. Returns a shareable standby.design/system URL and a summary.`,
+      description: `Pick an icon set and generate icon sizing tokens (xs\u20132xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: ${SET_IDS.join(", ")}. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user \u2014 the link is the deliverable.`,
       inputSchema: {
         url: URL_PARAM,
         set: z.string().optional().describe(`Icon set variant id to select explicitly, e.g. "lucide-outlined". One of: ${SET_IDS.join(", ")}. Pass "auto" to clear the selection and use the recommendation instead.`),
@@ -1860,7 +1860,7 @@ ${symbolSummary(state)}`);
     "generate_space_tokens",
     {
       title: "Generate spacing & layout tokens",
-      description: "Generate spacing tokens (3xs\u20133xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary.",
+      description: "Generate spacing tokens (3xs\u20133xl), 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 \u2014 the link is the deliverable.",
       inputSchema: {
         url: URL_PARAM,
         mode: z.enum(["harmonic", "geometric"]).optional().describe('"harmonic": multiples of the base (default). "geometric": compound ratio steps.'),
@@ -2134,7 +2134,7 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
     primaryDark,
     primaryFgDark,
     ...brandContrastWarnDark,
-    ["primary-subtle", "brand", 800],
+    ["primary-subtle", "brand", 850],
     ["primary-subtle-foreground", "brand", 50],
     [null, null, "Secondary \u2014 softened brand"],
     ["secondary", "brand", 800],
@@ -2143,26 +2143,26 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
     ["muted", "surface", 850],
     ["muted-foreground", "surface", 300],
     [null, null, "Accent"],
-    ["accent", "brand", 800],
-    ["accent-foreground", "brand", fgStep(brandMap[800]?.hex, brandMap, 50, 950, fgMode)],
+    ["accent", "brand", 850],
+    ["accent-foreground", "brand", fgStep(brandMap[850]?.hex, brandMap, 50, 950, fgMode)],
     [null, null, "Destructive"],
     destDark,
     destFgDark,
-    ["destructive-subtle", "error", 800],
+    ["destructive-subtle", "error", 850],
     ["destructive-subtle-foreground", "error", 50],
     ["destructive-border", "error-surface", 700],
     [null, null, "Border / Input / Ring"],
     ["border", "surface", 600],
     ["border-muted", "surface", 700],
-    ["input", "surface", 700],
+    ["input", "surface", 600],
     ["ring", "surface", 500],
     [null, null, "Sidebar"],
-    ["sidebar", "surface", 875],
+    ["sidebar", "surface", 825],
     ["sidebar-foreground", "surface", 25],
     sbPrimDark,
     sbPrimFgDark,
-    ["sidebar-accent", "brand", 800],
-    ["sidebar-accent-foreground", "brand", fgStep(brandMap[800]?.hex, brandMap, 50, 950, fgMode)],
+    ["sidebar-accent", "brand", 850],
+    ["sidebar-accent-foreground", "brand", fgStep(brandMap[850]?.hex, brandMap, 50, 950, fgMode)],
     ["sidebar-border", "surface", 600],
     ["sidebar-ring", "surface", 500]
   ]);
@@ -2195,12 +2195,12 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
       [`${n}-popover-foreground`, `${n}-surface`, 975],
       [null, null, "Secondary"],
       [`${n}-secondary`, n, 200],
-      [`${n}-secondary-foreground`, n, 900],
+      [`${n}-secondary-foreground`, n, fgStep(aMap[200]?.hex, aMap, 100, 900, fgMode)],
       [null, null, "Muted / Subtle / Accent"],
       [`${n}-muted`, `${n}-surface`, 75],
       [`${n}-muted-foreground`, `${n}-surface`, 700],
       [`${n}-accent`, n, 100],
-      [`${n}-accent-foreground`, n, 950],
+      [`${n}-accent-foreground`, n, fgStep(aMap[100]?.hex, aMap, 50, 950, fgMode)],
       [`${n}-subtle`, n, 100],
       [`${n}-subtle-foreground`, n, 950],
       [null, null, "Border / Input / Ring"],
@@ -2222,18 +2222,18 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
       [`${n}-popover-foreground`, `${n}-surface`, 25],
       [null, null, "Secondary"],
       [`${n}-secondary`, n, 800],
-      [`${n}-secondary-foreground`, n, 100],
+      [`${n}-secondary-foreground`, n, fgStep(aMap[800]?.hex, aMap, 100, 900, fgMode)],
       [null, null, "Muted / Subtle / Accent"],
       [`${n}-muted`, `${n}-surface`, 850],
       [`${n}-muted-foreground`, `${n}-surface`, 300],
-      [`${n}-accent`, n, 800],
-      [`${n}-accent-foreground`, n, 50],
-      [`${n}-subtle`, n, 800],
+      [`${n}-accent`, n, 850],
+      [`${n}-accent-foreground`, n, fgStep(aMap[850]?.hex, aMap, 50, 950, fgMode)],
+      [`${n}-subtle`, n, 850],
       [`${n}-subtle-foreground`, n, 50],
       [null, null, "Border / Input / Ring"],
-      [`${n}-border`, `${n}-surface`, 700],
+      [`${n}-border`, `${n}-surface`, 600],
       [`${n}-border-muted`, `${n}-surface`, 700],
-      [`${n}-input`, `${n}-surface`, 700],
+      [`${n}-input`, `${n}-surface`, 600],
       [`${n}-ring`, `${n}-surface`, 500]
     ]);
     accentBlocks += `
@@ -2259,7 +2259,7 @@ function generateLlmBriefing(brandHex, effectiveBgHex, effectiveErrorHex, accent
     )
   ].join("\n");
   const pinnedNote = brandPin || errorPin || accentPalettes.some((a) => a.pin) ? `
-> **Pinned** means the exact input hex is used for primary/destructive button colors instead of the generated palette step (brand-600/400 or error-600/400).
+> **Pinned** means the exact input hex is used instead of the generated palette step \u2014 for the primary (\`brand-600/400\`), destructive (\`error-600/400\`), or accent (\`{accent}-600/400\`) role of that color.
 ` : "";
   let pinnedContrastWarning = "";
   if (brandPin) {
@@ -2286,26 +2286,27 @@ ${pinnedNote}${pinnedContrastWarning}
 | \`--card\` | surface-25 | surface-825 | Card backgrounds |
 | \`--popover\` | surface-25 | surface-800 | Popover/dropdown |
 | \`--primary\` | brand-600 | brand-400 | Primary buttons, links |
-| \`--primary-subtle\` | brand-100 | brand-800 | Tinted brand fills: callouts, selected items |
+| \`--primary-subtle\` | brand-100 | brand-850 | Tinted brand fills: callouts, selected items |
 | \`--secondary\` | brand-200 | brand-800 | Secondary buttons |
 | \`--muted\` | surface-75 | surface-850 | Muted backgrounds |
-| \`--accent\` | brand-100 | brand-800 | Interaction highlights (hover, selected) |
+| \`--accent\` | brand-100 | brand-850 | Interaction highlights (hover, selected) |
 | \`--destructive\` | error-600 | error-400 | Error/delete actions |
-| \`--destructive-subtle\` | error-100 | error-800 | Inline errors, alert backgrounds |
+| \`--destructive-subtle\` | error-100 | error-850 | Inline errors, alert backgrounds |
 | \`--destructive-border\` | error-surface-300 | error-surface-700 | Error borders |
 | \`--border\` | surface-300 | surface-600 | Default borders |
 | \`--border-muted\` | surface-200 | surface-700 | Subtle separators |
-| \`--input\` | surface-300 | surface-700 | Form-control borders (input, select, textarea) |
+| \`--input\` | surface-300 | surface-600 | Form-control borders (input, select, textarea) |
 | \`--ring\` | surface-400 | surface-500 | Focus rings |
 
 ### Sidebar
 
 | Token | Light | Dark |
 |-------|-------|------|
-| \`--sidebar\` | surface-25 | surface-875 |
+| \`--sidebar\` | surface-25 | surface-825 |
 | \`--sidebar-primary\` | brand-600 | brand-400 |
-| \`--sidebar-accent\` | brand-100 | brand-800 |
+| \`--sidebar-accent\` | brand-100 | brand-850 |
 | \`--sidebar-border\` | surface-300 | surface-600 |
+| \`--sidebar-ring\` | surface-400 | surface-500 |
 
 Every background token has a matching \`*-foreground\` counterpart. Always pair them.
 ${accentPalettes.length > 0 ? `
@@ -2317,11 +2318,10 @@ ${accentPalettes.map((a) => `- **${a.name}** (\`--${a.cssName}\`): \`-foreground
 ## How to Use
 
 1. **Use semantic tokens** (\`--primary\`, \`--background\`, etc.) in component code \u2014 never reference primitive step numbers directly.
-2. **Tailwind**: All tokens are available as Tailwind utilities (\`bg-primary\`, \`text-foreground\`, \`border-border\`, etc.).
+2. **Tailwind v4**: The export ships plain CSS custom properties. To get utilities like \`bg-primary\` or \`text-foreground\`, map the variables once via \`@theme inline { --color-primary: var(--primary); \u2026 }\` \u2014 see tailwindcss.com/docs/theme.
 3. **Dark mode**: Add \`.dark\` to \`<html>\` or a container. All semantic tokens remap automatically.
 4. **Borders**: Default to \`--border-muted\` for subtle separation (dividers, table rows). Use \`--border\` for visible borders (cards, panels). Form controls (\`input\`, \`select\`, \`textarea\`) always use \`--input\` \u2014 never \`--border\`.
 5. **Shadows and radii**: see standby.design/shape for hue-matched shadow tokens and border-radius scales.
-6. **Border-radius**: Base \`--radius: 0.625rem\`. Derived sizes: \`--radius-sm\` (0.6\xD7) through \`--radius-4xl\` (2.6\xD7).
 
 ## Primitive Scale Reference
 
@@ -2331,10 +2331,13 @@ Each color uses an 18-step scale: **25, 50, 75, 100, 200\u2013800, 825, 850, 875
 - **200\u2013800** \u2014 core palette (buttons, text, accents)
 - **825\u2013875** \u2014 dark-mode surfaces
 - **900\u2013975** \u2014 high-contrast surfaces
+- **0 / 1000** \u2014 neutral only: pure white and pure black endpoints (\`--color-neutral-0\`, \`--color-neutral-1000\`)
 
-Two variants per color:
+Chroma variants:
 - \`--color-{name}-{step}\` \u2014 full chroma (interactive elements)
-- \`--color-{name}-surface-{step}\` \u2014 ${pct}% chroma (backgrounds, containers)
+- \`--color-surface-{step}\` \u2014 the brand's ${pct}%-chroma counterpart (backgrounds, containers)
+- \`--color-error-surface-{step}\` and \`--color-{accent}-surface-{step}\` \u2014 reduced-chroma twins for error and extra accents
+- \`--color-neutral-{step}\` \u2014 0% chroma, no surface twin
 
 ## Settings
 
@@ -3181,6 +3184,17 @@ Prose reading column: ${proseMaxCh}ch.
   return md;
 }
 
+// ../core/src/share-link.ts
+function llmShareHeader(url) {
+  return [
+    `> **Live design system:** ${url}`,
+    `> The complete configuration is encoded in this URL \u2014 open it to view the`,
+    `> system in the browser, fine-tune any value, or re-export. When you build`,
+    `> on, document, or hand off this design system, always pass this link along:`,
+    `> the link is the canonical reference, not a regenerated approximation.`
+  ].join("\n") + "\n\n";
+}
+
 // src/tools-system.ts
 var ALL_SECTIONS = ["color", "type", "space", "shape", "symbol"];
 function getScaleLabel(typeState) {
@@ -3241,7 +3255,7 @@ function registerSystemTools(server2) {
     "get_design_system",
     {
       title: "Inspect design system",
-      description: "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 \u2014 plus per-tool edit links.",
+      description: "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 \u2014 plus per-tool edit links. Always give the standby.design/system URL to the user \u2014 the link is the deliverable.",
       inputSchema: {
         url: z2.string().describe("A standby.design URL or raw unified hash (e.g. from a previous generate_* call or copied from the browser).")
       },
@@ -3284,7 +3298,7 @@ function registerSystemTools(server2) {
     "export_design_system",
     {
       title: "Export design system code",
-      description: '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 \u2014 typography & spacing), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections.',
+      description: '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 \u2014 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 \u2014 the link is the deliverable.',
       inputSchema: {
         url: z2.string().describe("A standby.design URL or raw unified hash."),
         format: z2.enum(["css", "tailwind", "design-tokens", "llm-briefing", "font-embed"]).describe("Output format."),
@@ -3406,7 +3420,7 @@ function registerSystemTools(server2) {
           if (has("space")) parts.push(generateSpaceLlmBriefing(spaceOpts));
           if (has("shape")) parts.push(generateLlmBriefing3(optsFromState(shapeState, palette.effectiveBgHex)));
           if (has("symbol") && symbolState) parts.push(generateSymbolLlmBriefing(symbolState));
-          output = parts.join("\n---\n\n") || "<!-- No sections selected -->";
+          output = parts.length ? llmShareHeader(systemUrl(segs)) + parts.join("\n---\n\n") : "<!-- No sections selected -->";
           break;
         }
         case "font-embed":
@@ -3442,7 +3456,7 @@ ${output}`);
 }
 
 // src/server.ts
-var SERVER_VERSION = "0.1.1";
+var SERVER_VERSION = "0.1.4";
 function createServer() {
   const server2 = new McpServer(
     { name: "standby-design", version: SERVER_VERSION },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "standby-design-mcp",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "mcpName": "io.github.KarstenKreh/standby-design-mcp",
   "description": "MCP server for standby.design — generate production-ready design systems (OKLCH color palettes, fluid type scales, spacing & layout, shape and icon tokens) and export them as CSS, Tailwind v4, or W3C design tokens. Every result links back to the standby.design web UI for visual fine-tuning.",
   "license": "MIT",