Layers

Shape Layers

Shape layers render 2D vector shapes with fill and stroke styling. All shapes share common styling properties and support transforms.

Shape Types

rectangle

Rectangle

Rectangle with optional corner radius

ellipse

Ellipse

Ellipse or circle (equal radiusX/Y)

polygon

Polygon

Regular polygon with N sides

star

Star

Star with configurable points

line

Line

Simple line between two points

Shared Style Properties

All shape layers (except line) share these styling properties in the style object:

Property	Type	Default	Description
`fill`	object	{ type: "solid"\|"linear"\|"radial", ... }	Fill object — determines the fill type. `{ type: "solid", color, opacity }` for solid fills, or a gradient object (see Gradient Fills)
`fillType`	string	"solid"	"solid" \| "none". Legacy field — always keep "solid" for filled shapes (even gradient fills). The gradient type is set via `fill.type`
`fillColor`	string	#3b82f6	Fill color (hex). Used for solid fills; ignored when `fill` is a gradient
`fillOpacity`	number	1	Fill opacity (0-1). Used for solid fills; ignored when `fill` is a gradient
`strokeColor`	string	#000000	Stroke color (hex)
`strokeWidth`	number	0	Stroke width in pixels
`strokeOpacity`	number	1	Stroke opacity (0-1)
`strokeCap`	string	"round"	"butt" \| "round" \| "square"
`strokeJoin`	string	"round"	"miter" \| "round" \| "bevel"

Rectangle

Rectangle with optional corner radius for rounded corners.

rectangle.json

{
  "type": "rectangle",
  "id": "rect-1",
  "name": "Card Background",
  "visible": true,
  "locked": false,
  "shapeWidth": 0.4,
  "shapeHeight": 0.3,
  "cornerRadius": 0.02,
  "style": {
    "fill": {
      "type": "solid",
      "color": "#3b82f6",
      "opacity": 1
    },
    "fillType": "solid",
    "fillColor": "#3b82f6",
    "fillOpacity": 1,
    "strokeColor": "#000000",
    "strokeWidth": 0,
    "strokeOpacity": 1
  },
  "transform": { ... }
}

Property	Type	Description
`shapeWidth`	number	Normalized width (0-1 relative to artboard)
`shapeHeight`	number	Normalized height (0-1 relative to artboard)
`cornerRadius`	number	Corner radius in normalized units

Ellipse

Ellipse or circle. Set radiusX equal to radiusY for a perfect circle.

ellipse.json

{
  "type": "ellipse",
  "id": "ellipse-1",
  "name": "Circle",
  "visible": true,
  "locked": false,
  "radiusX": 0.15,
  "radiusY": 0.15,
  "style": {
    "fill": {
      "type": "solid",
      "color": "#ef4444",
      "opacity": 1
    },
    "fillType": "solid",
    "fillColor": "#ef4444",
    "fillOpacity": 1,
    "strokeColor": "#000000",
    "strokeWidth": 2,
    "strokeOpacity": 1
  },
  "transform": { ... }
}

Property	Type	Description
`radiusX`	number	Horizontal radius (normalized)
`radiusY`	number	Vertical radius (normalized)

Polygon

Regular polygon with configurable number of sides. 3 sides = triangle, 6 sides = hexagon, etc.

polygon.json

{
  "type": "polygon",
  "id": "polygon-1",
  "name": "Hexagon",
  "visible": true,
  "locked": false,
  "radius": 0.15,
  "sides": 6,
  "cornerRadius": 0,
  "style": { ... },
  "transform": { ... }
}

Property	Type	Description
`radius`	number	Circumscribed circle radius (normalized)
`sides`	number	Number of sides (3+)
`cornerRadius`	number	Corner rounding

Star

Star shape with configurable points and inner radius ratio.

star.json

{
  "type": "star",
  "id": "star-1",
  "name": "Star",
  "visible": true,
  "locked": false,
  "outerRadius": 0.15,
  "innerRadiusRatio": 0.5,
  "points": 5,
  "cornerRadius": 0,
  "style": { ... },
  "transform": { ... }
}

Property	Type	Description
`outerRadius`	number	Outer points radius (normalized)
`innerRadiusRatio`	number	Inner radius as ratio of outer (0-1)
`points`	number	Number of star points
`cornerRadius`	number	Corner rounding

Line

Simple line from point A to point B. Lines have stroke properties only (no fill).

line.json

{
  "type": "line",
  "id": "line-1",
  "name": "Divider",
  "visible": true,
  "locked": false,
  "startX": -0.3,
  "startY": 0,
  "endX": 0.3,
  "endY": 0,
  "style": {
    "strokeColor": "#ffffff",
    "strokeWidth": 2,
    "strokeOpacity": 1,
    "strokeCap": "round"
  },
  "transform": { ... }
}

Property	Type	Description
`startX`	number	Start X position (normalized)
`startY`	number	Start Y position (normalized)
`endX`	number	End X position (normalized)
`endY`	number	End Y position (normalized)

Gradient Fills

All shapes (except line) support gradient fills via the style.fill object. Set fill.type to "linear" or "radial" instead of "solid". Keep fillType as "solid" — it is a legacy field that only controls whether the shape has a fill at all ("solid" = visible, "none" = hidden). The fillColor and fillOpacity fields are ignored when a gradient fill object is present.

Linear Gradient

Specify an angle (degrees) and an array of color stops (2-8 items).

linear-gradient.json

{
  "type": "rectangle",
  "name": "Gradient Card",
  "shapeWidth": 0.4,
  "shapeHeight": 0.3,
  "cornerRadius": 0.02,
  "style": {
    "fill": {
      "type": "linear",
      "angle": 135,
      "stops": [
        { "color": "#7c3aed", "opacity": 1, "position": 0 },
        { "color": "#22d3ee", "opacity": 1, "position": 1 }
      ]
    },
    "fillType": "solid",
    "fillColor": "#7c3aed",
    "fillOpacity": 1,
    "strokeColor": "#000000",
    "strokeWidth": 0,
    "strokeOpacity": 1
  }
}

Property	Type	Description
`fill.type`	"linear"	Linear gradient fill
`fill.angle`	number	Gradient angle in degrees (default 135)
`fill.stops`	array	Array of color stops (2-8 items)
`stops[].color`	string	Stop color in hex
`stops[].opacity`	number	Stop opacity (0-1)
`stops[].position`	number	Stop position along gradient (0-1)

Radial Gradient

Specify a center point, radius, and color stops.

radial-gradient.json

{
  "type": "ellipse",
  "name": "Radial Glow",
  "radiusX": 0.2,
  "radiusY": 0.2,
  "style": {
    "fill": {
      "type": "radial",
      "center": { "x": 0.5, "y": 0.5 },
      "radius": 0.8,
      "stops": [
        { "color": "#a78bfa", "opacity": 1, "position": 0 },
        { "color": "#0f172a", "opacity": 1, "position": 1 }
      ]
    },
    "fillType": "solid",
    "fillColor": "#a78bfa",
    "fillOpacity": 1,
    "strokeColor": "#000000",
    "strokeWidth": 0,
    "strokeOpacity": 1
  }
}

Property	Type	Description
`fill.type`	"radial"	Radial gradient fill
`fill.center`	{ x, y }	Gradient center (0-1 each axis, default 0.5/0.5)
`fill.radius`	number	Gradient radius scale (0.05-2, default 0.8)
`fill.stops`	array	Array of color stops (same format as linear)