The design spec

Every surface — studio, CLI, API, and the Claude integration — consumes the same JSON design spec. Learn it once and it works everywhere.

Shape

{
  "specVersion": 1,
  "icon":   { /* a scene */ },
  "splash": { /* a scene */ },
  "targets": "all"            // or an array of target ids
}

A spec must include icon, splash, or both. A scene is one design:

{
  "background": {
    "type": "gradient",                 // "gradient" | "solid"
    "direction": "to bottom right",     // see directions below
    "stops": [                          // 2–4 stops
      { "color": "#6366f1", "pos": 0 },
      { "color": "#a855f7", "pos": 100 }
    ],
    "solid": "#6366f1"                  // used when type = "solid"
  },
  "logo": {
    "src": "./logo.svg",                // path, data: URL, or https URL
    "size": 30,                          // % of canvas width
    "x": 50, "y": 38,                    // % position (center)
    "opacity": 100
  },
  "text": {
    "show": true,
    "value": "Acme",
    "fontFamily": "Poppins",            // see fonts below
    "weight": 700,                       // 400 | 600 | 700 | 800
    "color": "#ffffff",
    "size": 7,                           // % of canvas width
    "letterSpacing": 0,                  // % of font size
    "x": 50, "y": 68, "opacity": 100
  },
  "tagline": { "show": false, "value": "", "color": "#e0e0ff", "size": 3, "y": 76 }
}

All positions and sizes are canvas-relative percentages, so one scene scales cleanly to every target resolution.

Gradient directions

to bottom, to top, to right, to left, to bottom right, to top right, radial.

Fonts

Montserrat, Raleway, Oswald, Playfair Display, Bebas Neue, Nunito, DM Sans, Poppins.

Targets

"all" renders every size for the mode, or pass an array of target ids:

Splash: ios-portrait, android-portrait, square, ipad
Icon: ios-app-store, ios-3x, ios-2x, android-play-store, android-xxxhdpi, android-xxhdpi, favicon-large, favicon-medium, favicon-tiny