{"uid":"cap_WgI1fVN1zT4QJEmHDo2aD","slug":"css-design-calc-golden-ratio-splitter-fc14849c","name":"CSS Design Calc – Golden Ratio Splitter","description":"Split a length into major and minor parts by the golden ratio (or silver, root-2, custom) with matching rectangle sizes.","url":"https://css-design-calc.x402tookit.com/golden-ratio?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["total"],"properties":{"ratio":{"type":"string","description":"golden (default 1.618), silver (2.414), root-2, root-3, root-5, thirds, or a number above 1"},"total":{"type":"number","description":"The length to split, in any unit"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"asOf":{"type":["null","string"]},"major":{"type":["null","number"]},"minor":{"type":["null","number"]},"ratio":{"type":["null","number"]},"total":{"type":["null","number"]},"source":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"degraded":{"type":["boolean","null"]},"ratioName":{"type":["null","string"]},"disclaimer":{"type":["null","string"]},"nextLarger":{"type":["null","number"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"nextSmaller":{"type":["null","number"]},"majorPercent":{"type":["null","number"]},"minorPercent":{"type":["null","number"]},"cssGridColumns":{"type":["null","string"]},"rectangleHeight":{"type":["null","number"]},"wholeToMajorRatio":{"type":["null","number"]},"rectangleWidthForHeight":{"type":["null","number"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_PRjgE8DN82zlyvIjgFbxP","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Splits a total length into major and minor parts using the golden ratio (or silver, root-2, root-3, root-5, thirds, or a custom ratio), returning both values, percentages, and matching CSS grid columns.","exampleAgentPrompt":"Split 1200px by the golden ratio and give me the major and minor parts along with the CSS grid column suggestion.","exampleUseCases":[{"title":"Golden ratio two-column layout","prompt":"I'm designing a webpage with a content area and sidebar. My container is 960px wide — can you split that using the golden ratio so I know what widths to use for each column?"},{"title":"Silver ratio card proportions","prompt":"I need a card that's 480px wide and I want its height to follow the silver ratio. Can you split 480 using the silver ratio and tell me the major and minor values?"},{"title":"Root-2 spacing system baseline","prompt":"I'm building a design system and want to divide a base spacing unit of 240 using the root-2 ratio. What are the major and minor parts, and what would the CSS grid columns look like?"}],"resultDescription":"Returns the major and minor parts of the split, the ratio value used, the ratio name, each part as a percentage of the total, recommended CSS grid column template, rectangle height and matching width for the major part, and the next larger and smaller values in the same ratio sequence.","failureModes":["Missing required 'total' query parameter returns an error","A ratio value of 1 or below is invalid (must be above 1)","An unrecognized ratio string that isn't a valid named ratio or number above 1 may return an error","Non-numeric 'total' values will fail validation","Very large or very small totals may produce impractical output"],"whenToPreferThis":"Use this endpoint when you need to apply classic proportional design systems (golden, silver, root-2, etc.) to a known measurement — such as a container width, font size, or spacing unit — and want all derived values (major/minor split, percentages, CSS grid columns, rectangle sizes) in one call. Prefer over manual calculation or general math APIs when you specifically want named design ratios and CSS-ready output.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-29T13:12:39.694Z","isFirstParty":false,"canonicalSlug":"css-design-calc-golden-ratio-splitter-fc14849c"}