{
  "id": "signal-pop-launch",
  "name": "Launch Page",
  "theme": "signal-pop",
  "category": "Landing",
  "description": "A launch page where the headline is set at 88px and the artwork is a hard-outlined shape collage rotated a few degrees behind it.",
  "layout": "Off-centre hero: headline in a 22rem block anchored left, collage artwork tilted 3 degrees and overlapping it from the right, then a badge row that breaks the hero baseline.",
  "modules": [
    {
      "key": "nav",
      "name": "Chunky nav",
      "html": "\n<header class=\"nv\"><span class=\"lg\">STACKED</span><nav><a href=\"#\">Features</a><a href=\"#\">Pricing</a><a href=\"#\">Blog</a></nav><a class=\"btn sm\" href=\"#\">Get the app</a></header>"
    },
    {
      "key": "hero",
      "name": "Hero",
      "html": "\n<section class=\"hr\">\n  <div class=\"hr-t\"><span class=\"kick\">Now on iOS and Android</span><h1>Habits that<br>survive a<br>bad week.</h1><p>Stacked forgives you on purpose. Miss a day, keep the streak, keep going.</p><div class=\"hr-a\"><a class=\"btn\" href=\"#\">Start free</a><a class=\"ghost\" href=\"#\">See how it works</a></div></div>\n  <figure class=\"hr-i\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure>\n</section>"
    },
    {
      "key": "badges",
      "name": "Proof badges",
      "html": "\n<div class=\"bd\"><span class=\"bg\">★ 4.8 · 12K ratings</span><span class=\"bg\">No ads, ever</span><span class=\"bg\">Works offline</span><span class=\"bg orange\">Free forever tier</span></div>"
    },
    {
      "key": "strip",
      "name": "Feature strip",
      "html": "\n<div class=\"fs\">\n  <article><span class=\"ic\">01</span><h3>Miss a day, keep going</h3><p>Streaks survive one miss a week. That is not a bug, it is the entire product.</p></article>\n  <article><span class=\"ic\">02</span><h3>Nobody is watching</h3><p>No leaderboards, no friends list, no notification that says someone beat you.</p></article>\n  <article><span class=\"ic\">03</span><h3>Two taps a day</h3><p>Open, tap, close. If it takes longer than that, we have failed.</p></article>\n</div>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "signal-pop-launch",
    "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-launch.json",
  "structure": "Off-centre hero: headline in a 22rem block anchored left, collage artwork tilted 3 degrees and overlapping it from the right, then a badge row that breaks the hero baseline.",
  "html": "<div class=\"dz dz-signal-pop-launch\" data-design=\"signal-pop-launch\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Chunky nav\">\n<header class=\"nv\"><span class=\"lg\">STACKED</span><nav><a href=\"#\">Features</a><a href=\"#\">Pricing</a><a href=\"#\">Blog</a></nav><a class=\"btn sm\" href=\"#\">Get the app</a></header></section>\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Hero\">\n<section class=\"hr\">\n  <div class=\"hr-t\"><span class=\"kick\">Now on iOS and Android</span><h1>Habits that<br>survive a<br>bad week.</h1><p>Stacked forgives you on purpose. Miss a day, keep the streak, keep going.</p><div class=\"hr-a\"><a class=\"btn\" href=\"#\">Start free</a><a class=\"ghost\" href=\"#\">See how it works</a></div></div>\n  <figure class=\"hr-i\"><img src=\"https://designlookbook.dev/assets/img/signal-pop-hero.webp\" alt=\"Bold cut-paper shapes in orange and blue on cream with hard shadows\"></figure>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"badges\" aria-label=\"Proof badges\">\n<div class=\"bd\"><span class=\"bg\">★ 4.8 · 12K ratings</span><span class=\"bg\">No ads, ever</span><span class=\"bg\">Works offline</span><span class=\"bg orange\">Free forever tier</span></div></section>\n<section class=\"dz-mod\" data-mod=\"strip\" aria-label=\"Feature strip\">\n<div class=\"fs\">\n  <article><span class=\"ic\">01</span><h3>Miss a day, keep going</h3><p>Streaks survive one miss a week. That is not a bug, it is the entire product.</p></article>\n  <article><span class=\"ic\">02</span><h3>Nobody is watching</h3><p>No leaderboards, no friends list, no notification that says someone beat you.</p></article>\n  <article><span class=\"ic\">03</span><h3>Two taps a day</h3><p>Open, tap, close. If it takes longer than that, we have failed.</p></article>\n</div></section>\n</div>",
  "css": "\n.dz-signal-pop-launch { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 30px; }\n.dz-signal-pop-launch .nv { display: flex; align-items: center; gap: 26px; padding: 18px 30px; }\n.dz-signal-pop-launch .lg { font-family: var(--pv-display); font-size: 22px; letter-spacing: -.02em; }\n.dz-signal-pop-launch .nv nav { display: flex; gap: 22px; }\n.dz-signal-pop-launch .nv a { font-size: 14px; font-weight: 600; color: var(--foreground); text-decoration: none; }\n.dz-signal-pop-launch .nv nav a:hover { color: var(--primary); }\n.dz-signal-pop-launch .btn { display: inline-block; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); background: var(--primary); color: var(--primary-foreground); font-family: var(--pv-display); font-size: 16px; text-transform: uppercase; letter-spacing: .02em; padding: 14px 28px; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-launch .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--foreground); }\n.dz-signal-pop-launch .btn.sm { margin-left: auto; font-size: 13px; padding: 9px 18px; box-shadow: 4px 4px 0 var(--foreground); }\n.dz-signal-pop-launch .btn.sm:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--foreground); }\n.dz-signal-pop-launch .hr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 10px; padding: 16px 30px 0; }\n.dz-signal-pop-launch .kick { display: inline-block; background: var(--accent); color: var(--accent-foreground); border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); font-size: 12.5px; font-weight: 700; padding: 5px 14px; }\n.dz-signal-pop-launch .hr h1 { font-family: var(--pv-display); font-size: 76px; line-height: .94; letter-spacing: -.035em; text-transform: uppercase; margin: 16px 0 16px; }\n.dz-signal-pop-launch .hr p { margin: 0 0 24px; font-size: 17px; line-height: 1.55; max-width: 28ch; font-weight: 500; }\n.dz-signal-pop-launch .hr-a { display: flex; align-items: center; gap: 22px; }\n.dz-signal-pop-launch .ghost { font-size: 15px; font-weight: 700; color: var(--foreground); text-decoration: none; border-bottom: 3px solid var(--primary); padding-bottom: 2px; }\n.dz-signal-pop-launch .hr-i { margin: 0; transform: rotate(3deg); }\n.dz-signal-pop-launch .hr-i img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); box-shadow: 8px 8px 0 var(--foreground); filter: var(--img-filter); }\n.dz-signal-pop-launch .bd { display: flex; flex-wrap: wrap; gap: 10px; padding: 30px 30px 0; }\n.dz-signal-pop-launch .bg { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--card); font-size: 13px; font-weight: 700; padding: 7px 16px; }\n.dz-signal-pop-launch .bg.orange { background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-launch .fs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 26px 30px 0; }\n.dz-signal-pop-launch .fs article { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 20px 22px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-launch .fs article:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--foreground); }\n.dz-signal-pop-launch .ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-family: var(--pv-mono); font-size: 14px; }\n.dz-signal-pop-launch .fs h3 { font-family: var(--pv-display); font-size: 18px; text-transform: uppercase; letter-spacing: -.01em; margin: 14px 0 8px; }\n.dz-signal-pop-launch .fs p { margin: 0; font-size: 14px; line-height: 1.6; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-launch *, .dz-signal-pop-launch *::before, .dz-signal-pop-launch *::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"
}