{
  "version": 1,
  "width": 720,
  "height": 400,
  "title": "Layered stack",
  "description": "Explain which layer owns presentation, business rules, and storage. All values are illustrative example data.",
  "elements": [
    {
      "type": "text",
      "x": 36,
      "y": 39,
      "text": "Application layers",
      "size": 17,
      "fill": "ink",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 36,
      "y": 62,
      "text": "Each layer has one responsibility",
      "size": 11,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "box",
      "x": 100,
      "y": 91,
      "w": 520,
      "h": 49,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 122,
      "y": 121,
      "text": "Presentation",
      "size": 15,
      "fill": "ink",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 598,
      "y": 121,
      "text": "React · HTTP",
      "size": 12,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "box",
      "x": 100,
      "y": 156,
      "w": 520,
      "h": 49,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 122,
      "y": 186,
      "text": "Application",
      "size": 15,
      "fill": "ink",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 598,
      "y": 186,
      "text": "Use cases · policies",
      "size": 12,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "box",
      "x": 100,
      "y": 221,
      "w": 520,
      "h": 49,
      "fill": "soft",
      "stroke": "accent",
      "dashed": false
    },
    {
      "type": "text",
      "x": 122,
      "y": 251,
      "text": "Domain",
      "size": 15,
      "fill": "ink",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 598,
      "y": 251,
      "text": "Entities · invariants",
      "size": 12,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "box",
      "x": 100,
      "y": 286,
      "w": 520,
      "h": 49,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 122,
      "y": 316,
      "text": "Infrastructure",
      "size": 15,
      "fill": "ink",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 598,
      "y": 316,
      "text": "Postgres · S3",
      "size": 12,
      "fill": "muted",
      "align": "end",
      "mono": true
    }
  ]
}