Generate design systems: OKLCH colors, fluid type scales, spacing, shape, icon and motion tokens.
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
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.
A standby.design URL or raw unified hash.
Output format.
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".
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.
| Argument | Type | Description |
|---|---|---|
| url* | string | A standby.design URL or raw unified hash. |
| format* | 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". |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"url",
"format"
],
"properties": {
"url": {
"type": "string",
"description": "A standby.design URL or raw unified hash."
},
"format": {
"enum": [
"css",
"tailwind",
"design-tokens",
"llm-briefing",
"font-embed"
],
"type": "string",
"description": "Output format."
},
"sections": {
"type": "array",
"items": {
"enum": [
"color",
"type",
"space",
"shape",
"symbol",
"motion"
],
"type": "string"
},
"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\"."
}
},
"additionalProperties": false
}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.
| Argument | Type | Description |
|---|---|---|
| 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 | |
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.
| Argument | Type | Description |
|---|---|---|
| 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). |
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.
| Argument | Type | Description |
|---|---|---|
| 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. |
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.
| Argument | Type | Description |
|---|---|---|
| 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). |
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.
| Argument | Type | Description |
|---|---|---|
| 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 |
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.
| Argument | Type | Description |
|---|---|---|
| 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 |
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.
| Argument | Type | Description |
|---|---|---|
| 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. |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"rules": {
"type": "array",
"items": {
"type": "string"
},
"description": "Rule slugs (from the summary) to return in full."
},
"scope": {
"enum": [
"universal",
"stack"
],
"type": "string",
"description": "\"universal\" applies to every project, \"stack\" to one technology (e.g. Tailwind, React Native)."
},
"detail": {
"enum": [
"summary",
"full"
],
"type": "string",
"description": "\"summary\" (default): one line per rule. \"full\": complete rule text. Defaults to \"full\" when rules are given."
},
"category": {
"type": "string",
"description": "Only rules from this category: Layout, Fluss, Form, Fläche, Bedienung, Formular, Inhalt, Zustand, Typografie, Farbe, Stack."
},
"platform": {
"enum": [
"web",
"react-native"
],
"type": "string",
"description": "Only rules that apply to this platform."
}
},
"additionalProperties": false
}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.
| Argument | Type | Description |
|---|---|---|
| url* | string | A standby.design URL or raw unified hash (e.g. from a previous generate_* call or copied from the browser). |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"url"
],
"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)."
}
},
"additionalProperties": false
}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 arguments.
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {}
}| 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. |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"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": {
"enum": [
"balanced",
"exact"
],
"type": "string",
"description": "\"balanced\": step 500 is always the perceptual midpoint (even light/dark distribution). \"exact\": step 500 keeps the input color's lightness."
},
"accents": {
"type": "array",
"items": {
"type": "object",
"required": [
"name"
],
"properties": {
"hex": {
"type": "string",
"description": "Hex color. Omit to auto-derive from the brand color (requires autoHue or a preset name: Success/Warning/Info)."
},
"pin": {
"type": "boolean"
},
"name": {
"type": "string",
"maxLength": 30,
"minLength": 1
},
"invert": {
"type": "boolean"
},
"autoHue": {
"type": "number",
"maximum": 360,
"minimum": 0,
"description": "OKLCH hue for auto-derived accents."
}
},
"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."
},
"brandHex": {
"type": "string",
"description": "Brand color as 6-digit hex, e.g. \"#335A7F\". The palette midpoint is derived from this."
},
"brandPin": {
"type": "boolean",
"description": "Pin the primary token to the exact input hex instead of the palette step."
},
"errorPin": {
"type": "boolean"
},
"themeName": {
"type": "string",
"maxLength": 60,
"description": "Name of the design system (appears in exports and page title)."
},
"bgColorHex": {
"type": "string",
"description": "Surface tint color as hex, or \"auto\" to derive from the brand color (default)."
},
"brandInvert": {
"type": "boolean",
"description": "For pinned brand: mirror lightness in dark mode (e.g. black buttons in light mode, white in dark)."
},
"chromaScale": {
"type": "number",
"maximum": 1,
"minimum": 0,
"description": "Surface saturation 0–1 (0 = grey surfaces, 1 = vibrant). Default 0.25."
},
"errorInvert": {
"type": "boolean"
},
"errorColorHex": {
"type": "string",
"description": "Error/destructive color as hex, or \"auto\" to derive from the brand hue (default)."
},
"fgContrastMode": {
"enum": [
"best",
"preferLight",
"preferDark"
],
"type": "string",
"description": "Text color strategy on colored backgrounds."
}
},
"additionalProperties": false
}| baseSize | number | Base icon size (md) in rem (default 1.25). |
| snapTo4px | boolean | Round sizes to the 4px grid (default true). |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"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."
},
"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."
},
"scale": {
"type": "number",
"maximum": 2,
"minimum": 1,
"description": "Size scale ratio (default 1.272)."
},
"style": {
"enum": [
"outlined",
"filled",
"duotone",
"auto"
],
"type": "string",
"description": "Preferred icon style for the recommendation."
},
"weight": {
"enum": [
"thin",
"regular",
"bold",
"auto"
],
"type": "string",
"description": "Preferred stroke weight."
},
"corners": {
"enum": [
"sharp",
"rounded",
"auto"
],
"type": "string",
"description": "Preferred corner style (sharp = corporate/precise, rounded = friendly)."
},
"baseSize": {
"type": "number",
"maximum": 3,
"minimum": 0.5,
"description": "Base icon size (md) in rem (default 1.25)."
},
"snapTo4px": {
"type": "boolean",
"description": "Round sizes to the 4px grid (default true)."
}
},
"additionalProperties": false
}{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"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."
},
"energy": {
"type": "number",
"maximum": 100,
"minimum": 0,
"description": "0 = calm (slow, deliberate) … 100 = lively (quick, snappy). Default 50."
},
"preset": {
"enum": [
"calm-firm",
"calm-elastic",
"balanced",
"lively-firm",
"lively-elastic"
],
"type": "string",
"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."
},
"material": {
"type": "number",
"maximum": 100,
"minimum": 0,
"description": "0 = firm (no overshoot) … 100 = elastic (visible bounce on spatial motion). Default 50."
}
},
"additionalProperties": false
}| 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 |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"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": {
"enum": [
"paper",
"glass",
"neomorph",
"neobrutalism"
],
"type": "string",
"description": "Top-level visual style (default \"paper\")."
},
"glassBlur": {
"type": "number",
"maximum": 20,
"minimum": 0,
"description": "Glass backdrop blur (default 1.0)."
},
"ringStyle": {
"enum": [
"soft",
"solid"
],
"type": "string",
"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."
},
"ringWidth": {
"type": "integer",
"maximum": 8,
"minimum": 0,
"description": "Focus ring width in px (default 2)."
},
"glassDepth": {
"type": "number",
"maximum": 5,
"minimum": -2,
"description": "Glass displacement intensity (default 0.2)."
},
"ringOffset": {
"type": "integer",
"maximum": 8,
"minimum": 0,
"description": "Focus ring offset in px (default 2)."
},
"shadowType": {
"enum": [
"normal",
"flat"
],
"type": "string",
"description": "Shadow rendering for paper style."
},
"borderWidth": {
"type": "number",
"maximum": 10,
"minimum": 0,
"description": "Border width in px (default 1)."
},
"shadowScale": {
"type": "number",
"maximum": 2,
"minimum": 1,
"description": "Elevation level spread ratio (default 1.272)."
},
"borderRadius": {
"type": "integer",
"maximum": 64,
"minimum": 0,
"description": "Base radius in px; scales to a xs–xl radius set (default 8)."
},
"ringColorHex": {
"type": "string",
"description": "Custom focus ring color as hex, or \"auto\" (default)."
},
"borderEnabled": {
"type": "boolean"
},
"shadowEnabled": {
"type": "boolean"
},
"shadowOffsetX": {
"type": "integer",
"maximum": 16,
"minimum": -16,
"description": "Brutalist shadow X offset in px (default 2)."
},
"shadowOffsetY": {
"type": "integer",
"maximum": 16,
"minimum": -16,
"description": "Brutalist shadow Y offset in px (default 4)."
},
"borderColorHex": {
"type": "string",
"description": "Custom border color as hex, or \"auto\" (default)."
},
"separationMode": {
"enum": [
"shadow",
"border",
"contrast",
"gap",
"mixed"
],
"type": "string",
"description": "How surfaces separate from the background."
},
"shadowColorHex": {
"type": "string",
"description": "Custom shadow color as hex, or \"auto\" (default)."
},
"shadowStrength": {
"type": "number",
"maximum": 3,
"minimum": 0,
"description": "Shadow alpha multiplier (default 1.0)."
},
"glassDispersion": {
"type": "number",
"maximum": 2,
"minimum": 0,
"description": "Chromatic aberration intensity (default 0.5)."
},
"shadowBlurScale": {
"type": "number",
"maximum": 3,
"minimum": 0,
"description": "Shadow blur multiplier (default 1.0)."
},
"brutalistVariant": {
"enum": [
"outlined",
"solid"
],
"type": "string"
}
},
"additionalProperties": false
}| 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). |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"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": {
"enum": [
"harmonic",
"geometric"
],
"type": "string",
"description": "\"harmonic\": multiples of the base (default). \"geometric\": compound ratio steps."
},
"snap": {
"type": "boolean",
"description": "Snap token values to a sensible grid (default true)."
},
"ratio": {
"type": "number",
"maximum": 2,
"minimum": 1,
"description": "Ratio for geometric mode (default 1.272)."
},
"baseRem": {
"type": "number",
"maximum": 4,
"minimum": 0.25,
"description": "Base spacing in rem (default 1.0)."
},
"containers": {
"type": "array",
"items": {
"type": "object",
"required": [
"name",
"maxPx"
],
"properties": {
"name": {
"type": "string",
"minLength": 1
},
"maxPx": {
"type": "integer",
"minimum": 0
}
},
"additionalProperties": false
},
"description": "Replace the container list. Defaults: prose 680, narrow 960, default 1200, wide 1440, full 1920."
},
"fluidMaxVw": {
"type": "integer",
"maximum": 3840,
"minimum": 1000,
"description": "Upper fluid viewport anchor in px (default 1920)."
},
"fluidMinVw": {
"type": "integer",
"maximum": 1000,
"minimum": 200,
"description": "Lower fluid viewport anchor in px (default 375)."
},
"multiplier": {
"type": "number",
"maximum": 4,
"minimum": 0.25,
"description": "Uniform scale factor on all tokens (default 1.0)."
},
"proseMaxCh": {
"type": "integer",
"maximum": 120,
"minimum": 20,
"description": "Prose measure in ch (default 65)."
},
"breakpoints": {
"type": "array",
"items": {
"type": "object",
"required": [
"name",
"minPx"
],
"properties": {
"name": {
"type": "string",
"minLength": 1
},
"minPx": {
"type": "integer",
"minimum": 0
}
},
"additionalProperties": false
},
"description": "Replace the breakpoint list, e.g. [{\"name\":\"sm\",\"minPx\":640},...]. Defaults: sm 640, md 768, lg 1024, xl 1280, 2xl 1536."
},
"aspectRatios": {
"type": "array",
"items": {
"type": "object",
"required": [
"name",
"w",
"h"
],
"properties": {
"h": {
"type": "number",
"exclusiveMinimum": 0
},
"w": {
"type": "number",
"exclusiveMinimum": 0
},
"name": {
"type": "string",
"minLength": 1
}
},
"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
}| 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 | any | 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. |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"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."
},
"ratio": {
"type": "number",
"maximum": 1.7,
"minimum": 1.05,
"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."
},
"baseSize": {
"type": "number",
"maximum": 2,
"minimum": 0.5,
"description": "Desktop base size in rem (default 1.0)."
},
"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\"."
},
"scaleMode": {
"enum": [
"custom",
"traditional"
],
"type": "string",
"description": "\"custom\": compound ratio scale (default). \"traditional\": classical Renaissance point sizes per level."
},
"autoShrink": {
"type": "number",
"maximum": 100,
"minimum": 0,
"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\"."
},
"mobileRatio": {
"type": "number",
"maximum": 1.7,
"minimum": 1,
"description": "Explicit mobile scale ratio. Omit to auto-derive from ratio and autoShrink."
},
"headingWeight": {
"type": "integer",
"maximum": 900,
"minimum": 100,
"description": "Font weight for headings (default 500)."
},
"mobileBaseSize": {
"type": "number",
"maximum": 2,
"minimum": 0.5,
"description": "Mobile base size in rem (default = baseSize)."
},
"lineHeightOverrides": {
"type": "object",
"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.",
"additionalProperties": {
"type": "number"
}
},
"letterSpacingOverrides": {
"$ref": "#/properties/lineHeightOverrides",
"description": "Per-level letter-spacing overrides in em, e.g. {\"display\": -0.05}."
},
"traditionalAssignments": {
"type": "object",
"description": "For traditional mode: desktop px size per level, e.g. {\"display\": 48, \"h1\": 36, ...}.",
"additionalProperties": {
"type": "number"
}
},
"traditionalMobileAssignments": {
"type": "object",
"description": "For traditional mode: mobile px size per level.",
"additionalProperties": {
"type": "number"
}
}
},
"additionalProperties": false
}