Layout

How the backend dresses a widget: margins, padding, corners, backgrounds, gradients, borders and width.

Widgets never style their own containers. The backend sends a layout object and the renderer applies it uniformly, which is what keeps a server driven app visually consistent and instantly restylable.

The chrome object#

{
  "layout": {
    "margin":  { "top": 0, "left": 16, "right": 16, "bottom": 12 },
    "padding": { "top": 12, "left": 12, "right": 12, "bottom": 12 },
    "corner_radius": 12,
    "background": { "hex": "#FFFFFF", "dark_hex": "#1C1C1E" },
    "gradient": { "colors": [{ "hex": "#4F8CFF" }, { "hex": "#6CB8FF" }], "angle": 35 },
    "border": { "width": 1, "color": "#EAEAEA" },
    "width": "fill"
  }
}

Application order#

Chrome is applied inside out, always in the same order:

1. Padding between the widget's content and its background edge.
2. Background and gradient fill. A gradient paints over the background color when both are present.
3. Corner clipping, uniform or per corner.
4. Border, solid or dashed.
5. Margin outside everything.

Because the order is fixed, the same JSON renders identically everywhere: pages, sheets, carousels and nested containers.

Corner radius#

Send a bare number to round every corner, or an object to control each one:

{ "corner_radius": { "top_left": 16, "top_right": 16, "bottom_left": 0, "bottom_right": 0 } }

Width#

width decides how much horizontal space a widget claims:

Dashed borders#

Add dash_width and dash_gap to a border for dashed strokes:

{ "border": { "width": 1, "color": "#888888", "dash_width": 5, "dash_gap": 3 } }