{
  "id": "studio-vellum-commission",
  "name": "Commission Tiers",
  "theme": "studio-vellum",
  "category": "Pricing",
  "description": "Commission levels laid out as a horizontal scale rather than three cards, so the choice reads as a position on a line instead of a menu.",
  "layout": "A single horizontal axis with three marks along it; each mark drops a column of detail below the line, and the currently selected one extends its rule to full weight.",
  "modules": [
    {
      "key": "head",
      "name": "Commission header",
      "html": "\n<header class=\"ch\"><span class=\"k\">Commission</span><h1>How much of us do you need?</h1><p>The same two people work on all three. What changes is how long, and how much of the thinking you do yourself.</p></header>"
    },
    {
      "key": "scale",
      "name": "The scale",
      "html": "\n<div class=\"sc\">\n  <div class=\"axis\"><i class=\"tick t1\"></i><i class=\"tick t2\"></i><i class=\"tick t3\"></i></div>\n  <div class=\"cols\">\n    <div class=\"col\"><span class=\"pt\">A day</span><b>£1,800</b><p>One day on a specific problem. You leave with a direction and no files.</p><ul><li>Half a day of preparation</li><li>One day together</li><li>Notes within a week</li></ul></div>\n    <div class=\"col on\"><span class=\"pt\">A project</span><b>£24,000</b><p>Nine weeks, one direction, everything delivered in working form.</p><ul><li>Identity or editorial system</li><li>System document</li><li>Fonts licensed to you</li><li>One revision round</li></ul></div>\n    <div class=\"col\"><span class=\"pt\">A year</span><b>£96,000</b><p>Two days a week for twelve months. For studios building something that keeps moving.</p><ul><li>Everything in a project</li><li>Ongoing art direction</li><li>Right of first refusal on our calendar</li></ul></div>\n  </div>\n</div>"
    },
    {
      "key": "note",
      "name": "Fee note",
      "html": "\n<footer class=\"fn\"><p>All figures exclude VAT and print. We do not discount and we do not do rate cards; if the number is wrong for you, say so and we will tell you honestly whether a smaller version of the work exists.</p><a class=\"und\" href=\"#\">Enquire about a commission</a></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "studio-vellum-commission",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:47:06+09:00",
    "updatedAt": "2026-08-29T18:47:06+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/studio-vellum-commission.json",
  "structure": "A single horizontal axis with three marks along it; each mark drops a column of detail below the line, and the currently selected one extends its rule to full weight.",
  "html": "<div class=\"dz dz-studio-vellum-commission\" data-design=\"studio-vellum-commission\" data-theme=\"studio-vellum\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Commission header\">\n<header class=\"ch\"><span class=\"k\">Commission</span><h1>How much of us do you need?</h1><p>The same two people work on all three. What changes is how long, and how much of the thinking you do yourself.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"scale\" aria-label=\"The scale\">\n<div class=\"sc\">\n  <div class=\"axis\"><i class=\"tick t1\"></i><i class=\"tick t2\"></i><i class=\"tick t3\"></i></div>\n  <div class=\"cols\">\n    <div class=\"col\"><span class=\"pt\">A day</span><b>£1,800</b><p>One day on a specific problem. You leave with a direction and no files.</p><ul><li>Half a day of preparation</li><li>One day together</li><li>Notes within a week</li></ul></div>\n    <div class=\"col on\"><span class=\"pt\">A project</span><b>£24,000</b><p>Nine weeks, one direction, everything delivered in working form.</p><ul><li>Identity or editorial system</li><li>System document</li><li>Fonts licensed to you</li><li>One revision round</li></ul></div>\n    <div class=\"col\"><span class=\"pt\">A year</span><b>£96,000</b><p>Two days a week for twelve months. For studios building something that keeps moving.</p><ul><li>Everything in a project</li><li>Ongoing art direction</li><li>Right of first refusal on our calendar</li></ul></div>\n  </div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Fee note\">\n<footer class=\"fn\"><p>All figures exclude VAT and print. We do not discount and we do not do rate cards; if the number is wrong for you, say so and we will tell you honestly whether a smaller version of the work exists.</p><a class=\"und\" href=\"#\">Enquire about a commission</a></footer></section>\n</div>",
  "css": "\n.dz-studio-vellum-commission { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 44px 44px 40px; }\n.dz-studio-vellum-commission .ch { max-width: 42rem; margin: 0 auto 44px; text-align: center; }\n.dz-studio-vellum-commission .k { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-commission .ch h1 { font-family: var(--pv-display); font-size: 44px; font-weight: 400; letter-spacing: -.025em; margin: 10px 0 12px; }\n.dz-studio-vellum-commission .ch p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted-foreground); }\n.dz-studio-vellum-commission .axis { position: relative; height: var(--pv-bw); background: var(--border); margin-bottom: 0; }\n.dz-studio-vellum-commission .tick { position: absolute; top: -5px; width: var(--pv-bw); height: 11px; background: var(--foreground); }\n.dz-studio-vellum-commission .t1 { left: 16.6%; }\n.dz-studio-vellum-commission .t2 { left: 50%; background: var(--primary); height: 17px; top: -8px; width: 2px; }\n.dz-studio-vellum-commission .t3 { left: 83.3%; }\n.dz-studio-vellum-commission .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding-top: 26px; }\n.dz-studio-vellum-commission .col { text-align: center; }\n.dz-studio-vellum-commission .pt { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-commission .col b { display: block; font-family: var(--pv-display); font-size: 38px; font-weight: 400; margin: 8px 0 12px; }\n.dz-studio-vellum-commission .col.on b { color: var(--primary); }\n.dz-studio-vellum-commission .col p { margin: 0 0 16px; font-size: 14px; line-height: 1.66; color: var(--muted-foreground); max-width: 30ch; margin-left: auto; margin-right: auto; }\n.dz-studio-vellum-commission .col ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: var(--pv-bw) solid var(--border); text-align: left; max-width: 24rem; margin-left: auto; margin-right: auto; }\n.dz-studio-vellum-commission .col.on ul { border-top-color: var(--foreground); }\n.dz-studio-vellum-commission .col li { font-size: 13px; padding: 6px 0; color: var(--muted-foreground); }\n.dz-studio-vellum-commission .fn { max-width: 42rem; margin: 44px auto 0; padding-top: 22px; border-top: var(--pv-bw) solid var(--border); }\n.dz-studio-vellum-commission .fn p { margin: 0 0 18px; font-size: 14px; line-height: 1.74; color: var(--muted-foreground); }\n.dz-studio-vellum-commission .und { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--foreground); text-decoration: none; padding-bottom: 6px; background-image: linear-gradient(var(--primary), var(--primary)); background-size: 34% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-slow) var(--ease); }\n.dz-studio-vellum-commission .und:hover, .dz-studio-vellum-commission .und:focus-visible { background-size: 100% 1px; }\n@media (prefers-reduced-motion: reduce) { .dz-studio-vellum-commission *, .dz-studio-vellum-commission *::before, .dz-studio-vellum-commission *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/studio-vellum.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}