{
  "id": "studio-vellum-enquiry",
  "name": "Enquiry Form",
  "theme": "studio-vellum",
  "category": "Settings & Forms",
  "description": "A contact form that asks for a budget range before it asks for a message, because that is the question that decides whether either of you should keep typing.",
  "layout": "Fields with no boxes — each input is a bottom rule only, set at 20px so it reads as writing on a page; the budget question is a row of ruled options above the message.",
  "modules": [
    {
      "key": "head",
      "name": "Enquiry header",
      "html": "\n<header class=\"eh\"><span class=\"k\">Enquiries</span><h1>Tell us the number first.</h1><p>We would rather find out in the first minute than the third meeting. Nothing here is binding.</p></header>"
    },
    {
      "key": "budget",
      "name": "Budget question",
      "html": "\n<fieldset class=\"bg\"><legend>Budget available for this work</legend>\n  <div class=\"opts\"><label><input type=\"radio\" name=\"sv-bg\"> Under £10k</label><label><input type=\"radio\" name=\"sv-bg\" checked> £10k – £30k</label><label><input type=\"radio\" name=\"sv-bg\"> £30k – £100k</label><label><input type=\"radio\" name=\"sv-bg\"> Over £100k</label><label><input type=\"radio\" name=\"sv-bg\"> Not yet decided</label></div>\n</fieldset>"
    },
    {
      "key": "fields",
      "name": "Fields",
      "html": "\n<div class=\"fs\">\n  <div class=\"f\"><label for=\"sv-en-name\">Your name</label><input id=\"sv-en-name\" type=\"text\" autocomplete=\"name\"></div>\n  <div class=\"f\"><label for=\"sv-en-org\">Organisation</label><input id=\"sv-en-org\" type=\"text\" autocomplete=\"organization\"></div>\n  <div class=\"f\"><label for=\"sv-en-mail\">Email</label><input id=\"sv-en-mail\" type=\"email\" autocomplete=\"email\"></div>\n  <div class=\"f\"><label for=\"sv-en-when\">When would it start</label><input id=\"sv-en-when\" type=\"text\" placeholder=\"Month and year\"></div>\n  <div class=\"f wide\"><label for=\"sv-en-msg\">What is the work</label><textarea id=\"sv-en-msg\" rows=\"4\" placeholder=\"Three sentences is plenty.\"></textarea></div>\n</div>"
    },
    {
      "key": "send",
      "name": "Send",
      "html": "\n<footer class=\"sn\"><button type=\"button\">Send enquiry</button><p>We answer every enquiry within five working days, including the ones we decline.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "studio-vellum-enquiry",
    "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-enquiry.json",
  "structure": "Fields with no boxes — each input is a bottom rule only, set at 20px so it reads as writing on a page; the budget question is a row of ruled options above the message.",
  "html": "<div class=\"dz dz-studio-vellum-enquiry\" data-design=\"studio-vellum-enquiry\" data-theme=\"studio-vellum\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Enquiry header\">\n<header class=\"eh\"><span class=\"k\">Enquiries</span><h1>Tell us the number first.</h1><p>We would rather find out in the first minute than the third meeting. Nothing here is binding.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"budget\" aria-label=\"Budget question\">\n<fieldset class=\"bg\"><legend>Budget available for this work</legend>\n  <div class=\"opts\"><label><input type=\"radio\" name=\"sv-bg\"> Under £10k</label><label><input type=\"radio\" name=\"sv-bg\" checked> £10k – £30k</label><label><input type=\"radio\" name=\"sv-bg\"> £30k – £100k</label><label><input type=\"radio\" name=\"sv-bg\"> Over £100k</label><label><input type=\"radio\" name=\"sv-bg\"> Not yet decided</label></div>\n</fieldset></section>\n<section class=\"dz-mod\" data-mod=\"fields\" aria-label=\"Fields\">\n<div class=\"fs\">\n  <div class=\"f\"><label for=\"sv-en-name\">Your name</label><input id=\"sv-en-name\" type=\"text\" autocomplete=\"name\"></div>\n  <div class=\"f\"><label for=\"sv-en-org\">Organisation</label><input id=\"sv-en-org\" type=\"text\" autocomplete=\"organization\"></div>\n  <div class=\"f\"><label for=\"sv-en-mail\">Email</label><input id=\"sv-en-mail\" type=\"email\" autocomplete=\"email\"></div>\n  <div class=\"f\"><label for=\"sv-en-when\">When would it start</label><input id=\"sv-en-when\" type=\"text\" placeholder=\"Month and year\"></div>\n  <div class=\"f wide\"><label for=\"sv-en-msg\">What is the work</label><textarea id=\"sv-en-msg\" rows=\"4\" placeholder=\"Three sentences is plenty.\"></textarea></div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"send\" aria-label=\"Send\">\n<footer class=\"sn\"><button type=\"button\">Send enquiry</button><p>We answer every enquiry within five working days, including the ones we decline.</p></footer></section>\n</div>",
  "css": "\n.dz-studio-vellum-enquiry { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 44px 44px 44px; }\n.dz-studio-vellum-enquiry .eh, .dz-studio-vellum-enquiry .bg, .dz-studio-vellum-enquiry .fs, .dz-studio-vellum-enquiry .sn { max-width: 40rem; margin-left: auto; margin-right: auto; }\n.dz-studio-vellum-enquiry .k { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-enquiry .eh h1 { font-family: var(--pv-display); font-size: 44px; font-weight: 400; letter-spacing: -.025em; margin: 10px 0 12px; }\n.dz-studio-vellum-enquiry .eh p { margin: 0 0 40px; font-size: 15px; line-height: 1.7; color: var(--muted-foreground); max-width: 40ch; }\n.dz-studio-vellum-enquiry .bg { border: 0; padding: 0; margin-bottom: 36px; }\n.dz-studio-vellum-enquiry .bg legend { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); padding: 0 0 14px; }\n.dz-studio-vellum-enquiry .opts { display: flex; flex-wrap: wrap; gap: 0; border-top: var(--pv-bw) solid var(--foreground); }\n.dz-studio-vellum-enquiry .opts label { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; padding: 13px 18px 13px 0; border-bottom: var(--pv-bw) solid var(--border); font-size: 14.5px; cursor: pointer; white-space: nowrap; }\n.dz-studio-vellum-enquiry .opts input { accent-color: var(--primary); width: 14px; height: 14px; }\n.dz-studio-vellum-enquiry .fs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 30px; }\n.dz-studio-vellum-enquiry .f { display: flex; flex-direction: column; gap: 8px; }\n.dz-studio-vellum-enquiry .f.wide { grid-column: 1 / -1; }\n.dz-studio-vellum-enquiry .f label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-enquiry .f input, .dz-studio-vellum-enquiry .f textarea { font: inherit; font-family: var(--pv-display); font-size: 20px; padding: 4px 0 10px; border: 0; border-bottom: var(--pv-bw) solid var(--foreground); background: none; color: var(--foreground); resize: vertical; }\n.dz-studio-vellum-enquiry .f input::placeholder, .dz-studio-vellum-enquiry .f textarea::placeholder { color: var(--muted-foreground); opacity: .6; }\n.dz-studio-vellum-enquiry .f input:focus-visible, .dz-studio-vellum-enquiry .f textarea:focus-visible { outline: none; border-bottom-color: var(--primary); border-bottom-width: 2px; }\n.dz-studio-vellum-enquiry .sn { margin-top: 40px; }\n.dz-studio-vellum-enquiry .sn button { font: inherit; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 16px 40px; border: var(--pv-bw) solid var(--foreground); background: none; color: var(--foreground); cursor: pointer; transition: background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }\n.dz-studio-vellum-enquiry .sn button:hover { background: var(--foreground); color: var(--background); }\n.dz-studio-vellum-enquiry .sn p { margin: 16px 0 0; font-size: 12.5px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-studio-vellum-enquiry *, .dz-studio-vellum-enquiry *::before, .dz-studio-vellum-enquiry *::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"
}