{
  "id": "frost-index-matrix",
  "name": "Index Matrix",
  "theme": "frost-index",
  "category": "Data & Reports",
  "description": "Thirty rows and nine columns with a frozen first column and a frozen header, built so a person can compare down a column without losing which row they are on.",
  "layout": "A single scrolling frame with both the header row and the name column pinned, an inline sparkline column at a fixed 84px, and no card, panel or gap anywhere in the table.",
  "modules": [
    {
      "key": "bar",
      "name": "Toolbar",
      "html": "\n<header class=\"tb\"><h1>Consumer price index</h1><span class=\"m\">32 markets · monthly · to Aug 2026</span>\n<div class=\"ctl\"><select aria-label=\"Basis\"><option>Year on year</option><option>Month on month</option></select><select aria-label=\"Currency\"><option>Local</option><option>USD</option></select><button type=\"button\">Export</button></div></header>"
    },
    {
      "key": "table",
      "name": "Matrix",
      "html": "\n<div class=\"fr\"><table>\n  <thead><tr><th class=\"nm\">Market</th><th>Aug</th><th>Jul</th><th>Jun</th><th>May</th><th>Apr</th><th>Mar</th><th>12 m</th><th class=\"tr\">Trend</th></tr></thead>\n  <tbody>\n    <tr><th class=\"nm\">United Kingdom</th><td>3.4</td><td>3.6</td><td>3.5</td><td>3.9</td><td>4.1</td><td>4.4</td><td class=\"s\">(1.0)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">United States</th><td>2.9</td><td>3.0</td><td>3.1</td><td>3.2</td><td>3.4</td><td>3.4</td><td class=\"s\">(0.5)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Euro area</th><td>2.2</td><td>2.3</td><td>2.4</td><td>2.4</td><td>2.6</td><td>2.8</td><td class=\"s\">(0.6)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Japan</th><td>2.8</td><td>2.7</td><td>2.6</td><td>2.4</td><td>2.3</td><td>2.1</td><td class=\"u\">0.7</td><td class=\"tr\"><span class=\"sp u\"></span></td></tr>\n    <tr><th class=\"nm\">Canada</th><td>2.4</td><td>2.5</td><td>2.6</td><td>2.8</td><td>2.9</td><td>3.1</td><td class=\"s\">(0.7)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Australia</th><td>3.1</td><td>3.2</td><td>3.4</td><td>3.6</td><td>3.7</td><td>3.8</td><td class=\"s\">(0.7)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Norway</th><td>2.6</td><td>2.6</td><td>2.8</td><td>3.0</td><td>3.2</td><td>3.3</td><td class=\"s\">(0.7)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Poland</th><td>4.2</td><td>4.4</td><td>4.6</td><td>4.9</td><td>5.1</td><td>5.4</td><td class=\"s\">(1.2)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Türkiye</th><td>31.8</td><td>33.1</td><td>35.0</td><td>37.4</td><td>39.9</td><td>42.6</td><td class=\"s\">(10.8)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Switzerland</th><td>0.9</td><td>0.9</td><td>1.0</td><td>1.1</td><td>1.1</td><td>1.2</td><td class=\"s\">(0.3)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n  </tbody>\n</table></div>"
    },
    {
      "key": "foot",
      "name": "Source note",
      "html": "\n<footer class=\"ft\"><span class=\"m\">Source: national statistical offices, harmonised where published. Figures are percentage change on the same month a year earlier. Parentheses denote a fall.</span><span class=\"m\">Revised 2 Sep 2026, 09:00 UTC</span></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "frost-index-matrix",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:53:43+09:00",
    "updatedAt": "2026-09-01T19:53:43+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/frost-index-matrix.json",
  "structure": "A single scrolling frame with both the header row and the name column pinned, an inline sparkline column at a fixed 84px, and no card, panel or gap anywhere in the table.",
  "html": "<div class=\"dz dz-frost-index-matrix\" data-design=\"frost-index-matrix\" data-theme=\"frost-index\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Toolbar\">\n<header class=\"tb\"><h1>Consumer price index</h1><span class=\"m\">32 markets · monthly · to Aug 2026</span>\n<div class=\"ctl\"><select aria-label=\"Basis\"><option>Year on year</option><option>Month on month</option></select><select aria-label=\"Currency\"><option>Local</option><option>USD</option></select><button type=\"button\">Export</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Matrix\">\n<div class=\"fr\"><table>\n  <thead><tr><th class=\"nm\">Market</th><th>Aug</th><th>Jul</th><th>Jun</th><th>May</th><th>Apr</th><th>Mar</th><th>12 m</th><th class=\"tr\">Trend</th></tr></thead>\n  <tbody>\n    <tr><th class=\"nm\">United Kingdom</th><td>3.4</td><td>3.6</td><td>3.5</td><td>3.9</td><td>4.1</td><td>4.4</td><td class=\"s\">(1.0)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">United States</th><td>2.9</td><td>3.0</td><td>3.1</td><td>3.2</td><td>3.4</td><td>3.4</td><td class=\"s\">(0.5)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Euro area</th><td>2.2</td><td>2.3</td><td>2.4</td><td>2.4</td><td>2.6</td><td>2.8</td><td class=\"s\">(0.6)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Japan</th><td>2.8</td><td>2.7</td><td>2.6</td><td>2.4</td><td>2.3</td><td>2.1</td><td class=\"u\">0.7</td><td class=\"tr\"><span class=\"sp u\"></span></td></tr>\n    <tr><th class=\"nm\">Canada</th><td>2.4</td><td>2.5</td><td>2.6</td><td>2.8</td><td>2.9</td><td>3.1</td><td class=\"s\">(0.7)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Australia</th><td>3.1</td><td>3.2</td><td>3.4</td><td>3.6</td><td>3.7</td><td>3.8</td><td class=\"s\">(0.7)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Norway</th><td>2.6</td><td>2.6</td><td>2.8</td><td>3.0</td><td>3.2</td><td>3.3</td><td class=\"s\">(0.7)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Poland</th><td>4.2</td><td>4.4</td><td>4.6</td><td>4.9</td><td>5.1</td><td>5.4</td><td class=\"s\">(1.2)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Türkiye</th><td>31.8</td><td>33.1</td><td>35.0</td><td>37.4</td><td>39.9</td><td>42.6</td><td class=\"s\">(10.8)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n    <tr><th class=\"nm\">Switzerland</th><td>0.9</td><td>0.9</td><td>1.0</td><td>1.1</td><td>1.1</td><td>1.2</td><td class=\"s\">(0.3)</td><td class=\"tr\"><span class=\"sp d\"></span></td></tr>\n  </tbody>\n</table></div></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Source note\">\n<footer class=\"ft\"><span class=\"m\">Source: national statistical offices, harmonised where published. Figures are percentage change on the same month a year earlier. Parentheses denote a fall.</span><span class=\"m\">Revised 2 Sep 2026, 09:00 UTC</span></footer></section>\n</div>",
  "css": "\n.dz-frost-index-matrix { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 22px 18px; }\n.dz-frost-index-matrix .tb { display: flex; align-items: baseline; gap: 16px; padding: 18px 0 14px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-matrix .tb h1 { font-family: var(--pv-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 0; }\n.dz-frost-index-matrix .m { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-frost-index-matrix .ctl { display: flex; gap: 8px; margin-left: auto; }\n.dz-frost-index-matrix .ctl select, .dz-frost-index-matrix .ctl button { font: inherit; font-size: 12px; background: var(--card); color: var(--foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 6px 10px; cursor: pointer; }\n.dz-frost-index-matrix .ctl button { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-frost-index-matrix .fr { overflow: auto; max-height: 400px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); }\n.dz-frost-index-matrix table { width: 100%; border-collapse: separate; border-spacing: 0; }\n.dz-frost-index-matrix thead th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); background: var(--card); text-align: right; padding: 9px 12px; position: sticky; top: 0; z-index: 2; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-matrix thead th.nm { text-align: left; left: 0; z-index: 3; }\n.dz-frost-index-matrix tbody th.nm { position: sticky; left: 0; background: var(--background); text-align: left; font-weight: 500; font-size: 13px; padding: 0 12px; height: 34px; border-bottom: var(--pv-bw) solid var(--border); border-right: var(--pv-bw) solid var(--border); white-space: nowrap; }\n.dz-frost-index-matrix td { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1, \"zero\" 1; text-align: right; font-size: 13px; padding: 0 12px; height: 34px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-matrix tbody tr:hover th.nm, .dz-frost-index-matrix tbody tr:hover td { background: color-mix(in srgb, var(--primary) 8%, var(--background)); }\n.dz-frost-index-matrix .u { color: var(--destructive); } .dz-frost-index-matrix .s { color: var(--primary); }\n.dz-frost-index-matrix .tr { width: 84px; }\n.dz-frost-index-matrix .sp { display: inline-block; width: 68px; height: 12px; border-radius: 1px; }\n.dz-frost-index-matrix .sp.d { background: linear-gradient(105deg, color-mix(in srgb, var(--primary) 70%, transparent), color-mix(in srgb, var(--primary) 12%, transparent)); }\n.dz-frost-index-matrix .sp.u { background: linear-gradient(75deg, color-mix(in srgb, var(--destructive) 12%, transparent), color-mix(in srgb, var(--destructive) 70%, transparent)); }\n.dz-frost-index-matrix .ft { display: flex; justify-content: space-between; gap: 20px; padding-top: 12px; }\n@media (prefers-reduced-motion: reduce) { .dz-frost-index-matrix *, .dz-frost-index-matrix *::before, .dz-frost-index-matrix *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/frost-index.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}