dkcli — Mathematical Design Tools

Importance mode

Runtime

DesignDocument JSON

{
  "frame": {
    "width": 880,
    "height": 560,
    "padding": 28,
    "gap": 18,
    "columns": 12
  },
  "background": {
    "dominantColor": "#f7f2ea",
    "subjectRegion": {
      "x": 528,
      "y": 64,
      "width": 220,
      "height": 256
    },
    "safeRegions": [
      {
        "x": 52,
        "y": 388,
        "width": 776,
        "height": 120
      }
    ]
  },
  "elements": [
    {
      "id": "eyebrow",
      "kind": "text",
      "role": "eyebrow",
      "x": 68,
      "y": 78,
      "width": 116,
      "height": 24,
      "color": "#6b7280",
      "importance": 0.5
    },
    {
      "id": "headline",
      "kind": "text",
      "role": "title",
      "x": 68,
      "y": 116,
      "width": 372,
      "height": 128,
      "color": "#111827",
      "importance": 0.98
    },
    {
      "id": "body",
      "kind": "text",
      "role": "body",
      "x": 68,
      "y": 272,
      "width": 340,
      "height": 108,
      "color": "#334155",
      "importance": 0.72
    },
    {
      "id": "cta",
      "kind": "shape",
      "role": "cta",
      "x": 68,
      "y": 424,
      "width": 182,
      "height": 54,
      "background": "#295dff",
      "color": "#ffffff",
      "importance": 0.86
    },
    {
      "id": "stat",
      "kind": "group",
      "role": "data",
      "x": 430,
      "y": 404,
      "width": 180,
      "height": 94,
      "background": "#fffaf0",
      "color": "#111827",
      "importance": 0.6
    }
  ]
}

eyebrow 17%

headline 24%

body 20%

cta 21%

stat 18%

Top element headline

Focus regions 2

Mode heuristic

headline role:title · area:0.311 · contrast:0.78 · spatial:0.801 align-left:eyebrow · align-left:body · align-left:cta

24%

cta role:cta · area:0.141 · contrast:0.78 · spatial:0.686 align-left:eyebrow · align-left:headline · align-left:body

21%

body role:body · area:0.273 · contrast:0.78 · spatial:0.828 align-left:eyebrow · align-left:headline · align-left:cta

20%

stat role:data · area:0.185 · contrast:0.78 · spatial:0.826

18%

eyebrow role:eyebrow · area:0.075 · contrast:0.78 · spatial:0.65 align-left:headline · align-left:body · align-left:cta

17%