{
  "id": "signal-pop-home-shell",
  "name": "App Home",
  "theme": "signal-pop",
  "category": "App Shell",
  "description": "A phone-shaped app shell with a real bottom tab bar and a today list of oversized tap targets.",
  "layout": "Narrow 420px column simulating a handset: header, a horizontally scrolling week strip, a today list of 64px rows, and a five-tab bar fixed to the bottom edge.",
  "modules": [
    {
      "key": "top",
      "name": "App header",
      "html": "\n<header class=\"ah\"><div><span class=\"d\">Thursday</span><h1>Today</h1></div><button type=\"button\" class=\"pf\">TA</button></header>"
    },
    {
      "key": "week",
      "name": "Week strip",
      "html": "\n<div class=\"wk\"><button type=\"button\"><span>M</span><b>11</b></button><button type=\"button\"><span>T</span><b>12</b></button><button type=\"button\" class=\"miss\"><span>W</span><b>13</b></button><button type=\"button\" class=\"on\"><span>T</span><b>14</b></button><button type=\"button\"><span>F</span><b>15</b></button><button type=\"button\"><span>S</span><b>16</b></button><button type=\"button\"><span>S</span><b>17</b></button></div>"
    },
    {
      "key": "list",
      "name": "Today list",
      "html": "\n<ul class=\"td\">\n  <li class=\"done\"><span class=\"ck\">✓</span><div><b>Read</b><span>20 minutes · 61 day streak</span></div><span class=\"ar\">›</span></li>\n  <li class=\"done\"><span class=\"ck\">✓</span><div><b>Move</b><span>Any movement · 12 day streak</span></div><span class=\"ar\">›</span></li>\n  <li><span class=\"ck\"></span><div><b>No phone after 9</b><span>Ends 09:00 · 147 day streak</span></div><span class=\"ar\">›</span></li>\n</ul>"
    },
    {
      "key": "nudge",
      "name": "Nudge card",
      "html": "\n<div class=\"ng\"><b>One left.</b><p>You have never missed a Thursday. Just saying.</p></div>"
    },
    {
      "key": "tabs",
      "name": "Tab bar",
      "html": "\n<nav class=\"tb\"><a href=\"#\" class=\"on\"><span>◉</span>Today</a><a href=\"#\"><span>▦</span>Habits</a><a href=\"#\"><span>＋</span></a><a href=\"#\"><span>◔</span>Stats</a><a href=\"#\"><span>☺</span>You</a></nav>"
    }
  ],
  "moduleCount": 5,
  "reorderable": false,
  "meta": {
    "id": "signal-pop-home-shell",
    "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-home-shell.json",
  "structure": "Narrow 420px column simulating a handset: header, a horizontally scrolling week strip, a today list of 64px rows, and a five-tab bar fixed to the bottom edge.",
  "html": "<div class=\"dz dz-signal-pop-home-shell\" data-design=\"signal-pop-home-shell\" data-theme=\"signal-pop\">\n<div class=\"app\"><section class=\"dz-mod\" data-mod=\"top\" aria-label=\"App header\">\n<header class=\"ah\"><div><span class=\"d\">Thursday</span><h1>Today</h1></div><button type=\"button\" class=\"pf\">TA</button></header></section><section class=\"dz-mod\" data-mod=\"week\" aria-label=\"Week strip\">\n<div class=\"wk\"><button type=\"button\"><span>M</span><b>11</b></button><button type=\"button\"><span>T</span><b>12</b></button><button type=\"button\" class=\"miss\"><span>W</span><b>13</b></button><button type=\"button\" class=\"on\"><span>T</span><b>14</b></button><button type=\"button\"><span>F</span><b>15</b></button><button type=\"button\"><span>S</span><b>16</b></button><button type=\"button\"><span>S</span><b>17</b></button></div></section><section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Today list\">\n<ul class=\"td\">\n  <li class=\"done\"><span class=\"ck\">✓</span><div><b>Read</b><span>20 minutes · 61 day streak</span></div><span class=\"ar\">›</span></li>\n  <li class=\"done\"><span class=\"ck\">✓</span><div><b>Move</b><span>Any movement · 12 day streak</span></div><span class=\"ar\">›</span></li>\n  <li><span class=\"ck\"></span><div><b>No phone after 9</b><span>Ends 09:00 · 147 day streak</span></div><span class=\"ar\">›</span></li>\n</ul></section><section class=\"dz-mod\" data-mod=\"nudge\" aria-label=\"Nudge card\">\n<div class=\"ng\"><b>One left.</b><p>You have never missed a Thursday. Just saying.</p></div></section><section class=\"dz-mod\" data-mod=\"tabs\" aria-label=\"Tab bar\">\n<nav class=\"tb\"><a href=\"#\" class=\"on\"><span>◉</span>Today</a><a href=\"#\"><span>▦</span>Habits</a><a href=\"#\"><span>＋</span></a><a href=\"#\"><span>◔</span>Stats</a><a href=\"#\"><span>☺</span>You</a></nav></section></div>\n</div>",
  "css": "\n.dz-signal-pop-home-shell { background: var(--muted); color: var(--foreground); font-family: var(--pv-body); padding: 24px 20px; display: grid; place-items: start center; }\n.dz-signal-pop-home-shell .app { width: 100%; max-width: 420px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); overflow: hidden; display: flex; flex-direction: column; min-height: 520px; }\n.dz-signal-pop-home-shell .ah { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; }\n.dz-signal-pop-home-shell .d { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }\n.dz-signal-pop-home-shell .ah h1 { font-family: var(--pv-display); font-size: 34px; text-transform: uppercase; margin: 2px 0 0; }\n.dz-signal-pop-home-shell .pf { display: grid; place-items: center; width: 44px; height: 44px; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-family: var(--pv-display); font-size: 15px; cursor: pointer; }\n.dz-signal-pop-home-shell .wk { display: flex; gap: 8px; padding: 0 20px 16px; }\n.dz-signal-pop-home-shell .wk button { flex: 1; font: inherit; padding: 8px 0; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); background: var(--background); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-signal-pop-home-shell .wk span { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-signal-pop-home-shell .wk b { display: block; font-family: var(--pv-display); font-size: 15px; }\n.dz-signal-pop-home-shell .wk .on { background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-home-shell .wk .on span { color: var(--primary-foreground); }\n.dz-signal-pop-home-shell .wk .miss { background: var(--muted); }\n.dz-signal-pop-home-shell .td { list-style: none; margin: 0; padding: 0 20px; }\n.dz-signal-pop-home-shell .td li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; margin-bottom: 12px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); background: var(--background); box-shadow: 4px 4px 0 var(--foreground); cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-home-shell .td li:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--foreground); }\n.dz-signal-pop-home-shell .ck { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; font-size: 17px; }\n.dz-signal-pop-home-shell .td .done { background: var(--accent); }\n.dz-signal-pop-home-shell .td .done .ck { background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-home-shell .td b { display: block; font-size: 16px; }\n.dz-signal-pop-home-shell .td span:not(.ck):not(.ar) { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-signal-pop-home-shell .ar { margin-left: auto; font-size: 22px; color: var(--muted-foreground); }\n.dz-signal-pop-home-shell .ng { margin: 4px 20px 20px; border: var(--pv-bw) dashed var(--foreground); border-radius: var(--pv-radius); padding: 14px 16px; }\n.dz-signal-pop-home-shell .ng b { font-family: var(--pv-display); font-size: 17px; text-transform: uppercase; }\n.dz-signal-pop-home-shell .ng p { margin: 4px 0 0; font-size: 13.5px; }\n.dz-signal-pop-home-shell .tb { display: flex; margin-top: auto; border-top: var(--pv-bw) solid var(--foreground); background: var(--card); }\n.dz-signal-pop-home-shell .tb a { flex: 1; text-align: center; padding: 11px 0 13px; font-size: 11px; font-weight: 700; color: var(--muted-foreground); text-decoration: none; }\n.dz-signal-pop-home-shell .tb span { display: block; font-size: 20px; margin-bottom: 2px; }\n.dz-signal-pop-home-shell .tb .on { color: var(--primary); }\n.dz-signal-pop-home-shell .tb a:nth-child(3) span { display: inline-grid; place-items: center; width: 42px; height: 42px; margin: -6px 0 0; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; background: var(--primary); color: var(--primary-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-home-shell *, .dz-signal-pop-home-shell *::before, .dz-signal-pop-home-shell *::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"
}