# CSS Design Calc

CSS and layout maths for agents: unit conversion, fluid clamp(), type scales, aspect ratios, grids, specificity and readability.

## How to pay

Machine-payable over x402. USDC on: Base (eip155:8453), Solana (solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp), Polygon (eip155:137), Arbitrum One (eip155:42161).
No accounts. No API keys. No signup. The paying wallet is the account.

## Machine-readable

- OpenAPI: https://css-design-calc.x402tookit.com/openapi.json
- x402 manifest: https://css-design-calc.x402tookit.com/.well-known/x402
- Catalog (free): https://css-design-calc.x402tookit.com/catalog
- Health (free): https://css-design-calc.x402tookit.com/health
- Uptime (free): https://css-design-calc.x402tookit.com/uptime

## Endpoints (12)

### GET /aspect-ratio — $0.02
Aspect ratio of a width and height (simplified, nearest common ratio) or the missing side for a ratio, with CSS values.
Params: width?: number, height?: number, ratio?: string
Example: https://css-design-calc.x402tookit.com/aspect-ratio?width=1920&height=1080

### GET /box-size — $0.02
CSS box model sizes: content, padding, border and margin boxes from a width and height under content-box or border-box.
Params: width: number, height?: number, padding?: number, border?: number, margin?: number, boxSizing?: string
Example: https://css-design-calc.x402tookit.com/box-size?width=300&height=200&padding=20&border=2&margin=10&boxSizing=content-box

### GET /clamp-fluid — $0.02
Generate a CSS clamp() that scales a size linearly between a min and max viewport width, in rem, with the exact slope.
Params: minSize: number, maxSize: number, minViewport?: number, maxViewport?: number, rootPx?: number, at?: number
Example: https://css-design-calc.x402tookit.com/clamp-fluid?minSize=16&maxSize=24&minViewport=320&maxViewport=1200&rootPx=16

### GET /css-specificity — $0.02
CSS selector specificity (ids, classes, types) per Selectors Level 4, including :is(), :not(), :where() and :has(); compare two.
Params: selector: string, compareTo?: string
Example: https://css-design-calc.x402tookit.com/css-specificity?selector=%23main+nav+a.active%3Anot%28.disabled%29&compareTo=.link.active

### GET /css-unit-convert — $0.02
Convert a CSS length between px, rem, em, pt, pc, in, cm, mm, Q, vw, vh, vmin, vmax and % with your root and viewport sizes.
Params: value: number, from: string, to: string, rootPx?: number, parentPx?: number, viewportW?: number, viewportH?: number
Example: https://css-design-calc.x402tookit.com/css-unit-convert?value=18&from=px&to=rem&rootPx=16

### GET /golden-ratio — $0.02
Split a length into major and minor parts by the golden ratio (or silver, root-2, custom) with matching rectangle sizes.
Params: total: number, ratio?: string
Example: https://css-design-calc.x402tookit.com/golden-ratio?total=1200&ratio=golden

### GET /grid-columns — $0.02
Column and span widths for an N-column grid from container width, columns and gutter, or the container for a column width.
Params: columns: integer, gutter: number, containerWidth?: number, columnWidth?: number, margin?: number
Example: https://css-design-calc.x402tookit.com/grid-columns?columns=12&gutter=30&containerWidth=1140

### GET /line-length — $0.02
Estimate characters per line from column width and font size and rate it for readability (45-75 ideal, WCAG max 80).
Params: widthPx: number, fontSizePx: number, avgCharWidthEm?: number
Example: https://css-design-calc.x402tookit.com/line-length?widthPx=720&fontSizePx=18&avgCharWidthEm=0.5

### GET /pixel-density — $0.02
Screen pixel density (PPI) from resolution and diagonal, physical size, CSS viewport at a device pixel ratio, and image widths.
Params: widthPx: number, heightPx: number, diagonalIn: number, dpr?: number, cssWidth?: number
Example: https://css-design-calc.x402tookit.com/pixel-density?widthPx=2560&heightPx=1440&diagonalIn=27&dpr=1&cssWidth=400

### GET /target-size — $0.02
Check a click or touch target against WCAG 2.2 target size (24 px AA, 44 px AAA) including the spacing exception.
Params: widthPx: number, heightPx: number, neighbourCenterDistancePx?: number
Example: https://css-design-calc.x402tookit.com/target-size?widthPx=20&heightPx=20&neighbourCenterDistancePx=26

### GET /type-scale — $0.02
Modular type scale: sizes in px and rem for steps below and above a base size, by named ratio (major third, golden) or number.
Params: base: number, ratio?: string, up?: integer, down?: integer, rootPx?: number
Example: https://css-design-calc.x402tookit.com/type-scale?base=16&ratio=major-third&up=5&down=2

### GET /vertical-rhythm — $0.02
Snap line-heights for font sizes to a baseline grid: baseline unit, lines per element, unitless line-height and margins.
Params: baseFontPx: number, baseLineHeight?: number, sizes?: string, minLineHeight?: number
Example: https://css-design-calc.x402tookit.com/vertical-rhythm?baseFontPx=16&baseLineHeight=1.5&sizes=12%2C16%2C20%2C24%2C32%2C48

## Terms

Results are computed locally from published formulas and the CSS and WCAG specifications, provided as is, with no warranty. Rendering depends on browsers, fonts and user settings; accessibility checks cover the stated criteria only and are not a conformance audit.