{
  "id": "signal-pop-feed",
  "name": "Community Feed",
  "theme": "signal-pop",
  "category": "Profile & Social",
  "description": "A feed of outlined cards at three different widths, so the column never falls into the uniform rhythm that makes feeds feel infinite.",
  "layout": "Single 40rem column where post cards vary in width and horizontal offset by type — text posts narrow and left, image posts full width, milestone posts inset and filled.",
  "modules": [
    {
      "key": "composer",
      "name": "Composer",
      "html": "\n<div class=\"cp\"><div class=\"av\">MO</div><button type=\"button\" class=\"cp-b\">Say something…</button><button type=\"button\" class=\"cp-i\">＋ Photo</button></div>"
    },
    {
      "key": "feed",
      "name": "Post stream",
      "html": "\n<div class=\"fd\">\n  <article class=\"po text\"><header><div class=\"av\">RV</div><b>Rosa V.</b><time>2h</time></header><p>Day 61. Missed Tuesday and the app just… let me carry on. I did not realise how much I needed that until it happened.</p><footer><button type=\"button\">♥ 41</button><button type=\"button\">💬 6</button></footer></article>\n  <article class=\"po mile\"><span class=\"ms\">MILESTONE</span><h3>100 days of reading</h3><p>Tunde A. finished a hundred days. That is roughly eleven books.</p><footer><button type=\"button\">🎉 128</button><button type=\"button\">💬 22</button></footer></article>\n  <article class=\"po img\"><header><div class=\"av\">JW</div><b>Jonas W.</b><time>5h</time></header><img src=\"{{ART people}}\" alt=\"{{ALT people}}\"><p>Running club, week 12. Four of us started, four of us are still here.</p><footer><button type=\"button\">♥ 214</button><button type=\"button\">💬 31</button></footer></article>\n  <article class=\"po text\"><header><div class=\"av\">SH</div><b>Sara H.</b><time>7h</time></header><p>Unpopular opinion: the streak counter should be smaller.</p><footer><button type=\"button\">♥ 88</button><button type=\"button\">💬 44</button></footer></article>\n</div>"
    },
    {
      "key": "aside",
      "name": "Side rail",
      "html": "\n<aside class=\"sd\">\n  <div class=\"wg\"><h4>Your week</h4><div class=\"dots\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"miss\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i></i></div><p>4 of 5. One free miss used.</p></div>\n  <div class=\"wg orange\"><h4>Groups</h4><ul><li>Morning pages <b>412</b></li><li>Couch to 5K <b>2.1K</b></li><li>No-phone hour <b>884</b></li></ul></div>\n</aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "signal-pop-feed",
    "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-feed.json",
  "structure": "Single 40rem column where post cards vary in width and horizontal offset by type — text posts narrow and left, image posts full width, milestone posts inset and filled.",
  "html": "<div class=\"dz dz-signal-pop-feed\" data-design=\"signal-pop-feed\" data-theme=\"signal-pop\">\n<div><section class=\"dz-mod\" data-mod=\"composer\" aria-label=\"Composer\">\n<div class=\"cp\"><div class=\"av\">MO</div><button type=\"button\" class=\"cp-b\">Say something…</button><button type=\"button\" class=\"cp-i\">＋ Photo</button></div></section><section class=\"dz-mod\" data-mod=\"feed\" aria-label=\"Post stream\">\n<div class=\"fd\">\n  <article class=\"po text\"><header><div class=\"av\">RV</div><b>Rosa V.</b><time>2h</time></header><p>Day 61. Missed Tuesday and the app just… let me carry on. I did not realise how much I needed that until it happened.</p><footer><button type=\"button\">♥ 41</button><button type=\"button\">💬 6</button></footer></article>\n  <article class=\"po mile\"><span class=\"ms\">MILESTONE</span><h3>100 days of reading</h3><p>Tunde A. finished a hundred days. That is roughly eleven books.</p><footer><button type=\"button\">🎉 128</button><button type=\"button\">💬 22</button></footer></article>\n  <article class=\"po img\"><header><div class=\"av\">JW</div><b>Jonas W.</b><time>5h</time></header><img src=\"https://designlookbook.dev/assets/img/signal-pop-people.webp\" alt=\"Two people cooking together at a home stove\"><p>Running club, week 12. Four of us started, four of us are still here.</p><footer><button type=\"button\">♥ 214</button><button type=\"button\">💬 31</button></footer></article>\n  <article class=\"po text\"><header><div class=\"av\">SH</div><b>Sara H.</b><time>7h</time></header><p>Unpopular opinion: the streak counter should be smaller.</p><footer><button type=\"button\">♥ 88</button><button type=\"button\">💬 44</button></footer></article>\n</div></section></div><section class=\"dz-mod\" data-mod=\"aside\" aria-label=\"Side rail\">\n<aside class=\"sd\">\n  <div class=\"wg\"><h4>Your week</h4><div class=\"dots\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"miss\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i></i></div><p>4 of 5. One free miss used.</p></div>\n  <div class=\"wg orange\"><h4>Groups</h4><ul><li>Morning pages <b>412</b></li><li>Couch to 5K <b>2.1K</b></li><li>No-phone hour <b>884</b></li></ul></div>\n</aside></section>\n</div>",
  "css": "\n.dz-signal-pop-feed { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; padding: 26px 30px 30px; }\n.dz-signal-pop-feed .av { display: grid; place-items: center; width: 38px; height: 38px; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; background: var(--accent); color: var(--accent-foreground); font-family: var(--pv-display); font-size: 13px; flex: none; }\n.dz-signal-pop-feed .cp { display: flex; align-items: center; gap: 12px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 12px 14px; margin-bottom: 20px; }\n.dz-signal-pop-feed .cp-b { flex: 1; text-align: left; font: inherit; font-size: 15px; padding: 10px 14px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--background); color: var(--muted-foreground); cursor: pointer; }\n.dz-signal-pop-feed .cp-i { font: inherit; font-size: 13px; font-weight: 700; padding: 10px 16px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--primary); color: var(--primary-foreground); cursor: pointer; }\n.dz-signal-pop-feed .po { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 16px 18px; margin-bottom: 18px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-feed .po:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--foreground); }\n.dz-signal-pop-feed .po header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }\n.dz-signal-pop-feed .po b { font-size: 14.5px; }\n.dz-signal-pop-feed .po time { font-size: 12px; color: var(--muted-foreground); margin-left: auto; }\n.dz-signal-pop-feed .po p { margin: 0; font-size: 15px; line-height: 1.6; }\n.dz-signal-pop-feed .po footer { display: flex; gap: 8px; margin-top: 14px; }\n.dz-signal-pop-feed .po footer button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--background); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-signal-pop-feed .po footer button:hover { background: var(--accent); }\n.dz-signal-pop-feed .po.text { max-width: 82%; }\n.dz-signal-pop-feed .po.img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); margin-bottom: 12px; filter: var(--img-filter); }\n.dz-signal-pop-feed .po.mile { margin-left: 9%; background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-feed .ms { font-family: var(--pv-mono); font-size: 11px; letter-spacing: .12em; }\n.dz-signal-pop-feed .po.mile h3 { font-family: var(--pv-display); font-size: 26px; text-transform: uppercase; margin: 6px 0 6px; }\n.dz-signal-pop-feed .po.mile footer button { background: var(--primary-foreground); color: var(--primary); }\n.dz-signal-pop-feed .sd { position: sticky; top: 0; align-self: start; }\n.dz-signal-pop-feed .wg { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 16px 18px; margin-bottom: 16px; }\n.dz-signal-pop-feed .wg.orange { background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-feed .wg h4 { font-family: var(--pv-display); font-size: 15px; text-transform: uppercase; margin: 0 0 12px; }\n.dz-signal-pop-feed .dots { display: flex; gap: 6px; }\n.dz-signal-pop-feed .dots i { flex: 1; height: 26px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); background: var(--background); }\n.dz-signal-pop-feed .dots .on { background: var(--primary); }\n.dz-signal-pop-feed .dots .miss { background: var(--muted); }\n.dz-signal-pop-feed .wg p { margin: 10px 0 0; font-size: 13px; font-weight: 600; }\n.dz-signal-pop-feed .wg ul { list-style: none; margin: 0; padding: 0; }\n.dz-signal-pop-feed .wg li { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; padding: 7px 0; border-top: var(--pv-bw) solid currentColor; }\n.dz-signal-pop-feed .wg li:first-child { border-top: 0; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-feed *, .dz-signal-pop-feed *::before, .dz-signal-pop-feed *::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"
}