Layout constraint solver

Scenario Navigation, work area, and aside

Engine

Container 860px Gap 24px Padding 28px

Align

I / stack pressure

Widths resolve against the container.

The rail keeps exact solver numbers, while the drawing scales to the viewport so the proportion stays inspectable on small screens.

nav 159px -0.63px

main 417px -2.53px

aside 179px -0.84px

Used 860px

Free 0px

Compression 1

nav 120 / 160 / 220 28px → 187.37px

main 280 / 420 / inf 211.37px → 628.84px

aside 140 / 180 / 240 652.84px → 832px

II / document canvas

Saliency-aware layout on a full canvas.

Importance mode

Design brief 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 total 67

Whitespace 0.778

Safe 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 solver read Resolved mode: auto Run the model-assisted layout to compare another importance read.