{
  "id": "ledger-green-books",
  "name": "Books Shell",
  "theme": "ledger-green",
  "category": "App Shell",
  "description": "The navigation frame for a set of books, where the account tree carries running balances in mono and the period lock is stated rather than hidden.",
  "layout": "A 240px account tree with right-aligned mono balances, a ruled content area, and a period bar that states which months are locked.",
  "modules": [
    {
      "key": "top",
      "name": "Books bar",
      "html": "\n<header class=\"tp\"><span class=\"lg\">Ledger Green</span><nav><a class=\"on\" href=\"#\">Journal</a><a href=\"#\">Trial balance</a><a href=\"#\">Statements</a><a href=\"#\">Reconcile</a></nav><span class=\"pd\">Arden Holdings · FY ending 31 Dec 2026</span></header>"
    },
    {
      "key": "period",
      "name": "Period bar",
      "html": "\n<div class=\"pb\"><span class=\"k\">Locked</span><span class=\"mo lk\">Jan</span><span class=\"mo lk\">Feb</span><span class=\"mo on\">Mar</span><span class=\"mo\">Apr</span><span class=\"mo\">May</span><span class=\"mo\">Jun</span><span class=\"mo\">Jul</span><span class=\"mo\">Aug</span><span class=\"mo\">Sep</span><span class=\"mo\">Oct</span><span class=\"mo\">Nov</span><span class=\"mo\">Dec</span><span class=\"nt2\">January and February are locked. Posting into them requires a reversing entry in March.</span></div>"
    },
    {
      "key": "tree",
      "name": "Account tree",
      "html": "\n<aside class=\"tr\"><span class=\"k\">Accounts</span>\n<div class=\"gp\">Assets</div>\n<a href=\"#\"><span class=\"ac\">1100</span><span>Receivables</span><b>48,204.00</b></a>\n<a class=\"on\" href=\"#\"><span class=\"ac\">1200</span><span>Bank</span><b>112,880.41</b></a>\n<a href=\"#\"><span class=\"ac\">1800</span><span>Fixtures</span><b>59,400.00</b></a>\n<div class=\"gp\">Liabilities</div>\n<a href=\"#\"><span class=\"ac\">2100</span><span>Payables</span><b>(31,118.60)</b></a>\n<a href=\"#\"><span class=\"ac\">2200</span><span>VAT control</span><b>(14,806.20)</b></a>\n<div class=\"gp\">Income</div>\n<a href=\"#\"><span class=\"ac\">4000</span><span>Services</span><b>(204,900.00)</b></a>\n<div class=\"gp\">Expense</div>\n<a href=\"#\"><span class=\"ac\">7100</span><span>Rent</span><b>25,800.00</b></a>\n<a href=\"#\"><span class=\"ac\">7200</span><span>Staff</span><b>88,140.00</b></a>\n</aside>"
    },
    {
      "key": "body",
      "name": "Account detail",
      "html": "\n<section class=\"bd\"><header class=\"bh\"><h1>1200 · Bank current account</h1><span class=\"mn\">184 entries · reconciled to 09 Mar</span></header>\n<div class=\"hd\"><span>Date</span><span>Description</span><span class=\"db\">Debit</span><span class=\"cr\">Credit</span><span class=\"db\">Balance</span></div>\n<div class=\"rw\"><span class=\"dt\">04 Mar</span><span>Opening balance</span><span class=\"db\"></span><span class=\"cr\"></span><span class=\"db\">111,910.41</span></div>\n<div class=\"rw\"><span class=\"dt\">09 Mar</span><span>Rent, Slade Row</span><span class=\"db\"></span><span class=\"cr\">2,150.00</span><span class=\"db\">109,760.41</span></div>\n<div class=\"rw\"><span class=\"dt\">12 Mar</span><span>Receipt, Nendrum Developments</span><span class=\"db\">3,120.00</span><span class=\"cr\"></span><span class=\"db\">112,880.41</span></div>\n<div class=\"rw tot\"><span></span><span class=\"lb\">Balance carried forward</span><span class=\"db\"></span><span class=\"cr\"></span><span class=\"db dbl\">112,880.41</span></div>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "ledger-green-books",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:35:04+09:00",
    "updatedAt": "2026-09-02T01:35:04+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/ledger-green-books.json",
  "structure": "A 240px account tree with right-aligned mono balances, a ruled content area, and a period bar that states which months are locked.",
  "html": "<div class=\"dz dz-ledger-green-books\" data-design=\"ledger-green-books\" data-theme=\"ledger-green\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Books bar\">\n<header class=\"tp\"><span class=\"lg\">Ledger Green</span><nav><a class=\"on\" href=\"#\">Journal</a><a href=\"#\">Trial balance</a><a href=\"#\">Statements</a><a href=\"#\">Reconcile</a></nav><span class=\"pd\">Arden Holdings · FY ending 31 Dec 2026</span></header></section>\n<section class=\"dz-mod\" data-mod=\"period\" aria-label=\"Period bar\">\n<div class=\"pb\"><span class=\"k\">Locked</span><span class=\"mo lk\">Jan</span><span class=\"mo lk\">Feb</span><span class=\"mo on\">Mar</span><span class=\"mo\">Apr</span><span class=\"mo\">May</span><span class=\"mo\">Jun</span><span class=\"mo\">Jul</span><span class=\"mo\">Aug</span><span class=\"mo\">Sep</span><span class=\"mo\">Oct</span><span class=\"mo\">Nov</span><span class=\"mo\">Dec</span><span class=\"nt2\">January and February are locked. Posting into them requires a reversing entry in March.</span></div></section>\n<section class=\"dz-mod\" data-mod=\"tree\" aria-label=\"Account tree\">\n<aside class=\"tr\"><span class=\"k\">Accounts</span>\n<div class=\"gp\">Assets</div>\n<a href=\"#\"><span class=\"ac\">1100</span><span>Receivables</span><b>48,204.00</b></a>\n<a class=\"on\" href=\"#\"><span class=\"ac\">1200</span><span>Bank</span><b>112,880.41</b></a>\n<a href=\"#\"><span class=\"ac\">1800</span><span>Fixtures</span><b>59,400.00</b></a>\n<div class=\"gp\">Liabilities</div>\n<a href=\"#\"><span class=\"ac\">2100</span><span>Payables</span><b>(31,118.60)</b></a>\n<a href=\"#\"><span class=\"ac\">2200</span><span>VAT control</span><b>(14,806.20)</b></a>\n<div class=\"gp\">Income</div>\n<a href=\"#\"><span class=\"ac\">4000</span><span>Services</span><b>(204,900.00)</b></a>\n<div class=\"gp\">Expense</div>\n<a href=\"#\"><span class=\"ac\">7100</span><span>Rent</span><b>25,800.00</b></a>\n<a href=\"#\"><span class=\"ac\">7200</span><span>Staff</span><b>88,140.00</b></a>\n</aside></section>\n<section class=\"dz-mod\" data-mod=\"body\" aria-label=\"Account detail\">\n<section class=\"bd\"><header class=\"bh\"><h1>1200 · Bank current account</h1><span class=\"mn\">184 entries · reconciled to 09 Mar</span></header>\n<div class=\"hd\"><span>Date</span><span>Description</span><span class=\"db\">Debit</span><span class=\"cr\">Credit</span><span class=\"db\">Balance</span></div>\n<div class=\"rw\"><span class=\"dt\">04 Mar</span><span>Opening balance</span><span class=\"db\"></span><span class=\"cr\"></span><span class=\"db\">111,910.41</span></div>\n<div class=\"rw\"><span class=\"dt\">09 Mar</span><span>Rent, Slade Row</span><span class=\"db\"></span><span class=\"cr\">2,150.00</span><span class=\"db\">109,760.41</span></div>\n<div class=\"rw\"><span class=\"dt\">12 Mar</span><span>Receipt, Nendrum Developments</span><span class=\"db\">3,120.00</span><span class=\"cr\"></span><span class=\"db\">112,880.41</span></div>\n<div class=\"rw tot\"><span></span><span class=\"lb\">Balance carried forward</span><span class=\"db\"></span><span class=\"cr\"></span><span class=\"db dbl\">112,880.41</span></div>\n</section></section>\n</div>",
  "css": "\n.dz-ledger-green-books { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 260px 1fr; grid-template-rows: auto auto 1fr; min-height: 620px; }\n.dz-ledger-green-books .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n.dz-ledger-green-books .mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-ledger-green-books .tp, .dz-ledger-green-books .pb { grid-column: 1 / -1; }\n.dz-ledger-green-books .tp { display: flex; align-items: center; gap: 26px; height: 52px; padding: 0 26px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-ledger-green-books .lg { font-family: var(--pv-display); font-weight: 700; font-size: 19px; }\n.dz-ledger-green-books .tp nav { display: flex; gap: 18px; }\n.dz-ledger-green-books .tp a { color: var(--muted-foreground); text-decoration: none; font-size: 14px; padding-bottom: 3px; }\n.dz-ledger-green-books .tp a.on { color: var(--foreground); border-bottom: 2px solid var(--primary); }\n.dz-ledger-green-books .pd { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); margin-left: auto; }\n.dz-ledger-green-books .pb { display: flex; align-items: center; gap: 6px; padding: 10px 26px; border-bottom: 1px solid var(--border); }\n.dz-ledger-green-books .mo { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; border: 1px solid var(--border); border-radius: 2px; padding: 5px 9px; color: var(--muted-foreground); }\n.dz-ledger-green-books .mo.lk { background: var(--secondary); }\n.dz-ledger-green-books .mo.on { border-color: var(--primary); color: var(--primary); }\n.dz-ledger-green-books .nt2 { font-size: 13px; color: var(--muted-foreground); margin-left: 16px; }\n.dz-ledger-green-books .tr { border-right: 1px solid var(--border); padding: 18px 14px; }\n.dz-ledger-green-books .tr a { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 6px; color: var(--foreground); text-decoration: none; font-size: 13.5px; border-radius: 2px; }\n.dz-ledger-green-books .tr a.on { background: var(--secondary); }\n.dz-ledger-green-books .tr b { font-family: var(--pv-mono); font-size: 13px; font-weight: 400; font-size: 12px; }\n.dz-ledger-green-books .gp { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--primary); padding: 14px 0 6px; }\n.dz-ledger-green-books .ac { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); }\n.dz-ledger-green-books .bd { padding: 20px 26px; }\n.dz-ledger-green-books .bh { display: flex; align-items: baseline; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }\n.dz-ledger-green-books h1 { font-family: var(--pv-display); font-weight: 700; font-size: 26px; margin: 0; }\n.dz-ledger-green-books .bh .mn { color: var(--muted-foreground); }\n.dz-ledger-green-books .hd, .dz-ledger-green-books .rw { display: grid; grid-template-columns: 72px 1fr 140px 140px 140px; gap: 16px; align-items: baseline; }\n.dz-ledger-green-books .hd { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n.dz-ledger-green-books .rw { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.68; }\n.dz-ledger-green-books .dt { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); }\n\n.dz-ledger-green-books .db, .dz-ledger-green-books .cr { font-family: var(--pv-mono); font-size: 13px; text-align: right; }\n.dz-ledger-green-books .dbl { border-bottom: 1px solid var(--foreground); box-shadow: 0 3px 0 -1px var(--background), 0 4px 0 -1px var(--foreground); }\n.dz-ledger-green-books .adj { color: var(--accent); }\n.dz-ledger-green-books .tot { border-bottom: 0; padding-top: 12px; }\n.dz-ledger-green-books .lb { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; }\n@media (prefers-reduced-motion: reduce) { .dz-ledger-green-books *, .dz-ledger-green-books *::before, .dz-ledger-green-books *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/ledger-green.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;500;600;700&family=Oxygen+Mono:wght@400;500;600;700&display=swap"
}