{
  "id": "ledger-green-entry",
  "name": "New Entry",
  "theme": "ledger-green",
  "category": "Settings & Forms",
  "description": "Entering a transaction as a journal rather than as an amount with a direction dropdown: two money fields side by side, one of which stays empty.",
  "layout": "A repeating line with the same five columns the journal uses, so the form and the report have identical geometry, and a live double-ruled total.",
  "modules": [
    {
      "key": "head",
      "name": "Entry header",
      "html": "\n<header class=\"eh\"><span class=\"k\">New journal entry</span><h1>Post to March 2026</h1><p>The shape of this form is the shape of a journal. There is no direction dropdown — put the figure in the column it belongs in, and leave the other one empty.</p></header>"
    },
    {
      "key": "meta",
      "name": "Entry metadata",
      "html": "\n<section class=\"mt\"><label><span class=\"k\">Date</span><input class=\"mn\" value=\"2026-03-18\"></label><label><span class=\"k\">Reference</span><input class=\"mn\" value=\"J-091\"></label><label class=\"wide\"><span class=\"k\">Narrative</span><input value=\"Depreciation, fixtures, month 14\"></label></section>"
    },
    {
      "key": "lines",
      "name": "Entry lines",
      "html": "\n<section class=\"tb\"><div class=\"hd\"><span>Account</span><span>Description</span><span class=\"db\">Debit</span><span class=\"cr\">Credit</span><span></span></div>\n<div class=\"rw\"><input class=\"ac mn\" value=\"7400\"><input value=\"Depreciation charge\"><input class=\"db mn\" value=\"412.50\"><input class=\"cr mn\" value=\"\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw\"><input class=\"ac mn\" value=\"1810\"><input value=\"Accumulated depreciation\"><input class=\"db mn\" value=\"\"><input class=\"cr mn\" value=\"412.50\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw\"><input class=\"ac mn\" value=\"\"><input value=\"\"><input class=\"db mn\" value=\"\"><input class=\"cr mn\" value=\"\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw tot\"><span></span><span class=\"lb\">Entry totals</span><span class=\"db dbl\">412.50</span><span class=\"cr dbl\">412.50</span><span></span></div>\n</section>"
    },
    {
      "key": "post",
      "name": "Post bar",
      "html": "\n<footer class=\"pb\"><span class=\"bal\">In balance</span><button class=\"gh\">Save as draft</button><button class=\"pri\">Post entry</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "ledger-green-entry",
    "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-entry.json",
  "structure": "A repeating line with the same five columns the journal uses, so the form and the report have identical geometry, and a live double-ruled total.",
  "html": "<div class=\"dz dz-ledger-green-entry\" data-design=\"ledger-green-entry\" data-theme=\"ledger-green\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Entry header\">\n<header class=\"eh\"><span class=\"k\">New journal entry</span><h1>Post to March 2026</h1><p>The shape of this form is the shape of a journal. There is no direction dropdown — put the figure in the column it belongs in, and leave the other one empty.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"meta\" aria-label=\"Entry metadata\">\n<section class=\"mt\"><label><span class=\"k\">Date</span><input class=\"mn\" value=\"2026-03-18\"></label><label><span class=\"k\">Reference</span><input class=\"mn\" value=\"J-091\"></label><label class=\"wide\"><span class=\"k\">Narrative</span><input value=\"Depreciation, fixtures, month 14\"></label></section></section>\n<section class=\"dz-mod\" data-mod=\"lines\" aria-label=\"Entry lines\">\n<section class=\"tb\"><div class=\"hd\"><span>Account</span><span>Description</span><span class=\"db\">Debit</span><span class=\"cr\">Credit</span><span></span></div>\n<div class=\"rw\"><input class=\"ac mn\" value=\"7400\"><input value=\"Depreciation charge\"><input class=\"db mn\" value=\"412.50\"><input class=\"cr mn\" value=\"\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw\"><input class=\"ac mn\" value=\"1810\"><input value=\"Accumulated depreciation\"><input class=\"db mn\" value=\"\"><input class=\"cr mn\" value=\"412.50\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw\"><input class=\"ac mn\" value=\"\"><input value=\"\"><input class=\"db mn\" value=\"\"><input class=\"cr mn\" value=\"\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw tot\"><span></span><span class=\"lb\">Entry totals</span><span class=\"db dbl\">412.50</span><span class=\"cr dbl\">412.50</span><span></span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"post\" aria-label=\"Post bar\">\n<footer class=\"pb\"><span class=\"bal\">In balance</span><button class=\"gh\">Save as draft</button><button class=\"pri\">Post entry</button></footer></section>\n</div>",
  "css": "\n.dz-ledger-green-entry { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px; max-width: 980px; }\n.dz-ledger-green-entry .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; margin-bottom: 6px; }\n.dz-ledger-green-entry .mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-ledger-green-entry h1 { font-family: var(--pv-display); font-weight: 700; font-size: 26px; line-height: 1.2; margin: 4px 0 8px; }\n.dz-ledger-green-entry .eh p { margin: 0 0 24px; font-size: 14px; line-height: 1.68; color: var(--muted-foreground); max-width: 66ch; }\n.dz-ledger-green-entry .mt { display: grid; grid-template-columns: 180px 180px 1fr; gap: 20px; margin-bottom: 24px; }\n.dz-ledger-green-entry .mt .wide { grid-column: 3; }\n.dz-ledger-green-entry input { display: block; width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: 2px; color: var(--foreground); font: inherit; font-size: 14px; padding: 9px 10px; }\n.dz-ledger-green-entry input:focus { outline: none; border-color: var(--primary); }\n.dz-ledger-green-entry input.mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-ledger-green-entry .tb .hd, .dz-ledger-green-entry .tb .rw { display: grid; grid-template-columns: 100px 1fr 140px 140px 90px; gap: 12px; align-items: center; }\n.dz-ledger-green-entry .tb .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-entry .tb .rw { padding: 8px 0; border-bottom: 1px solid var(--border); }\n\n.dz-ledger-green-entry .db, .dz-ledger-green-entry .cr { font-family: var(--pv-mono); font-size: 13px; text-align: right; }\n.dz-ledger-green-entry .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-entry .adj { color: var(--accent); }\n.dz-ledger-green-entry input.db, .dz-ledger-green-entry input.cr { text-align: right; }\n.dz-ledger-green-entry .rm { background: transparent; border: 0; color: var(--muted-foreground); font: inherit; font-size: 13px; cursor: pointer; }\n.dz-ledger-green-entry .tot { border-bottom: 0; padding-top: 14px; align-items: baseline; }\n.dz-ledger-green-entry .lb { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; }\n.dz-ledger-green-entry .pb { display: flex; align-items: center; gap: 12px; margin-top: 20px; }\n.dz-ledger-green-entry .bal { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--primary); margin-right: auto; }\n.dz-ledger-green-entry .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 11px 20px; font: inherit; font-size: 14px; cursor: pointer; }\n.dz-ledger-green-entry .gh { background: transparent; color: var(--foreground); border: 1px solid var(--border); border-radius: 2px; padding: 11px 20px; font: inherit; font-size: 14px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-ledger-green-entry *, .dz-ledger-green-entry *::before, .dz-ledger-green-entry *::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"
}