Composition analysis

Variant

Engine

Importance mode

hero

body

aside

Total 65

Balance 94

Symmetry 71

Alignment 33

Rhythm 61

Density 80

Simplicity 50

Order 65

Design document JSON

{
  "frame": {
    "width": 360,
    "height": 320
  },
  "background": {
    "dominantColor": "#fff7eb",
    "subjectRegion": {
      "x": 204,
      "y": 20,
      "width": 124,
      "height": 172
    }
  },
  "elements": [
    {
      "id": "title",
      "kind": "text",
      "role": "title",
      "x": 28,
      "y": 30,
      "width": 176,
      "height": 82,
      "color": "#111827",
      "importance": 0.96
    },
    {
      "id": "body",
      "kind": "text",
      "role": "body",
      "x": 28,
      "y": 130,
      "width": 172,
      "height": 124,
      "color": "#334155",
      "importance": 0.68
    },
    {
      "id": "caption",
      "kind": "text",
      "role": "caption",
      "x": 226,
      "y": 54,
      "width": 96,
      "height": 54,
      "color": "#7c2d12",
      "importance": 0.38
    },
    {
      "id": "cta",
      "kind": "shape",
      "role": "cta",
      "x": 220,
      "y": 214,
      "width": 104,
      "height": 56,
      "background": "#f59e0b",
      "color": "#111827",
      "importance": 0.82
    }
  ]
}

title 28%

body 25%

caption 21%

cta 25%

Advanced score 69

Weighted balance 0.563

Hierarchy 0.931

Saliency respect 0.788

title role:title · area:0.354 · contrast:0.78 · spatial:0.775

28%

body role:body · area:0.43 · contrast:0.78 · spatial:0.856

25%

cta role:cta · area:0.225 · contrast:0.78 · spatial:0.744

25%

caption role:caption · area:0.212 · contrast:0.78 · spatial:0.746 · edge-density:0.88

21%

Local heuristic estimates Analysis method: Heuristic