Design & CSS API

5 endpoints for design & css workflows. Every call requires bearer authentication and uses the standard ToolsOnDuty response envelope.

Try it

Runs a real request from your browser to your own ToolsOnDuty account. Your key is only kept in this page and is never stored.

EndpointAPI key

hex *

POST/v1/design/color-shades1 credit / call

Color shade / tint generator

Generate a 50-900 shade/tint scale (like Tailwind's palette) from a base hex color.

Parameter	Type	Required	Description
hex	string	Yes	Base hex color, e.g. #6495ed.

Request

curl -X POST https://toolsonduty.com/api/v1/design/color-shades \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"hex":"#6495ed"}'

Response

{
  "ok": true,
  "data": {
    "shades": [
      {
        "name": "500",
        "hex": "#185BD2"
      }
    ]
  }
}

POST/v1/design/css-specificity1 credit / call

CSS specificity calculator

Compute the (a,b,c) specificity score of a CSS selector.

Parameter	Type	Required	Description
selector	string	Yes	A CSS selector, e.g. "#id .class[attr]:hover".

Request

curl -X POST https://toolsonduty.com/api/v1/design/css-specificity \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"selector":"#id .class"}'

Response

{
  "ok": true,
  "data": {
    "a": 1,
    "b": 1,
    "c": 0,
    "score": "1,1,0"
  }
}

POST/v1/design/blob-path1 credit / call

SVG blob path generator

Build a smooth closed SVG path (a "blob" shape) from radius factors (0-1) spaced evenly around a circle.

Parameter	Type	Required	Description
radii	string	Yes	Array of 3+ radius factors between 0 and 1, e.g. [0.8,1,0.7,0.9,0.6].
size	number	No	SVG viewport size in pixels. Default: 240.

Request

curl -X POST https://toolsonduty.com/api/v1/design/blob-path \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"radii":[0.8,1,0.7,0.9,0.6]}'

Response

{
  "ok": true,
  "data": {
    "path": "M 120.0 30.0 C ... Z"
  }
}

POST/v1/design/css-clamp1 credit / call

CSS clamp() fluid size calculator

Compute a fluid CSS clamp() expression that scales linearly between a min and max size across a viewport range.

Parameter	Type	Required	Description
minSize	number	Yes	Minimum size in px.
maxSize	number	Yes	Maximum size in px.
minViewport	number	Yes	Minimum viewport width in px.
maxViewport	number	Yes	Maximum viewport width in px.
rootFontSize	number	No	Root font size in px, for rem conversion. Default: 16.

Request

curl -X POST https://toolsonduty.com/api/v1/design/css-clamp \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"minSize":16,"maxSize":32,"minViewport":320,"maxViewport":1280}'

Response

{
  "ok": true,
  "data": {
    "clamp": "clamp(1rem, 0.667rem + 1.667vw, 2rem)"
  }
}

POST/v1/design/bezier-point1 credit / call

Cubic bezier easing sampler

Sample a cubic-bezier(x1,y1,x2,y2) easing curve at t (0-1). Presets: ease, ease-in, ease-out, ease-in-out, linear.

Parameter	Type	Required	Description
x1	number	Yes	First control point x.
y1	number	Yes	First control point y.
x2	number	Yes	Second control point x.
y2	number	Yes	Second control point y.
t	number	Yes	Position along the curve, 0-1.

Request

curl -X POST https://toolsonduty.com/api/v1/design/bezier-point \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"x1":0.25,"y1":0.1,"x2":0.25,"y2":1,"t":0.5}'

Response

{
  "ok": true,
  "data": {
    "x": 0.313,
    "y": 0.538
  }
}