{
  "id": "frost-index-screener",
  "name": "Screener",
  "theme": "frost-index",
  "category": "Search & Browse",
  "description": "A screener whose filters are numeric ranges with live counts, so you can see how many results a criterion costs you before you apply it.",
  "layout": "A 300px filter column of paired min and max inputs with a result count beside each, and a hairline result table that begins at the very top of the page with no header band.",
  "modules": [
    {
      "key": "filters",
      "name": "Numeric filters",
      "html": "\n<aside class=\"fl\"><h2 class=\"k\">Criteria</h2>\n  <div class=\"cr\"><span>Market cap (£m)</span><div class=\"rg\"><input type=\"text\" value=\"500\"><em>to</em><input type=\"text\" value=\"20000\"></div><span class=\"ct\">412 match</span></div>\n  <div class=\"cr\"><span>P/E, trailing</span><div class=\"rg\"><input type=\"text\" value=\"4\"><em>to</em><input type=\"text\" value=\"18\"></div><span class=\"ct\">204 match</span></div>\n  <div class=\"cr\"><span>Dividend yield %</span><div class=\"rg\"><input type=\"text\" value=\"2.0\"><em>to</em><input type=\"text\" value=\"\"></div><span class=\"ct\">118 match</span></div>\n  <div class=\"cr\"><span>Net debt / EBITDA</span><div class=\"rg\"><input type=\"text\" value=\"\"><em>to</em><input type=\"text\" value=\"2.5\"></div><span class=\"ct\">74 match</span></div>\n  <div class=\"cr\"><span>5y revenue CAGR %</span><div class=\"rg\"><input type=\"text\" value=\"3\"><em>to</em><input type=\"text\" value=\"\"></div><span class=\"ct\">31 match</span></div>\n  <button type=\"button\" class=\"ap\">Apply · 31 results</button>\n  <button type=\"button\" class=\"rs\">Reset</button>\n</aside>"
    },
    {
      "key": "results",
      "name": "Results",
      "html": "\n<section class=\"rs2\"><table>\n  <thead><tr><th>Name</th><th>Sector</th><th>Cap £m</th><th>P/E</th><th>Yield</th><th>ND/EBITDA</th><th>CAGR</th></tr></thead>\n  <tbody>\n    <tr><td>Halma</td><td>Industrials</td><td class=\"n\">11,204</td><td class=\"n\">17.2</td><td class=\"n\">2.1</td><td class=\"n\">1.4</td><td class=\"n\">8.4</td></tr>\n    <tr><td>Spirax Group</td><td>Industrials</td><td class=\"n\">6,880</td><td class=\"n\">16.1</td><td class=\"n\">2.4</td><td class=\"n\">1.9</td><td class=\"n\">6.2</td></tr>\n    <tr><td>Diploma</td><td>Distribution</td><td class=\"n\">5,412</td><td class=\"n\">15.8</td><td class=\"n\">2.0</td><td class=\"n\">1.1</td><td class=\"n\">11.0</td></tr>\n    <tr><td>Bunzl</td><td>Distribution</td><td class=\"n\">10,118</td><td class=\"n\">13.4</td><td class=\"n\">2.6</td><td class=\"n\">1.7</td><td class=\"n\">4.8</td></tr>\n    <tr><td>Croda Intl</td><td>Chemicals</td><td class=\"n\">4,902</td><td class=\"n\">14.9</td><td class=\"n\">3.1</td><td class=\"n\">2.2</td><td class=\"n\">3.4</td></tr>\n    <tr><td>Rotork</td><td>Industrials</td><td class=\"n\">2,884</td><td class=\"n\">16.8</td><td class=\"n\">2.2</td><td class=\"n\">0.4</td><td class=\"n\">5.1</td></tr>\n    <tr><td>Genus</td><td>Health</td><td class=\"n\">1,204</td><td class=\"n\">17.9</td><td class=\"n\">2.0</td><td class=\"n\">2.4</td><td class=\"n\">3.9</td></tr>\n    <tr><td>Victrex</td><td>Chemicals</td><td class=\"n\">802</td><td class=\"n\">12.1</td><td class=\"n\">4.2</td><td class=\"n\">0.8</td><td class=\"n\">3.1</td></tr>\n  </tbody>\n</table></section>"
    },
    {
      "key": "saved",
      "name": "Saved screens",
      "html": "\n<footer class=\"sv\"><span class=\"k\">Saved screens</span><div class=\"ch\"><button type=\"button\" class=\"on\">Quality compounders</button><button type=\"button\">Deep value</button><button type=\"button\">Yield &gt; 4%</button><button type=\"button\">Recent downgrades</button></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "frost-index-screener",
    "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-screener.json",
  "structure": "A 300px filter column of paired min and max inputs with a result count beside each, and a hairline result table that begins at the very top of the page with no header band.",
  "html": "<div class=\"dz dz-frost-index-screener\" data-design=\"frost-index-screener\" data-theme=\"frost-index\">\n<section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Numeric filters\">\n<aside class=\"fl\"><h2 class=\"k\">Criteria</h2>\n  <div class=\"cr\"><span>Market cap (£m)</span><div class=\"rg\"><input type=\"text\" value=\"500\"><em>to</em><input type=\"text\" value=\"20000\"></div><span class=\"ct\">412 match</span></div>\n  <div class=\"cr\"><span>P/E, trailing</span><div class=\"rg\"><input type=\"text\" value=\"4\"><em>to</em><input type=\"text\" value=\"18\"></div><span class=\"ct\">204 match</span></div>\n  <div class=\"cr\"><span>Dividend yield %</span><div class=\"rg\"><input type=\"text\" value=\"2.0\"><em>to</em><input type=\"text\" value=\"\"></div><span class=\"ct\">118 match</span></div>\n  <div class=\"cr\"><span>Net debt / EBITDA</span><div class=\"rg\"><input type=\"text\" value=\"\"><em>to</em><input type=\"text\" value=\"2.5\"></div><span class=\"ct\">74 match</span></div>\n  <div class=\"cr\"><span>5y revenue CAGR %</span><div class=\"rg\"><input type=\"text\" value=\"3\"><em>to</em><input type=\"text\" value=\"\"></div><span class=\"ct\">31 match</span></div>\n  <button type=\"button\" class=\"ap\">Apply · 31 results</button>\n  <button type=\"button\" class=\"rs\">Reset</button>\n</aside></section><section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Results\">\n<section class=\"rs2\"><table>\n  <thead><tr><th>Name</th><th>Sector</th><th>Cap £m</th><th>P/E</th><th>Yield</th><th>ND/EBITDA</th><th>CAGR</th></tr></thead>\n  <tbody>\n    <tr><td>Halma</td><td>Industrials</td><td class=\"n\">11,204</td><td class=\"n\">17.2</td><td class=\"n\">2.1</td><td class=\"n\">1.4</td><td class=\"n\">8.4</td></tr>\n    <tr><td>Spirax Group</td><td>Industrials</td><td class=\"n\">6,880</td><td class=\"n\">16.1</td><td class=\"n\">2.4</td><td class=\"n\">1.9</td><td class=\"n\">6.2</td></tr>\n    <tr><td>Diploma</td><td>Distribution</td><td class=\"n\">5,412</td><td class=\"n\">15.8</td><td class=\"n\">2.0</td><td class=\"n\">1.1</td><td class=\"n\">11.0</td></tr>\n    <tr><td>Bunzl</td><td>Distribution</td><td class=\"n\">10,118</td><td class=\"n\">13.4</td><td class=\"n\">2.6</td><td class=\"n\">1.7</td><td class=\"n\">4.8</td></tr>\n    <tr><td>Croda Intl</td><td>Chemicals</td><td class=\"n\">4,902</td><td class=\"n\">14.9</td><td class=\"n\">3.1</td><td class=\"n\">2.2</td><td class=\"n\">3.4</td></tr>\n    <tr><td>Rotork</td><td>Industrials</td><td class=\"n\">2,884</td><td class=\"n\">16.8</td><td class=\"n\">2.2</td><td class=\"n\">0.4</td><td class=\"n\">5.1</td></tr>\n    <tr><td>Genus</td><td>Health</td><td class=\"n\">1,204</td><td class=\"n\">17.9</td><td class=\"n\">2.0</td><td class=\"n\">2.4</td><td class=\"n\">3.9</td></tr>\n    <tr><td>Victrex</td><td>Chemicals</td><td class=\"n\">802</td><td class=\"n\">12.1</td><td class=\"n\">4.2</td><td class=\"n\">0.8</td><td class=\"n\">3.1</td></tr>\n  </tbody>\n</table></section></section><section class=\"dz-mod\" data-mod=\"saved\" aria-label=\"Saved screens\">\n<footer class=\"sv\"><span class=\"k\">Saved screens</span><div class=\"ch\"><button type=\"button\" class=\"on\">Quality compounders</button><button type=\"button\">Deep value</button><button type=\"button\">Yield &gt; 4%</button><button type=\"button\">Recent downgrades</button></div></footer></section>\n</div>",
  "css": "\n.dz-frost-index-screener { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 0; }\n.dz-frost-index-screener .fl { border-right: var(--pv-bw) solid var(--border); padding: 18px 18px 22px; }\n.dz-frost-index-screener .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-frost-index-screener .fl h2 { margin: 0 0 14px; }\n.dz-frost-index-screener .cr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-screener .cr > span:first-child { font-size: 12.5px; }\n.dz-frost-index-screener .ct { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); align-self: center; }\n.dz-frost-index-screener .rg { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }\n.dz-frost-index-screener .rg input { font: inherit; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1, \"zero\" 1; text-align: right; font-size: 12.5px; width: 100%; background: var(--card); color: var(--foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 6px 9px; }\n.dz-frost-index-screener .rg input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }\n.dz-frost-index-screener .rg em { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); font-style: normal; }\n.dz-frost-index-screener .ap { font: inherit; font-size: 12.5px; width: 100%; margin-top: 18px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 10px; cursor: pointer; }\n.dz-frost-index-screener .rs { font: inherit; font-size: 12.5px; width: 100%; margin-top: 8px; background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 8px; cursor: pointer; }\n.dz-frost-index-screener .rs2 { overflow: auto; }\n.dz-frost-index-screener table { width: 100%; border-collapse: collapse; }\n.dz-frost-index-screener th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); text-align: right; padding: 12px 14px; border-bottom: var(--pv-bw) solid var(--border); background: var(--card); position: sticky; top: 0; }\n.dz-frost-index-screener th:first-child, .dz-frost-index-screener th:nth-child(2) { text-align: left; }\n.dz-frost-index-screener td { padding: 0 14px; height: 34px; font-size: 13px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-screener .n { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1, \"zero\" 1; text-align: right; }\n.dz-frost-index-screener tbody tr:hover td { background: color-mix(in srgb, var(--primary) 8%, var(--background)); }\n.dz-frost-index-screener .sv { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-top: var(--pv-bw) solid var(--border); }\n.dz-frost-index-screener .ch { display: flex; gap: 8px; }\n.dz-frost-index-screener .ch button { font: inherit; font-size: 12px; background: var(--card); color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 6px 12px; cursor: pointer; }\n.dz-frost-index-screener .ch .on { border-color: var(--primary); color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-frost-index-screener *, .dz-frost-index-screener *::before, .dz-frost-index-screener *::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"
}