{
  "id": "signal-pop-app-promo",
  "name": "App Promo",
  "theme": "signal-pop",
  "category": "Marketing",
  "description": "A store-page style promo with a phone frame drawn in pure CSS, a screenshot carousel inside it, and store badges built rather than borrowed.",
  "layout": "Phone frame pinned left at 260px with the marketing copy filling the right; below, a horizontal scroller of screenshots that share the phone's outline weight.",
  "modules": [
    {
      "key": "phone",
      "name": "Phone frame",
      "html": "\n<div class=\"ph\"><div class=\"ph-s\"><img src=\"{{ART product}}\" alt=\"{{ARTALT product}}\"><div class=\"ph-ov\"><span class=\"ov-k\">Today</span><b>4 of 5</b><div class=\"ov-b\"><i style=\"width:80%\"></i></div></div></div><span class=\"notch\"></span></div>"
    },
    {
      "key": "pitch",
      "name": "Pitch",
      "html": "\n<div class=\"pt\">\n  <span class=\"kick\">Version 3.0</span>\n  <h1>Your streak,<br>on your phone.</h1>\n  <p>Everything works offline. Nothing syncs unless you ask it to. There is no account until you want one.</p>\n  <div class=\"stores\"><a class=\"st\" href=\"#\"><b>App Store</b><span>iOS 16 and up</span></a><a class=\"st\" href=\"#\"><b>Google Play</b><span>Android 10 and up</span></a></div>\n  <p class=\"fine\">6.4 MB · no trackers · no in-app purchases in the free tier</p>\n</div>"
    },
    {
      "key": "shots",
      "name": "Screenshot rail",
      "html": "\n<div class=\"sr\"><span class=\"sr-k\">See it</span><div class=\"rail\"><figure><img src=\"{{ART sticker}}\" alt=\"{{ARTALT sticker}}\"><figcaption>Pick your habits</figcaption></figure><figure><img src=\"{{ART dots}}\" alt=\"{{ARTALT dots}}\"><figcaption>Tap to log</figcaption></figure><figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption>Miss a day, no drama</figcaption></figure><figure><img src=\"{{ART people}}\" alt=\"{{ARTALT people}}\"><figcaption>Share only if you want</figcaption></figure></div></div>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "signal-pop-app-promo",
    "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-app-promo.json",
  "structure": "Phone frame pinned left at 260px with the marketing copy filling the right; below, a horizontal scroller of screenshots that share the phone's outline weight.",
  "html": "<div class=\"dz dz-signal-pop-app-promo\" data-design=\"signal-pop-app-promo\" data-theme=\"signal-pop\">\n<div class=\"top\"><section class=\"dz-mod\" data-mod=\"phone\" aria-label=\"Phone frame\">\n<div class=\"ph\"><div class=\"ph-s\"><img src=\"https://designlookbook.dev/assets/img/signal-pop-product.webp\" alt=\"A bright orange object on a cream backdrop with a hard shadow\"><div class=\"ph-ov\"><span class=\"ov-k\">Today</span><b>4 of 5</b><div class=\"ov-b\"><i style=\"width:80%\"></i></div></div></div><span class=\"notch\"></span></div></section><section class=\"dz-mod\" data-mod=\"pitch\" aria-label=\"Pitch\">\n<div class=\"pt\">\n  <span class=\"kick\">Version 3.0</span>\n  <h1>Your streak,<br>on your phone.</h1>\n  <p>Everything works offline. Nothing syncs unless you ask it to. There is no account until you want one.</p>\n  <div class=\"stores\"><a class=\"st\" href=\"#\"><b>App Store</b><span>iOS 16 and up</span></a><a class=\"st\" href=\"#\"><b>Google Play</b><span>Android 10 and up</span></a></div>\n  <p class=\"fine\">6.4 MB · no trackers · no in-app purchases in the free tier</p>\n</div></section></div><section class=\"dz-mod\" data-mod=\"shots\" aria-label=\"Screenshot rail\">\n<div class=\"sr\"><span class=\"sr-k\">See it</span><div class=\"rail\"><figure><img src=\"https://designlookbook.dev/assets/img/signal-pop-sticker.webp\" alt=\"A pile of glossy die-cut stickers in orange and blue\"><figcaption>Pick your habits</figcaption></figure><figure><img src=\"https://designlookbook.dev/assets/img/signal-pop-dots.webp\" alt=\"An irregular grid of orange and blue dots on cream\"><figcaption>Tap to log</figcaption></figure><figure><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\"><figcaption>Miss a day, no drama</figcaption></figure><figure><img src=\"https://designlookbook.dev/assets/img/signal-pop-people.webp\" alt=\"Friends laughing together against a bright orange wall\"><figcaption>Share only if you want</figcaption></figure></div></div></section>\n</div>",
  "css": "\n.dz-signal-pop-app-promo { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px 30px 30px; }\n.dz-signal-pop-app-promo .top { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 44px; align-items: center; }\n.dz-signal-pop-app-promo .ph { position: relative; border: 4px solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--card); box-shadow: 8px 8px 0 var(--foreground); padding: 12px; }\n.dz-signal-pop-app-promo .notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 74px; height: 14px; background: var(--foreground); border-radius: 0 0 var(--pv-radius-sm) var(--pv-radius-sm); }\n.dz-signal-pop-app-promo .ph-s { position: relative; border-radius: var(--pv-radius); overflow: hidden; }\n.dz-signal-pop-app-promo .ph-s img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-signal-pop-app-promo .ph-ov { position: absolute; left: 10px; right: 10px; bottom: 10px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); background: var(--card); padding: 10px 12px; }\n.dz-signal-pop-app-promo .ov-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }\n.dz-signal-pop-app-promo .ph-ov b { display: block; font-family: var(--pv-display); font-size: 22px; margin: 2px 0 7px; }\n.dz-signal-pop-app-promo .ov-b { height: 8px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); overflow: hidden; }\n.dz-signal-pop-app-promo .ov-b i { display: block; height: 100%; background: var(--primary); }\n.dz-signal-pop-app-promo .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-app-promo .pt h1 { font-family: var(--pv-display); font-size: 54px; line-height: .98; text-transform: uppercase; letter-spacing: -.03em; margin: 16px 0 14px; }\n.dz-signal-pop-app-promo .pt p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; font-weight: 500; max-width: 34ch; }\n.dz-signal-pop-app-promo .stores { display: flex; gap: 12px; margin-bottom: 16px; }\n.dz-signal-pop-app-promo .st { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); display: block; padding: 11px 22px; text-decoration: none; color: var(--foreground); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-app-promo .st:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--foreground); }\n.dz-signal-pop-app-promo .st b { display: block; font-family: var(--pv-display); font-size: 17px; text-transform: uppercase; }\n.dz-signal-pop-app-promo .st span { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-signal-pop-app-promo .fine { font-size: 12.5px !important; color: var(--muted-foreground); margin: 0 !important; }\n.dz-signal-pop-app-promo .sr { margin-top: 34px; }\n.dz-signal-pop-app-promo .sr-k { display: inline-block; font-family: var(--pv-display); font-size: 14px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }\n.dz-signal-pop-app-promo .rail { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }\n.dz-signal-pop-app-promo .rail figure { flex: none; width: 190px; margin: 0; scroll-snap-align: start; }\n.dz-signal-pop-app-promo .rail img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--foreground); filter: var(--img-filter); }\n.dz-signal-pop-app-promo .rail figcaption { margin-top: 12px; font-size: 13px; font-weight: 700; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-app-promo *, .dz-signal-pop-app-promo *::before, .dz-signal-pop-app-promo *::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"
}