{
  "id": "chancery-lane-redline",
  "name": "Redline",
  "theme": "chancery-lane",
  "category": "Data & Reports",
  "description": "A comparison between two versions where insertions are violet-underlined and deletions struck, never highlighted, so the page stays printable and the rail carries the change register.",
  "layout": "The same 68ch column and 120px rail; a version bar above, a change register in the rail, and inline marks rather than coloured backgrounds.",
  "modules": [
    {
      "key": "bar",
      "name": "Version bar",
      "html": "\n<header class=\"vb\"><div><span class=\"k\">Comparing</span><p class=\"v\">v6.4 <span class=\"ar\">→</span> v7.2</p></div><div class=\"ct\"><span><b>14</b> insertions</span><span><b>9</b> deletions</span><span><b>3</b> moved</span></div><button class=\"bt\">Accept all in clause 4</button></header>"
    },
    {
      "key": "diff",
      "name": "Redlined clauses",
      "html": "\n<div class=\"doc\">\n  <div class=\"bd\">\n    <section class=\"cl\"><span class=\"no\">4.1</span><p>The Client shall pay the Charges set out in Schedule 2 within <del>forty-five (45)</del> <ins>thirty (30)</ins> days of the date of a correctly rendered invoice.</p></section>\n    <section class=\"cl\"><span class=\"no\">4.2</span><p>The Supplier may increase the Charges <ins>once in any twelve (12) month period</ins> on not less than sixty (60) days' written notice<del>, at its sole discretion</del>.</p></section>\n    <section class=\"cl\"><span class=\"no\">4.3</span><p><del>The Client shall have no right of set-off in respect of any sum due under this Agreement.</del></p></section>\n  </div>\n  <aside class=\"rl\">\n    <div class=\"mk\"><span class=\"c\">R.Okafor</span><span class=\"l\">payment terms</span></div>\n    <div class=\"mk\"><span class=\"c\">R.Okafor</span><span class=\"l\">cap added</span></div>\n    <div class=\"mk hot\"><span class=\"c\">Disputed</span><span class=\"l\">set-off</span></div>\n  </aside>\n</div>"
    },
    {
      "key": "reg",
      "name": "Change register",
      "html": "\n<section class=\"rg\"><span class=\"k\">Change register</span><table><thead><tr><th>Clause</th><th>Type</th><th>By</th><th>At</th><th>Status</th></tr></thead><tbody>\n<tr><td>4.1</td><td>Amendment</td><td>R. Okafor</td><td>11 Mar 09:42</td><td class=\"ac\">Accepted</td></tr>\n<tr><td>4.2</td><td>Insertion</td><td>R. Okafor</td><td>11 Mar 09:48</td><td class=\"ac\">Accepted</td></tr>\n<tr><td>4.3</td><td>Deletion</td><td>M. Devlin</td><td>12 Mar 16:05</td><td class=\"op\">Open</td></tr>\n</tbody></table></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "chancery-lane-redline",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:04:39+09:00",
    "updatedAt": "2026-09-02T01:04:39+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/chancery-lane-redline.json",
  "structure": "The same 68ch column and 120px rail; a version bar above, a change register in the rail, and inline marks rather than coloured backgrounds.",
  "html": "<div class=\"dz dz-chancery-lane-redline\" data-design=\"chancery-lane-redline\" data-theme=\"chancery-lane\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Version bar\">\n<header class=\"vb\"><div><span class=\"k\">Comparing</span><p class=\"v\">v6.4 <span class=\"ar\">→</span> v7.2</p></div><div class=\"ct\"><span><b>14</b> insertions</span><span><b>9</b> deletions</span><span><b>3</b> moved</span></div><button class=\"bt\">Accept all in clause 4</button></header></section>\n<section class=\"dz-mod\" data-mod=\"diff\" aria-label=\"Redlined clauses\">\n<div class=\"doc\">\n  <div class=\"bd\">\n    <section class=\"cl\"><span class=\"no\">4.1</span><p>The Client shall pay the Charges set out in Schedule 2 within <del>forty-five (45)</del> <ins>thirty (30)</ins> days of the date of a correctly rendered invoice.</p></section>\n    <section class=\"cl\"><span class=\"no\">4.2</span><p>The Supplier may increase the Charges <ins>once in any twelve (12) month period</ins> on not less than sixty (60) days' written notice<del>, at its sole discretion</del>.</p></section>\n    <section class=\"cl\"><span class=\"no\">4.3</span><p><del>The Client shall have no right of set-off in respect of any sum due under this Agreement.</del></p></section>\n  </div>\n  <aside class=\"rl\">\n    <div class=\"mk\"><span class=\"c\">R.Okafor</span><span class=\"l\">payment terms</span></div>\n    <div class=\"mk\"><span class=\"c\">R.Okafor</span><span class=\"l\">cap added</span></div>\n    <div class=\"mk hot\"><span class=\"c\">Disputed</span><span class=\"l\">set-off</span></div>\n  </aside>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"reg\" aria-label=\"Change register\">\n<section class=\"rg\"><span class=\"k\">Change register</span><table><thead><tr><th>Clause</th><th>Type</th><th>By</th><th>At</th><th>Status</th></tr></thead><tbody>\n<tr><td>4.1</td><td>Amendment</td><td>R. Okafor</td><td>11 Mar 09:42</td><td class=\"ac\">Accepted</td></tr>\n<tr><td>4.2</td><td>Insertion</td><td>R. Okafor</td><td>11 Mar 09:48</td><td class=\"ac\">Accepted</td></tr>\n<tr><td>4.3</td><td>Deletion</td><td>M. Devlin</td><td>12 Mar 16:05</td><td class=\"op\">Open</td></tr>\n</tbody></table></section></section>\n</div>",
  "css": "\n.dz-chancery-lane-redline { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px; }\n.dz-chancery-lane-redline .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-chancery-lane-redline .vb { max-width: calc(68ch + 146px); display: flex; align-items: flex-end; gap: 26px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }\n.dz-chancery-lane-redline .v { font-family: var(--pv-display); font-weight: 600; font-size: 30px; margin: 4px 0 0; }\n.dz-chancery-lane-redline .ar { color: var(--muted-foreground); }\n.dz-chancery-lane-redline .ct { display: flex; gap: 20px; font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); margin-left: auto; padding-bottom: 6px; }\n.dz-chancery-lane-redline .ct b { color: var(--foreground); font-weight: 400; }\n.dz-chancery-lane-redline .bt { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 11px 14px; font: inherit; font-size: 14px; cursor: pointer; }\n.dz-chancery-lane-redline .doc { display: grid; grid-template-columns: minmax(0, 68ch) 120px; gap: 26px; }\n.dz-chancery-lane-redline .doc { max-width: calc(68ch + 146px); }\n.dz-chancery-lane-redline .cl { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; margin-bottom: 16px; }\n.dz-chancery-lane-redline .no { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); }\n.dz-chancery-lane-redline .cl p { margin: 0; font-size: 16px; line-height: 1.7; }\n.dz-chancery-lane-redline ins { color: var(--primary); text-decoration: none; border-bottom: 2px solid var(--primary); }\n.dz-chancery-lane-redline del { color: var(--destructive); text-decoration: line-through; }\n.dz-chancery-lane-redline .rl { border-left: 1px solid var(--border); padding-left: 14px; }\n.dz-chancery-lane-redline .mk { min-height: 44px; margin-bottom: 16px; }\n.dz-chancery-lane-redline .mk .c { font-family: var(--pv-mono); font-size: 12.5px; display: block; }\n.dz-chancery-lane-redline .mk .l { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-chancery-lane-redline .mk.hot .c { color: var(--accent); }\n.dz-chancery-lane-redline .rg { max-width: calc(68ch + 146px); margin-top: 26px; border-top: 1px solid var(--border); padding-top: 16px; }\n.dz-chancery-lane-redline table { width: 100%; border-collapse: collapse; margin-top: 10px; }\n.dz-chancery-lane-redline th { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; text-align: left; color: var(--muted-foreground); padding: 6px 0; border-bottom: 1px solid var(--border); }\n.dz-chancery-lane-redline td { font-family: var(--pv-mono); font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid var(--border); }\n.dz-chancery-lane-redline .ac { color: var(--muted-foreground); }\n.dz-chancery-lane-redline .op { color: var(--accent); }\n@media (prefers-reduced-motion: reduce) { .dz-chancery-lane-redline *, .dz-chancery-lane-redline *::before, .dz-chancery-lane-redline *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/chancery-lane.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Faustina:wght@400;500;600;700&family=Anonymous+Pro:wght@400;500;600;700&display=swap"
}