Saliency / importance

See the attention order before the browser does.

Feed a DesignDocument into the saliency engine and inspect the ranked attention trace, focus regions, and runtime comparison without leaving the page.

Current leader headline at 24% dk saliency --input design.json --importance heuristic

Importance mode

Attention map

880 x 560 frame

heuristic

eyebrow 17%

headline 24%

body 20%

cta 21%

stat 18%

Top element headline

Focus regions 2

Elements 5

Ranked trace

Why each object wins attention.

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%

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
    }
  ]
}