{
  "id": "frost-index-desk",
  "name": "Market Desk",
  "theme": "frost-index",
  "category": "Dashboard",
  "description": "A trading-desk layout where five monochrome series share one axis and the legend is the only place the series are named, because they are all the same measurement.",
  "layout": "A four-quadrant grid at equal weight with hairline dividers and no gaps, so the whole screen reads as one instrument rather than as four cards.",
  "modules": [
    {
      "key": "strip",
      "name": "Ticker strip",
      "html": "\n<header class=\"tk\">\n  <span><b>FTSE 100</b><i>8,412.40</i><em class=\"d\">(0.42%)</em></span>\n  <span><b>S&amp;P 500</b><i>5,982.11</i><em class=\"u\">0.18%</em></span>\n  <span><b>EUR/USD</b><i>1.0914</i><em class=\"d\">(0.09%)</em></span>\n  <span><b>Brent</b><i>78.22</i><em class=\"u\">1.24%</em></span>\n  <span><b>UK 10y</b><i>4.118</i><em class=\"d\">(0.03)</em></span>\n  <span class=\"tm\">14:02:11 UTC</span>\n</header>"
    },
    {
      "key": "chart",
      "name": "Series chart",
      "html": "\n<section class=\"q ch\"><header><span class=\"k\">Yield curve · five tenors</span><span class=\"m\">bp, month on month</span></header>\n<svg viewBox=\"0 0 460 170\" aria-label=\"Five tenors, monochrome\">\n  <polyline class=\"l1\" points=\"10,120 90,112 170,101 250,92 330,88 410,84\"/>\n  <polyline class=\"l2\" points=\"10,128 90,120 170,112 250,106 330,102 410,99\"/>\n  <polyline class=\"l3\" points=\"10,110 90,100 170,88 250,80 330,74 410,70\"/>\n  <polyline class=\"l4\" points=\"10,138 90,134 170,128 250,124 330,122 410,120\"/>\n  <polyline class=\"l5\" points=\"10,100 90,88 170,74 250,66 330,60 410,56\"/>\n</svg>\n<footer class=\"lg\"><span><i class=\"s1\"></i>2y</span><span><i class=\"s2\"></i>5y</span><span><i class=\"s3\"></i>10y</span><span><i class=\"s4\"></i>20y</span><span><i class=\"s5\"></i>30y</span></footer></section>"
    },
    {
      "key": "movers",
      "name": "Movers",
      "html": "\n<section class=\"q mv\"><header><span class=\"k\">Largest moves</span><span class=\"m\">session</span></header>\n<table><tbody>\n  <tr><td>Ashmore Grp</td><td class=\"n u\">4.81</td><td class=\"n\">1,204k</td></tr>\n  <tr><td>Croda Intl</td><td class=\"n u\">3.92</td><td class=\"n\">882k</td></tr>\n  <tr><td>Segro</td><td class=\"n u\">2.14</td><td class=\"n\">2,110k</td></tr>\n  <tr><td>Ocado Grp</td><td class=\"n s\">(3.08)</td><td class=\"n\">4,660k</td></tr>\n  <tr><td>Fresnillo</td><td class=\"n s\">(4.42)</td><td class=\"n\">1,018k</td></tr>\n  <tr><td>Endeavour Mng</td><td class=\"n s\">(5.17)</td><td class=\"n\">742k</td></tr>\n</tbody></table></section>"
    },
    {
      "key": "depth",
      "name": "Order depth",
      "html": "\n<section class=\"q dp\"><header><span class=\"k\">Depth · FTSE future</span><span class=\"m\">top of book</span></header>\n<div class=\"bk\">\n  <ol class=\"ask\"><li><span class=\"n\">8,414.5</span><i style=\"--w:22%\"></i><span class=\"n\">140</span></li><li><span class=\"n\">8,414.0</span><i style=\"--w:54%\"></i><span class=\"n\">341</span></li><li><span class=\"n\">8,413.5</span><i style=\"--w:38%\"></i><span class=\"n\">240</span></li></ol>\n  <div class=\"mid\"><span class=\"n\">8,412.40</span><span class=\"m\">last</span></div>\n  <ol class=\"bid\"><li><span class=\"n\">8,412.0</span><i style=\"--w:61%\"></i><span class=\"n\">388</span></li><li><span class=\"n\">8,411.5</span><i style=\"--w:44%\"></i><span class=\"n\">280</span></li><li><span class=\"n\">8,411.0</span><i style=\"--w:19%\"></i><span class=\"n\">120</span></li></ol>\n</div></section>"
    },
    {
      "key": "calendar",
      "name": "Calendar",
      "html": "\n<section class=\"q cl\"><header><span class=\"k\">Today</span><span class=\"m\">releases</span></header>\n<ol>\n  <li><span class=\"tm\">08:00</span><b>DE ifo business climate</b><span class=\"m\">88.4 exp · 87.9 prev</span></li>\n  <li class=\"now\"><span class=\"tm\">13:30</span><b>US initial claims</b><span class=\"m\">214k exp · 219k prev</span></li>\n  <li><span class=\"tm\">15:00</span><b>US existing home sales</b><span class=\"m\">4.11m exp</span></li>\n  <li><span class=\"tm\">19:00</span><b>FOMC minutes</b><span class=\"m\">July meeting</span></li>\n</ol></section>"
    }
  ],
  "moduleCount": 5,
  "reorderable": false,
  "meta": {
    "id": "frost-index-desk",
    "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-desk.json",
  "structure": "A four-quadrant grid at equal weight with hairline dividers and no gaps, so the whole screen reads as one instrument rather than as four cards.",
  "html": "<div class=\"dz dz-frost-index-desk\" data-design=\"frost-index-desk\" data-theme=\"frost-index\">\n<section class=\"dz-mod\" data-mod=\"strip\" aria-label=\"Ticker strip\">\n<header class=\"tk\">\n  <span><b>FTSE 100</b><i>8,412.40</i><em class=\"d\">(0.42%)</em></span>\n  <span><b>S&amp;P 500</b><i>5,982.11</i><em class=\"u\">0.18%</em></span>\n  <span><b>EUR/USD</b><i>1.0914</i><em class=\"d\">(0.09%)</em></span>\n  <span><b>Brent</b><i>78.22</i><em class=\"u\">1.24%</em></span>\n  <span><b>UK 10y</b><i>4.118</i><em class=\"d\">(0.03)</em></span>\n  <span class=\"tm\">14:02:11 UTC</span>\n</header></section><section class=\"dz-mod\" data-mod=\"chart\" aria-label=\"Series chart\">\n<section class=\"q ch\"><header><span class=\"k\">Yield curve · five tenors</span><span class=\"m\">bp, month on month</span></header>\n<svg viewBox=\"0 0 460 170\" aria-label=\"Five tenors, monochrome\">\n  <polyline class=\"l1\" points=\"10,120 90,112 170,101 250,92 330,88 410,84\"/>\n  <polyline class=\"l2\" points=\"10,128 90,120 170,112 250,106 330,102 410,99\"/>\n  <polyline class=\"l3\" points=\"10,110 90,100 170,88 250,80 330,74 410,70\"/>\n  <polyline class=\"l4\" points=\"10,138 90,134 170,128 250,124 330,122 410,120\"/>\n  <polyline class=\"l5\" points=\"10,100 90,88 170,74 250,66 330,60 410,56\"/>\n</svg>\n<footer class=\"lg\"><span><i class=\"s1\"></i>2y</span><span><i class=\"s2\"></i>5y</span><span><i class=\"s3\"></i>10y</span><span><i class=\"s4\"></i>20y</span><span><i class=\"s5\"></i>30y</span></footer></section></section><section class=\"dz-mod\" data-mod=\"movers\" aria-label=\"Movers\">\n<section class=\"q mv\"><header><span class=\"k\">Largest moves</span><span class=\"m\">session</span></header>\n<table><tbody>\n  <tr><td>Ashmore Grp</td><td class=\"n u\">4.81</td><td class=\"n\">1,204k</td></tr>\n  <tr><td>Croda Intl</td><td class=\"n u\">3.92</td><td class=\"n\">882k</td></tr>\n  <tr><td>Segro</td><td class=\"n u\">2.14</td><td class=\"n\">2,110k</td></tr>\n  <tr><td>Ocado Grp</td><td class=\"n s\">(3.08)</td><td class=\"n\">4,660k</td></tr>\n  <tr><td>Fresnillo</td><td class=\"n s\">(4.42)</td><td class=\"n\">1,018k</td></tr>\n  <tr><td>Endeavour Mng</td><td class=\"n s\">(5.17)</td><td class=\"n\">742k</td></tr>\n</tbody></table></section></section><section class=\"dz-mod\" data-mod=\"depth\" aria-label=\"Order depth\">\n<section class=\"q dp\"><header><span class=\"k\">Depth · FTSE future</span><span class=\"m\">top of book</span></header>\n<div class=\"bk\">\n  <ol class=\"ask\"><li><span class=\"n\">8,414.5</span><i style=\"--w:22%\"></i><span class=\"n\">140</span></li><li><span class=\"n\">8,414.0</span><i style=\"--w:54%\"></i><span class=\"n\">341</span></li><li><span class=\"n\">8,413.5</span><i style=\"--w:38%\"></i><span class=\"n\">240</span></li></ol>\n  <div class=\"mid\"><span class=\"n\">8,412.40</span><span class=\"m\">last</span></div>\n  <ol class=\"bid\"><li><span class=\"n\">8,412.0</span><i style=\"--w:61%\"></i><span class=\"n\">388</span></li><li><span class=\"n\">8,411.5</span><i style=\"--w:44%\"></i><span class=\"n\">280</span></li><li><span class=\"n\">8,411.0</span><i style=\"--w:19%\"></i><span class=\"n\">120</span></li></ol>\n</div></section></section><section class=\"dz-mod\" data-mod=\"calendar\" aria-label=\"Calendar\">\n<section class=\"q cl\"><header><span class=\"k\">Today</span><span class=\"m\">releases</span></header>\n<ol>\n  <li><span class=\"tm\">08:00</span><b>DE ifo business climate</b><span class=\"m\">88.4 exp · 87.9 prev</span></li>\n  <li class=\"now\"><span class=\"tm\">13:30</span><b>US initial claims</b><span class=\"m\">214k exp · 219k prev</span></li>\n  <li><span class=\"tm\">15:00</span><b>US existing home sales</b><span class=\"m\">4.11m exp</span></li>\n  <li><span class=\"tm\">19:00</span><b>FOMC minutes</b><span class=\"m\">July meeting</span></li>\n</ol></section></section>\n</div>",
  "css": "\n.dz-frost-index-desk { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 1fr 1fr; }\n.dz-frost-index-desk .tk { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; padding: 10px 20px; border-bottom: var(--pv-bw) solid var(--border); overflow: hidden; }\n.dz-frost-index-desk .tk span { display: inline-flex; align-items: baseline; gap: 8px; }\n.dz-frost-index-desk .tk b { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); letter-spacing: .08em; }\n.dz-frost-index-desk .tk i { font-family: var(--pv-mono); font-size: 14px; font-style: normal; font-feature-settings: \"tnum\" 1; }\n.dz-frost-index-desk .tk em { font-family: var(--pv-mono); font-size: 11.5px; font-style: normal; }\n.dz-frost-index-desk .u { color: var(--destructive); } .dz-frost-index-desk .s { color: var(--primary); } .dz-frost-index-desk .d { color: var(--primary); }\n.dz-frost-index-desk .tm { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-frost-index-desk .tk .tm { margin-left: auto; }\n.dz-frost-index-desk .q { padding: 12px 18px 14px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-desk .q:nth-of-type(odd) { border-right: var(--pv-bw) solid var(--border); }\n.dz-frost-index-desk .q header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; }\n.dz-frost-index-desk .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-frost-index-desk .m { font-size: 11px; color: var(--muted-foreground); }\n.dz-frost-index-desk .ch svg { width: 100%; height: 170px; display: block; }\n.dz-frost-index-desk .ch polyline { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n.dz-frost-index-desk .l1 { stroke: var(--chart-1); } .dz-frost-index-desk .l2 { stroke: var(--chart-2); } .dz-frost-index-desk .l3 { stroke: var(--chart-3); } .dz-frost-index-desk .l4 { stroke: var(--chart-4); } .dz-frost-index-desk .l5 { stroke: var(--chart-5); }\n.dz-frost-index-desk .lg { display: flex; gap: 16px; padding-top: 10px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-frost-index-desk .lg span { display: inline-flex; align-items: center; gap: 6px; }\n.dz-frost-index-desk .lg i { width: 12px; height: 2px; display: block; }\n.dz-frost-index-desk .s1 { background: var(--chart-1) } .dz-frost-index-desk .s2 { background: var(--chart-2) } .dz-frost-index-desk .s3 { background: var(--chart-3) } .dz-frost-index-desk .s4 { background: var(--chart-4) } .dz-frost-index-desk .s5 { background: var(--chart-5) }\n.dz-frost-index-desk .mv table { width: 100%; border-collapse: collapse; }\n.dz-frost-index-desk .mv td { padding: 0 6px; height: 30px; font-size: 12.5px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-desk .n { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1, \"zero\" 1; text-align: right; font-size: 12.5px; }\n.dz-frost-index-desk .bk { display: flex; flex-direction: column; gap: 4px; }\n.dz-frost-index-desk .bk ol { list-style: none; margin: 0; padding: 0; }\n.dz-frost-index-desk .bk li { display: grid; grid-template-columns: 68px minmax(0, 1fr) 48px; align-items: center; gap: 8px; height: 24px; }\n.dz-frost-index-desk .bk i { height: 10px; width: var(--w); border-radius: 1px; display: block; }\n.dz-frost-index-desk .ask i { background: color-mix(in srgb, var(--destructive) 45%, transparent); }\n.dz-frost-index-desk .bid i { background: color-mix(in srgb, var(--primary) 45%, transparent); }\n.dz-frost-index-desk .mid { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: var(--pv-bw) solid var(--border); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-desk .mid .n { font-size: 17px; text-align: left; }\n.dz-frost-index-desk .cl ol { list-style: none; margin: 0; padding: 0; }\n.dz-frost-index-desk .cl li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; padding: 7px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-desk .cl .tm { grid-row: 1 / 3; }\n.dz-frost-index-desk .cl b { font-size: 13px; font-weight: 500; }\n.dz-frost-index-desk .now { position: relative; } .dz-frost-index-desk .now::before { content: \"\"; position: absolute; left: -18px; top: 0; bottom: 0; width: 2px; background: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-frost-index-desk *, .dz-frost-index-desk *::before, .dz-frost-index-desk *::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"
}