{
  "id": "signal-pop-pricing",
  "name": "Pricing Blocks",
  "theme": "signal-pop",
  "category": "Pricing",
  "description": "Two plans only — free and paid — sized so the free one is not visually punished for existing.",
  "layout": "Two equal blocks side by side at the same elevation, with the paid one differing only in fill colour; a comparison table sits below in the same outline weight.",
  "modules": [
    {
      "key": "head",
      "name": "Pricing header",
      "html": "\n<header class=\"ph\"><h1>Two plans.<br>That is the whole page.</h1><p>No enterprise tier, no per-seat maths, no call with sales.</p><div class=\"cyc\"><button type=\"button\" class=\"on\">Monthly</button><button type=\"button\">Yearly · save 2 months</button></div></header>"
    },
    {
      "key": "plans",
      "name": "Plan blocks",
      "html": "\n<div class=\"pl\">\n  <article class=\"pn\"><h2>Free</h2><p class=\"pr\">£0<span>forever</span></p><p class=\"ds\">Everything you need to track habits on one device.</p><ul><li>Unlimited habits</li><li>Full history and stats</li><li>CSV and JSON export</li><li>Works offline</li><li>No ads</li></ul><a class=\"btn ghost\" href=\"#\">Start free</a></article>\n  <article class=\"pn paid\"><span class=\"tag\">Most people</span><h2>Paid</h2><p class=\"pr\">£3<span>/month</span></p><p class=\"ds\">Adds sync, widgets and the things that need a server.</p><ul><li>Everything in Free</li><li>Sync across devices</li><li>Home-screen widgets</li><li>Encrypted backup</li><li>Support that is a person</li></ul><a class=\"btn\" href=\"#\">Try 30 days free</a></article>\n</div>"
    },
    {
      "key": "compare",
      "name": "Comparison",
      "html": "\n<table class=\"cmp\"><caption>The honest comparison</caption>\n  <thead><tr><th scope=\"col\">Feature</th><th scope=\"col\">Free</th><th scope=\"col\">Paid</th></tr></thead>\n  <tbody>\n    <tr><th scope=\"row\">Habits</th><td>Unlimited</td><td>Unlimited</td></tr>\n    <tr><th scope=\"row\">History</th><td>Forever</td><td>Forever</td></tr>\n    <tr><th scope=\"row\">Devices</th><td>One</td><td>Unlimited</td></tr>\n    <tr><th scope=\"row\">Widgets</th><td>—</td><td>Yes</td></tr>\n    <tr><th scope=\"row\">Backup</th><td>Manual export</td><td>Automatic, encrypted</td></tr>\n    <tr><th scope=\"row\">Ads</th><td>Never</td><td>Never</td></tr>\n  </tbody>\n</table>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "signal-pop-pricing",
    "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-pricing.json",
  "structure": "Two equal blocks side by side at the same elevation, with the paid one differing only in fill colour; a comparison table sits below in the same outline weight.",
  "html": "<div class=\"dz dz-signal-pop-pricing\" data-design=\"signal-pop-pricing\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Pricing header\">\n<header class=\"ph\"><h1>Two plans.<br>That is the whole page.</h1><p>No enterprise tier, no per-seat maths, no call with sales.</p><div class=\"cyc\"><button type=\"button\" class=\"on\">Monthly</button><button type=\"button\">Yearly · save 2 months</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"plans\" aria-label=\"Plan blocks\">\n<div class=\"pl\">\n  <article class=\"pn\"><h2>Free</h2><p class=\"pr\">£0<span>forever</span></p><p class=\"ds\">Everything you need to track habits on one device.</p><ul><li>Unlimited habits</li><li>Full history and stats</li><li>CSV and JSON export</li><li>Works offline</li><li>No ads</li></ul><a class=\"btn ghost\" href=\"#\">Start free</a></article>\n  <article class=\"pn paid\"><span class=\"tag\">Most people</span><h2>Paid</h2><p class=\"pr\">£3<span>/month</span></p><p class=\"ds\">Adds sync, widgets and the things that need a server.</p><ul><li>Everything in Free</li><li>Sync across devices</li><li>Home-screen widgets</li><li>Encrypted backup</li><li>Support that is a person</li></ul><a class=\"btn\" href=\"#\">Try 30 days free</a></article>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"compare\" aria-label=\"Comparison\">\n<table class=\"cmp\"><caption>The honest comparison</caption>\n  <thead><tr><th scope=\"col\">Feature</th><th scope=\"col\">Free</th><th scope=\"col\">Paid</th></tr></thead>\n  <tbody>\n    <tr><th scope=\"row\">Habits</th><td>Unlimited</td><td>Unlimited</td></tr>\n    <tr><th scope=\"row\">History</th><td>Forever</td><td>Forever</td></tr>\n    <tr><th scope=\"row\">Devices</th><td>One</td><td>Unlimited</td></tr>\n    <tr><th scope=\"row\">Widgets</th><td>—</td><td>Yes</td></tr>\n    <tr><th scope=\"row\">Backup</th><td>Manual export</td><td>Automatic, encrypted</td></tr>\n    <tr><th scope=\"row\">Ads</th><td>Never</td><td>Never</td></tr>\n  </tbody>\n</table></section>\n</div>",
  "css": "\n.dz-signal-pop-pricing { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 34px 30px 32px; }\n.dz-signal-pop-pricing .ph { text-align: center; max-width: 42rem; margin: 0 auto 30px; }\n.dz-signal-pop-pricing .ph h1 { font-family: var(--pv-display); font-size: 44px; line-height: .98; text-transform: uppercase; letter-spacing: -.03em; margin: 0 0 12px; }\n.dz-signal-pop-pricing .ph p { margin: 0 0 20px; font-size: 16px; font-weight: 500; }\n.dz-signal-pop-pricing .cyc { display: inline-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-pricing .cyc button { font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 20px; border: 0; background: var(--card); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-signal-pop-pricing .cyc button.on { background: var(--foreground); color: var(--background); }\n.dz-signal-pop-pricing .pl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 48rem; margin: 0 auto; }\n.dz-signal-pop-pricing .pn { position: relative; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 26px 26px 28px; }\n.dz-signal-pop-pricing .pn.paid { background: var(--accent); }\n.dz-signal-pop-pricing .tag { position: absolute; top: -13px; right: 20px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--primary); color: var(--primary-foreground); font-size: 12px; font-weight: 700; padding: 4px 14px; }\n.dz-signal-pop-pricing .pn h2 { font-family: var(--pv-display); font-size: 26px; text-transform: uppercase; margin: 0 0 8px; }\n.dz-signal-pop-pricing .pr { font-family: var(--pv-display); font-size: 46px; margin: 0 0 10px; letter-spacing: -.03em; }\n.dz-signal-pop-pricing .pr span { font-family: var(--pv-body); font-size: 15px; font-weight: 600; margin-left: 4px; }\n.dz-signal-pop-pricing .ds { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; font-weight: 500; }\n.dz-signal-pop-pricing .pn ul { list-style: none; margin: 0 0 22px; padding: 0; }\n.dz-signal-pop-pricing .pn li { position: relative; padding: 7px 0 7px 26px; font-size: 14.5px; border-top: var(--pv-bw) solid var(--foreground); }\n.dz-signal-pop-pricing .pn li::before { content: \"✓\"; position: absolute; left: 0; font-weight: 700; color: var(--primary); }\n.dz-signal-pop-pricing .pn.paid li::before { color: var(--foreground); }\n.dz-signal-pop-pricing .btn { display: block; text-align: center; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--foreground); background: var(--primary); color: var(--primary-foreground); font-family: var(--pv-display); font-size: 16px; text-transform: uppercase; padding: 14px; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-pricing .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--foreground); }\n.dz-signal-pop-pricing .btn.ghost { background: var(--card); color: var(--foreground); }\n.dz-signal-pop-pricing .cmp { width: 100%; max-width: 48rem; margin: 34px auto 0; border-collapse: collapse; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); overflow: hidden; }\n.dz-signal-pop-pricing .cmp caption { font-family: var(--pv-display); font-size: 18px; text-transform: uppercase; text-align: left; padding: 0 0 12px; }\n.dz-signal-pop-pricing .cmp th, .dz-signal-pop-pricing .cmp td { padding: 12px 18px; text-align: left; border-bottom: var(--pv-bw) solid var(--foreground); font-size: 14.5px; }\n.dz-signal-pop-pricing .cmp thead th { background: var(--foreground); color: var(--background); font-family: var(--pv-display); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }\n.dz-signal-pop-pricing .cmp tbody th { font-weight: 700; }\n.dz-signal-pop-pricing .cmp tbody tr:last-child th, .dz-signal-pop-pricing .cmp tbody tr:last-child td { border-bottom: 0; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-pricing *, .dz-signal-pop-pricing *::before, .dz-signal-pop-pricing *::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"
}