{
  "id": "signal-pop-profile",
  "name": "Player Profile",
  "theme": "signal-pop",
  "category": "Profile & Social",
  "description": "A profile built around one enormous number and a year of habit squares, with badges that are shapes rather than icons.",
  "layout": "Banner strip with an avatar that overhangs it by half, a giant streak numeral on the left and a 52-week contribution grid filling the right at full width.",
  "modules": [
    {
      "key": "banner",
      "name": "Banner + avatar",
      "html": "\n<header class=\"bn\"><img src=\"{{ART dots}}\" alt=\"{{ARTALT dots}}\"><div class=\"av\">TA</div><div class=\"who\"><h1>Tunde A.</h1><p>Reading, running, no phone after nine. Since March 2024.</p></div><button type=\"button\" class=\"fol\">Follow</button></header>"
    },
    {
      "key": "streak",
      "name": "Streak numeral",
      "html": "\n<div class=\"stk\"><div class=\"big\"><span class=\"n\">147</span><span class=\"l\">day streak</span></div><div class=\"mini\"><div><b>3</b><span>habits</span></div><div><b>92%</b><span>this year</span></div><div><b>11</b><span>free misses left</span></div></div></div>"
    },
    {
      "key": "grid",
      "name": "Year grid",
      "html": "\n<section class=\"yr\"><h2>This year</h2><div class=\"sq\"><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i></i><i class=\"l1\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i></div><p class=\"key\"><span>Less</span><i></i><i class=\"l1\"></i><i class=\"l2\"></i><i class=\"l3\"></i><span>More</span></p></section>"
    },
    {
      "key": "badges",
      "name": "Shape badges",
      "html": "\n<section class=\"bg\"><h2>Badges</h2><div class=\"row\"><div class=\"b circ\"><span>100</span><em>Hundred days</em></div><div class=\"b sq2\"><span>3×</span><em>Triple habit</em></div><div class=\"b tri\"><span>↺</span><em>Came back</em></div><div class=\"b circ off\"><span>365</span><em>Locked</em></div></div></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "signal-pop-profile",
    "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-profile.json",
  "structure": "Banner strip with an avatar that overhangs it by half, a giant streak numeral on the left and a 52-week contribution grid filling the right at full width.",
  "html": "<div class=\"dz dz-signal-pop-profile\" data-design=\"signal-pop-profile\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"banner\" aria-label=\"Banner + avatar\">\n<header class=\"bn\"><img src=\"https://designlookbook.dev/assets/img/signal-pop-dots.webp\" alt=\"An irregular grid of orange and blue dots on cream\"><div class=\"av\">TA</div><div class=\"who\"><h1>Tunde A.</h1><p>Reading, running, no phone after nine. Since March 2024.</p></div><button type=\"button\" class=\"fol\">Follow</button></header></section>\n<section class=\"dz-mod\" data-mod=\"streak\" aria-label=\"Streak numeral\">\n<div class=\"stk\"><div class=\"big\"><span class=\"n\">147</span><span class=\"l\">day streak</span></div><div class=\"mini\"><div><b>3</b><span>habits</span></div><div><b>92%</b><span>this year</span></div><div><b>11</b><span>free misses left</span></div></div></div></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Year grid\">\n<section class=\"yr\"><h2>This year</h2><div class=\"sq\"><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i></i><i class=\"l1\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l2\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l1\"></i><i class=\"l3\"></i><i class=\"l3\"></i><i class=\"l3\"></i></div><p class=\"key\"><span>Less</span><i></i><i class=\"l1\"></i><i class=\"l2\"></i><i class=\"l3\"></i><span>More</span></p></section></section>\n<section class=\"dz-mod\" data-mod=\"badges\" aria-label=\"Shape badges\">\n<section class=\"bg\"><h2>Badges</h2><div class=\"row\"><div class=\"b circ\"><span>100</span><em>Hundred days</em></div><div class=\"b sq2\"><span>3×</span><em>Triple habit</em></div><div class=\"b tri\"><span>↺</span><em>Came back</em></div><div class=\"b circ off\"><span>365</span><em>Locked</em></div></div></section></section>\n</div>",
  "css": "\n.dz-signal-pop-profile { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 30px; }\n.dz-signal-pop-profile .bn { position: relative; padding: 0 30px; margin-bottom: 46px; }\n.dz-signal-pop-profile .bn img { width: 100%; height: 130px; object-fit: cover; display: block; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); filter: var(--img-filter); }\n.dz-signal-pop-profile .av { position: absolute; left: 52px; bottom: -34px; display: grid; place-items: center; width: 88px; height: 88px; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-family: var(--pv-display); font-size: 28px; box-shadow: 5px 5px 0 var(--foreground); }\n.dz-signal-pop-profile .who { position: absolute; left: 156px; bottom: -30px; }\n.dz-signal-pop-profile .who h1 { font-family: var(--pv-display); font-size: 28px; text-transform: uppercase; margin: 0 0 2px; }\n.dz-signal-pop-profile .who p { margin: 0; font-size: 13.5px; color: var(--muted-foreground); }\n.dz-signal-pop-profile .fol { position: absolute; right: 46px; bottom: -24px; font: inherit; font-family: var(--pv-display); font-size: 14px; text-transform: uppercase; padding: 11px 24px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); background: var(--card); box-shadow: 5px 5px 0 var(--foreground); color: var(--foreground); cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-profile .fol:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--foreground); }\n.dz-signal-pop-profile .stk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center; padding: 0 30px; margin-bottom: 26px; }\n.dz-signal-pop-profile .big { 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); padding: 16px 30px; text-align: center; }\n.dz-signal-pop-profile .n { display: block; font-family: var(--pv-display); font-size: 62px; line-height: 1; letter-spacing: -.04em; }\n.dz-signal-pop-profile .l { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }\n.dz-signal-pop-profile .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }\n.dz-signal-pop-profile .mini div { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 14px 16px; }\n.dz-signal-pop-profile .mini b { display: block; font-family: var(--pv-display); font-size: 30px; }\n.dz-signal-pop-profile .mini span { font-size: 12px; font-weight: 600; color: var(--muted-foreground); }\n.dz-signal-pop-profile .yr, .dz-signal-pop-profile .bg { padding: 0 30px; margin-bottom: 24px; }\n.dz-signal-pop-profile h2 { font-family: var(--pv-display); font-size: 16px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }\n.dz-signal-pop-profile .sq { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 4px; }\n.dz-signal-pop-profile .sq i, .dz-signal-pop-profile .key i { border: var(--pv-bw) solid var(--foreground); border-radius: 3px; background: var(--background); aspect-ratio: 1; }\n.dz-signal-pop-profile .l1 { background: color-mix(in srgb, var(--primary) 34%, var(--background)) !important; }\n.dz-signal-pop-profile .l2 { background: color-mix(in srgb, var(--primary) 66%, var(--background)) !important; }\n.dz-signal-pop-profile .l3 { background: var(--primary) !important; }\n.dz-signal-pop-profile .key { display: flex; align-items: center; gap: 5px; margin: 12px 0 0; font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-signal-pop-profile .key i { width: 14px; }\n.dz-signal-pop-profile .row { display: flex; gap: 20px; }\n.dz-signal-pop-profile .b { text-align: center; }\n.dz-signal-pop-profile .b span { display: grid; place-items: center; width: 72px; height: 72px; border: var(--pv-bw) solid var(--foreground); background: var(--accent); color: var(--accent-foreground); font-family: var(--pv-display); font-size: 20px; box-shadow: 4px 4px 0 var(--foreground); }\n.dz-signal-pop-profile .circ span { border-radius: 50%; }\n.dz-signal-pop-profile .sq2 span { border-radius: var(--pv-radius); }\n.dz-signal-pop-profile .tri span { border-radius: var(--pv-radius) var(--pv-radius-sm) var(--pv-radius) var(--pv-radius-sm); background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-profile .b.off span { background: var(--muted); color: var(--muted-foreground); box-shadow: none; }\n.dz-signal-pop-profile .b em { display: block; font-style: normal; margin-top: 9px; font-size: 12px; font-weight: 700; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-profile *, .dz-signal-pop-profile *::before, .dz-signal-pop-profile *::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"
}