Layout constraints

Scenario

Engine

Container 860 px Gap 24 px Padding 28 px

Alignment

nav 159 px -0.63 px

main 417 px -2.53 px

aside 179 px -0.84 px

Used width 860 px

Remaining width 0 px

Compression 1

Element Minimum / preferred / maximum (px) Start / end

nav 120 / 160 / 220 28 px → 187.37 px

main 280 / 420 / Unbounded 211.37 px → 628.84 px

aside 140 / 180 / 240 652.84 px → 832 px

Document layout

Importance mode

Design document JSON

{
  "frame": {
    "width": 960,
    "height": 620,
    "padding": 32,
    "gap": 20,
    "columns": 12,
    "mode": "app-shell"
  },
  "background": {
    "dominantColor": "#f3efe7",
    "subjectRegion": {
      "x": 556,
      "y": 52,
      "width": 252,
      "height": 292
    },
    "safeRegions": [
      {
        "x": 48,
        "y": 380,
        "width": 864,
        "height": 168
      }
    ]
  },
  "elements": [
    {
      "id": "eyebrow",
      "kind": "text",
      "role": "eyebrow",
      "x": 72,
      "y": 76,
      "width": 124,
      "height": 28,
      "color": "#3f3d56",
      "importance": 0.58
    },
    {
      "id": "hero",
      "kind": "text",
      "role": "title",
      "x": 72,
      "y": 118,
      "width": 404,
      "height": 138,
      "color": "#151321",
      "importance": 0.96
    },
    {
      "id": "body",
      "kind": "text",
      "role": "body",
      "x": 72,
      "y": 292,
      "width": 344,
      "height": 116,
      "color": "#34314a",
      "importance": 0.7
    },
    {
      "id": "cta",
      "kind": "shape",
      "role": "cta",
      "x": 72,
      "y": 440,
      "width": 178,
      "height": 56,
      "background": "#295dff",
      "color": "#ffffff",
      "importance": 0.88
    },
    {
      "id": "stat",
      "kind": "group",
      "role": "data",
      "x": 420,
      "y": 424,
      "width": 206,
      "height": 112,
      "background": "#fffaf0",
      "color": "#23203a",
      "importance": 0.62
    }
  ]
}

subject

hero 24%

cta 21%

body 20%

eyebrow 17%

stat 19%

Layout score 67

Whitespace 0.778

Safe-region penalty 42672

Composition 71

hero role:title · area:0.306 · contrast:0.78 · spatial:0.792

24%

cta role:cta · area:0.129 · contrast:0.78 · spatial:0.698

21%

body role:body · area:0.259 · contrast:0.78 · spatial:0.825

20%

stat role:data · area:0.197 · contrast:0.78 · spatial:0.865

19%

eyebrow role:eyebrow · area:0.076 · contrast:0.78 · spatial:0.642

17%

Local heuristic estimates Analysis method: Heuristic