{
  "id": "signal-pop-streak",
  "name": "Streak Dashboard",
  "theme": "signal-pop",
  "category": "Dashboard",
  "description": "Progress shown as physical objects — filled jars, stacked blocks and a ring — instead of four identical stat cards.",
  "layout": "A deliberately mismatched grid: one tall jar column, one wide block chart, one square ring, sized so no two panels share a footprint.",
  "modules": [
    {
      "key": "head",
      "name": "Dashboard header",
      "html": "\n<header class=\"dh\"><h1>Your month</h1><div class=\"seg\"><button type=\"button\">Week</button><button type=\"button\" class=\"on\">Month</button><button type=\"button\">Year</button></div></header>"
    },
    {
      "key": "jars",
      "name": "Habit jars",
      "html": "\n<section class=\"jr\"><h2>Habits</h2><div class=\"js\">\n  <div class=\"j\"><div class=\"jar\"><i style=\"height:88%\"></i></div><b>Read</b><span>26/30</span></div>\n  <div class=\"j\"><div class=\"jar\"><i style=\"height:60%\"></i></div><b>Move</b><span>18/30</span></div>\n  <div class=\"j\"><div class=\"jar\"><i style=\"height:97%\"></i></div><b>No phone</b><span>29/30</span></div>\n</div></section>"
    },
    {
      "key": "blocks",
      "name": "Block chart",
      "html": "\n<section class=\"bl\"><h2>Every day this month</h2><div class=\"bs\"><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"p\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"p\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"p\"></i><i class=\"f\"></i><i class=\"f\"></i></div><p class=\"lg\"><i class=\"f\"></i> all <i class=\"p\"></i> some <i></i> none</p></section>"
    },
    {
      "key": "ring",
      "name": "Consistency ring",
      "html": "\n<section class=\"rg\"><h2>Consistency</h2><div class=\"ring\" style=\"--p:83%\"><span>83<em>%</em></span></div><p>Higher than 79% of your months. Your best is 91%, last October.</p></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "signal-pop-streak",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:54:10+09:00",
    "updatedAt": "2026-08-29T18:54:10+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/signal-pop-streak.json",
  "structure": "A deliberately mismatched grid: one tall jar column, one wide block chart, one square ring, sized so no two panels share a footprint.",
  "html": "<div class=\"dz dz-signal-pop-streak\" data-design=\"signal-pop-streak\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Dashboard header\">\n<header class=\"dh\"><h1>Your month</h1><div class=\"seg\"><button type=\"button\">Week</button><button type=\"button\" class=\"on\">Month</button><button type=\"button\">Year</button></div></header></section><div class=\"grid\"><section class=\"dz-mod\" data-mod=\"jars\" aria-label=\"Habit jars\">\n<section class=\"jr\"><h2>Habits</h2><div class=\"js\">\n  <div class=\"j\"><div class=\"jar\"><i style=\"height:88%\"></i></div><b>Read</b><span>26/30</span></div>\n  <div class=\"j\"><div class=\"jar\"><i style=\"height:60%\"></i></div><b>Move</b><span>18/30</span></div>\n  <div class=\"j\"><div class=\"jar\"><i style=\"height:97%\"></i></div><b>No phone</b><span>29/30</span></div>\n</div></section></section><section class=\"dz-mod\" data-mod=\"blocks\" aria-label=\"Block chart\">\n<section class=\"bl\"><h2>Every day this month</h2><div class=\"bs\"><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"p\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"p\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"p\"></i><i class=\"f\"></i><i class=\"f\"></i></div><p class=\"lg\"><i class=\"f\"></i> all <i class=\"p\"></i> some <i></i> none</p></section></section><section class=\"dz-mod\" data-mod=\"ring\" aria-label=\"Consistency ring\">\n<section class=\"rg\"><h2>Consistency</h2><div class=\"ring\" style=\"--p:83%\"><span>83<em>%</em></span></div><p>Higher than 79% of your months. Your best is 91%, last October.</p></section></section></div>\n</div>",
  "css": "\n.dz-signal-pop-streak { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 30px 30px; }\n.dz-signal-pop-streak .dh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }\n.dz-signal-pop-streak .dh h1 { font-family: var(--pv-display); font-size: 32px; text-transform: uppercase; margin: 0; }\n.dz-signal-pop-streak .seg { display: flex; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); overflow: hidden; box-shadow: 4px 4px 0 var(--foreground); }\n.dz-signal-pop-streak .seg button { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 18px; border: 0; background: var(--card); color: var(--foreground); cursor: pointer; }\n.dz-signal-pop-streak .seg .on { background: var(--foreground); color: var(--background); }\n.dz-signal-pop-streak .grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }\n.dz-signal-pop-streak h2 { font-family: var(--pv-display); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }\n.dz-signal-pop-streak .jr, .dz-signal-pop-streak .bl, .dz-signal-pop-streak .rg { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 18px 20px; }\n.dz-signal-pop-streak .js { display: flex; gap: 18px; }\n.dz-signal-pop-streak .j { text-align: center; flex: 1; }\n.dz-signal-pop-streak .jar { height: 150px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm) var(--pv-radius-sm) var(--pv-radius) var(--pv-radius); background: var(--background); display: flex; align-items: flex-end; overflow: hidden; }\n.dz-signal-pop-streak .jar i { display: block; width: 100%; background: var(--primary); }\n.dz-signal-pop-streak .j b { display: block; font-size: 13px; margin-top: 9px; }\n.dz-signal-pop-streak .j span { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-signal-pop-streak .bs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }\n.dz-signal-pop-streak .bs i, .dz-signal-pop-streak .lg i { aspect-ratio: 1; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); background: var(--background); }\n.dz-signal-pop-streak .bs .f, .dz-signal-pop-streak .lg .f { background: var(--primary); }\n.dz-signal-pop-streak .bs .p, .dz-signal-pop-streak .lg .p { background: var(--accent); }\n.dz-signal-pop-streak .lg { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; font-weight: 700; color: var(--muted-foreground); }\n.dz-signal-pop-streak .lg i { width: 14px; }\n.dz-signal-pop-streak .ring { display: grid; place-items: center; width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; border: var(--pv-bw) solid var(--foreground); background: conic-gradient(var(--primary) var(--p), var(--background) 0); position: relative; }\n.dz-signal-pop-streak .ring::before { content: \"\"; position: absolute; inset: 22px; border-radius: 50%; border: var(--pv-bw) solid var(--foreground); background: var(--card); }\n.dz-signal-pop-streak .ring span { position: relative; font-family: var(--pv-display); font-size: 30px; }\n.dz-signal-pop-streak .ring em { font-style: normal; font-size: 15px; }\n.dz-signal-pop-streak .rg p { margin: 16px 0 0; font-size: 13px; line-height: 1.55; text-align: center; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-streak *, .dz-signal-pop-streak *::before, .dz-signal-pop-streak *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/signal-pop.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}