Golden-ratio design math: spacer calculator, spacing scale, grid widths, CSS vars, Tailwind setup.
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.
The goldenratio.app Golden Calculator. Stack spacers numbered 1-11 (each is the previous x 1.618) on a left and a right side; returns whether both sides are equal and, if not, every combination of spacers that would make the shorter side match ("Try" on the site). The site starts with left = [6, 5, 6], right = [].
Spacer numbers stacked on the left, top to bottom, e.g. [6, 5, 6].
Spacer numbers stacked on the right.
Pick your client. Values in capitals, like YOUR_TOKEN, are yours to fill in.
Run in a terminal
claude mcp add --transport http mcp https://mcp.goldenratio.app/mcp
The goldenratio.app Golden Calculator. Stack spacers numbered 1-11 (each is the previous x 1.618) on a left and a right side; returns whether both sides are equal and, if not, every combination of spacers that would make the shorter side match ("Try" on the site). The site starts with left = [6, 5, 6], right = [].
| Argument | Type | Description |
|---|---|---|
| left | array | Spacer numbers stacked on the left, top to bottom, e.g. [6, 5, 6]. |
| right | array | Spacer numbers stacked on the right. |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"left": {
"type": "array",
"items": {
"type": "integer",
"maximum": 11,
"minimum": 1
},
"maxItems": 40,
"description": "Spacer numbers stacked on the left, top to bottom, e.g. [6, 5, 6]."
},
"right": {
"type": "array",
"items": {
"type": "integer",
"maximum": 11,
"minimum": 1
},
"maxItems": 40,
"description": "Spacer numbers stacked on the right."
}
},
"additionalProperties": false
}The :root block of golden-ratio CSS variables (--golden-ratio-1..11, half-*, double-*, --gr) exactly as goldenratio.app ships it. Use without Tailwind.
| Argument | Type | Description |
|---|---|---|
| format | string | css (default, readable), min (one line, as in the site stylesheet) or json. |
| spacer_base | number | theme.goldenRatio.spacerBase: the size of spacer 6 (default 1.5, as on goldenratio.app). |
| spacer_unit | string | theme.goldenRatio.spacerUnit (default 'rem'). |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"format": {
"enum": [
"css",
"min",
"json"
],
"type": "string",
"description": "css (default, readable), min (one line, as in the site stylesheet) or json."
},
"spacer_base": {
"type": "number",
"maximum": 1000,
"description": "theme.goldenRatio.spacerBase: the size of spacer 6 (default 1.5, as on goldenratio.app).",
"exclusiveMinimum": 0
},
"spacer_unit": {
"enum": [
"rem",
"em",
"px",
"%",
"vw",
"vh",
"ch",
"ex",
"pt"
],
"type": "string",
"description": "theme.goldenRatio.spacerUnit (default 'rem')."
}
},
"additionalProperties": false
}The golden grid from goldenratio.app/#/grid: w-grp-1..11, w-grp-half-*, w-grp-double-* percentage widths, the starter .container/.row CSS, every example row from the site with its total width, and an optional check of your own row (does it add up to exactly 100%?).
| Argument | Type | Description |
|---|---|---|
| row | array | Widths to check as one row, e.g. ["5", "4"] or ["half-4", "5", "half-4"] (w-grp- prefix optional). |
| container_px | number | Also give each width in px for a row this wide. |
| include_examples | boolean | Include the site example rows (default true). |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"row": {
"type": "array",
"items": {
"type": "string",
"maxLength": 20
},
"maxItems": 40,
"description": "Widths to check as one row, e.g. [\"5\", \"4\"] or [\"half-4\", \"5\", \"half-4\"] (w-grp- prefix optional)."
},
"container_px": {
"type": "number",
"maximum": 100000,
"description": "Also give each width in px for a row this wide.",
"exclusiveMinimum": 0
},
"include_examples": {
"type": "boolean",
"description": "Include the site example rows (default true)."
}
},
"additionalProperties": false
}Step any number up or down the golden ratio (x or / 1.61803398875), e.g. to pick a type scale or the next size. What the goldenratio.app Alfred workflow does.
| Argument | Type | Description |
|---|---|---|
| unit | string | Unit suffix for the text column, e.g. "px". |
| value* | number | Starting value, e.g. 16. |
| steps_up | integer | Steps above the value (default 5). |
| steps_down | integer | Steps below the value (default 5). |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"value"
],
"properties": {
"unit": {
"type": "string",
"maxLength": 10,
"description": "Unit suffix for the text column, e.g. \"px\"."
},
"value": {
"type": "number",
"maximum": 1000000000000,
"description": "Starting value, e.g. 16.",
"exclusiveMinimum": 0
},
"steps_up": {
"type": "integer",
"maximum": 20,
"minimum": 0,
"description": "Steps above the value (default 5)."
},
"steps_down": {
"type": "integer",
"maximum": 20,
"minimum": 0,
"description": "Steps below the value (default 5)."
}
},
"additionalProperties": false
}The golden spacing scale (spacers 1-11 plus half-N and double-N) with exact values, px and CSS variable names, as used by goldenratio.app and the tailwindcss-golden-ratio plugin. With default options it also returns the rounded cheatsheet table from goldenratio.app/#/spacing.
| Argument | Type | Description |
|---|---|---|
| prefix | any | Plugin prefix option, only changes tailwind_key (true = "gr-"). |
| spacer_base | number | theme.goldenRatio.spacerBase: the size of spacer 6 (default 1.5, as on goldenratio.app). |
| spacer_unit | string | theme.goldenRatio.spacerUnit (default 'rem'). |
| root_font_px | number | Root font size for px conversion of rem/em values (default 16). |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"prefix": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "string",
"maxLength": 20
}
],
"description": "Plugin prefix option, only changes tailwind_key (true = \"gr-\")."
},
"spacer_base": {
"type": "number",
"maximum": 1000,
"description": "theme.goldenRatio.spacerBase: the size of spacer 6 (default 1.5, as on goldenratio.app).",
"exclusiveMinimum": 0
},
"spacer_unit": {
"enum": [
"rem",
"em",
"px",
"%",
"vw",
"vh",
"ch",
"ex",
"pt"
],
"type": "string",
"description": "theme.goldenRatio.spacerUnit (default 'rem')."
},
"root_font_px": {
"type": "number",
"maximum": 100,
"description": "Root font size for px conversion of rem/em values (default 16).",
"exclusiveMinimum": 0
}
},
"additionalProperties": false
}How to add the tailwindcss-golden-ratio plugin (the one goldenratio.app uses): install command, tailwind.config.js, options, and the exact theme values it generates (spacing, grp widths, scale, fontSize extras, borderWidth/lineHeight) for the given options.
| Argument | Type | Description |
|---|---|---|
| prefix | any | theme.goldenRatio.prefix (true = "gr-"). |
| spacer_base | number | theme.goldenRatio.spacerBase: the size of spacer 6 (default 1.5, as on goldenratio.app). |
| spacer_unit | string | theme.goldenRatio.spacerUnit (default 'rem'). |
| use_css_vars | boolean | theme.goldenRatio.useCssVars (default true). |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"prefix": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "string",
"maxLength": 20
}
],
"description": "theme.goldenRatio.prefix (true = \"gr-\")."
},
"spacer_base": {
"type": "number",
"maximum": 1000,
"description": "theme.goldenRatio.spacerBase: the size of spacer 6 (default 1.5, as on goldenratio.app).",
"exclusiveMinimum": 0
},
"spacer_unit": {
"enum": [
"rem",
"em",
"px",
"%",
"vw",
"vh",
"ch",
"ex",
"pt"
],
"type": "string",
"description": "theme.goldenRatio.spacerUnit (default 'rem')."
},
"use_css_vars": {
"type": "boolean",
"description": "theme.goldenRatio.useCssVars (default true)."
}
},
"additionalProperties": false
}We read every tool's name, description and inputs the way the model will, looking for instructions hidden from you. A clean result means no warning signs, not a guarantee. Scanned Nov 7, 2026.