{
  "id": "frost-index-api",
  "name": "API Keys",
  "theme": "frost-index",
  "category": "Settings & Forms",
  "description": "Key management where the rate limits are shown as a used-against-allowed bar per key, so the reason a key is failing is on the same row as the key.",
  "layout": "A dense hairline table of keys with an inline usage bar in the fourth column, and a create form that expands as a row of the same table rather than as a modal.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>API keys</h1><span class=\"m\">Four active · plan allows six</span><button type=\"button\" class=\"nw\">New key</button></header>"
    },
    {
      "key": "table",
      "name": "Key table",
      "html": "\n<table>\n  <thead><tr><th>Label</th><th>Prefix</th><th>Scope</th><th>Usage this hour</th><th>Last used</th><th>Created</th><th></th></tr></thead>\n  <tbody>\n    <tr><td>Production ingest</td><td class=\"mo\">fx_live_8f2c</td><td>read, stream</td><td class=\"us\"><i style=\"--w:82%\"></i><span class=\"n\">8,204 / 10,000</span></td><td class=\"n\">2 min ago</td><td class=\"n\">2025-11-04</td><td class=\"ac\"><button type=\"button\">Rotate</button></td></tr>\n    <tr><td>Research notebook</td><td class=\"mo\">fx_live_1a90</td><td>read</td><td class=\"us\"><i style=\"--w:14%\"></i><span class=\"n\">1,402 / 10,000</span></td><td class=\"n\">18 min ago</td><td class=\"n\">2026-02-19</td><td class=\"ac\"><button type=\"button\">Rotate</button></td></tr>\n    <tr class=\"over\"><td>Backfill job</td><td class=\"mo\">fx_live_c441</td><td>read, history</td><td class=\"us\"><i class=\"hot\" style=\"--w:100%\"></i><span class=\"n\">10,000 / 10,000</span></td><td class=\"n\">now</td><td class=\"n\">2026-08-30</td><td class=\"ac\"><button type=\"button\">Rotate</button></td></tr>\n    <tr><td>Status page</td><td class=\"mo\">fx_pub_77de</td><td>read, public</td><td class=\"us\"><i style=\"--w:3%\"></i><span class=\"n\">304 / 10,000</span></td><td class=\"n\">1 h ago</td><td class=\"n\">2024-06-11</td><td class=\"ac\"><button type=\"button\">Rotate</button></td></tr>\n  </tbody>\n</table>"
    },
    {
      "key": "create",
      "name": "Create row",
      "html": "\n<section class=\"cr\"><span class=\"k\">New key</span>\n<div class=\"rw\">\n  <label><span class=\"k\">Label</span><input type=\"text\" value=\"Vintage comparison\"></label>\n  <label><span class=\"k\">Scope</span><select><option>read</option><option>read, history</option><option>read, stream</option></select></label>\n  <label><span class=\"k\">Rate limit</span><select><option>10,000 / hour</option><option>2,000 / hour</option></select></label>\n  <label><span class=\"k\">Expires</span><input type=\"text\" value=\"2027-09-04\"></label>\n  <button type=\"button\" class=\"go\">Create</button>\n</div>\n<p class=\"warn\">The key is shown once, on creation. We do not store a copy we can show you again.</p></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "frost-index-api",
    "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-api.json",
  "structure": "A dense hairline table of keys with an inline usage bar in the fourth column, and a create form that expands as a row of the same table rather than as a modal.",
  "html": "<div class=\"dz dz-frost-index-api\" data-design=\"frost-index-api\" data-theme=\"frost-index\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>API keys</h1><span class=\"m\">Four active · plan allows six</span><button type=\"button\" class=\"nw\">New key</button></header></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Key table\">\n<table>\n  <thead><tr><th>Label</th><th>Prefix</th><th>Scope</th><th>Usage this hour</th><th>Last used</th><th>Created</th><th></th></tr></thead>\n  <tbody>\n    <tr><td>Production ingest</td><td class=\"mo\">fx_live_8f2c</td><td>read, stream</td><td class=\"us\"><i style=\"--w:82%\"></i><span class=\"n\">8,204 / 10,000</span></td><td class=\"n\">2 min ago</td><td class=\"n\">2025-11-04</td><td class=\"ac\"><button type=\"button\">Rotate</button></td></tr>\n    <tr><td>Research notebook</td><td class=\"mo\">fx_live_1a90</td><td>read</td><td class=\"us\"><i style=\"--w:14%\"></i><span class=\"n\">1,402 / 10,000</span></td><td class=\"n\">18 min ago</td><td class=\"n\">2026-02-19</td><td class=\"ac\"><button type=\"button\">Rotate</button></td></tr>\n    <tr class=\"over\"><td>Backfill job</td><td class=\"mo\">fx_live_c441</td><td>read, history</td><td class=\"us\"><i class=\"hot\" style=\"--w:100%\"></i><span class=\"n\">10,000 / 10,000</span></td><td class=\"n\">now</td><td class=\"n\">2026-08-30</td><td class=\"ac\"><button type=\"button\">Rotate</button></td></tr>\n    <tr><td>Status page</td><td class=\"mo\">fx_pub_77de</td><td>read, public</td><td class=\"us\"><i style=\"--w:3%\"></i><span class=\"n\">304 / 10,000</span></td><td class=\"n\">1 h ago</td><td class=\"n\">2024-06-11</td><td class=\"ac\"><button type=\"button\">Rotate</button></td></tr>\n  </tbody>\n</table></section>\n<section class=\"dz-mod\" data-mod=\"create\" aria-label=\"Create row\">\n<section class=\"cr\"><span class=\"k\">New key</span>\n<div class=\"rw\">\n  <label><span class=\"k\">Label</span><input type=\"text\" value=\"Vintage comparison\"></label>\n  <label><span class=\"k\">Scope</span><select><option>read</option><option>read, history</option><option>read, stream</option></select></label>\n  <label><span class=\"k\">Rate limit</span><select><option>10,000 / hour</option><option>2,000 / hour</option></select></label>\n  <label><span class=\"k\">Expires</span><input type=\"text\" value=\"2027-09-04\"></label>\n  <button type=\"button\" class=\"go\">Create</button>\n</div>\n<p class=\"warn\">The key is shown once, on creation. We do not store a copy we can show you again.</p></section></section>\n</div>",
  "css": "\n.dz-frost-index-api { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 22px 24px; }\n.dz-frost-index-api .hd { display: flex; align-items: baseline; gap: 16px; padding: 20px 0 14px; }\n.dz-frost-index-api .hd h1 { font-family: var(--pv-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0; }\n.dz-frost-index-api .m { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-frost-index-api .nw { font: inherit; font-size: 12.5px; margin-left: auto; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 8px 16px; cursor: pointer; }\n.dz-frost-index-api table { width: 100%; border-collapse: collapse; }\n.dz-frost-index-api th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); text-align: left; padding: 10px 12px; border-bottom: var(--pv-bw) solid var(--border); border-top: var(--pv-bw) solid var(--border); background: var(--card); }\n.dz-frost-index-api td { padding: 0 12px; height: 40px; font-size: 13px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-frost-index-api .mo { font-family: var(--pv-mono); font-size: 12px; color: var(--muted-foreground); }\n.dz-frost-index-api .n { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1, \"zero\" 1; text-align: right; font-size: 12px; }\n.dz-frost-index-api .us { min-width: 190px; }\n.dz-frost-index-api .us i { display: block; height: 5px; width: var(--w); background: var(--primary); border-radius: 1px; margin-bottom: 4px; }\n.dz-frost-index-api .us .hot { background: var(--destructive); }\n.dz-frost-index-api .us span { display: block; text-align: left; color: var(--muted-foreground); }\n.dz-frost-index-api .over td { background: color-mix(in srgb, var(--destructive) 8%, transparent); }\n.dz-frost-index-api .ac { text-align: right; }\n.dz-frost-index-api .ac button { font: inherit; font-size: 11.5px; background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); padding: 4px 10px; cursor: pointer; }\n.dz-frost-index-api .ac button:hover { color: var(--foreground); border-color: var(--primary); }\n.dz-frost-index-api .cr { border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); padding: 14px 16px; margin-top: 18px; background: var(--card); }\n.dz-frost-index-api .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-frost-index-api .rw { display: grid; grid-template-columns: 2fr 1.4fr 1.2fr 1.2fr auto; gap: 12px; align-items: end; margin-top: 10px; }\n.dz-frost-index-api label { display: flex; flex-direction: column; gap: 5px; }\n.dz-frost-index-api input[type=\"text\"], .dz-frost-index-api select { font: inherit; font-size: 13px; background: var(--background); color: var(--foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 8px 10px; }\n.dz-frost-index-api input:focus-visible, .dz-frost-index-api select:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }\n.dz-frost-index-api .go { font: inherit; font-size: 12.5px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 9px 20px; cursor: pointer; }\n.dz-frost-index-api .warn { font-size: 12px; color: var(--muted-foreground); margin: 12px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-frost-index-api *, .dz-frost-index-api *::before, .dz-frost-index-api *::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"
}