{"id":"sft-newsletter-00","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Alder, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Alder Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Alder Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Alder Weekly — Notes from the bike shop</title>\n<style>\n:root{color-scheme:light;--paper:#f5f2ea;--ink:#233a2e;--muted:#64685e;--line:#d8d9ce;--green:#244b38}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;line-height:1.5}\n.shell{max-width:1080px;margin:auto;padding:0 40px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 0;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:12px}\n.mark{width:32px;height:32px;flex-shrink:0}\n.wordmark{font-weight:750;font-size:21px;letter-spacing:.13em;line-height:1.2}\n.brand-note{margin-top:4px;font-size:12px;color:var(--muted)}\n.schedule{font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}\nmain{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:76px;padding:68px 0 60px;align-items:start}\n.eyebrow{margin:0 0 16px;font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,\"Times New Roman\",serif;font-size:64px;font-weight:400;letter-spacing:-.045em;line-height:1.08}\n.value{margin:20px 0 8px;font-size:22px;line-height:1.4;letter-spacing:-.02em}\n.support{max-width:420px;margin:0;color:var(--muted);font-size:14px}\nform{margin-top:30px}\n.email-label{display:block;margin-bottom:8px;font-size:14px;font-weight:650}\ninput[type=email]{display:block;width:100%;min-width:0;height:52px;border:1px solid #929b8c;border-radius:4px;background:#fffdf8;padding:12px 14px;color:var(--ink);font:inherit;font-size:16px}\ninput::placeholder{color:#75796e;opacity:1}\n.digest{display:flex;align-items:flex-start;gap:11px;margin:20px 0 22px}\ninput[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin:3px 0 0;accent-color:var(--green)}\n.digest label{min-width:0;cursor:pointer}\n.label-title{display:block;font-size:14px;font-weight:650}\n.label-detail{display:block;margin-top:3px;font-size:12px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}\nbutton{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--green);border-radius:4px;background:var(--green);color:#fffdf8;padding:14px 18px;min-height:52px;font:inherit;font-size:15px;font-weight:650;cursor:pointer}\nbutton:hover{background:#183c2a}\nbutton svg{width:20px;height:20px;flex-shrink:0}\ninput:focus-visible,button:focus-visible{outline:3px solid #829681;outline-offset:3px}\n.privacy{margin:12px 0 0;color:var(--muted);font-size:12px;text-align:center}\naside{margin-top:8px;padding:24px 0 0 30px;border-left:1px solid var(--line)}\n.aside-kicker{margin:0 0 12px;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}\nh2{margin:0 0 24px;font-family:Georgia,\"Times New Roman\",serif;font-size:28px;font-weight:400;line-height:1.2;letter-spacing:-.02em}\n.reasons{list-style:none;margin:0;padding:0}\n.reasons li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:17px 0;border-top:1px solid var(--line)}\n.number{padding-top:2px;color:#687c69;font-size:11px;font-variant-numeric:tabular-nums}\nh3{margin:0 0 4px;font-size:14px;font-weight:650}\n.reasons p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}\n.aside-note{margin:20px 0 0;font-size:12px;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:20px 0 28px;color:var(--muted);font-size:12px}\n@media(max-width:700px){\n.shell{padding:0 24px}\nheader{padding:20px 0;gap:12px}\n.brand{gap:9px}\n.mark{width:26px;height:26px}\n.wordmark{font-size:18px}\n.brand-note{font-size:10px}\n.schedule{font-size:9px;letter-spacing:.07em}\nmain{grid-template-columns:minmax(0,1fr);gap:32px;padding:28px 0 30px}\n.eyebrow{margin-bottom:12px;font-size:10px}\nh1{font-size:46px}\n.value{margin-top:14px;font-size:20px}\n.support{font-size:13px}\nform{margin-top:22px}\n.digest{margin:16px 0 18px}\naside{margin:0;padding:22px 0 0;border-left:0;border-top:1px solid var(--line)}\nh2{font-size:25px;margin-bottom:16px}\n.reasons li{padding:13px 0}\n.aside-note{margin-top:12px}\nfooter{flex-wrap:wrap;gap:4px;padding-top:16px;font-size:11px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header>\n<div class=\"brand\">\n<svg class=\"mark\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n<circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"currentColor\" stroke-width=\"1.3\"/>\n<path d=\"M10 23L16 8l6 15M12.5 17h7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<div>\n<div class=\"wordmark\">ALDER</div>\n<div class=\"brand-note\">Bike shop &amp; local design journal</div>\n</div>\n</div>\n<div class=\"schedule\">Every Friday · Free</div>\n</header>\n\n<main>\n<section aria-labelledby=\"signup-heading\">\n<p class=\"eyebrow\">A good read for the road ahead</p>\n<h1 id=\"signup-heading\">Alder Weekly</h1>\n<p class=\"value\">Good design. Better days on two wheels.</p>\n<p class=\"support\">A short Friday read, written between repairs at our independent bike shop.</p>\n\n<form>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required>\n\n<div class=\"digest\">\n<input id=\"weekly\" name=\"weekly\" type=\"checkbox\" checked>\n<label for=\"weekly\">\n<span class=\"label-title\">Weekly digest</span>\n<span class=\"label-detail\">Local rides, thoughtful bike design, and practical workshop notes from the independent shop around the corner.</span>\n</label>\n</div>\n\n<button type=\"button\">\n<span>Subscribe</span>\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M4 12h15m-6-6 6 6-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n\n<aside aria-labelledby=\"reasons-heading\">\n<p class=\"aside-kicker\">Inside the journal</p>\n<h2 id=\"reasons-heading\">A little local perspective.</h2>\n<ol class=\"reasons\">\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>Find your next ride</h3><p>Quiet streets, good coffee stops, and routes shared by local riders.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Notice good design</h3><p>Meet the makers and small details that make everyday cycling better.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Keep your bike rolling</h3><p>Simple care tips and seasonal advice, straight from our workbench.</p></div>\n</li>\n</ol>\n<p class=\"aside-note\">About five minutes to read. No racing kit required.</p>\n</aside>\n</main>\n\n<footer>\n<span>Independent by nature. Local by choice.</span>\n<span>Alder · Bikes, design &amp; everyday riding</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-01","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Birch, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Birch Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Birch Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Birch Weekly — Bikes, design & neighborhood life</title>\n<style>\n:root{color-scheme:light;--ink:#28343c;--muted:#64717c;--accent:#4c6385;--line:#d9e0e5;--paper:#f3f5f7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\n.wrap{width:min(100% - 64px,1000px);margin-inline:auto}\nheader{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}\n.brand{font-family:Georgia,serif;font-size:32px;font-weight:bold;letter-spacing:-1.4px}\n.brand span{color:var(--accent)}\n.tagline{font-size:13px;color:var(--muted)}\nmain{padding-top:64px}\n.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}\n.eyebrow{margin:0 0 16px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh1{margin:0 0 20px;font-family:Georgia,serif;font-size:64px;font-weight:normal;line-height:1.08;letter-spacing:-2.5px}\n.lead{max-width:390px;margin:0;font-size:19px;line-height:1.6}\n.byline{margin:24px 0 0;color:var(--muted);font-size:13px;max-width:330px}\n.signup{padding:28px;background:#fff;border:1px solid var(--line);border-radius:8px}\nh2{margin:0 0 5px;font-size:20px;line-height:1.4;font-weight:650;letter-spacing:-.4px}\n.form-intro{margin:0 0 23px;color:var(--muted);font-size:14px}\n.email-label{display:block;margin-bottom:7px;font-size:13px;font-weight:650}\ninput[type=email]{width:100%;min-width:0;height:46px;padding:10px 12px;border:1px solid #aebbc7;border-radius:4px;background:#fff;color:var(--ink);font:inherit}\ninput::placeholder{color:#7b8791;opacity:1}\ninput:focus-visible,button:focus-visible{outline:3px solid #abbcd2;outline-offset:3px}\n.check-row{display:flex;gap:10px;align-items:flex-start;margin:19px 0 23px}\ninput[type=checkbox]{flex:none;width:17px;height:17px;margin:3px 0 0;accent-color:var(--accent)}\n.check-row label{font-size:14px;font-weight:600;cursor:pointer}\n.check-row label span{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.5;font-weight:400}\n.action{display:flex;gap:16px;align-items:center}\nbutton{flex:none;min-height:44px;padding:10px 23px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:650;cursor:pointer}\nbutton:hover{background:#3e5475}\n.hint{max-width:130px;margin:0;color:var(--muted);font-size:12px;line-height:1.5}\n.privacy{margin:16px 0 0;color:var(--muted);font-size:12px}\n.details{margin-top:58px;padding-top:26px;border-top:1px solid var(--line)}\n.details h2{font-size:16px;letter-spacing:0}\n.reasons{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:0;margin:24px 0 30px}\n.number{display:block;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1px;margin-bottom:9px}\nh3{margin:0 0 7px;font-size:15px;font-weight:650}\n.reasons p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}\n.update{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px}\n.update-label{flex:none;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}\n.update p{margin:0;flex:1}\n.update time{flex:none;color:var(--muted);font-size:12px}\nfooter{padding-block:24px 32px;color:var(--muted);font-size:12px}\n@media(max-width:760px){\n.wrap{width:calc(100% - 40px)}\nheader{min-height:76px}\n.tagline{max-width:150px;text-align:right;font-size:11px}\nmain{padding-top:30px}\n.hero{grid-template-columns:1fr;gap:24px}\n.eyebrow{margin-bottom:10px;font-size:10px;letter-spacing:1.2px}\nh1{font-size:44px;letter-spacing:-1.8px;margin-bottom:12px}\n.lead{font-size:17px;line-height:1.5;max-width:480px}\n.byline{margin-top:12px;font-size:12px;max-width:none}\n.signup{padding:20px}\n.form-intro{margin-bottom:17px;font-size:13px}\n.check-row{margin:16px 0 18px}\n.details{margin-top:32px;padding-top:22px}\n.reasons{grid-template-columns:1fr;gap:20px;margin-top:20px}\n.reasons li{display:grid;grid-template-columns:24px 1fr;column-gap:12px}\n.number{grid-row:1 / 3;margin-top:3px}\n.reasons h3{margin-bottom:4px}\n.reasons p{grid-column:2;font-size:13px}\n.update{flex-wrap:wrap;gap:5px 14px}\n.update-label{width:100%}\n.update p{flex-basis:220px}\nfooter{padding-block:20px 26px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease}}\n</style>\n</head>\n<body>\n<header class=\"wrap\">\n<div class=\"brand\" aria-label=\"Birch\">birch<span>.</span></div>\n<div class=\"tagline\">Bikes, design &amp;<br>neighborhood life</div>\n</header>\n\n<main class=\"wrap\">\n<section class=\"hero\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">A local design journal, from the shop</p>\n<h1 id=\"page-title\">Birch Weekly</h1>\n<p class=\"lead\">Good bikes. Thoughtful design. A short weekly note on making more of your everyday ride.</p>\n<p class=\"byline\">Written by the crew at your independent bike shop, with our neighborhood in mind.</p>\n</div>\n\n<form class=\"signup\">\n<h2>Your Friday read.</h2>\n<p class=\"form-intro\">A few good things, thoughtfully picked.</p>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required>\n<div class=\"check-row\">\n<input id=\"digest\" name=\"weekly-digest\" type=\"checkbox\" checked>\n<label for=\"digest\">Weekly digest<span>Shop notes, ride ideas and design finds.<br>Delivered every Friday.</span></label>\n</div>\n<div class=\"action\">\n<button type=\"submit\">Subscribe</button>\n<p class=\"hint\">Free to join.<br>About a 5-minute read.</p>\n</div>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n\n<section class=\"details\" aria-labelledby=\"reasons-title\">\n<h2 id=\"reasons-title\">Three good reasons to join</h2>\n<ol class=\"reasons\">\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<h3>Find your next route</h3>\n<p>Quiet streets, local loops and coffee stops worth taking the long way for.</p>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<h3>Get to know your bike</h3>\n<p>Practical care tips and considered kit, picked by the people at the workbench.</p>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<h3>Meet the local makers</h3>\n<p>Designers, builders and small-shop stories shaping the way our neighborhood moves.</p>\n</li>\n</ol>\n<div class=\"update\">\n<span class=\"update-label\">Latest from the journal</span>\n<p>Small details, better parking: a look at the new cycle stands.</p>\n<time datetime=\"2025-06-13\">13 June 2025</time>\n</div>\n</section>\n</main>\n\n<footer class=\"wrap\">Independent by nature. Local by choice.</footer>\n</body>\n</html>"}]}
{"id":"sft-newsletter-02","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Cedar, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Cedar Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Cedar Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Cedar Weekly — A local design journal</title>\n<style>\n:root{--paper:#f7f4ee;--ink:#302b26;--muted:#71675e;--accent:#9c4934;--line:#d8d0c5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\n.page{max-width:1120px;margin:auto;padding:0 40px}\nheader{display:flex;justify-content:space-between;align-items:center;padding:25px 0;border-bottom:1px solid var(--line);gap:20px}\n.brand{display:flex;align-items:baseline;gap:18px}\n.wordmark{font-family:Georgia,serif;font-size:32px;letter-spacing:-1.5px}\n.descriptor,.shop{font-size:12px;color:var(--muted);line-height:1.5}\n.shop{text-align:right}\n.shop strong{display:block;font-weight:400;color:var(--ink)}\nmain{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:80px;row-gap:38px;padding:64px 0 60px}\n.eyebrow{margin:0 0 18px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}\nh1{font-family:Georgia,'Times New Roman',serif;font-size:80px;font-weight:400;letter-spacing:-4px;line-height:1.02;margin:0 0 24px}\nh1 span{display:block}\n.intro p:last-child{font-size:17px;line-height:1.6;max-width:410px;margin:0;color:var(--muted)}\n.signup{grid-column:2;grid-row:1 / span 2;align-self:start;border-top:3px solid var(--accent);padding-top:20px}\n.form-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:30px;font-size:11px}\n.step{font-weight:700;letter-spacing:1px;text-transform:uppercase}\n.status{display:flex;align-items:center;gap:7px;color:var(--muted);white-space:nowrap}\n.status::before{content:\"\";width:7px;height:7px;border:1px solid currentColor;border-radius:50%}\nh2{font-family:Georgia,'Times New Roman',serif;font-size:29px;line-height:1.2;font-weight:400;letter-spacing:-.5px;margin:0 0 10px}\n.frequency{margin:0 0 28px;font-size:14px;line-height:1.5;color:var(--muted)}\nlabel.email-label{display:block;font-size:13px;font-weight:700;margin-bottom:9px}\ninput[type=email]{display:block;width:100%;min-width:0;padding:14px 15px;border:1px solid #a99d90;border-radius:0;background:transparent;color:var(--ink);font:16px Arial,Helvetica,sans-serif}\ninput::placeholder{color:var(--muted)}\n.digest{display:flex;gap:10px;align-items:flex-start;margin:20px 0 24px}\ninput[type=checkbox]{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)}\n.digest label{font-size:14px;line-height:1.5;cursor:pointer}\n.digest small{display:block;color:var(--muted);font-size:12px;margin-top:2px}\nbutton{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:49px;border:1px solid var(--accent);border-radius:0;background:var(--accent);color:var(--paper);padding:12px 17px;font:700 14px Arial,Helvetica,sans-serif;cursor:pointer}\nbutton:hover{background:var(--ink);border-color:var(--ink)}\nbutton span{font-size:21px;font-weight:400;line-height:1}\ninput:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n.privacy{margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.5}\n.reasons{grid-column:1;border-top:1px solid var(--line);padding-top:17px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}\n.section-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;letter-spacing:0;margin:0}\n.section-heading span{font-size:11px;color:var(--muted)}\nol{list-style:none;padding:0;margin:0}\nli{display:grid;grid-template-columns:26px 1fr;gap:12px;margin-top:17px}\n.number{font-size:11px;color:var(--accent);padding-top:3px;font-variant-numeric:tabular-nums}\nli h3{font-size:14px;font-weight:700;margin:0 0 4px}\nli p{font-size:13px;line-height:1.45;color:var(--muted);margin:0}\nfooter{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;padding:19px 0 25px;font-size:11px;line-height:1.5;color:var(--muted)}\nfooter p{margin:0}\n@media(max-width:700px){\n.page{padding:0 24px}\nheader{padding:17px 0;gap:12px}\n.brand{display:block}\n.wordmark{font-size:27px}\n.descriptor{display:none}\n.shop{font-size:10px}\nmain{display:flex;flex-direction:column;padding:26px 0 28px;gap:26px}\n.eyebrow{font-size:10px;margin-bottom:10px}\nh1{font-size:48px;letter-spacing:-2px;margin-bottom:12px}\nh1 span{display:inline}\n.intro p:last-child{font-size:14px;line-height:1.5;max-width:none}\n.signup{padding-top:14px}\n.form-meta{margin-bottom:17px;font-size:10px}\nh2{font-size:25px;margin-bottom:6px}\n.frequency{font-size:13px;margin-bottom:20px}\ninput[type=email]{padding:12px 13px}\n.digest{margin:16px 0 18px}\n.digest small{font-size:11px}\n.privacy{margin-top:10px}\n.reasons{padding-top:15px}\n.section-heading{margin-bottom:12px}\nli{margin-top:12px;gap:8px;grid-template-columns:22px 1fr}\nli h3{font-size:13px;margin-bottom:2px}\nli p{font-size:12px}\nfooter{padding:15px 0 20px;font-size:10px}\nfooter p:last-child{max-width:100px;text-align:right}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\">\n<div class=\"wordmark\">Cedar</div>\n<div class=\"descriptor\">A local design journal</div>\n</div>\n<div class=\"shop\">Published by<strong>Cedar Cycleworks</strong></div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"title\">\n<p class=\"eyebrow\">The journal, in your inbox</p>\n<h1 id=\"title\">Cedar <span>Weekly</span></h1>\n<p>Thoughtful bike design, local rides and workshop wisdom. A Friday note from your independent bike shop.</p>\n</section>\n\n<section class=\"signup\" aria-labelledby=\"signup-title\">\n<div class=\"form-meta\">\n<span class=\"step\">Sign-up · One step</span>\n<span class=\"status\">Not subscribed</span>\n</div>\n<h2 id=\"signup-title\">Join the Friday edition.</h2>\n<p class=\"frequency\">One email a week. A fresh perspective on your ride.</p>\n<form>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"you@example.com\" autocomplete=\"email\" required>\n<div class=\"digest\">\n<input id=\"digest\" name=\"digest\" type=\"checkbox\" checked>\n<label for=\"digest\">Weekly digest<small>The week’s stories, routes and shop notes.</small></label>\n</div>\n<button type=\"button\">Subscribe <span aria-hidden=\"true\">→</span></button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n\n<section class=\"reasons\" aria-labelledby=\"reasons-title\">\n<div class=\"section-heading\">\n<h2 id=\"reasons-title\">3 reasons to join</h2>\n<span>Made for everyday riders</span>\n</div>\n<ol>\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>Design worth a closer look</h3><p>The makers and small details behind better bikes.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>A new way home</h3><p>Local routes, quiet streets and good coffee stops.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Know-how from the workshop</h3><p>Practical care tips from the people who fix your ride.</p></div>\n</li>\n</ol>\n</section>\n</main>\n<footer>\n<p>Independent shop. Local stories. Since 2018.</p>\n<p>Good design goes places.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-03","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Dune, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Dune Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Dune Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Dune Weekly — Notes for independent bike shops</title>\n<style>\n:root{--paper:#f7f5f0;--ink:#29272a;--muted:#68646a;--plum:#502b43;--line:#ded9d4;--tint:#eee8ec}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\n.shell{max-width:1040px;margin:auto;padding:0 40px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0;border-bottom:1px solid var(--line)}\n.brand{font-size:25px;font-weight:800;letter-spacing:4px;color:var(--plum)}\n.descriptor{font-size:12px;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase}\nmain{padding:60px 0 34px}\n.signup{display:grid;grid-template-columns:1.15fr 1fr;gap:65px;align-items:center}\n.eyebrow{margin:0 0 18px;color:var(--plum);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh1{margin:0 0 20px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:66px;line-height:1.05;letter-spacing:-2.5px}\n.intro{max-width:420px;margin:0;font-size:18px;line-height:1.6}\n.reasons{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:12px}\n.reasons li{display:flex;align-items:baseline;gap:13px;font-size:14px;line-height:1.4}\n.number{color:var(--plum);font-size:11px;letter-spacing:1px;font-variant-numeric:tabular-nums}\n.form-card{padding:29px;background:#fffdfa;border:1px solid var(--line);border-top:3px solid var(--plum)}\n.form-card .eyebrow{margin-bottom:11px;font-size:10px}\nh2{margin:0 0 25px;font-family:Georgia,'Times New Roman',serif;font-size:26px;line-height:1.2;font-weight:400;letter-spacing:-.4px}\nlabel{font-size:13px;font-weight:700}\n.email-label{display:block;margin-bottom:9px}\ninput[type=email]{display:block;width:100%;min-width:0;height:48px;padding:12px;border:1px solid #bfb6bc;border-radius:2px;background:white;font:16px Arial,Helvetica,sans-serif;color:var(--ink)}\ninput::placeholder{color:#868086}\ninput:focus-visible,button:focus-visible{outline:3px solid #b299ae;outline-offset:3px}\n.preference{display:flex;gap:10px;align-items:flex-start;margin:19px 0 23px}\ninput[type=checkbox]{width:17px;height:17px;margin:1px 0 0;accent-color:var(--plum);flex-shrink:0}\n.preference label{display:block;line-height:19px}\n.helper{margin:3px 0 0;font-size:12px;color:var(--muted);line-height:1.4}\nbutton{width:100%;min-height:48px;padding:12px 18px;border:1px solid var(--plum);border-radius:2px;background:var(--plum);color:white;font-size:14px;font-weight:700;cursor:pointer}\nbutton:hover{background:#3d2033}\n.privacy{text-align:center;font-size:11px;line-height:1.5;color:var(--muted);margin:13px 0 0}\n.issue{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:42px;padding:22px 25px;background:var(--tint);border-left:2px solid var(--plum)}\n.issue .eyebrow{margin-bottom:7px;font-size:10px}\n.issue h2{font-size:22px;margin-bottom:6px}\n.issue p:last-child{font-size:13px;line-height:1.5;color:var(--muted);margin:0;max-width:440px}\nfigure{margin:0;flex:0 0 235px}\nsvg{display:block;width:100%;height:auto}\nfooter{display:flex;justify-content:space-between;gap:20px;padding:20px 0 28px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.5}\n@media(max-width:700px){\n.shell{padding:0 23px}\nheader{padding:19px 0;gap:12px}\n.brand{font-size:22px;letter-spacing:3px}\n.descriptor{font-size:9px;letter-spacing:.7px;text-align:right;max-width:120px;line-height:1.5}\nmain{padding:27px 0 24px}\n.signup{grid-template-columns:1fr;gap:25px}\n.eyebrow{font-size:10px;margin-bottom:12px;letter-spacing:1.1px}\nh1{font-size:45px;letter-spacing:-1.6px;margin-bottom:13px}\n.intro{font-size:15px;line-height:1.5}\n.reasons{margin-top:17px;gap:8px}\n.reasons li{font-size:12px;gap:10px}\n.form-card{padding:20px}\n.form-card h2{font-size:23px;margin-bottom:20px}\n.preference{margin:15px 0 18px}\n.issue{margin-top:24px;padding:17px 15px;gap:13px}\n.issue h2{font-size:18px}\n.issue p:last-child{font-size:11px}\nfigure{flex:0 0 115px}\nfooter{font-size:10px;padding:16px 0 22px}\nfooter span:last-child{max-width:100px;text-align:right}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header>\n<div class=\"brand\" aria-label=\"Dune\">DUNE</div>\n<div class=\"descriptor\">A local design journal</div>\n</header>\n<main>\n<section class=\"signup\" aria-labelledby=\"newsletter-title\">\n<div>\n<p class=\"eyebrow\">Notes for independent bike shops</p>\n<h1 id=\"newsletter-title\">Dune Weekly</h1>\n<p class=\"intro\">Good design for the everyday bike shop. A short Friday read on useful spaces, well-made tools and the people keeping local cycling moving.</p>\n<ol class=\"reasons\" aria-label=\"Three reasons to join\">\n<li><span class=\"number\">01</span>Better layouts for small shops</li>\n<li><span class=\"number\">02</span>Useful gear, without the hype</li>\n<li><span class=\"number\">03</span>Stories from local makers and mechanics</li>\n</ol>\n</div>\n<section class=\"form-card\" aria-labelledby=\"signup-title\">\n<p class=\"eyebrow\">Free to read · About 3 minutes</p>\n<h2 id=\"signup-title\">Make a little room for ideas.</h2>\n<form>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourshop.com\" required>\n<div class=\"preference\">\n<input id=\"weekly\" name=\"weekly\" type=\"checkbox\" checked aria-describedby=\"frequency\">\n<div>\n<label for=\"weekly\">Weekly digest</label>\n<p class=\"helper\" id=\"frequency\">One considered email, every Friday.</p>\n</div>\n</div>\n<button type=\"button\">Subscribe</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n</section>\n<aside class=\"issue\" aria-labelledby=\"issue-title\">\n<div>\n<p class=\"eyebrow\">On the workbench · Next issue</p>\n<h2 id=\"issue-title\">A smoother repair drop-off</h2>\n<p>A simple layout change that keeps incoming bikes out of the sales aisle.</p>\n</div>\n<figure>\n<svg viewBox=\"0 0 235 94\" role=\"img\" aria-labelledby=\"diagram-title diagram-description\">\n<title id=\"diagram-title\">Separate the repair route from the sales aisle</title>\n<desc id=\"diagram-description\">A direct route connects the drop-off area to the repair bench, leaving a clear sales aisle below.</desc>\n<rect x=\"1\" y=\"1\" width=\"233\" height=\"92\" rx=\"2\" fill=\"#f7f5f0\" stroke=\"#c7bbc3\"/>\n<rect x=\"12\" y=\"13\" width=\"70\" height=\"30\" fill=\"#eee8ec\" stroke=\"#502b43\"/>\n<rect x=\"153\" y=\"13\" width=\"70\" height=\"30\" fill=\"#eee8ec\" stroke=\"#502b43\"/>\n<g fill=\"#502b43\" font-family=\"Arial, Helvetica, sans-serif\" font-size=\"11\" text-anchor=\"middle\">\n<text x=\"47\" y=\"32\">Drop-off</text>\n<text x=\"188\" y=\"32\">Bench</text>\n<text x=\"117\" y=\"76\" fill=\"#68646a\">Clear sales aisle</text>\n</g>\n<path d=\"M91 28H143M138 24l5 4-5 4\" fill=\"none\" stroke=\"#502b43\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 54H223\" stroke=\"#c7bbc3\" stroke-dasharray=\"3 4\"/>\n</svg>\n</figure>\n</aside>\n</main>\n<footer>\n<span>Independent thinking. Everyday design.</span>\n<span>Made for the local ride.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-04","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Elm, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: calm and spacious; use forest green as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Elm Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Elm Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Elm Weekly — Your co-op, thoughtfully considered</title>\n<style>\n:root{color-scheme:light;--paper:#f7f8f3;--ink:#26352c;--muted:#606b62;--green:#28533d;--line:#d9dfd5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:16px;line-height:1.55}\n.page{width:min(1040px,calc(100% - 64px));margin:auto}\n.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:13px}\n.mark{width:30px;height:38px;flex:none;color:var(--green)}\n.brand-name{display:block;font-family:Georgia,\"Times New Roman\",serif;font-size:31px;line-height:1}\n.brand-note{display:block;margin-top:5px;font-size:12px;color:var(--muted)}\n.community{max-width:205px;text-align:right;font-size:13px;color:var(--muted)}\nmain{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:70px;padding:66px 0 62px}\n.eyebrow{margin:0 0 12px;color:var(--green);font-size:12px;font-weight:650;letter-spacing:.11em;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,\"Times New Roman\",serif;font-size:62px;font-weight:400;line-height:1.12;letter-spacing:-.035em}\n.intro{max-width:440px;margin:19px 0 29px;font-size:18px;line-height:1.6;color:var(--muted)}\nform{max-width:450px}\n.email-label{display:block;margin-bottom:8px;font-size:14px;font-weight:650}\ninput[type=email]{width:100%;min-width:0;min-height:52px;padding:12px 14px;background:#fff;color:var(--ink);border:1px solid #aab6a9;border-radius:4px;font:inherit}\ninput::placeholder{color:#788278}\n.preference{display:flex;align-items:flex-start;gap:12px;margin:20px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\ninput[type=checkbox]{flex:none;width:21px;height:21px;margin:2px 0 0;accent-color:var(--green)}\n.preference label{flex:1;min-width:0;cursor:pointer}\n.preference-title{display:block;font-size:15px;font-weight:650}\n.secondary{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.55;overflow-wrap:anywhere}\nbutton{display:block;width:100%;min-height:52px;padding:12px 20px;border:1px solid var(--green);border-radius:4px;background:var(--green);color:#fff;font:inherit;font-weight:650;cursor:pointer}\nbutton:hover{background:#1d422f}\ninput:focus-visible,button:focus-visible{outline:3px solid #91b499;outline-offset:3px}\n.privacy{margin:12px 0 0;text-align:center;font-size:12px;color:var(--muted)}\n.reasons{align-self:start;margin-top:7px;padding-left:35px;border-left:1px solid var(--line)}\nh2{margin:0 0 24px;font-size:14px;font-weight:650}\n.reason-list{margin:0;padding:0;list-style:none}\n.reason-list li{display:grid;grid-template-columns:25px minmax(0,1fr);gap:13px;padding:21px 0;border-top:1px solid var(--line)}\n.number{padding-top:3px;color:var(--green);font-size:11px;font-weight:650;letter-spacing:.05em}\nh3{margin:0 0 6px;font-family:Georgia,\"Times New Roman\",serif;font-size:23px;font-weight:400;line-height:1.25}\n.reason-list p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}\n.local-note{margin:25px 0 0;padding-top:19px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:18px;padding:20px 0 30px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}\n@media(max-width:700px){\n.page{width:calc(100% - 40px)}\n.masthead{gap:16px;padding:20px 0}\n.brand{gap:9px}\n.mark{width:23px;height:30px}\n.brand-name{font-size:27px}\n.brand-note{font-size:11px}\n.community{max-width:120px;font-size:11px}\nmain{grid-template-columns:minmax(0,1fr);gap:38px;padding:30px 0 34px}\n.eyebrow{font-size:11px;margin-bottom:10px}\nh1{font-size:46px}\n.intro{font-size:16px;line-height:1.55;margin:15px 0 23px}\n.preference{margin:17px 0;padding:14px 0}\n.reasons{margin:0;padding:25px 0 0;border-left:0;border-top:1px solid var(--line)}\nh2{margin-bottom:17px}\n.reason-list li{padding:19px 0}\n.local-note{margin-top:15px}\nfooter{flex-direction:column;gap:4px;padding-top:17px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header class=\"masthead\">\n<div class=\"brand\">\n<svg class=\"mark\" viewBox=\"0 0 30 38\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M15 35V12M15 24C5 24 3 17 3 12c8 0 12 5 12 12ZM15 17c0-9 5-13 12-13 0 8-4 13-12 13Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<div><span class=\"brand-name\">Elm</span><span class=\"brand-note\">The local design journal</span></div>\n</div>\n<div class=\"community\">From your community<br>food co-op</div>\n</header>\n\n<main>\n<section aria-labelledby=\"signup-title\">\n<p class=\"eyebrow\">Good food. Thoughtful places.</p>\n<h1 id=\"signup-title\">Elm Weekly</h1>\n<p class=\"intro\">A fresh look at the people, food and everyday design that make our co-op community feel like home.</p>\n\n<form aria-label=\"Newsletter sign-up\">\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required>\n<div class=\"preference\">\n<input id=\"digest\" name=\"digest\" type=\"checkbox\" checked>\n<label for=\"digest\">\n<span class=\"preference-title\">Weekly digest</span>\n<span class=\"secondary\">A single Friday email with notes from our member-growers, volunteer kitchen and neighbourhood design projects.</span>\n</label>\n</div>\n<button type=\"button\">Subscribe</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n\n<aside class=\"reasons\" aria-labelledby=\"reasons-title\">\n<h2 id=\"reasons-title\">Three reasons to join</h2>\n<ol class=\"reason-list\">\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div>\n<h3>Meet the people behind it</h3>\n<p>Visit local growers and get to know the neighbours making our co-op thrive.</p>\n</div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div>\n<h3>Find everyday inspiration</h3>\n<p>Small design ideas for shared spaces, seasonal kitchens and less waste.</p>\n</div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div>\n<h3>Stay close to your co-op</h3>\n<p>Fresh arrivals, community projects and chances to lend a hand, all in one place.</p>\n</div>\n</li>\n</ol>\n<p class=\"local-note\">For member-owners and curious neighbours alike.<br>You don’t need to be a member to join.</p>\n</aside>\n</main>\n\n<footer>\n<span>Independent stories. Shared roots.</span>\n<span>Made for the people who make our co-op.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-05","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Fjord, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: compact but readable; use slate blue as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Fjord Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Fjord Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Fjord Weekly — Notes from your co-op</title>\n<style>\n:root{color-scheme:light;--paper:#f7f5ef;--ink:#243b4c;--slate:#536c81;--muted:#626963;--line:#d8dbd3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\n.page{max-width:920px;margin:auto;padding:0 40px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0;border-bottom:1px solid var(--line)}\n.identity{display:flex;align-items:center;gap:18px}\n.wordmark{font-family:Georgia,serif;font-size:29px;line-height:1}\n.identity span{max-width:130px;font-size:12px;line-height:1.4;color:var(--muted)}\n.edition{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}\nmain{padding-top:47px}\n.eyebrow{margin:0 0 10px;color:var(--slate);font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,serif;font-size:64px;font-weight:400;letter-spacing:-.04em;line-height:1.1}\n.intro{max-width:570px;margin:18px 0 31px;font-size:18px;line-height:1.6}\n.signup{display:grid;grid-template-columns:1.2fr 1fr;gap:42px;padding:29px 0 31px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\nlabel{display:block;font-size:14px;font-weight:600}\ninput[type=email]{display:block;width:100%;min-width:0;margin-top:8px;padding:12px 14px;border:1px solid #9ca8ad;border-radius:3px;background:#fffefa;color:var(--ink);font:inherit}\ninput::placeholder{color:#747b7d}\n.preference{display:flex;align-items:center;gap:10px;margin:17px 0 23px}\n.preference input{width:17px;height:17px;margin:0;accent-color:var(--slate);flex-shrink:0}\n.preference label{font-weight:400;cursor:pointer}\n.action{display:flex;align-items:center;gap:16px}\nbutton{border:1px solid var(--ink);border-radius:3px;padding:11px 25px;background:var(--ink);color:white;font:600 15px system-ui,sans-serif;cursor:pointer;flex-shrink:0}\nbutton:hover{background:#344f63}\ninput:focus-visible,button:focus-visible{outline:3px solid #8aa4b8;outline-offset:3px}\n.hint{margin:0;max-width:140px;font-size:12px;line-height:1.5;color:var(--muted)}\n.privacy{margin:16px 0 0;font-size:12px;color:var(--muted)}\n.reasons{border-left:1px solid var(--line);padding-left:35px}\nh2{margin:0 0 17px;font-size:15px;font-weight:650}\nol{list-style:none;counter-reset:reasons;padding:0;margin:0}\nli{counter-increment:reasons;display:grid;grid-template-columns:22px 1fr;gap:10px;margin-top:15px;font-size:14px;line-height:1.5}\nli:first-child{margin-top:0}\nli::before{content:\"0\" counter(reasons);color:var(--slate);font-size:11px;font-weight:600;line-height:2}\n.update{padding:23px 0 25px;display:grid;grid-template-columns:190px 1fr;gap:24px}\n.update-label{margin:2px 0 0;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}\n.update p:last-child{margin:0;font-size:14px}\n.update strong{font-weight:600}\nfooter{padding:15px 0 26px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\n@media(max-width:640px){\n.page{padding:0 24px}\nheader{padding:19px 0;gap:12px}\n.identity{gap:12px}\n.wordmark{font-size:25px}\n.identity span{max-width:95px;font-size:10px}\n.edition{font-size:9px;letter-spacing:.08em;text-align:right;max-width:75px}\nmain{padding-top:26px}\nh1{font-size:44px}\n.eyebrow{font-size:10px;margin-bottom:8px}\n.intro{font-size:16px;line-height:1.5;margin:13px 0 23px}\n.signup{grid-template-columns:1fr;gap:24px;padding:23px 0}\n.preference{margin:14px 0 19px}\n.reasons{padding:21px 0 0;border-left:0;border-top:1px solid var(--line)}\nh2{margin-bottom:12px}\nli{margin-top:10px;font-size:13px}\n.update{grid-template-columns:1fr;gap:7px;padding:19px 0}\nfooter{padding:13px 0 20px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"identity\">\n<strong class=\"wordmark\">Fjord</strong>\n<span>A local<br>design journal</span>\n</div>\n<span class=\"edition\">Co-op edition</span>\n</header>\n<main>\n<section aria-labelledby=\"newsletter-title\">\n<p class=\"eyebrow\">Good food. Thoughtful design.</p>\n<h1 id=\"newsletter-title\">Fjord Weekly</h1>\n<p class=\"intro\">A short weekly read on the people, places, and thoughtful ideas shaping our community food co-op.</p>\n<div class=\"signup\">\n<form>\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"you@example.com\" autocomplete=\"email\" required>\n<div class=\"preference\">\n<input id=\"weekly\" name=\"weekly\" type=\"checkbox\" checked aria-describedby=\"delivery\">\n<label for=\"weekly\">Weekly digest</label>\n</div>\n<div class=\"action\">\n<button type=\"submit\" aria-describedby=\"delivery privacy\">Subscribe</button>\n<p class=\"hint\" id=\"delivery\">One email, every Thursday morning.</p>\n</div>\n<p class=\"privacy\" id=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n<aside class=\"reasons\" aria-labelledby=\"reasons-title\">\n<h2 id=\"reasons-title\">Three good reasons to join</h2>\n<ol>\n<li>Seasonal finds from local growers.</li>\n<li>Design ideas for a better shared shop.</li>\n<li>Co-op news and ways to get involved.</li>\n</ol>\n</aside>\n</div>\n<section class=\"update\" aria-label=\"Recent journal update\">\n<p class=\"update-label\">Recent update · Issue 028</p>\n<p><strong>Clearer labels, simpler shopping.</strong><br>A look at the co-op’s new bulk-bin signs.</p>\n</section>\n</section>\n</main>\n<footer>Made for the people who grow, shop, and share here.</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-06","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Grove, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Grove Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Grove Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Grove Weekly — The co-op journal</title>\n<style>\n:root{--bg:#f2f4f3;--paper:#fff;--ink:#263330;--muted:#626e69;--line:#d6ddd9;--accent:#a64d36}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\n.wrap{width:min(1100px,100% - 96px);margin:auto}\n.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px 0;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:11px;font-family:Georgia,serif;font-size:30px;letter-spacing:-1px}\n.brand svg{width:25px;height:31px;color:var(--accent)}\n.masthead p{margin:0;color:var(--muted);font-size:12px;letter-spacing:.04em}\nmain{padding:65px 0 40px}\n.hero{display:grid;grid-template-columns:1.15fr 1fr;grid-template-areas:\"intro signup\" \"reasons signup\";gap:30px 68px;align-items:start}\n.intro{grid-area:intro}\n.eyebrow{margin:0 0 19px;color:var(--accent);font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}\nh1{margin:0 0 22px;font-family:Georgia,\"Times New Roman\",serif;font-size:70px;font-weight:400;letter-spacing:-3px;line-height:1.08}\n.lead{max-width:460px;margin:0;font-size:21px;line-height:1.55}\n.support{max-width:420px;margin:15px 0 0;color:var(--muted);font-size:14px;line-height:1.65}\n.signup{grid-area:signup;padding:30px 32px 27px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--accent)}\nh2{margin:0;font-family:Georgia,\"Times New Roman\",serif;font-size:27px;font-weight:400;line-height:1.25;letter-spacing:-.5px}\n.form-intro{margin:9px 0 25px;color:var(--muted);font-size:14px;line-height:1.5}\n.email-label{display:block;margin-bottom:8px;font-size:13px;font-weight:650}\ninput[type=email]{display:block;width:100%;min-width:0;height:48px;padding:0 13px;border:1px solid #aab5ae;border-radius:2px;background:#fff;color:var(--ink);font:inherit;font-size:16px}\ninput::placeholder{color:#7b8580}\ninput:focus-visible,button:focus-visible{outline:3px solid #b6c9c1;outline-offset:3px}\n.preference{display:flex;align-items:flex-start;gap:10px;margin:20px 0 24px}\ninput[type=checkbox]{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}\n.preference label{font-size:14px;font-weight:600;line-height:1.5;cursor:pointer}\n.preference small{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:400;line-height:1.5}\nbutton{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:12px 17px;border:0;border-radius:2px;background:var(--accent);color:white;font:inherit;font-size:14px;font-weight:600;cursor:pointer}\nbutton:hover{background:#8e412e}\nbutton svg{width:20px;height:20px}\n.privacy{margin:13px 0 0;color:var(--muted);font-size:12px;text-align:center;line-height:1.5}\n.reasons{grid-area:reasons}\n.reasons h2{margin-bottom:13px;font-family:inherit;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}\n.reasons ol{margin:0;padding:0;list-style:none;counter-reset:reason}\n.reasons li{display:flex;align-items:baseline;gap:15px;margin:0 0 11px;font-size:14px;line-height:1.5;counter-increment:reason}\n.reasons li::before{content:\"0\" counter(reason);flex:none;color:var(--accent);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}\n.noticeboard{display:grid;grid-template-columns:1.15fr 1fr;gap:68px;margin-top:52px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.notice-title{display:flex;flex-wrap:wrap;align-items:center;gap:12px}\n.notice-title h2{font-size:23px}\n.count{padding:4px 8px;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-size:11px;white-space:nowrap}\n.notice-caption{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.5}\n.empty p{margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.6}\n.status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:550}\n.status::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#929f98}\nfooter{display:flex;justify-content:space-between;gap:15px;padding:0 0 28px;color:var(--muted);font-size:11px}\n@media(max-width:760px){\n.wrap{width:calc(100% - 40px)}\n.masthead{padding:18px 0;gap:15px}\n.brand{font-size:26px}\n.brand svg{width:21px;height:26px}\n.masthead p{max-width:145px;font-size:10px;text-align:right;line-height:1.5}\nmain{padding:29px 0 25px}\n.hero{grid-template-columns:1fr;grid-template-areas:\"intro\" \"signup\" \"reasons\";gap:24px}\n.eyebrow{margin-bottom:12px;font-size:10px}\nh1{margin-bottom:13px;font-size:47px;letter-spacing:-2px}\n.lead{font-size:17px;line-height:1.5}\n.support{margin-top:10px;font-size:13px;line-height:1.5}\n.signup{padding:23px 22px 20px}\n.signup h2{font-size:24px}\n.form-intro{margin:7px 0 19px;font-size:13px}\n.preference{margin:17px 0 20px}\n.reasons h2{margin-bottom:11px}\n.reasons li{margin-bottom:9px;font-size:13px}\n.noticeboard{grid-template-columns:1fr;gap:18px;margin-top:23px;padding:22px 0}\n.notice-title h2{font-size:22px}\nfooter{font-size:10px;line-height:1.5}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header class=\"masthead\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 26 32\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M13 30V10M13 22C4 22 2 17 2 11c7 0 11 4 11 11ZM13 15C22 15 24 9 24 3c-7 0-11 5-11 12Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<span>Grove</span>\n</div>\n<p>A local journal of food, design &amp; community</p>\n</header>\n\n<main>\n<section class=\"hero\" aria-labelledby=\"page-title\">\n<div class=\"intro\">\n<p class=\"eyebrow\">Rooted in our community food co-op</p>\n<h1 id=\"page-title\">Grove Weekly</h1>\n<p class=\"lead\">Good food, thoughtful design and the people bringing our neighbourhood together.</p>\n<p class=\"support\">Every Friday, we share stories from the co-op, local makers and the growers behind your groceries.</p>\n</div>\n\n<form class=\"signup\" aria-labelledby=\"signup-title\">\n<h2 id=\"signup-title\">Make room for a little local.</h2>\n<p class=\"form-intro\">One considered email. A fresh perspective each week.</p>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required>\n<div class=\"preference\">\n<input id=\"digest\" name=\"digest\" type=\"checkbox\" checked aria-describedby=\"digest-detail\">\n<div>\n<label for=\"digest\">Weekly digest</label>\n<small id=\"digest-detail\">The week's stories and co-op news, every Friday.</small>\n</div>\n</div>\n<button type=\"button\">\n<span>Subscribe</span>\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 12h15m-6-6 6 6-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n\n<section class=\"reasons\" aria-labelledby=\"reasons-title\">\n<h2 id=\"reasons-title\">Three reasons to join</h2>\n<ol>\n<li>Seasonal picks from the growers you know.</li>\n<li>Fresh ideas from neighbourhood designers.</li>\n<li>Co-op gatherings worth making time for.</li>\n</ol>\n</section>\n</section>\n\n<section class=\"noticeboard\" aria-labelledby=\"notice-title\">\n<div>\n<div class=\"notice-title\">\n<h2 id=\"notice-title\">Community noticeboard</h2>\n<span class=\"count\">0 notices</span>\n</div>\n<p class=\"notice-caption\">A little space for what members are planning.</p>\n</div>\n<div class=\"empty\">\n<span class=\"status\">Awaiting member submissions</span>\n<p>No community notices yet. Upcoming shared meals, workshops and volunteer opportunities will appear here.</p>\n</div>\n</section>\n</main>\n\n<footer>\n<span>Grove · A journal rooted in the co-op.</span>\n<span>Food. Design. Common ground.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-07","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Harbor, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: practical and understated; use deep plum as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Harbor Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Harbor Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Harbor Weekly — A little closer to your co-op</title>\n<style>\n:root{--paper:#f8f6f2;--plum:#452c40;--muted:#756773;--line:#d9d0d5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--plum);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;line-height:1.5}\n.page{max-width:1104px;margin:auto;padding:0 32px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px 0;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:22px}\n.wordmark{font-family:Georgia,\"Times New Roman\",serif;font-size:30px;line-height:1;font-weight:700;letter-spacing:-1px}\n.brand-note{padding-left:22px;border-left:1px solid var(--line);font-size:13px;color:var(--muted)}\n.edition{font-size:12px;color:var(--muted)}\nmain{padding:72px 0 60px}\n.signup{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:80px;align-items:start}\n.eyebrow{margin:0 0 16px;font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,\"Times New Roman\",serif;font-size:64px;line-height:1.08;font-weight:400;letter-spacing:-2.5px}\n.intro{max-width:470px;margin:24px 0 0;font-size:20px;line-height:1.55}\n.delivery{display:flex;align-items:center;gap:18px;margin-top:30px}\n.delivery svg{width:126px;height:34px;flex:none}\n.delivery p{margin:0;font-size:13px;line-height:1.5}\n.delivery span{display:block;color:var(--muted);font-size:12px}\n.form-panel{padding-top:3px}\n.form-panel h2{margin:0 0 6px;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.4px}\n.form-intro{margin:0 0 25px;color:var(--muted);font-size:14px}\n.email-label{display:block;margin-bottom:8px;font-size:14px;font-weight:600}\ninput[type=email]{display:block;width:100%;height:50px;padding:12px 14px;border:1px solid #a999a5;border-radius:3px;background:transparent;color:var(--plum);font:inherit;font-size:16px}\ninput::placeholder{color:var(--muted)}\n.choice{display:flex;align-items:center;gap:10px;margin:21px 0 24px}\ninput[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--plum);flex:none}\n.choice label{font-size:14px;cursor:pointer}\nbutton{width:100%;min-height:50px;padding:12px 20px;border:1px solid var(--plum);border-radius:3px;background:var(--plum);color:var(--paper);font:inherit;font-size:15px;font-weight:600;cursor:pointer}\nbutton:hover{background:var(--paper);color:var(--plum)}\ninput:focus-visible,button:focus-visible{outline:2px solid var(--plum);outline-offset:4px}\n.privacy{margin:13px 0 0;text-align:center;font-size:12px;color:var(--muted)}\n.reasons{margin-top:80px}\n.reasons h2{margin:0 0 20px;font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}\n.reasons ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;padding:0;margin:0;list-style:none}\n.reasons li{border-top:1px solid var(--line);padding-top:17px}\n.number{display:block;margin-bottom:12px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}\n.reasons h3{margin:0 0 9px;max-width:260px;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.25px}\n.reasons p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}\nfooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0 28px;font-size:12px;color:var(--muted)}\nfooter p{margin:0}\n@media(max-width:760px){\n.page{padding:0 24px}\nheader{padding:23px 0}\n.brand{gap:16px}\n.wordmark{font-size:27px}\n.brand-note{padding-left:16px;font-size:12px;max-width:145px;line-height:1.4}\n.edition{display:none}\nmain{padding:34px 0 40px}\n.signup{grid-template-columns:minmax(0,1fr);gap:30px}\n.eyebrow{margin-bottom:12px;font-size:10px}\nh1{font-size:44px;letter-spacing:-1.7px}\n.intro{margin-top:16px;font-size:18px;line-height:1.5}\n.delivery{margin-top:20px;gap:16px}\n.form-panel{padding-top:0}\n.form-panel h2{font-size:20px}\n.form-intro{margin-bottom:20px}\n.choice{margin:18px 0 20px}\n.reasons{margin-top:48px}\n.reasons ol{grid-template-columns:minmax(0,1fr);gap:25px}\n.reasons li{display:grid;grid-template-columns:25px minmax(0,1fr);column-gap:13px;padding-top:16px}\n.number{grid-row:1 / 3;margin-top:3px}\n.reasons h3{max-width:none;font-size:17px;margin-bottom:7px}\n.reasons p{grid-column:2}\nfooter{flex-direction:column;gap:5px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\">\n<span class=\"wordmark\">Harbor</span>\n<span class=\"brand-note\">A local design journal</span>\n</div>\n<span class=\"edition\">The community co-op edition</span>\n</header>\n<main>\n<section class=\"signup\" aria-labelledby=\"signup-title\">\n<div>\n<p class=\"eyebrow\">Good food. Thoughtful design. Shared roots.</p>\n<h1 id=\"signup-title\">Harbor Weekly</h1>\n<p class=\"intro\">A weekly look at seasonal food, everyday design and the neighbors shaping our community food co-op.</p>\n<div class=\"delivery\">\n<svg viewBox=\"0 0 126 34\" role=\"img\" aria-labelledby=\"calendar-title\">\n<title id=\"calendar-title\">Weekly delivery, with Friday highlighted</title>\n<rect x=\"68\" y=\"4\" width=\"24\" height=\"26\" rx=\"3\" fill=\"#452c40\"/>\n<g font-family=\"system-ui, sans-serif\" font-size=\"10\" text-anchor=\"middle\" fill=\"#756773\">\n<text x=\"8\" y=\"21\">M</text>\n<text x=\"26\" y=\"21\">T</text>\n<text x=\"44\" y=\"21\">W</text>\n<text x=\"62\" y=\"21\">T</text>\n<text x=\"80\" y=\"21\" fill=\"#f8f6f2\">F</text>\n<text x=\"98\" y=\"21\">S</text>\n<text x=\"116\" y=\"21\">S</text>\n</g>\n</svg>\n<p>Fresh every Friday<span>About a five-minute read</span></p>\n</div>\n</div>\n<div class=\"form-panel\">\n<h2>Pull up a chair.</h2>\n<p class=\"form-intro\">Free to join. Made for our co-op community.</p>\n<form>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required>\n<div class=\"choice\">\n<input id=\"digest\" name=\"digest\" type=\"checkbox\" checked>\n<label for=\"digest\">Weekly digest</label>\n</div>\n<button type=\"button\">Subscribe</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</div>\n</section>\n<section class=\"reasons\" aria-labelledby=\"reasons-title\">\n<h2 id=\"reasons-title\">Inside each edition</h2>\n<ol>\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<h3>Meet the people behind your pantry</h3>\n<p>Get to know the local growers, makers and co-op members bringing good food to our shelves.</p>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<h3>Design for everyday life</h3>\n<p>Small ideas for better packaging, less waste and more welcoming shared spaces.</p>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<h3>Find your next way to join in</h3>\n<p>Seasonal recipes, community meals and a few useful dates for your calendar.</p>\n</li>\n</ol>\n</section>\n</main>\n<footer>\n<p>Harbor · Stories rooted in our community.</p>\n<p>For neighbors, by neighbors.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-08","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Isle, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: calm and spacious; use forest green as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Isle Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Isle Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Isle Weekly — A local design journal</title>\n<style>\n:root{--paper:#f7f7f2;--ink:#252f29;--muted:#626b63;--green:#285440;--line:#d7dcd3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\n.shell{width:min(1100px,calc(100% - 80px));margin:auto}\nheader .shell{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}\n.brand{font-family:Georgia,serif;font-size:38px;font-weight:bold;letter-spacing:-2px;color:var(--green)}\n.brand span{font-weight:normal}\n.journal{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}\nmain{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:88px;padding-top:78px;padding-bottom:86px}\n.eyebrow{margin:0 0 18px;color:var(--green);font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.16em}\nh1{font-family:Georgia,serif;font-size:74px;font-weight:normal;line-height:1.08;letter-spacing:-3px;margin:0 0 22px}\n.intro{max-width:490px;font-size:18px;line-height:1.6;margin:0;color:var(--muted)}\nform{margin-top:32px;max-width:520px}\n.email-label{display:block;font-size:14px;font-weight:bold;margin-bottom:10px}\ninput[type=email]{width:100%;height:54px;border:1px solid #9ca99e;border-radius:2px;background:#fff;color:var(--ink);padding:0 15px;font:16px Arial,Helvetica,sans-serif}\ninput::placeholder{color:#818980}\ninput:focus-visible,button:focus-visible{outline:3px solid #88a793;outline-offset:4px}\n.choice{display:flex;align-items:flex-start;gap:11px;margin:22px 0 24px}\ninput[type=checkbox]{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--green)}\n.choice label{min-width:0;font-size:14px;line-height:1.4;cursor:pointer}\n.choice strong{display:block;font-weight:bold;margin-bottom:5px}\n.choice .description{display:block;color:var(--muted);font-size:13px;line-height:1.55;max-width:440px}\nbutton{border:1px solid var(--green);border-radius:2px;background:var(--green);color:#fff;font-size:15px;font-weight:bold;min-height:50px;padding:0 32px;cursor:pointer}\nbutton:hover{background:#1d4231}\n.privacy{font-size:12px;line-height:1.5;color:var(--muted);margin:13px 0 0}\naside{border-left:1px solid var(--line);padding-left:32px;margin-top:5px}\naside h2{font-family:Georgia,serif;font-size:26px;font-weight:normal;line-height:1.25;margin:0 0 10px}\n.aside-intro{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 26px}\n.reasons{list-style:none;padding:0;margin:0}\n.reasons li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:17px 0;border-top:1px solid var(--line)}\n.number{font-size:11px;line-height:22px;color:var(--green);font-variant-numeric:tabular-nums}\n.reasons h3{font-size:14px;line-height:1.5;margin:0 0 5px;font-weight:bold}\n.reasons p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}\n.details{border-top:1px solid var(--line);margin-top:16px;padding-top:20px}\n.details .eyebrow{font-size:10px;margin-bottom:14px}\ndl{margin:0;font-size:12px;line-height:1.5}\ndl div{display:grid;grid-template-columns:75px minmax(0,1fr);gap:12px;margin-top:7px}\ndt{color:var(--muted)}\ndd{margin:0}\nfooter .shell{border-top:1px solid var(--line);padding:22px 0 30px;display:flex;justify-content:space-between;gap:16px;font-size:11px;line-height:1.5;color:var(--muted)}\n@media(max-width:760px){\n.shell{width:calc(100% - 40px)}\nheader .shell{min-height:76px;gap:16px}\n.brand{font-size:32px}\n.journal{font-size:9px;letter-spacing:.09em;text-align:right;max-width:145px;line-height:1.6}\nmain{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:32px;padding-bottom:36px}\n.eyebrow{margin-bottom:12px;font-size:10px}\nh1{font-size:52px;letter-spacing:-2px;margin-bottom:15px}\n.intro{font-size:16px;line-height:1.55}\nform{margin-top:25px}\n.choice{margin:18px 0 20px}\nbutton{width:100%}\n.privacy{text-align:center;margin-top:11px}\naside{border-left:0;border-top:1px solid var(--line);padding:26px 0 0;margin:0}\naside h2{font-size:25px}\n.aside-intro{margin-bottom:20px}\n.reasons li{padding:15px 0}\n.details{margin-top:12px;padding-top:18px}\nfooter .shell{flex-wrap:wrap;gap:5px;padding:20px 0}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"shell\">\n<div class=\"brand\" aria-label=\"Isle\">isle<span>.</span></div>\n<div class=\"journal\">A local design journal</div>\n</div>\n</header>\n<main class=\"shell\">\n<section aria-labelledby=\"signup-title\">\n<p class=\"eyebrow\">A fresh perspective, every Friday</p>\n<h1 id=\"signup-title\">Isle Weekly</h1>\n<p class=\"intro\">Local architecture, thoughtful materials and the people shaping our places. A considered edit for your practice, delivered once a week.</p>\n<form aria-label=\"Newsletter sign-up\">\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"you@yourpractice.com\" autocomplete=\"email\" required>\n<div class=\"choice\">\n<input id=\"digest\" name=\"digest\" type=\"checkbox\" checked>\n<label for=\"digest\">\n<strong>Weekly digest</strong>\n<span class=\"description\">New projects, material discoveries and conversations with the architects and craftspeople shaping our local built environment.</span>\n</label>\n</div>\n<button type=\"button\">Subscribe</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n<aside aria-labelledby=\"reasons-title\">\n<p class=\"eyebrow\">Why join</p>\n<h2 id=\"reasons-title\">Good ideas, close to home.</h2>\n<p class=\"aside-intro\">A short read with a place in your working week.</p>\n<ol class=\"reasons\">\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>See what’s taking shape</h3><p>Local projects, from early sketches to buildings in use.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Build your reference library</h3><p>Material notes and considered details to inform your next brief.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Stay part of the conversation</h3><p>Studio visits, local talks and the people worth knowing.</p></div>\n</li>\n</ol>\n<section class=\"details\" aria-labelledby=\"details-title\">\n<h3 class=\"eyebrow\" id=\"details-title\">The small print</h3>\n<dl>\n<div><dt>When</dt><dd>Friday mornings</dd></div>\n<div><dt>Read time</dt><dd>About five minutes</dd></div>\n<div><dt>Cost</dt><dd>Always free</dd></div>\n</dl>\n</section>\n</aside>\n</main>\n<footer>\n<div class=\"shell\">\n<span>Independently edited by Isle.</span>\n<span>Architecture. People. Place.</span>\n</div>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-newsletter-09","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Juniper, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: compact but readable; use slate blue as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Juniper Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Juniper Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Juniper Weekly — A local design journal</title>\n<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#f4f5f2;color:#273139;font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\n.page{max-width:980px;margin:auto;padding:28px 32px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid #dce0db}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:25px;height:30px;color:#526780}\n.tagline{font-size:13px;color:#627078}\nmain{padding:38px 0 24px}\n.panel{display:grid;grid-template-columns:1.15fr 1fr;background:#fff;border:1px solid #dce0db;border-radius:10px;overflow:hidden}\n.signup{padding:34px}\n.eyebrow{margin:0 0 10px;color:#526780;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}\nh1{margin:0 0 12px;font-size:38px;line-height:1.12;letter-spacing:-1.4px;font-weight:650}\n.lead{margin:0 0 27px;font-size:16px;line-height:1.55;color:#526069;max-width:38ch}\n.field-label{display:block;margin-bottom:7px;font-size:14px;font-weight:600}\ninput[type=email]{width:100%;min-height:49px;padding:12px 14px;border:1px solid #aeb8bd;border-radius:5px;background:#fff;color:#273139;font:inherit}\ninput::placeholder{color:#79858c}\ninput:focus-visible,button:focus-visible{outline:3px solid #a9bbce;outline-offset:3px}\n.preference{display:flex;align-items:flex-start;gap:11px;min-height:52px;margin:18px 0 19px}\ninput[type=checkbox]{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:#526780}\n.preference label{display:block;cursor:pointer;font-size:14px;font-weight:600}\n.preference small{display:block;font-size:12px;font-weight:400;color:#69757d;margin-top:2px}\n.action{display:flex;align-items:center;gap:17px}\nbutton{min-height:48px;min-width:140px;padding:12px 23px;border:1px solid #526780;border-radius:5px;background:#526780;color:white;font:inherit;font-weight:600;cursor:pointer}\nbutton:hover{background:#43576f}\n.action-hint{margin:0;font-size:12px;color:#65717b;line-height:1.5;max-width:19ch}\n.privacy{margin:14px 0 0;font-size:12px;color:#69757d}\n.details{padding:34px;border-left:1px solid #e2e5e0;background:#fafbf9}\nh2{font-size:17px;letter-spacing:-.25px;margin:0 0 8px;font-weight:650}\n.support{font-size:13px;color:#65717b;margin:0 0 21px}\n.reasons{list-style:none;padding:0;margin:0;counter-reset:reason}\n.reasons li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:14px 0;border-top:1px solid #e1e5df;counter-increment:reason}\n.reasons li:before{content:\"0\" counter(reason);color:#657a91;font-size:11px;font-weight:650;padding-top:3px;font-variant-numeric:tabular-nums}\n.reasons h3{margin:0 0 4px;font-size:14px;font-weight:650}\n.reasons p{margin:0;color:#65717b;font-size:13px;line-height:1.5}\n.issue{margin-top:20px;padding:20px 24px;border:1px solid #dce0db;border-radius:8px;background:#eef1f3}\n.issue-top{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:13px}\n.issue-top h2{font-size:14px;margin:0}\ntime{font-size:12px;color:#627078;white-space:nowrap}\n.issue-body{display:grid;grid-template-columns:1.15fr 1fr;gap:32px}\n.issue h3{font-size:15px;margin:0 0 5px;font-weight:600}\n.issue p{margin:0;font-size:13px;color:#5c6973}\n.issue dl{margin:0;display:grid;grid-template-columns:70px 1fr;gap:7px 12px;font-size:12px}\n.issue dt{color:#526780;font-weight:600}\n.issue dd{margin:0;color:#5c6973}\nfooter{display:flex;justify-content:space-between;gap:16px;padding-top:4px;color:#748078;font-size:11px}\n@media(max-width:650px){\n.page{padding:18px 18px 24px}\nheader{padding-bottom:16px;gap:12px}\n.brand{font-size:21px}\n.tagline{font-size:11px;max-width:13ch;text-align:right;line-height:1.4}\nmain{padding:22px 0 18px}\n.panel{grid-template-columns:1fr}\n.signup{padding:24px 22px}\nh1{font-size:34px;letter-spacing:-1.2px}\n.lead{font-size:15px;margin-bottom:22px}\n.details{padding:23px 22px;border-left:0;border-top:1px solid #e2e5e0}\n.support{margin-bottom:15px}\n.reasons li{padding:12px 0}\n.issue{padding:18px 20px;margin-top:16px}\n.issue-top{gap:10px}\n.issue-top h2{font-size:13px}\ntime{font-size:11px}\n.issue-body{grid-template-columns:1fr;gap:16px}\n.issue dl{border-top:1px solid #d9dfe4;padding-top:13px}\nfooter{font-size:10px;flex-wrap:wrap;gap:5px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 26 32\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M13 29V5M13 14C6 14 3 10 3 5c6 0 10 3 10 9Zm0 7c7 0 10-4 10-9-6 0-10 3-10 9Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<span>juniper</span>\n</div>\n<span class=\"tagline\">A local design journal</span>\n</header>\n<main>\n<div class=\"panel\">\n<section class=\"signup\" aria-labelledby=\"newsletter-title\">\n<p class=\"eyebrow\">The practice edition</p>\n<h1 id=\"newsletter-title\">Juniper Weekly</h1>\n<p class=\"lead\">Local projects, material insights and planning notes for the everyday work of architecture.</p>\n<form aria-labelledby=\"newsletter-title\">\n<label class=\"field-label\" for=\"email\">Email address</label>\n<input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@practice.co.uk\" autocomplete=\"email\" aria-describedby=\"privacy\">\n<div class=\"preference\">\n<input type=\"checkbox\" id=\"digest\" name=\"digest\" checked>\n<label for=\"digest\">Weekly digest<small>One curated issue, every Friday.</small></label>\n</div>\n<div class=\"action\">\n<button type=\"button\">Subscribe</button>\n<p class=\"action-hint\">Use your studio or personal email.</p>\n</div>\n<p class=\"privacy\" id=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n<section class=\"details\" aria-labelledby=\"reasons-title\">\n<h2 id=\"reasons-title\">A little perspective for your practice</h2>\n<p class=\"support\">A five-minute read to share at your next studio catch-up.</p>\n<ol class=\"reasons\">\n<li>\n<div><h3>Know your neighbourhood</h3><p>Follow local buildings and the ideas shaping the streets around your projects.</p></div>\n</li>\n<li>\n<div><h3>Bring better references</h3><p>Find thoughtful details, reuse strategies and material choices worth discussing.</p></div>\n</li>\n<li>\n<div><h3>Stay connected</h3><p>Keep useful planning notes, open studios and design conversations on your radar.</p></div>\n</li>\n</ol>\n</section>\n</div>\n<section class=\"issue\" aria-labelledby=\"update-title\">\n<div class=\"issue-top\">\n<h2 id=\"update-title\">From the latest issue</h2>\n<time datetime=\"2025-05-14\">Updated 14 May 2025</time>\n</div>\n<div class=\"issue-body\">\n<div>\n<h3>A second life for a corner workshop</h3>\n<p>Our new field note looks at retained brickwork, a modest courtyard and the case for building less.</p>\n</div>\n<dl>\n<dt>Project</dt><dd>Small-scale adaptive reuse</dd>\n<dt>Detail</dt><dd>Repairing timber windows before replacing</dd>\n<dt>Studio note</dt><dd>Questions to take to a pre-application meeting</dd>\n</dl>\n</div>\n</section>\n</main>\n<footer>\n<span>Juniper · Independent local design journalism</span>\n<span>For people who shape places.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Kite, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Kite Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Kite Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Kite Weekly — A local design journal</title>\n<style>\n:root{--paper:#f7f3ec;--ink:#292822;--muted:#68645b;--line:#d9d1c5;--clay:#9b4c36}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\n.page{max-width:1120px;margin:auto;padding:0 40px}\nheader{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:29px 0;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:12px}\n.brand svg{width:27px;height:36px;color:var(--clay)}\n.wordmark{font:700 34px/1 Georgia,serif;letter-spacing:-1.5px}\n.tagline{margin:0;color:var(--muted);font-size:12px;line-height:1.5}\n.header-note{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}\nmain{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:88px;padding:68px 0 66px}\n.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--clay)}\n.eyebrow:before{content:\"\";width:25px;height:2px;background:var(--clay)}\nh1{font:400 clamp(48px,6.2vw,78px)/1.06 Georgia,serif;letter-spacing:-3px;margin:17px 0 21px}\n.intro{max-width:460px;margin:0;font-size:18px;line-height:1.55;color:#514d45}\nform{margin-top:31px}\n.form-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:16px 0 19px}\n.form-heading h2{margin:0;font-size:12px;letter-spacing:1.2px;text-transform:uppercase}\n.progress{font-size:12px;color:var(--muted)}\n.email-label{display:block;font-size:14px;font-weight:700;margin-bottom:9px}\ninput[type=email]{width:100%;min-width:0;height:51px;border:1px solid #bcb3a5;border-radius:2px;background:#fffdf9;padding:0 14px;font:16px Arial,Helvetica,sans-serif;color:var(--ink)}\ninput::placeholder{color:#807b72}\ninput:focus-visible,button:focus-visible{outline:2px solid var(--clay);outline-offset:3px}\n.digest{display:flex;align-items:flex-start;gap:11px;margin:19px 0 22px}\ninput[type=checkbox]{width:18px;height:18px;flex:none;margin:1px 0 0;accent-color:var(--clay)}\n.digest label{font-size:14px;line-height:1.4;cursor:pointer}\n.digest small{display:block;font-size:12px;color:var(--muted);margin-top:3px}\nbutton{width:100%;height:51px;display:flex;justify-content:space-between;align-items:center;border:0;border-radius:2px;background:var(--ink);color:var(--paper);padding:0 17px;font:700 15px Arial,Helvetica,sans-serif;cursor:pointer}\nbutton:hover{background:#403e35}\nbutton svg{width:20px;height:20px}\n.privacy{margin:13px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}\n.next{margin:19px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}\n.next strong{color:var(--ink);font-weight:700}\naside{align-self:start;margin-top:9px;padding:25px 0 0;border-top:2px solid var(--clay)}\n.aside-top{display:flex;align-items:center;justify-content:space-between;gap:12px}\n.count{margin:0;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:700}\n.status{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:5px 8px;white-space:nowrap}\naside h2{font:400 30px/1.2 Georgia,serif;letter-spacing:-.5px;margin:22px 0 9px}\n.reasons{list-style:none;padding:0;margin:0}\n.reasons li{display:grid;grid-template-columns:27px minmax(0,1fr);gap:14px;padding:23px 0;border-bottom:1px solid var(--line)}\n.number{font:italic 17px/1.5 Georgia,serif;color:var(--clay)}\n.reasons h3{margin:0 0 7px;font-size:15px;line-height:1.4;font-weight:700}\n.reasons p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}\n.editor-note{margin:22px 0 0;font:italic 16px/1.5 Georgia,serif;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:20px 0 27px;font-size:11px;line-height:1.5;color:var(--muted)}\nfooter p{margin:0}\n@media(max-width:700px){\n.page{padding:0 24px}\nheader{padding:20px 0;gap:10px}\n.wordmark{font-size:30px}\n.brand{gap:9px}\n.brand svg{width:22px;height:30px}\n.tagline{font-size:11px}\n.header-note{display:none}\nmain{grid-template-columns:1fr;gap:29px;padding:27px 0 30px}\nh1{font-size:52px;letter-spacing:-2px;margin:13px 0 13px}\n.intro{font-size:16px;line-height:1.5}\nform{margin-top:21px}\n.form-heading{padding:12px 0 15px}\n.digest{margin:15px 0 17px}\n.next{margin-top:12px}\naside{margin:0;padding-top:16px}\naside h2{font-size:25px;margin:16px 0 3px}\n.reasons li{padding:15px 0;gap:10px}\n.reasons h3{font-size:14px;margin-bottom:4px}\n.reasons p{font-size:13px;line-height:1.5}\n.editor-note{font-size:14px;margin-top:15px}\nfooter{padding:16px 0 22px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 38\" fill=\"none\" aria-hidden=\"true\"><path d=\"M14 2 26 13 14 27 2 13 14 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M14 2v25M2 13h24M14 27c-6 5 6 5 0 10\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\n<span class=\"wordmark\">Kite</span>\n<p class=\"tagline\">A local<br>design journal</p>\n</div>\n<span class=\"header-note\">Architecture · Place · Practice</span>\n</header>\n\n<main>\n<section aria-labelledby=\"newsletter-title\">\n<div class=\"eyebrow\">The newsletter</div>\n<h1 id=\"newsletter-title\">Kite Weekly</h1>\n<p class=\"intro\">A thoughtful edit of local architecture, people and ideas. Fresh perspective for your practice, every Friday.</p>\n\n<form aria-labelledby=\"signup-title\">\n<div class=\"form-heading\">\n<h2 id=\"signup-title\">Join the list</h2>\n<span class=\"progress\">Step 1 of 1</span>\n</div>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourpractice.com\" required aria-describedby=\"privacy\">\n<div class=\"digest\">\n<input id=\"weekly\" name=\"weekly-digest\" type=\"checkbox\" checked>\n<label for=\"weekly\">Weekly digest<small>One concise edition, delivered on Fridays.</small></label>\n</div>\n<button type=\"button\">\n<span>Subscribe</span>\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 12h15m-6-6 6 6-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</button>\n<p id=\"privacy\" class=\"privacy\">No spam. Unsubscribe any time.</p>\n<p class=\"next\"><strong>Next up:</strong> a welcome note, then your first weekly edition.</p>\n</form>\n</section>\n\n<aside aria-labelledby=\"reasons-title\">\n<div class=\"aside-top\">\n<p class=\"count\">3 reasons to join</p>\n<span class=\"status\">Free · Weekly</span>\n</div>\n<h2 id=\"reasons-title\">Closer to the work.</h2>\n<ol class=\"reasons\">\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>See what’s taking shape</h3><p>Local projects, from small interventions to places changing the neighbourhood.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Bring ideas back to the studio</h3><p>Material discoveries and honest conversations about the craft of practice.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Stay connected, locally</h3><p>Exhibitions, open studios and talks worth making time for.</p></div>\n</li>\n</ol>\n<p class=\"editor-note\">Made for curious minds and busy studios.</p>\n</aside>\n</main>\n\n<footer>\n<p>Kite — Independent perspectives on the built environment.</p>\n<p>Read locally. Think widely.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Larch, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: practical and understated; use deep plum as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Larch Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Larch Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Larch Weekly — A local design journal</title>\n<style>\n:root{color-scheme:light;--paper:#f3f5f6;--ink:#292d31;--muted:#626870;--line:#d2d7dc;--plum:#58314f}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\n.page{max-width:1120px;margin:auto;padding:0 48px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px;border-bottom:1px solid var(--line)}\n.identity{display:flex;align-items:center;gap:22px}\n.wordmark{font-size:23px;font-weight:650;letter-spacing:.15em;color:var(--plum)}\n.descriptor{border-left:1px solid var(--line);padding-left:22px;color:var(--muted);font-size:13px}\n.header-note{font-size:12px;color:var(--muted)}\nmain{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;padding:64px 0 56px}\n.eyebrow{margin:0 0 15px;color:var(--plum);font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}\nh1,h2,h3,p{margin-top:0}\nh1{margin-bottom:20px;font-family:Georgia,\"Times New Roman\",serif;font-size:clamp(46px,5.4vw,68px);font-weight:400;letter-spacing:-.055em;line-height:1.07}\n.intro{max-width:440px;margin-bottom:14px;font-size:17px;line-height:1.65}\n.frequency{margin-bottom:29px;color:var(--muted);font-size:13px}\nform{max-width:440px}\n.email-label{display:block;margin-bottom:8px;font-weight:600;font-size:14px}\ninput[type=email]{display:block;width:100%;height:50px;padding:12px 14px;border:1px solid #a9afb7;border-radius:3px;background:#fff;color:var(--ink);font:inherit}\ninput::placeholder{color:#767c84}\ninput:focus-visible,button:focus-visible{outline:3px solid var(--plum);outline-offset:3px}\n.preference{display:flex;align-items:flex-start;gap:11px;margin:21px 0}\ninput[type=checkbox]{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--plum)}\n.preference label{display:block;font-weight:550;font-size:14px}\n.preference small{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:400}\nbutton{display:block;width:100%;min-height:49px;padding:12px 20px;border:1px solid var(--plum);border-radius:3px;background:var(--plum);color:#fff;font:600 15px system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\nbutton:hover{background:#45253e}\n.privacy{margin:12px 0 0;color:var(--muted);font-size:12px}\n.contents{border-left:1px solid var(--line);padding-left:40px}\nh2{margin-bottom:24px;font-family:Georgia,\"Times New Roman\",serif;font-size:30px;font-weight:400;letter-spacing:-.025em;line-height:1.25}\n.reasons{list-style:none;margin:0;padding:0}\n.reasons li{display:grid;grid-template-columns:23px 1fr;gap:13px;padding:17px 0;border-top:1px solid var(--line)}\n.number{padding-top:3px;font-size:11px;color:var(--plum);font-variant-numeric:tabular-nums}\nh3{margin-bottom:4px;font-size:15px;font-weight:600}\n.reasons p{margin-bottom:0;color:var(--muted);font-size:13px;line-height:1.6}\nfigure{display:flex;align-items:center;gap:20px;margin:23px 0 0;padding-top:20px;border-top:1px solid var(--line)}\nfigure svg{display:block;width:155px;height:100px;flex:none}\nfigcaption{color:var(--muted);font-size:12px;line-height:1.6}\nfigcaption strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:550}\nfooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0 28px;color:var(--muted);font-size:11px}\n@media(max-width:760px){\n.page{padding:0 24px}\nheader{min-height:76px;gap:12px}\n.identity{gap:14px}\n.wordmark{font-size:19px}\n.descriptor{padding-left:14px;font-size:11px;max-width:130px;line-height:1.4}\n.header-note{display:none}\nmain{grid-template-columns:1fr;gap:32px;padding:31px 0}\n.eyebrow{margin-bottom:12px;font-size:10px}\nh1{margin-bottom:15px}\n.intro{font-size:15px;line-height:1.6;margin-bottom:10px}\n.frequency{margin-bottom:23px;font-size:12px}\nform{max-width:none}\n.preference{margin:17px 0}\n.contents{border-left:0;border-top:1px solid var(--line);padding:26px 0 0}\nh2{font-size:26px;margin-bottom:18px}\n.reasons li{padding:14px 0}\nfigure{margin-top:16px;padding-top:16px;gap:16px}\nfigure svg{width:140px;height:90px}\nfooter{font-size:10px;gap:15px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease}}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"identity\">\n<span class=\"wordmark\">LARCH</span>\n<span class=\"descriptor\">A local design journal</span>\n</div>\n<span class=\"header-note\">Architecture, close to home.</span>\n</header>\n\n<main>\n<section class=\"signup\" aria-labelledby=\"signup-heading\">\n<p class=\"eyebrow\">The journal, in your inbox</p>\n<h1 id=\"signup-heading\">Larch Weekly</h1>\n<p class=\"intro\">Local projects, useful details, and the ideas shaping our built environment—selected for architects and the people they design with.</p>\n<p class=\"frequency\">Every Thursday. A five-minute read.</p>\n<form>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourpractice.com\" required>\n<div class=\"preference\">\n<input id=\"weekly\" name=\"weekly\" type=\"checkbox\" checked>\n<label for=\"weekly\">Weekly digest<small>A considered edit of projects, practice notes, and local events.</small></label>\n</div>\n<button type=\"button\">Subscribe</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n\n<section class=\"contents\" aria-labelledby=\"contents-heading\">\n<p class=\"eyebrow\">Three reasons to join</p>\n<h2 id=\"contents-heading\">A little more context.<br>A little less noise.</h2>\n<ol class=\"reasons\">\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>Projects with context</h3><p>Local buildings, the briefs behind them, and what made it to site.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Details worth keeping</h3><p>Material choices, planning lessons, and practical ideas for your next project.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>A connection to place</h3><p>Open studios, exhibitions, and conversations across the local design community.</p></div>\n</li>\n</ol>\n<figure>\n<svg viewBox=\"0 0 155 100\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-labelledby=\"plan-title plan-desc\">\n<title id=\"plan-title\">From street to courtyard</title>\n<desc id=\"plan-desc\">A plan sketch traces a route from the street through a narrow entrance into a shared courtyard.</desc>\n<g fill=\"none\" stroke=\"#9ba3ab\" stroke-width=\"1\">\n<path d=\"M4 13H151M4 23H151\"/>\n<path d=\"M22 35H64V65H22ZM92 35H134V85H92M22 65V85H92\"/>\n<path d=\"M64 35H73M83 35H92\"/>\n</g>\n<path d=\"M78 16V72H103\" fill=\"none\" stroke=\"#58314f\" stroke-width=\"1.5\" stroke-dasharray=\"3 3\"/>\n<path d=\"M98 68L103 72L98 76\" fill=\"none\" stroke=\"#58314f\" stroke-width=\"1.5\"/>\n<circle cx=\"78\" cy=\"16\" r=\"2.5\" fill=\"#58314f\"/>\n<g fill=\"#626870\" font-family=\"system-ui,sans-serif\" font-size=\"7\" letter-spacing=\".5\">\n<text x=\"5\" y=\"8\">STREET</text>\n<text x=\"64\" y=\"49\">ENTRY</text>\n<text x=\"43\" y=\"79\">COURT</text>\n</g>\n</svg>\n<figcaption><strong>Beyond the photograph.</strong>We look at how a place works—from the street to the spaces within.</figcaption>\n</figure>\n</section>\n</main>\n\n<footer>\n<span>Independent voices. Local architecture.</span>\n<span>Larch · The places we share.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Maple, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Maple Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Maple Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maple Weekly — Local design, from the field</title>\n<style>\n:root{--paper:#f7f8f2;--ink:#214c38;--muted:#617466;--line:#d6dfd3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\n.shell{width:min(1080px,calc(100% - 80px));margin:auto}\nheader{min-height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}\n.brand{display:flex;align-items:center;gap:12px}\n.brand svg{width:30px;height:36px;flex-shrink:0}\n.brand-name{font-size:23px;font-weight:650;letter-spacing:-.7px}\n.brand-description{margin:2px 0 0;font-size:12px;color:var(--muted)}\n.edition{font-size:11px;letter-spacing:1.6px;text-transform:uppercase}\nmain{display:grid;grid-template-columns:1.25fr 1fr;gap:84px;padding:76px 0 70px}\n.eyebrow{margin:0 0 18px;font-size:11px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:64px;line-height:1.08;letter-spacing:-2.5px;margin:0 0 22px}\n.value{font-size:21px;line-height:1.5;max-width:440px;margin:0 0 12px;letter-spacing:-.3px}\n.support{font-size:15px;line-height:1.65;color:var(--muted);max-width:440px;margin:0}\nform{margin-top:30px}\n.email-label{display:block;font-size:14px;font-weight:600;margin-bottom:9px}\ninput[type=email]{display:block;width:100%;height:52px;border:1px solid #9cae9e;border-radius:3px;background:transparent;padding:0 15px;font:inherit;font-size:16px;color:var(--ink)}\ninput::placeholder{color:var(--muted);opacity:.8}\n.digest{display:flex;gap:12px;align-items:flex-start;padding:19px 0 21px}\ninput[type=checkbox]{width:18px;height:18px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--ink)}\n.digest label{cursor:pointer;font-size:14px;font-weight:600;line-height:1.5}\n.digest label span{display:block;margin-top:4px;font-size:12px;line-height:1.6;font-weight:400;color:var(--muted)}\nbutton{width:100%;min-height:52px;padding:13px 20px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--paper);font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between}\nbutton:hover{background:#163c2a}\nbutton svg{width:19px;height:19px}\ninput:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n.privacy{margin:13px 0 0;font-size:12px;color:var(--muted);text-align:center}\n.reasons{border-left:1px solid var(--line);padding-left:46px;padding-top:3px}\nh2{font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:29px;line-height:1.25;letter-spacing:-.6px;margin:0 0 12px}\n.reasons-intro{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 24px}\nol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}\nli{display:grid;grid-template-columns:25px 1fr;gap:12px;padding:23px 0;border-bottom:1px solid var(--line)}\n.number{font-size:11px;color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums}\nh3{font-size:15px;line-height:1.4;font-weight:600;margin:0 0 7px}\nli p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}\n.editor-note{font-size:12px;line-height:1.6;color:var(--muted);margin:22px 0 0}\nfooter{border-top:1px solid var(--line);padding:21px 0 28px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}\nfooter p{margin:0}\n@media(max-width:760px){\n.shell{width:calc(100% - 40px)}\nheader{min-height:76px;gap:12px}\n.brand-name{font-size:21px}\n.brand-description{font-size:11px}\n.brand svg{width:25px;height:31px}\n.edition{font-size:9px;letter-spacing:1px}\nmain{grid-template-columns:1fr;gap:36px;padding:32px 0 35px}\n.eyebrow{font-size:10px;margin-bottom:13px;letter-spacing:1.3px}\nh1{font-size:46px;letter-spacing:-1.7px;margin-bottom:16px}\n.value{font-size:19px;line-height:1.45;margin-bottom:10px}\n.support{font-size:14px;line-height:1.55}\nform{margin-top:24px}\n.digest{padding:16px 0 18px}\n.reasons{border-left:0;border-top:1px solid var(--line);padding:27px 0 0}\nh2{font-size:27px}\n.reasons-intro{margin-bottom:20px}\nli{padding:19px 0}\nfooter{flex-direction:column;gap:6px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 38\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M16 34V15M16 27C7 27 3 21 4 12c7 0 12 5 12 15Zm0-6c0-9 4-15 12-17 1 9-3 16-12 17Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<div><div class=\"brand-name\">Maple</div><p class=\"brand-description\">A local design journal</p></div>\n</div>\n<span class=\"edition\">From the field</span>\n</header>\n\n<main>\n<section aria-labelledby=\"signup-title\">\n<p class=\"eyebrow\">One email. Every Friday.</p>\n<h1 id=\"signup-title\">Maple Weekly</h1>\n<p class=\"value\">Local design stories for people who look a little closer.</p>\n<p class=\"support\">Bring fresh context to your next site visit with observations from local spaces and the people who use them.</p>\n\n<form aria-label=\"Newsletter sign-up\">\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@yourteam.org\" autocomplete=\"email\" required>\n<div class=\"digest\">\n<input type=\"checkbox\" id=\"digest\" name=\"digest\" checked>\n<label for=\"digest\">Weekly digest\n<span>A single Friday roundup for field researchers balancing site visits, participant interviews, and the notes in between.</span>\n</label>\n</div>\n<button type=\"button\">\n<span>Subscribe</span>\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 12h15m-6-6 6 6-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n\n<aside class=\"reasons\" aria-labelledby=\"reasons-title\">\n<p class=\"eyebrow\">Why join</p>\n<h2 id=\"reasons-title\">Better context.<br>More thoughtful fieldwork.</h2>\n<p class=\"reasons-intro\">A small collection of useful reads, selected with your research week in mind.</p>\n<ol>\n<li>\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>See the everyday details</h3><p>Discover how local streets, shops, and shared spaces shape daily life.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Take a new question into the field</h3><p>Find prompts and perspectives to enrich your next interview or observation.</p></div>\n</li>\n<li>\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Give your team a shared starting point</h3><p>Bring a short, relevant read to your next fieldwork debrief.</p></div>\n</li>\n</ol>\n<p class=\"editor-note\">Written by local designers and researchers. Edited for a five-minute read.</p>\n</aside>\n</main>\n\n<footer>\n<p>Maple — design in the places we share.</p>\n<p>Made locally. Read out in the world.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for North, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"North Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"North Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>North Weekly — A local design journal</title>\n<style>\n:root{color-scheme:light;--paper:#f7f7f3;--ink:#26313b;--muted:#606b73;--blue:#48647e;--line:#d8ddd9;--panel:#eef1ef}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\n.page{max-width:1000px;margin:auto;padding:0 40px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0;border-bottom:1px solid var(--line)}\n.brand{font-family:Georgia,\"Times New Roman\",serif;font-size:30px;font-weight:bold;letter-spacing:-1.3px}\n.brand span{color:var(--blue)}\n.identity{font-size:11px;text-transform:uppercase;letter-spacing:1.7px;color:var(--muted)}\nmain{padding:64px 0 48px}\n.kicker{margin:0 0 24px;color:var(--blue);font-size:11px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase}\n.layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:start}\nh1{margin:0 0 18px;font-family:Georgia,\"Times New Roman\",serif;font-weight:normal;font-size:58px;line-height:1.05;letter-spacing:-2px}\n.intro{margin:0;max-width:420px;font-size:17px;line-height:1.6;color:var(--muted)}\nform{margin-top:30px}\n.email-label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}\ninput[type=email]{display:block;width:100%;height:48px;padding:0 13px;border:1px solid #aeb9c0;border-radius:3px;background:#fff;color:var(--ink);font:inherit;font-size:15px}\ninput::placeholder{color:#7a848b}\ninput:focus-visible,button:focus-visible{outline:3px solid #a7bdcf;outline-offset:3px}\n.check-row{display:flex;align-items:center;gap:9px;margin:15px 0 22px}\ninput[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--blue);flex-shrink:0}\n.check-row label{font-size:14px;line-height:1.4}\n.action-row{display:flex;align-items:center;gap:17px}\nbutton{flex-shrink:0;min-height:46px;padding:0 25px;border:1px solid var(--blue);border-radius:3px;background:var(--blue);color:white;font:inherit;font-size:14px;font-weight:600;cursor:pointer}\nbutton:hover{background:#3b536a}\n.action-hint{margin:0;max-width:160px;font-size:12px;line-height:1.55;color:var(--muted)}\n.privacy{margin:17px 0 0;color:var(--muted);font-size:12px;line-height:1.5}\naside{padding:25px 26px;background:var(--panel);border-top:2px solid var(--blue)}\naside h2{margin:0 0 21px;font-family:Georgia,\"Times New Roman\",serif;font-weight:normal;font-size:24px;line-height:1.2;letter-spacing:-.4px}\n.reasons{list-style:none;margin:0;padding:0;counter-reset:reasons}\n.reasons li{counter-increment:reasons;display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;margin-bottom:19px}\n.reasons li::before{content:\"0\" counter(reasons);padding-top:3px;color:var(--blue);font-size:10px;font-weight:650;letter-spacing:.5px}\n.reasons h3{margin:0 0 4px;font-size:13px;font-weight:650;line-height:1.4}\n.reasons p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}\n.recent{border-top:1px solid #d0d7d3;padding-top:17px;margin-top:24px}\n.recent-meta{display:flex;justify-content:space-between;gap:12px;margin:0 0 9px;color:var(--muted);font-size:10px;line-height:1.4;letter-spacing:1px;text-transform:uppercase}\n.recent h3{margin:0 0 5px;font-family:Georgia,\"Times New Roman\",serif;font-size:18px;line-height:1.3;font-weight:normal}\n.recent-note{margin:0;color:var(--muted);font-size:12px;line-height:1.5}\nfooter{display:flex;justify-content:space-between;gap:16px;padding:20px 0 28px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.5}\n@media(max-width:680px){\n.page{padding:0 24px}\nheader{padding:20px 0}\n.brand{font-size:27px}\n.identity{max-width:130px;text-align:right;font-size:9px;line-height:1.5;letter-spacing:1.2px}\nmain{padding:29px 0 28px}\n.kicker{font-size:10px;margin-bottom:15px;letter-spacing:1.2px}\n.layout{grid-template-columns:minmax(0,1fr);gap:30px}\nh1{font-size:44px;letter-spacing:-1.5px;margin-bottom:13px}\n.intro{font-size:15px;line-height:1.55}\nform{margin-top:23px}\n.check-row{margin:14px 0 18px}\n.action-row{gap:15px}\nbutton{padding:0 23px}\n.privacy{margin-top:13px}\naside{padding:21px}\naside h2{font-size:22px;margin-bottom:19px}\n.reasons li{margin-bottom:16px}\n.recent{margin-top:20px}\nfooter{font-size:10px;padding-top:17px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\">North<span>.</span></div>\n<div class=\"identity\">A local design journal</div>\n</header>\n<main>\n<p class=\"kicker\">The newsletter · For field research teams</p>\n<div class=\"layout\">\n<section aria-labelledby=\"signup-title\">\n<h1 id=\"signup-title\">North Weekly</h1>\n<p class=\"intro\">A weekly edit of local design stories, observation prompts and practical methods for your next field visit.</p>\n<form aria-label=\"Newsletter sign-up\">\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourteam.org\">\n<div class=\"check-row\">\n<input id=\"weekly\" name=\"weekly\" type=\"checkbox\" checked>\n<label for=\"weekly\">Weekly digest</label>\n</div>\n<div class=\"action-row\">\n<button type=\"button\" aria-describedby=\"delivery-hint privacy-note\">Subscribe</button>\n<p class=\"action-hint\" id=\"delivery-hint\">Every Thursday.<br>About a five-minute read.</p>\n</div>\n<p class=\"privacy\" id=\"privacy-note\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n<aside aria-labelledby=\"digest-title\">\n<h2 id=\"digest-title\">A little perspective, weekly.</h2>\n<ol class=\"reasons\">\n<li>\n<div>\n<h3>See your place differently.</h3>\n<p>Local projects and the people shaping everyday spaces.</p>\n</div>\n</li>\n<li>\n<div>\n<h3>Take better field notes.</h3>\n<p>Small methods for interviews, observation and site walks.</p>\n</div>\n</li>\n<li>\n<div>\n<h3>Bring evidence back.</h3>\n<p>Shareable insights to ground your team’s next discussion.</p>\n</div>\n</li>\n</ol>\n<section class=\"recent\" aria-labelledby=\"recent-title\">\n<p class=\"recent-meta\"><span>Recent dispatch</span><time datetime=\"2025-06-12\">12 June</time></p>\n<h3 id=\"recent-title\">Listening at the bus stop</h3>\n<p class=\"recent-note\">What three neighborhood routes reveal about waiting and belonging.</p>\n</section>\n</aside>\n</div>\n</main>\n<footer>\n<span>Independent stories. Close to the ground.</span>\n<span>Published by North</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Orbit, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Orbit Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Orbit Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Orbit Weekly — Field notes worth sharing</title>\n<style>\n:root{--paper:#f7f4ed;--ink:#302d28;--muted:#686159;--line:#d7cfc2;--accent:#a04630}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\n.wrap{max-width:1120px;margin:auto;padding:0 40px}\nheader{min-height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}\n.brand{display:flex;align-items:center;gap:12px}\n.mark{width:32px;height:32px;color:var(--accent);flex:none}\n.wordmark{font-family:Georgia,serif;font-size:29px;letter-spacing:-1px;line-height:1}\n.tagline{font-size:12px;color:var(--muted);margin:5px 0 0}\n.header-note{font-size:12px;color:var(--muted)}\nmain{padding-top:35px}\n.edition{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}\n.eyebrow{font-size:11px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin:0}\n.status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap}\n.status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#7c826d}\n.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;padding-bottom:43px;border-bottom:1px solid var(--line)}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:76px;line-height:1.04;letter-spacing:-3px;margin:0 0 24px}\n.intro{max-width:460px;font-size:18px;line-height:1.65;margin:0}\n.intro strong{font-weight:500;color:var(--accent)}\n.signup{border-left:1px solid var(--line);padding-left:35px}\nh2{font-family:Georgia,\"Times New Roman\",serif;font-size:25px;line-height:1.25;font-weight:400;margin:0}\n.signup h2{margin:4px 0 20px}\nlabel.email-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}\ninput[type=email]{display:block;width:100%;min-height:50px;background:#fffdf8;color:var(--ink);border:1px solid #a69b8d;border-radius:2px;padding:12px 14px;font:inherit}\ninput::placeholder{color:#82796f}\n.check{display:flex;align-items:center;gap:10px;min-height:48px;margin:5px 0 11px;font-size:14px;cursor:pointer}\ninput[type=checkbox]{width:19px;height:19px;accent-color:var(--accent);margin:0;flex:none}\nbutton{display:block;width:100%;min-height:50px;padding:12px 20px;border:1px solid var(--accent);border-radius:2px;background:var(--accent);color:#fff;font:600 15px system-ui,sans-serif;cursor:pointer}\nbutton:hover{background:#873b29}\nbutton:focus-visible,input:focus-visible{outline:3px solid #b06e43;outline-offset:3px}\n.privacy{font-size:12px;color:var(--muted);margin:12px 0 0}\n.reasons{padding:27px 0 30px;border-bottom:1px solid var(--line)}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:22px}\n.count{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}\n.reason-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}\n.reason-list li{display:grid;grid-template-columns:25px 1fr;gap:9px}\n.number{color:var(--accent);font-family:Georgia,serif;font-size:16px}\nh3{font-size:14px;font-weight:650;margin:0 0 5px}\n.reason-list p{font-size:13px;color:var(--muted);margin:0;line-height:1.6}\n.briefings{display:grid;grid-template-columns:1fr 1.35fr;gap:45px;padding:27px 0 32px;border-bottom:1px solid var(--line)}\n.briefings h2{font-size:23px;margin-bottom:8px}\n.empty-title{font-size:14px;font-weight:600;margin:0 0 5px}\n.empty-copy{font-size:13px;color:var(--muted);margin:0;max-width:490px}\n.schedule-status{display:inline-block;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px;margin-top:12px}\nfooter{display:flex;justify-content:space-between;gap:20px;padding:20px 0 28px;font-size:11px;color:var(--muted)}\nfooter p{margin:0}\n@media(max-width:700px){\n.wrap{padding:0 22px}\nheader{min-height:76px}\n.header-note{display:none}\n.wordmark{font-size:26px}\n.tagline{font-size:11px}\nmain{padding-top:23px}\n.edition{margin-bottom:18px;gap:8px}\n.eyebrow{font-size:10px;letter-spacing:1.1px}\n.status{font-size:11px}\n.hero{grid-template-columns:1fr;gap:24px;padding-bottom:27px}\nh1{font-size:52px;letter-spacing:-2px;margin-bottom:13px}\n.intro{font-size:16px;line-height:1.55}\n.signup{border-left:0;padding-left:0}\n.signup h2{font-size:22px;margin:0 0 15px}\n.reasons{padding:23px 0}\n.section-heading{margin-bottom:18px}\n.section-heading h2{font-size:23px}\n.reason-list{grid-template-columns:1fr;gap:18px}\n.reason-list li{grid-template-columns:24px 1fr}\n.reason-list p{font-size:13px}\n.briefings{grid-template-columns:1fr;gap:17px;padding:23px 0}\nfooter{flex-direction:column;gap:4px;padding:18px 0 23px}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header>\n<div class=\"brand\">\n<svg class=\"mark\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"18\" cy=\"18\" r=\"10\" stroke=\"currentColor\" stroke-width=\"1.5\"/><ellipse cx=\"18\" cy=\"18\" rx=\"17\" ry=\"6\" transform=\"rotate(-35 18 18)\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"29\" cy=\"9\" r=\"2.5\" fill=\"currentColor\"/></svg>\n<div><div class=\"wordmark\">Orbit</div><p class=\"tagline\">A local design journal</p></div>\n</div>\n<span class=\"header-note\">Closer to the places we study.</span>\n</header>\n<main>\n<div class=\"edition\">\n<p class=\"eyebrow\">Dispatches for field researchers</p>\n<span class=\"status\">Published weekly · Fridays</span>\n</div>\n<section class=\"hero\" aria-labelledby=\"page-title\">\n<div>\n<h1 id=\"page-title\">Orbit Weekly</h1>\n<p class=\"intro\">Local design stories, sharp observations and practical methods for your field research team. <strong>A useful pause between site visits.</strong></p>\n</div>\n<div class=\"signup\">\n<h2>Get the next issue</h2>\n<form>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@yourteam.org\" autocomplete=\"email\" required>\n<label class=\"check\" for=\"digest\"><input type=\"checkbox\" id=\"digest\" name=\"digest\" checked>Weekly digest</label>\n<button type=\"submit\">Subscribe</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</div>\n</section>\n<section class=\"reasons\" aria-labelledby=\"reasons-title\">\n<div class=\"section-heading\">\n<h2 id=\"reasons-title\">Why join the orbit?</h2>\n<span class=\"count\">3 reasons to join</span>\n</div>\n<ol class=\"reason-list\">\n<li><span class=\"number\" aria-hidden=\"true\">01</span><div><h3>See the local details</h3><p>Design stories from streets, shared spaces and the people who use them.</p></div></li>\n<li><span class=\"number\" aria-hidden=\"true\">02</span><div><h3>Bring a better method</h3><p>Interview prompts and observation tools to take into your next site visit.</p></div></li>\n<li><span class=\"number\" aria-hidden=\"true\">03</span><div><h3>Keep the team in sync</h3><p>A concise read to spark discussion at your next research debrief.</p></div></li>\n</ol>\n</section>\n<section class=\"briefings\" aria-labelledby=\"briefings-title\">\n<div>\n<h2 id=\"briefings-title\">Upcoming field briefings</h2>\n<span class=\"count\">0 scheduled</span>\n</div>\n<div>\n<p class=\"empty-title\">No briefings on the calendar yet.</p>\n<p class=\"empty-copy\">Local research walks and team meetups will appear here when dates are confirmed. The weekly digest continues every Friday.</p>\n<span class=\"schedule-status\">Schedule awaiting confirmation</span>\n</div>\n</section>\n</main>\n<footer>\n<p>Orbit · Independent perspectives on local design</p>\n<p>Made for curious people in the field.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-newsletter-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a newsletter sign-up page for Pine, a local design journal. Include a heading, a short value proposition, email field, a checkbox labelled Weekly digest, and Subscribe button. Include three concise reasons to join. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Pine Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Pine Weekly\", \"Email address\", \"Subscribe\", \"No spam. Unsubscribe any time.\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Pine Weekly — A local design journal</title>\n<style>\n:root{color-scheme:light;--paper:#f6f3ed;--ink:#29262a;--muted:#68616a;--plum:#482b43;--line:#dcd5ce}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;line-height:1.5}\n.wrap{width:min(1060px,calc(100% - 64px));margin:auto}\nheader{padding:25px 0;border-bottom:1px solid var(--line)}\n.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{font-family:Georgia,serif;font-size:35px;line-height:1;letter-spacing:-2px;color:var(--plum);font-weight:bold}\n.journal{font-size:13px;color:var(--muted)}\nmain{padding:70px 0 62px}\n.layout{display:grid;grid-template-columns:1.15fr 1fr;column-gap:86px;row-gap:32px;align-items:start}\n.intro{grid-column:1;grid-row:1}\n.eyebrow{margin:0 0 14px;color:var(--plum);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px}\nh1{font-family:Georgia,serif;font-weight:400;font-size:64px;line-height:1.06;letter-spacing:-2.4px;margin:0 0 20px}\n.lead{font-size:22px;line-height:1.45;max-width:440px;margin:0 0 12px}\n.support{color:var(--muted);font-size:15px;margin:0;max-width:440px}\n.signup{grid-column:2;grid-row:1 / 4;background:#fffdfa;border:1px solid var(--line);border-top:3px solid var(--plum);padding:32px}\n.cadence{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--plum);font-weight:600;margin:0 0 20px}\n.dot{height:6px;width:6px;background:var(--plum);border-radius:50%;flex-shrink:0}\nh2{font-size:21px;font-weight:600;letter-spacing:-.4px;line-height:1.3;margin:0 0 10px}\n.form-intro{margin:0 0 28px;color:var(--muted);font-size:14px}\n.email-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}\ninput[type=email]{width:100%;min-width:0;padding:13px 14px;border:1px solid #a69b9f;border-radius:3px;font:inherit;font-size:16px;color:var(--ink);background:#fff}\ninput::placeholder{color:#817880}\ninput:focus-visible,button:focus-visible{outline:3px solid #b99cac;outline-offset:3px}\n.preference{display:flex;align-items:flex-start;gap:10px;margin:22px 0 26px}\ninput[type=checkbox]{margin:4px 0 0;width:17px;height:17px;flex-shrink:0;accent-color:var(--plum)}\n.preference label{font-size:14px;font-weight:600;cursor:pointer}\n.preference label span{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:4px;line-height:1.5}\nbutton{border:0;border-radius:3px;width:100%;padding:14px 20px;background:var(--plum);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}\nbutton:hover{background:#362033}\n.privacy{font-size:12px;text-align:center;margin:13px 0 0;color:var(--muted)}\n.benefits{grid-column:1;grid-row:2}\n.benefits h2{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}\nol{list-style:none;margin:0;padding:0}\nli{display:flex;gap:15px;padding:13px 0;border-top:1px solid var(--line);font-size:14px}\n.number{font-size:11px;color:var(--plum);font-weight:600;padding-top:3px;font-variant-numeric:tabular-nums}\nli strong{font-weight:600}\nli p{margin:3px 0 0;color:var(--muted);font-size:13px}\n.field-path{grid-column:1;grid-row:3;margin:0}\n.field-path figcaption{font-size:11px;color:var(--muted);margin-bottom:8px}\n.field-path svg{display:block;width:100%;max-width:420px;height:auto}\nfooter{border-top:1px solid var(--line);padding:20px 0 26px}\n.footer-inner{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px}\n@media(max-width:760px){\n.wrap{width:calc(100% - 40px)}\nheader{padding:20px 0}\n.brand{font-size:30px}\n.journal{font-size:11px;max-width:130px;text-align:right}\nmain{padding:30px 0}\n.layout{display:flex;flex-direction:column;gap:26px}\n.intro,.signup,.benefits,.field-path{width:100%}\n.eyebrow{font-size:10px;margin-bottom:12px}\nh1{font-size:46px;letter-spacing:-1.5px;margin-bottom:14px}\n.lead{font-size:19px;margin-bottom:10px}\n.support{font-size:13px}\n.signup{padding:22px}\n.cadence{margin-bottom:14px}\nh2{font-size:20px}\n.form-intro{margin-bottom:20px}\n.preference{margin:18px 0 20px}\n.footer-inner{flex-direction:column;gap:5px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wrap header-inner\">\n<div class=\"brand\" aria-label=\"Pine\">pine.</div>\n<div class=\"journal\">An independent local design journal</div>\n</div>\n</header>\n<main class=\"wrap\">\n<div class=\"layout\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<p class=\"eyebrow\">For teams working in the field</p>\n<h1 id=\"page-title\">Pine Weekly</h1>\n<p class=\"lead\">Local design stories worth taking into the field.</p>\n<p class=\"support\">A Friday note for research teams connecting street-level observations with the places people use every day.</p>\n</section>\n<section class=\"signup\" aria-labelledby=\"signup-title\">\n<p class=\"cadence\"><span class=\"dot\" aria-hidden=\"true\"></span>One email, every Friday</p>\n<h2 id=\"signup-title\">Stay close to the work.</h2>\n<p class=\"form-intro\">Get a considered selection of field notes, local projects and useful research methods.</p>\n<form>\n<label class=\"email-label\" for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourteam.org\" required>\n<div class=\"preference\">\n<input id=\"digest\" name=\"digest\" type=\"checkbox\" checked>\n<label for=\"digest\">Weekly digest<span>The week’s stories, gathered in one short read.</span></label>\n</div>\n<button type=\"button\">Subscribe</button>\n<p class=\"privacy\">No spam. Unsubscribe any time.</p>\n</form>\n</section>\n<section class=\"benefits\" aria-labelledby=\"benefits-title\">\n<h2 id=\"benefits-title\">Three reasons to join</h2>\n<ol>\n<li><span class=\"number\" aria-hidden=\"true\">01</span><div><strong>Notice what others miss.</strong><p>Street observations and resident perspectives, with context.</p></div></li>\n<li><span class=\"number\" aria-hidden=\"true\">02</span><div><strong>Learn from local projects.</strong><p>See how research shapes everyday spaces.</p></div></li>\n<li><span class=\"number\" aria-hidden=\"true\">03</span><div><strong>Take a useful method with you.</strong><p>Interview prompts and documentation tips for your next site visit.</p></div></li>\n</ol>\n</section>\n<figure class=\"field-path\">\n<figcaption>A field note’s journey through Pine</figcaption>\n<svg viewBox=\"0 0 420 60\" role=\"img\" aria-labelledby=\"route-title\">\n<title id=\"route-title\">From site observation to local context to a design takeaway</title>\n<path d=\"M12 15H398\" fill=\"none\" stroke=\"#d0c4cc\" stroke-width=\"1.5\"/>\n<path d=\"m193 11 5 4-5 4m195-8 5 4-5 4\" fill=\"none\" stroke=\"#482b43\" stroke-width=\"1.5\"/>\n<g fill=\"#f6f3ed\" stroke=\"#482b43\" stroke-width=\"1.5\">\n<circle cx=\"12\" cy=\"15\" r=\"5\"/><circle cx=\"208\" cy=\"15\" r=\"5\"/><circle cx=\"398\" cy=\"15\" r=\"5\"/>\n</g>\n<g fill=\"#68616a\" font-family=\"system-ui,sans-serif\" font-size=\"11\">\n<text x=\"6\" y=\"45\">Site observation</text>\n<text x=\"208\" y=\"45\" text-anchor=\"middle\">Local context</text>\n<text x=\"414\" y=\"45\" text-anchor=\"end\">Design takeaway</text>\n</g>\n</svg>\n</figure>\n</div>\n</main>\n<footer>\n<div class=\"wrap footer-inner\">\n<span>Pine · Grounded in place, shared with care.</span>\n<span>For curious people and field research teams.</span>\n</div>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-login-00","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Alder, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Welcome to Alder\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Alder\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Alder</title>\n<style>\n*{box-sizing:border-box}\n:root{color-scheme:light;--ink:#25372e;--muted:#657068;--green:#214b38;--line:#dedfd6;--paper:#faf9f5}\nbody{margin:0;background:#f2f0e9;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\n.page{min-height:100svh;display:flex;flex-direction:column}\nheader{width:min(1040px,100%);margin:0 auto;padding:32px 32px 0}\n.brand{display:inline-flex;align-items:center;gap:11px;font-size:23px;font-weight:650;letter-spacing:-.7px}\n.brand svg{width:34px;height:34px;flex:none}\nmain{flex:1;display:grid;place-items:center;padding:48px 32px}\n.sign-in{width:100%;max-width:860px;display:grid;grid-template-columns:1.55fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 32px #25372e06}\n.form-panel{padding:44px 48px 46px}\nh1{margin:0 0 12px;font-size:32px;line-height:1.2;font-weight:650;letter-spacing:-1px}\n.intro{margin:0;color:var(--muted);font-size:15px;line-height:1.65;max-width:35ch}\nform{margin-top:30px}\n.field{margin-bottom:20px}\nlabel{display:block;margin-bottom:8px;font-size:14px;font-weight:550}\ninput[type=email],input[type=password]{width:100%;min-width:0;height:48px;border:1px solid #bcc4ba;border-radius:6px;background:#fff;padding:11px 13px;color:var(--ink);font:inherit;font-size:16px}\ninput::placeholder{color:#899087;opacity:1}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #92b49e;outline-offset:3px}\n.options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 24px;font-size:13px}\n.remember{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400;cursor:pointer}\ninput[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--green);flex:none}\na{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}\n.options a{font-weight:550}\nbutton{width:100%;min-height:48px;border:1px solid var(--green);border-radius:6px;background:var(--green);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}\nbutton:hover{background:#183c2b}\n.summary{border-left:1px solid var(--line);background:#eeeee5;padding:38px 32px;display:flex;flex-direction:column;justify-content:center}\n.summary-icon{width:38px;height:38px;margin-bottom:24px;color:var(--green)}\n.eyebrow{margin:0 0 13px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:1.1px;text-transform:uppercase}\nh2{margin:0 0 16px;font-size:18px;font-weight:550;line-height:1.5;letter-spacing:-.2px;overflow-wrap:break-word}\n.summary p:last-child{margin:0;color:var(--muted);font-size:14px;line-height:1.7}\nfooter{padding:0 24px 26px;text-align:center;color:var(--muted);font-size:12px}\n@media(max-width:650px){\nheader{padding:24px 24px 0}\n.brand{font-size:21px}\n.brand svg{width:30px;height:30px}\nmain{padding:26px 20px 24px}\n.sign-in{max-width:440px;grid-template-columns:1fr;border-radius:12px}\n.form-panel{padding:28px 24px}\nh1{font-size:28px;letter-spacing:-.8px}\n.intro{font-size:14px;line-height:1.5}\nform{margin-top:24px}\n.field{margin-bottom:18px}\n.options{gap:10px;margin-bottom:22px}\n.summary{border-left:0;border-top:1px solid var(--line);padding:20px 24px}\n.summary-icon{display:none}\n.eyebrow{margin-bottom:8px;font-size:10px}\nh2{font-size:15px;line-height:1.45;margin-bottom:10px}\n.summary p:last-child{font-size:13px;line-height:1.5}\nfooter{padding-bottom:20px;font-size:11px}\n}\n@media(max-width:350px){\n.form-panel,.summary{padding-left:18px;padding-right:18px}\n.options{align-items:flex-start;flex-direction:column}\nh1{font-size:25px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\" aria-label=\"Alder\">\n<svg viewBox=\"0 0 36 36\" aria-hidden=\"true\" fill=\"none\">\n<rect width=\"36\" height=\"36\" rx=\"9\" fill=\"#214b38\"/>\n<path d=\"M10 26 18 10l8 16M13 21h10\" stroke=\"#faf9f5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<span>Alder</span>\n</div>\n</header>\n<main>\n<section class=\"sign-in\" aria-labelledby=\"welcome\">\n<div class=\"form-panel\">\n<h1 id=\"welcome\">Welcome to Alder</h1>\n<p class=\"intro\">Sign in to pick up today’s repairs and keep your team on the same page.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourshop.com\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\">\n<input id=\"remember\" name=\"remember\" type=\"checkbox\">\n<span>Remember me</span>\n</label>\n<a href=\"#\">Forgot password?</a>\n</div>\n<button type=\"button\">Sign in</button>\n</form>\n</div>\n<aside class=\"summary\" aria-labelledby=\"workspace-summary\">\n<svg class=\"summary-icon\" viewBox=\"0 0 40 40\" fill=\"none\" aria-hidden=\"true\">\n<circle cx=\"20\" cy=\"20\" r=\"16\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<circle cx=\"20\" cy=\"20\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<path d=\"M20 4v13m0 6v13M4 20h13m6 0h13M9 9l9 9m4 4 9 9M9 31l9-9m4-4 9-9\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n</svg>\n<p class=\"eyebrow\">For independent bike shops</p>\n<h2 id=\"workspace-summary\">A workspace for the workshop, the shop floor, and everyone keeping your customers riding</h2>\n<p>Repair notes, parts updates, and customer handovers. Together, without the paper chase.</p>\n</aside>\n</section>\n</main>\n<footer>Alder · A little more order for your working day.</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-login-01","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Birch, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Welcome to Birch\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Birch\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Birch</title>\n<style>\n:root{color-scheme:light;--ink:#26323e;--muted:#637080;--accent:#4d6386;--line:#dce2e8;--surface:#f0f3f6}\n*{box-sizing:border-box}\nbody{margin:0;background:#f6f8fa;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\n.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:980px;margin:auto;padding:48px 28px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}\n.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-.7px}\n.brand svg{width:32px;height:32px;color:var(--accent)}\n.header-note{color:var(--muted);font-size:12px}\nmain{display:grid;grid-template-columns:.95fr 1.05fr;grid-template-areas:\"intro signin\";background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 8px 28px #26323e06}\n.intro{grid-area:intro;background:var(--surface);padding:36px;border-right:1px solid var(--line)}\n.eyebrow{margin:0 0 12px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh2{max-width:280px;margin:0 0 14px;font-size:29px;line-height:1.2;font-weight:650;letter-spacing:-.8px}\n.overview{margin:0;color:var(--muted);font-size:14px;line-height:1.65;max-width:310px}\n.features{list-style:none;margin:28px 0;padding:0;display:grid;gap:17px}\n.features li{display:grid;grid-template-columns:26px 1fr;gap:10px}\n.number{padding-top:2px;font-size:11px;color:#788697;font-variant-numeric:tabular-nums}\n.features strong{display:block;font-size:13px;font-weight:650;margin-bottom:2px}\n.features p{margin:0;color:var(--muted);font-size:12px;line-height:1.6;max-width:250px}\n.update{border-top:1px solid #d9e0e7;padding-top:18px}\n.update-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:650;color:var(--accent);margin:0 0 5px}\n.dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}\n.update p:last-child{margin:0;color:var(--muted);font-size:12px;line-height:1.6;max-width:285px}\n.signin{grid-area:signin;display:flex;flex-direction:column;justify-content:center;padding:40px}\nh1{margin:0 0 10px;font-size:28px;line-height:1.2;letter-spacing:-.8px;font-weight:650}\n.lead{margin:0 0 28px;color:var(--muted);font-size:14px;line-height:1.6}\n.field{margin-bottom:18px}\n.field label{display:block;margin-bottom:7px;font-size:13px;font-weight:600}\ninput[type=email],input[type=password]{display:block;width:100%;min-width:0;height:46px;border:1px solid #cbd3dd;border-radius:6px;padding:11px 12px;font:inherit;color:var(--ink);background:#fff;box-shadow:0 1px 2px #26323e04}\ninput::placeholder{color:#8a94a1;opacity:1}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #bac8dd;outline-offset:3px}\n.options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0 25px;font-size:12px}\n.remember{display:flex;align-items:center;gap:8px;cursor:pointer}\ninput[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent);flex-shrink:0}\na{color:var(--accent);text-decoration:none;font-weight:600}\na:hover{text-decoration:underline}\n.action{display:flex;align-items:center;gap:16px}\nbutton{border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;min-height:46px;padding:11px 27px;font:600 14px system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#405575}\n.action p{margin:0;color:var(--muted);font-size:11px;line-height:1.6;max-width:175px}\n.access{border-top:1px solid var(--line);margin:27px 0 0;padding-top:17px;color:var(--muted);font-size:12px;line-height:1.6}\n.access strong{color:var(--ink);font-weight:600}\n#password-help{display:none;margin-top:16px;padding:13px 15px;border-left:3px solid var(--accent);background:var(--surface);font-size:12px;line-height:1.6}\n#password-help:target{display:block}\n#password-help h3{font-size:13px;margin:0 0 4px}\n#password-help p{margin:0;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:#778391;font-size:11px}\n@media(max-width:650px){\n.page{justify-content:flex-start;padding:23px 18px 20px}\nheader{margin-bottom:19px}\n.header-note{font-size:11px;max-width:110px;text-align:right}\nmain{grid-template-columns:1fr;grid-template-areas:\"signin\" \"intro\";border-radius:11px}\n.signin{padding:27px 24px}\nh1{font-size:26px}\n.lead{margin-bottom:23px}\n.options{margin-bottom:22px}\n.action{gap:13px}\nbutton{padding-left:25px;padding-right:25px}\n.access{margin-top:23px;padding-top:15px}\n.intro{padding:25px 24px;border-right:0;border-top:1px solid var(--line)}\nh2{font-size:23px;max-width:none;margin-bottom:10px}\n.eyebrow{margin-bottom:9px}\n.overview{font-size:13px;max-width:none}\n.features{margin:22px 0;gap:14px}\n.features p{max-width:none}\nfooter{font-size:10px;flex-wrap:wrap;gap:5px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n<rect width=\"32\" height=\"32\" rx=\"8\" fill=\"currentColor\"/>\n<path d=\"M12 24V8M20 24V8M12 12H16M16 19H20M12 22H15\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n</svg>\n<span>Birch</span>\n</div>\n<span class=\"header-note\">Your bike shop workspace</span>\n</header>\n<main>\n<aside class=\"intro\" aria-labelledby=\"intro-title\">\n<p class=\"eyebrow\">Built for independent shops</p>\n<h2 id=\"intro-title\">Keep the shop moving.</h2>\n<p class=\"overview\">A shared workbench for your team, from the first repair drop-off to the last collection.</p>\n<ul class=\"features\">\n<li><span class=\"number\" aria-hidden=\"true\">01</span><div><strong>Clear repair handovers</strong><p>Keep job notes ready for whoever picks up the next shift.</p></div></li>\n<li><span class=\"number\" aria-hidden=\"true\">02</span><div><strong>Parts in the picture</strong><p>Keep stock updates alongside the work that needs them.</p></div></li>\n<li><span class=\"number\" aria-hidden=\"true\">03</span><div><strong>One team, one place</strong><p>Give the workshop and front counter the same view of the day.</p></div></li>\n</ul>\n<div class=\"update\">\n<p class=\"update-label\"><span class=\"dot\" aria-hidden=\"true\"></span>Recent update</p>\n<p>Clearer repair history on job cards makes the next handover easier.</p>\n</div>\n</aside>\n<section class=\"signin\" aria-labelledby=\"signin-title\">\n<h1 id=\"signin-title\">Welcome to Birch</h1>\n<p class=\"lead\">Sign in to your shop’s workspace.<br>Pick up where your team left off.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourshop.com\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\"><input id=\"remember\" name=\"remember\" type=\"checkbox\">Remember me</label>\n<a href=\"#password-help\">Forgot password?</a>\n</div>\n<div class=\"action\">\n<button type=\"button\">Sign in</button>\n<p>Use the email your shop invited you with.</p>\n</div>\n</form>\n<p class=\"access\"><strong>New to the team?</strong><br>Ask your shop owner for a workspace invitation.</p>\n<aside id=\"password-help\" aria-labelledby=\"help-title\">\n<h3 id=\"help-title\">Password help</h3>\n<p>Contact your shop owner for help resetting your password and restoring workspace access.</p>\n</aside>\n</section>\n</main>\n<footer><span>Less chasing updates. More time on the tools.</span><span>Birch · Team workspace</span></footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-login-02","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Cedar, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Welcome to Cedar\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Cedar\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Cedar</title>\n<style>\n:root{--paper:#f8f5ef;--ink:#352e29;--muted:#756c64;--line:#ddd5ca;--accent:#99543e}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-underline-offset:4px}\nbutton,input{font:inherit}\n.site-header{max-width:1100px;margin:auto;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px}\n.brand svg{width:25px;height:32px;color:var(--accent)}\n.wordmark{font-family:Georgia,serif;font-size:30px;letter-spacing:-1px}\n.brand-note{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:18px;margin-left:10px}\n.header-note{font-size:12px;color:var(--muted)}\nmain{max-width:1000px;margin:65px auto 84px;padding:0 40px;display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start}\n.introduction{padding:38px 0 0}\n.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted);margin:0 0 17px}\nh1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1.2px}\nh1{font-size:40px;line-height:1.12;margin:0 0 13px}\nh2{font-size:34px;line-height:1.2;margin:0 0 17px}\n.intro-copy{max-width:310px;font-size:15px;line-height:1.65;color:var(--muted);margin:0}\n.shop-preview{margin-top:39px;border-top:1px solid var(--line);padding-top:20px;max-width:310px}\n.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}\n.preview-heading h3{font-size:12px;font-weight:600;margin:0}\n.status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}\n.status svg{width:13px;height:13px}\n.summary{font-size:14px;margin:0 0 15px}\n.summary strong{font-family:Georgia,serif;font-size:29px;font-weight:400;margin-right:5px}\ndl{margin:0;display:flex;gap:30px}\ndl div{display:flex;flex-direction:column-reverse;gap:5px}\ndt{font-size:11px;color:var(--muted)}\ndd{font-size:16px;margin:0}\n.next-step{border-top:1px solid var(--line);padding-top:15px;margin:18px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}\n.next-step strong{color:var(--ink);font-weight:600}\n.sign-in{border-left:1px solid var(--line);padding-left:56px}\n.form-intro{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 30px;max-width:350px}\n.field{margin-bottom:21px}\n.field label{display:block;font-size:13px;font-weight:600;margin-bottom:9px}\n.field input{display:block;width:100%;height:49px;padding:12px 14px;background:#fffdf9;border:1px solid #c9bfb3;border-radius:3px;color:var(--ink);outline:none}\n.field input::placeholder{color:#91867c;font-size:13px}\n.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #99543e1a}\n.form-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:3px 0 25px;font-size:12px}\n.remember{display:flex;align-items:center;gap:9px;cursor:pointer}\n.remember input{margin:0;width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}\n.form-options a{white-space:nowrap}\n.submit{width:100%;min-height:49px;background:var(--accent);color:#fffaf4;border:1px solid var(--accent);border-radius:3px;font-size:14px;font-weight:600;cursor:pointer}\n.submit:hover{background:#834632}\nbutton:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\n.access-note{margin:23px 0 0;padding-top:19px;border-top:1px solid var(--line);font-size:12px;line-height:1.65;color:var(--muted)}\n.access-note strong{font-weight:600;color:var(--ink)}\nfooter{max-width:1020px;margin:auto;padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}\n@media(max-width:700px){\n.site-header{padding:22px 24px}\n.brand-note{margin-left:4px;padding-left:14px}\n.header-note{display:none}\nmain{display:flex;flex-direction:column;gap:30px;margin:18px auto 30px;padding:0 24px;max-width:440px}\n.sign-in{order:0;width:100%;border:0;padding:0}\nh1{font-size:35px}\n.form-intro{margin-bottom:24px}\n.field{margin-bottom:18px}\n.form-options{margin-bottom:22px}\n.access-note{margin-top:20px;padding-top:16px}\n.introduction{order:1;width:100%;padding:23px 0 0;border-top:1px solid var(--line)}\n.eyebrow{margin-bottom:10px}\nh2{font-size:25px;letter-spacing:-.6px;margin-bottom:10px}\n.intro-copy{font-size:13px;line-height:1.6;max-width:none}\n.shop-preview{margin-top:20px;max-width:none;padding-top:16px}\n.preview-heading{margin-bottom:10px}\n.summary{margin-bottom:12px}\ndl{gap:38px}\n.next-step{margin-top:15px;padding-top:12px}\nfooter{margin:0 24px;padding:18px 0;font-size:10px;gap:12px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"brand\" aria-label=\"Cedar team workspace\">\n<svg viewBox=\"0 0 25 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12.5 2v28M12.5 3 6 11h13L12.5 3Zm0 7L3 21h19L12.5 10Zm0 9L1 27h23L12.5 19Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/></svg>\n<span class=\"wordmark\">Cedar</span>\n<span class=\"brand-note\">Team workspace</span>\n</div>\n<span class=\"header-note\">For the people behind the bikes.</span>\n</header>\n\n<main>\n<aside class=\"introduction\" aria-labelledby=\"intro-title\">\n<p class=\"eyebrow\">Built for independent bike shops</p>\n<h2 id=\"intro-title\">Keep the shop moving.</h2>\n<p class=\"intro-copy\">One shared place for repair tickets, daily plans, and the small details that keep your crew in sync.</p>\n\n<section class=\"shop-preview\" aria-labelledby=\"preview-title\">\n<div class=\"preview-heading\">\n<h3 id=\"preview-title\">A day in the workshop</h3>\n<span class=\"status\"><svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\" stroke=\"currentColor\"/><path d=\"M5 6h6M5 9h4\" stroke=\"currentColor\"/></svg>Sample workspace</span>\n</div>\n<p class=\"summary\"><strong>8</strong> repairs on the board</p>\n<dl>\n<div><dt>In progress</dt><dd>5</dd></div>\n<div><dt>Ready for pickup</dt><dd>3</dd></div>\n</dl>\n<p class=\"next-step\"><strong>After signing in →</strong> Review your shop’s repair queue and see what needs attention.</p>\n</section>\n</aside>\n\n<section class=\"sign-in\" aria-labelledby=\"sign-in-title\">\n<p class=\"eyebrow\">Your workday starts here</p>\n<h1 id=\"sign-in-title\">Welcome to Cedar</h1>\n<p class=\"form-intro\">Sign in to your shop’s workspace.<br>Your crew and today’s work, in one place.</p>\n\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourbikeshop.com\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" required>\n</div>\n<div class=\"form-options\">\n<label class=\"remember\" for=\"remember\"><input id=\"remember\" name=\"remember\" type=\"checkbox\">Remember me</label>\n<a href=\"/forgot-password\">Forgot password?</a>\n</div>\n<button class=\"submit\" type=\"button\">Sign in</button>\n</form>\n\n<p class=\"access-note\"><strong>New to the crew?</strong><br>Ask your shop’s workspace owner for an invitation.</p>\n</section>\n</main>\n\n<footer>\n<span>Cedar · A little order for a busy shop.</span>\n<span>Your shop. Your team.</span>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-login-03","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Dune, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Welcome to Dune\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Dune\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Dune</title>\n<style>\n:root{color-scheme:light;--plum:#4f2d46;--ink:#2f2c2e;--muted:#686167;--line:#ded8dc;--paper:#faf8f6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.55}\n.page{width:min(860px,calc(100% - 48px));margin:64px auto 32px}\n.brand{display:flex;align-items:center;gap:18px;margin-bottom:32px}\n.wordmark{color:var(--plum);font-size:26px;font-weight:750;letter-spacing:-1px;line-height:1}\n.brand p{margin:0;padding-left:18px;border-left:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.5}\nmain{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}\n.sign-in{padding:38px 40px 40px}\nh1{margin:0 0 12px;font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:38px;line-height:1.15;letter-spacing:-1.1px}\n.intro{margin:0 0 28px;color:var(--muted);max-width:350px}\n.field{margin-bottom:19px}\n.field label{display:block;margin-bottom:7px;font-weight:600;font-size:13px}\ninput[type=email],input[type=password]{display:block;width:100%;min-width:0;height:46px;padding:10px 12px;border:1px solid #bcb3ba;border-radius:4px;background:#fff;color:var(--ink);font:inherit}\ninput::placeholder{color:#847b82}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #bda3b7;outline-offset:3px}\n.options{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 24px;font-size:12px}\n.remember{display:flex;align-items:center;gap:8px;cursor:pointer}\ninput[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--plum);flex-shrink:0}\na{color:var(--plum);text-decoration:underline;text-underline-offset:3px}\n.options a{white-space:nowrap}\nbutton{width:100%;min-height:46px;border:1px solid var(--plum);border-radius:4px;background:var(--plum);color:white;font:600 14px system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\nbutton:hover{background:#402339}\naside{padding:36px 30px;border-left:1px solid var(--line);background:#f3efef;display:flex;flex-direction:column;justify-content:center}\n.eyebrow{margin:0 0 14px;color:var(--plum);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}\nh2{margin:0 0 12px;font-family:Georgia,\"Times New Roman\",serif;font-size:25px;font-weight:400;line-height:1.25;letter-spacing:-.4px}\n.aside-copy{margin:0;color:var(--muted);font-size:13px}\n.workflow{margin:26px 0 0;padding-top:22px;border-top:1px solid #d9d0d6}\n.workflow svg{display:block;width:100%;height:auto;color:var(--plum)}\n.workflow ol{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:6px 0 0;text-align:center;font-size:11px;font-weight:600;color:var(--plum)}\nfooter{margin-top:20px;color:var(--muted);font-size:12px}\nfooter p{margin:0}\n@media(max-width:650px){\n.page{width:calc(100% - 32px);margin:26px auto 24px}\n.brand{gap:14px;margin-bottom:24px}\n.brand p{padding-left:14px;font-size:11px}\nmain{grid-template-columns:1fr}\n.sign-in{padding:26px 24px 28px}\nh1{font-size:32px}\n.intro{margin-bottom:23px;font-size:13px}\n.field{margin-bottom:17px}\n.options{margin-bottom:22px}\naside{border-left:0;border-top:1px solid var(--line);padding:22px 24px}\n.eyebrow{margin-bottom:8px;font-size:9px}\nh2{font-size:22px;margin-bottom:8px}\n.aside-copy{font-size:12px}\n.workflow{margin-top:16px;padding-top:12px}\n.workflow svg{height:38px}\n.workflow ol{margin-top:4px}\nfooter{margin-top:16px;padding:0 4px;font-size:11px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header class=\"brand\">\n<div class=\"wordmark\">Dune<span aria-hidden=\"true\">.</span></div>\n<p>A team workspace<br>for independent bike shops</p>\n</header>\n<main>\n<section class=\"sign-in\" aria-labelledby=\"welcome\">\n<h1 id=\"welcome\">Welcome to Dune</h1>\n<p class=\"intro\">Sign in to check job cards, parts and today’s workshop plan.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourshop.com\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\"><input id=\"remember\" name=\"remember\" type=\"checkbox\">Remember me</label>\n<a href=\"#password-help\">Forgot password?</a>\n</div>\n<button type=\"button\">Sign in</button>\n</form>\n</section>\n<aside aria-labelledby=\"workshop-heading\">\n<p class=\"eyebrow\">Counter meets workshop</p>\n<h2 id=\"workshop-heading\">From drop-off<br>to collection.</h2>\n<p class=\"aside-copy\">Keep repair notes, parts and handovers together, so everyone knows what’s next for each bike.</p>\n<div class=\"workflow\" aria-label=\"The service journey\">\n<svg viewBox=\"0 0 270 48\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M61 24H119M151 24H209\" stroke=\"#c3b5bf\" stroke-width=\"1.5\"/>\n<circle cx=\"45\" cy=\"24\" r=\"16\" fill=\"#faf8f6\" stroke=\"#c3b5bf\"/>\n<circle cx=\"135\" cy=\"24\" r=\"16\" fill=\"#faf8f6\" stroke=\"#c3b5bf\"/>\n<circle cx=\"225\" cy=\"24\" r=\"16\" fill=\"#faf8f6\" stroke=\"#c3b5bf\"/>\n<g stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n<path d=\"M38 18h9l6 6-9 9-6-6z\"/>\n<circle cx=\"42\" cy=\"22\" r=\"1\"/>\n<path d=\"M131 22a6 6 0 0 1 8-7l-4 4 3 3 4-4a6 6 0 0 1-7 8l-6 6-4-4z\"/>\n<path d=\"m218 24 5 5 9-10\"/>\n</g>\n</svg>\n<ol>\n<li>Book in</li>\n<li>Repair</li>\n<li>Collect</li>\n</ol>\n</div>\n</aside>\n</main>\n<footer id=\"password-help\">\n<p>Need access or a password reset? Your shop’s workspace owner can help.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-login-04","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Elm, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: calm and spacious; use forest green as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Welcome to Elm\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Elm\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Elm</title>\n<style>\n:root{color-scheme:light;--ink:#24372e;--muted:#637168;--green:#28563e;--line:#dce2d9;--paper:#f7f8f3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\n.shell{width:min(960px,calc(100% - 64px));margin:0 auto}\nheader{display:flex;align-items:center;justify-content:space-between;padding:38px 0}\n.brand{display:flex;align-items:center;gap:11px;font-size:27px;font-weight:650;letter-spacing:-1px}\n.mark{width:37px;height:37px;background:var(--green);border-radius:10px;display:grid;place-items:center}\n.mark svg{width:25px;height:25px}\n.workspace{font-size:13px;color:var(--muted)}\nmain{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:68px 0 64px;align-items:start}\n.intro{padding-top:38px}\n.eyebrow{margin:0 0 18px;font-size:11px;font-weight:650;letter-spacing:1.5px;color:var(--green)}\n.intro h2{font-size:29px;line-height:1.25;font-weight:550;letter-spacing:-.7px;max-width:310px;margin:0 0 19px}\n.intro p:last-child{max-width:305px;margin:0;color:var(--muted);font-size:16px;line-height:1.65}\n.signin{border-left:1px solid var(--line);padding-left:48px;margin-left:-48px}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0 0 10px;font-weight:650}\n.subtitle{color:var(--muted);margin:0 0 29px;max-width:310px}\n.field{margin-bottom:19px}\n.field label{display:block;font-size:14px;font-weight:550;margin-bottom:8px}\ninput[type=email],input[type=password]{width:100%;min-width:0;height:52px;border:1px solid #bdc8bf;border-radius:6px;padding:12px 14px;background:#fff;color:var(--ink);font:inherit}\ninput::placeholder{color:#7e887f;opacity:1}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #a7c6b1;outline-offset:3px}\n.options{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:1px 0 18px}\n.remember{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;font-size:14px}\ninput[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--green);flex-shrink:0}\na{color:var(--green);text-underline-offset:4px}\n.forgot{font-size:14px;display:flex;align-items:center;min-height:44px;text-decoration:none}\n.forgot:hover{text-decoration:underline}\nbutton{width:100%;min-height:52px;border:1px solid var(--green);border-radius:6px;background:var(--green);color:white;font:inherit;font-weight:600;cursor:pointer}\nbutton:hover{background:#204832}\n.shared-note{font-size:12px;color:var(--muted);margin:15px 0 0;line-height:1.6;max-width:345px}\nfooter{border-top:1px solid var(--line);padding:24px 0 34px;display:grid;grid-template-columns:1fr 1fr;gap:80px;font-size:13px}\n.support-label{font-weight:550;max-width:370px;margin:0;line-height:1.6}\n.support-detail{color:var(--muted);margin:0;max-width:340px;line-height:1.6}\n@media(min-width:1000px){.shell{margin-top:24px}}\n@media(max-width:700px){\n.shell{width:calc(100% - 40px)}\nheader{padding:22px 0 18px}\n.brand{font-size:25px}\n.mark{width:34px;height:34px}\n.workspace{font-size:12px}\nmain{display:block;padding:6px 0 26px}\n.intro{padding:0 0 25px}\n.eyebrow{display:none}\n.intro h2{font-size:19px;letter-spacing:-.3px;max-width:300px;margin:0 0 7px}\n.intro p:last-child{font-size:14px;line-height:1.5;max-width:330px}\n.signin{margin:0;padding:23px 0 0;border-left:0;border-top:1px solid var(--line)}\nh1{font-size:29px}\n.subtitle{font-size:14px;margin-bottom:22px;max-width:260px}\n.field{margin-bottom:16px}\n.options{margin-bottom:13px}\n.shared-note{margin-top:12px}\nfooter{display:block;padding:20px 0 24px}\n.support-label{max-width:325px;font-size:12px}\n.support-detail{margin-top:7px;font-size:12px;max-width:320px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header>\n<div class=\"brand\" aria-label=\"Elm\">\n<span class=\"mark\" aria-hidden=\"true\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\"><path d=\"M21.5 5.5C13 4.5 6 8 6 15c0 4 3 7 7 7 7 0 9.5-8 8.5-16.5Z\" stroke=\"#f7f8f3\" stroke-width=\"1.6\"/><path d=\"m8 23 9-13M12 18l-.5-5M15 15l4-.5\" stroke=\"#f7f8f3\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n</span>\n<span>Elm</span>\n</div>\n<span class=\"workspace\">Co-op workspace</span>\n</header>\n\n<main>\n<section class=\"intro\" aria-labelledby=\"intro-title\">\n<p class=\"eyebrow\">ROOTED IN COMMUNITY</p>\n<h2 id=\"intro-title\">Good food grows from good teamwork.</h2>\n<p>One shared space for shifts, updates, and the daily work of your food co-op.</p>\n</section>\n\n<section class=\"signin\" aria-labelledby=\"signin-title\">\n<h1 id=\"signin-title\">Welcome to Elm</h1>\n<p class=\"subtitle\">Sign in to your co-op’s team workspace.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourcoop.org\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\">\n<input id=\"remember\" name=\"remember\" type=\"checkbox\" aria-describedby=\"shared-note\">\n<span>Remember me</span>\n</label>\n<a class=\"forgot\" href=\"#account-support\">Forgot password?</a>\n</div>\n<button type=\"button\">Sign in</button>\n<p class=\"shared-note\" id=\"shared-note\">Using a shared co-op computer? Leave “Remember me” unchecked.</p>\n</form>\n</section>\n</main>\n\n<footer id=\"account-support\" aria-label=\"Account help\">\n<p class=\"support-label\">Account access for member-owners, co-op staff, and volunteer shift coordinators</p>\n<p class=\"support-detail\">Need an account or a password reset? Your co-op’s workspace coordinator can help.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-login-05","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Fjord, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: compact but readable; use slate blue as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Welcome to Fjord\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Fjord\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Fjord</title>\n<style>\n:root{color-scheme:light;--paper:#f6f4ef;--ink:#26323e;--muted:#606a73;--accent:#344e6b;--line:#d8d9d4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\n.page{max-width:1060px;min-height:100svh;margin:auto;padding:34px 40px 24px;display:flex;flex-direction:column}\nheader{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line)}\n.brand{font-size:26px;font-weight:750;letter-spacing:-1px;color:var(--accent)}\n.workspace{font-size:12px;color:var(--muted);letter-spacing:.04em}\nmain{width:100%;max-width:900px;margin:80px auto;display:grid;grid-template-columns:.9fr 1.1fr;grid-template-areas:\"intro signin\" \"update signin\";gap:44px 56px}\n.intro{grid-area:intro;padding-top:5px}\n.eyebrow{margin:0 0 17px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--accent)}\n.intro h2{font-size:34px;line-height:1.18;letter-spacing:-1.1px;margin:0 0 18px;font-weight:650}\n.intro p:last-child{margin:0;max-width:310px;color:var(--muted);line-height:1.7}\n.signin{grid-area:signin;border-left:1px solid var(--line);padding-left:56px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-.8px;margin:0 0 10px;font-weight:650}\n.lead{margin:0;color:var(--muted);font-size:14px}\nform{margin-top:28px}\n.field{margin-bottom:20px}\nlabel{font-size:13px;font-weight:600}\n.field>label{display:block;margin-bottom:8px}\ninput[type=email],input[type=password]{display:block;width:100%;min-width:0;height:46px;padding:11px 13px;border:1px solid #acb3b8;border-radius:5px;background:#fffefa;color:var(--ink);font:inherit;font-size:14px}\ninput::placeholder{color:#7b8288;opacity:1}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #849bb3;outline-offset:3px}\n.password-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}\na{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}\n.password-label a{font-size:12px;white-space:nowrap}\n.remember{display:flex;align-items:center;gap:9px;width:fit-content;cursor:pointer}\n.remember input{width:17px;height:17px;margin:0;accent-color:var(--accent);flex:none}\n.remember span{font-size:13px;font-weight:400}\n.action{display:flex;align-items:center;gap:18px;margin-top:25px}\nbutton{flex:0 0 138px;min-height:46px;border:1px solid var(--accent);border-radius:5px;padding:11px 20px;background:var(--accent);color:white;font:inherit;font-size:14px;font-weight:650;cursor:pointer}\nbutton:hover{background:#263e58}\n.hint{font-size:11px;line-height:1.5;color:var(--muted);margin:0;max-width:180px}\n.update{grid-area:update;align-self:end;border-top:1px solid var(--line);padding-top:17px}\n.update-head{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:11px}\n.update-head strong{color:var(--accent);font-weight:650;letter-spacing:.06em;text-transform:uppercase}\n.update p{font-size:13px;color:var(--muted);margin:9px 0 0;max-width:300px;line-height:1.6}\nfooter{margin-top:auto;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}\nfooter p{margin:0}\n#account-help:target{color:var(--accent)}\n@media(max-width:650px){\n.page{padding:20px 24px}\nheader{padding-bottom:17px}\n.brand{font-size:24px}\n.workspace{font-size:11px;letter-spacing:0}\nmain{margin:27px 0 24px;grid-template-columns:minmax(0,1fr);grid-template-areas:\"intro\" \"signin\" \"update\";gap:23px}\n.intro{padding-top:0}\n.eyebrow{margin-bottom:8px;font-size:10px}\n.intro h2{font-size:24px;letter-spacing:-.6px;margin-bottom:9px}\n.intro p:last-child{font-size:13px;line-height:1.6;max-width:none}\n.signin{border-left:0;border-top:1px solid var(--line);padding:23px 0 0}\nh1{font-size:27px}\n.lead{font-size:13px}\nform{margin-top:23px}\n.field{margin-bottom:17px}\n.action{margin-top:21px;gap:16px}\nbutton{flex-basis:132px}\n.hint{font-size:11px}\n.update{padding-top:14px}\n.update p{max-width:none;margin-top:6px;font-size:12px}\nfooter{display:block;padding-top:14px;font-size:11px}\nfooter p+p{margin-top:5px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\" aria-label=\"Fjord\">Fjord<span aria-hidden=\"true\">.</span></div>\n<div class=\"workspace\">Team workspace</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"intro-title\">\n<p class=\"eyebrow\">Built for community food co-ops</p>\n<h2 id=\"intro-title\">Your co-op, in sync.</h2>\n<p>A shared home for shifts, deliveries and the everyday work of keeping good food moving.</p>\n</section>\n<section class=\"signin\" aria-labelledby=\"signin-title\">\n<h1 id=\"signin-title\">Welcome to Fjord</h1>\n<p class=\"lead\">Sign in to your co-op workspace.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourcoop.org\" required>\n</div>\n<div class=\"field\">\n<div class=\"password-label\">\n<label for=\"password\">Password</label>\n<a href=\"#account-help\">Forgot password?</a>\n</div>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<label class=\"remember\" for=\"remember\">\n<input id=\"remember\" name=\"remember\" type=\"checkbox\">\n<span>Remember me</span>\n</label>\n<div class=\"action\">\n<button type=\"button\">Sign in</button>\n<p class=\"hint\">On a shared co-op computer? Leave “Remember me” off.</p>\n</div>\n</form>\n</section>\n<aside class=\"update\" aria-label=\"Recent workspace update\">\n<div class=\"update-head\"><strong>Recent update</strong><time datetime=\"2026-06-12\">12 Jun</time></div>\n<p>Shift handovers now have a home in team notes.</p>\n</aside>\n</main>\n<footer>\n<p>Good food starts with people working together.</p>\n<p id=\"account-help\">Trouble signing in? Your co-op coordinator can help.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-login-06","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Grove, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Welcome to Grove\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Grove\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in to Grove</title>\n<style>\n:root{color-scheme:light;--bg:#f6f7f7;--ink:#283333;--muted:#647171;--line:#d9dfde;--accent:#a34e38;--surface:#edf1f0}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\nheader{max-width:1104px;margin:auto;padding:30px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:11px}\n.brand svg{width:33px;height:37px;color:var(--accent)}\n.wordmark{font-family:Georgia,serif;font-size:30px;font-weight:700;letter-spacing:-1px;line-height:1}\n.brand-note{margin:0;color:var(--muted);font-size:13px}\nmain{max-width:1104px;margin:0 auto;padding:72px 24px 60px;display:grid;grid-template-columns:minmax(0,430px) minmax(0,420px);justify-content:space-between;gap:60px}\n.eyebrow{margin:0 0 13px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:43px;font-weight:400;line-height:1.15;letter-spacing:-1.4px}\n.intro{max-width:370px;margin:17px 0 29px;color:var(--muted);font-size:16px;line-height:1.6}\n.field{margin-bottom:19px}\n.field label{display:block;margin-bottom:8px;font-size:14px;font-weight:600}\n.field input{display:block;width:100%;min-width:0;height:49px;border:1px solid #bdc8c5;border-radius:5px;background:#fff;padding:11px 13px;color:var(--ink);font:inherit}\ninput::placeholder{color:#818b89}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #a34e3840;outline-offset:3px}\n.field input:focus{border-color:var(--accent)}\n.options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:3px 0 25px;font-size:14px}\n.remember{display:flex;align-items:center;gap:9px;cursor:pointer}\n.remember input{margin:0;width:17px;height:17px;accent-color:var(--accent);flex-shrink:0}\na{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}\nbutton{width:100%;min-height:49px;padding:12px 18px;border:1px solid var(--accent);border-radius:5px;background:var(--accent);color:#fff;font:600 15px Arial,Helvetica,sans-serif;cursor:pointer}\nbutton:hover{background:#8e422f}\n.help{margin:22px 0 0;color:var(--muted);font-size:12px;line-height:1.7;max-width:355px}\n.noticeboard{align-self:start;margin-top:5px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:25px 27px}\n.notice-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-bottom:20px;border-bottom:1px solid #d5ddda}\n.notice-header h2{margin:0;font-size:13px;font-weight:600}\n.count{padding:3px 9px;border:1px solid #ced7d3;border-radius:20px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}\n.empty{padding:32px 0 27px}\n.empty svg{display:block;width:35px;height:35px;margin-bottom:19px;color:#7b8984}\n.empty h3{margin:0 0 12px;font-family:Georgia,'Times New Roman',serif;font-size:27px;font-weight:400;line-height:1.2;letter-spacing:-.4px}\n.empty p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;max-width:310px}\n.status{display:flex;align-items:center;gap:8px;margin:0;padding-top:16px;border-top:1px solid #d5ddda;color:var(--muted);font-size:12px}\n.status::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#87968f;flex-shrink:0}\n@media(max-width:700px){\nheader{margin:0 24px;padding:22px 0;gap:16px}\n.wordmark{font-size:27px}\n.brand svg{width:28px;height:32px}\n.brand-note{font-size:11px;max-width:115px;text-align:right;line-height:1.5}\nmain{padding:29px 24px 30px;grid-template-columns:minmax(0,1fr);gap:29px}\n.eyebrow{margin-bottom:10px;font-size:10px}\nh1{font-size:34px;letter-spacing:-1px}\n.intro{margin:13px 0 23px;font-size:14px;line-height:1.55}\n.field{margin-bottom:16px}\n.field input{height:47px}\n.options{margin:4px 0 22px;font-size:13px}\n.help{margin-top:17px}\n.noticeboard{margin-top:0;padding:19px 20px}\n.notice-header{padding-bottom:14px}\n.empty{padding:20px 0}\n.empty svg{width:28px;height:28px;margin-bottom:13px}\n.empty h3{font-size:24px;margin-bottom:9px}\n.empty p{font-size:13px;line-height:1.6}\n.status{padding-top:13px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"brand\" aria-label=\"Grove\">\n<svg viewBox=\"0 0 36 40\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M18 36V17M18 25C8 25 4 19 4 11c8 0 14 4 14 14ZM18 19C18 9 23 4 32 4c0 9-5 15-14 15Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<span class=\"wordmark\">grove</span>\n</div>\n<p class=\"brand-note\">A workspace for your food co-op.</p>\n</header>\n<main>\n<section aria-labelledby=\"welcome\">\n<p class=\"eyebrow\">Good food. Shared work.</p>\n<h1 id=\"welcome\">Welcome to Grove</h1>\n<p class=\"intro\">Sign in to coordinate shifts, share updates, and keep your co-op growing.</p>\n<form aria-label=\"Sign in to Grove\">\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourcoop.org\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\"><input id=\"remember\" name=\"remember\" type=\"checkbox\">Remember me</label>\n<a href=\"#account-help\">Forgot password?</a>\n</div>\n<button type=\"button\">Sign in</button>\n</form>\n<p class=\"help\" id=\"account-help\">Need access or password help? Your co-op coordinator can help you get into your workspace.</p>\n</section>\n<aside class=\"noticeboard\" aria-labelledby=\"noticeboard-title\">\n<div class=\"notice-header\">\n<h2 id=\"noticeboard-title\">Co-op noticeboard</h2>\n<span class=\"count\">0 notices</span>\n</div>\n<div class=\"empty\">\n<svg viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\n<rect x=\"6\" y=\"5\" width=\"24\" height=\"27\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<path d=\"M12 13h12M12 19h12M12 25h7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>\n<h3>No notices yet.</h3>\n<p>This space is for shared announcements, from pickup changes to member meetings. Notices will appear here when your coordinator posts them.</p>\n</div>\n<p class=\"status\">Awaiting the first announcement</p>\n</aside>\n</main>\n</body>\n</html>"}]}
{"id":"sft-login-07","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Harbor, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: practical and understated; use deep plum as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Welcome to Harbor\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Harbor\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Harbor</title>\n<style>\n:root{color-scheme:light;--paper:#f8f6f3;--plum:#482c43;--muted:#756470;--line:rgba(72,44,67,.18)}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--plum);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;min-height:100svh;display:flex;flex-direction:column}\nheader,footer{width:min(1040px,calc(100% - 64px));margin-inline:auto}\nheader{padding:28px 0 22px;border-bottom:1px solid var(--line)}\n.brand{display:inline-flex;align-items:center;gap:11px}\n.brand-mark{width:30px;height:30px}\n.brand-name{font-size:23px;font-weight:650;letter-spacing:-.8px}\n.brand-note{margin-left:16px;padding-left:16px;border-left:1px solid var(--line);font-size:12px;color:var(--muted);letter-spacing:.02em}\nmain{width:min(920px,calc(100% - 64px));margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:56px 0}\n.introduction{max-width:345px}\n.eyebrow{margin:0 0 13px;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}\nh2{font-size:26px;line-height:1.3;font-weight:550;letter-spacing:-.6px;margin:0 0 16px;max-width:320px}\n.introduction>p:not(.eyebrow){font-size:15px;line-height:1.65;color:var(--muted);margin:0;max-width:330px}\nfigure{margin:30px 0 0}\n.flow{display:block;width:100%;max-width:300px;height:auto;color:var(--plum)}\nfigcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:11px;max-width:280px}\n.sign-in{padding-left:56px;border-left:1px solid var(--line)}\nh1{margin:0 0 9px;font-size:31px;line-height:1.2;letter-spacing:-1px;font-weight:600}\n.subtitle{margin:0 0 28px;color:var(--muted);font-size:14px;line-height:1.6;max-width:330px}\n.field{margin-bottom:19px}\n.field label{display:block;margin-bottom:8px;font-size:13px;font-weight:600}\n.field input{display:block;width:100%;height:48px;border:1px solid rgba(72,44,67,.3);border-radius:5px;background:transparent;padding:0 13px;color:var(--plum);font:inherit;font-size:16px}\n.field input::placeholder{color:#9a8c94;opacity:1}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--plum);outline-offset:3px}\n.options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 24px;font-size:13px}\n.remember{display:flex;align-items:center;gap:8px;cursor:pointer}\n.remember input{width:16px;height:16px;margin:0;accent-color:var(--plum);flex-shrink:0}\na{color:var(--plum);text-decoration-thickness:1px;text-underline-offset:3px}\n.options a{white-space:nowrap}\nbutton{width:100%;min-height:48px;border:1px solid var(--plum);border-radius:5px;background:var(--plum);color:var(--paper);font:inherit;font-size:14px;font-weight:600;cursor:pointer}\nbutton:hover{opacity:.92}\n.account-help{font-size:12px;line-height:1.65;color:var(--muted);margin:19px 0 0}\n.account-help strong{font-weight:550;color:var(--plum)}\nfooter{padding:18px 0 24px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}\n@media(max-width:680px){\nheader,footer{width:calc(100% - 40px)}\nheader{padding:20px 0 18px}\n.brand-name{font-size:21px}\n.brand-note{margin-left:12px;padding-left:12px;font-size:11px}\nmain{width:calc(100% - 40px);display:flex;flex-direction:column;gap:28px;align-items:stretch;padding:29px 0 27px;margin:0 auto}\n.sign-in{order:-1;padding:0;border:0}\nh1{font-size:29px}\n.subtitle{margin-bottom:23px}\n.field{margin-bottom:17px}\n.options{margin-bottom:21px}\n.introduction{max-width:none;border-top:1px solid var(--line);padding-top:23px;display:grid;grid-template-columns:minmax(0,1fr) 100px;column-gap:17px}\n.introduction .eyebrow{grid-column:1/-1;margin-bottom:10px}\nh2{font-size:18px;letter-spacing:-.3px;line-height:1.35;margin-bottom:9px}\n.introduction>p:not(.eyebrow){font-size:12px;line-height:1.6;grid-column:1}\nfigure{grid-column:2;grid-row:2/4;margin:3px 0 0;align-self:center}\n.flow{width:100px}\nfigcaption{font-size:10px;line-height:1.45;margin-top:7px}\nfooter{padding:15px 0 19px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:opacity .15s}}\n</style>\n</head>\n<body>\n<header>\n<div class=\"brand\">\n<svg class=\"brand-mark\" viewBox=\"0 0 30 30\" fill=\"none\" aria-hidden=\"true\">\n<rect x=\"1\" y=\"1\" width=\"28\" height=\"28\" rx=\"6\" stroke=\"currentColor\"/>\n<path d=\"M9 8v14M21 8v14M9 15h12\" stroke=\"currentColor\" stroke-width=\"2\"/>\n</svg>\n<span class=\"brand-name\">Harbor</span>\n<span class=\"brand-note\">Team workspace</span>\n</div>\n</header>\n\n<main>\n<aside class=\"introduction\" aria-labelledby=\"co-op-name\">\n<p class=\"eyebrow\">Your community, connected</p>\n<h2 id=\"co-op-name\">Common Ground Community Food Co-op</h2>\n<p>Coordinate member shifts, share grower updates, and keep the weekly order moving together.</p>\n<figure>\n<svg class=\"flow\" viewBox=\"0 0 300 82\" fill=\"none\" role=\"img\" aria-labelledby=\"flow-title\">\n<title id=\"flow-title\">Local growers, your co-op, and members connected through shared work</title>\n<g stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n<rect x=\"14\" y=\"4\" width=\"48\" height=\"44\" rx=\"5\"/>\n<path d=\"M38 36V20m0 7c-9 0-12-5-12-11 8 0 12 4 12 11Zm0-5c0-8 5-12 12-12 0 8-5 12-12 12Z\"/>\n<path d=\"M73 26h38m-5-4 5 4-5 4\" opacity=\".45\"/>\n<rect x=\"126\" y=\"4\" width=\"48\" height=\"44\" rx=\"5\"/>\n<path d=\"M136 21h28v17h-28Zm-1-6h30v6h-30Zm7 12h16m-16 5h16\"/>\n<path d=\"M185 26h38m-5-4 5 4-5 4\" opacity=\".45\"/>\n<rect x=\"238\" y=\"4\" width=\"48\" height=\"44\" rx=\"5\"/>\n<path d=\"M251 21h22l2 17h-26l2-17Zm6 0v-4a5 5 0 0 1 10 0v4\"/>\n</g>\n<g fill=\"currentColor\" font-family=\"system-ui, sans-serif\" font-size=\"11\" text-anchor=\"middle\">\n<text x=\"38\" y=\"69\">Growers</text>\n<text x=\"150\" y=\"69\">Co-op</text>\n<text x=\"262\" y=\"69\">Members</text>\n</g>\n</svg>\n<figcaption>One shared workspace, from local growers to member pickup.</figcaption>\n</figure>\n</aside>\n\n<section class=\"sign-in\" aria-labelledby=\"welcome\">\n<h1 id=\"welcome\">Welcome to Harbor</h1>\n<p class=\"subtitle\">Sign in to plan the week with your co-op team.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@example.org\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\">\n<input id=\"remember\" name=\"remember\" type=\"checkbox\">\n<span>Remember me</span>\n</label>\n<a href=\"#account-help\">Forgot password?</a>\n</div>\n<button type=\"button\">Sign in</button>\n</form>\n<p class=\"account-help\" id=\"account-help\"><strong>Need help with access or your password?</strong><br>Your co-op’s workspace coordinator can help.</p>\n</section>\n</main>\n\n<footer>Harbor · A shared place for the work behind good food.</footer>\n</body>\n</html>"}]}
{"id":"sft-login-08","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Isle, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: calm and spacious; use forest green as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Welcome to Isle\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Isle\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in to Isle</title>\n<style>\n:root{color-scheme:light;--paper:#f7f8f4;--ink:#25352e;--muted:#657169;--green:#294f3d;--line:#dce1d9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\nheader{max-width:1120px;margin:auto;padding:29px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:11px;font-size:27px;font-weight:600;letter-spacing:-1px}\n.brand svg{width:29px;height:29px;color:var(--green)}\n.header-note{margin:0;color:var(--muted);font-size:12px;letter-spacing:.08em}\nmain{max-width:1000px;min-height:calc(100svh - 169px);margin:auto;padding:70px 40px;display:grid;grid-template-columns:minmax(0,400px) minmax(0,320px);gap:100px;align-content:center;align-items:center}\nh1,h2,p{margin:0}\n.eyebrow{color:var(--green);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}\nh1{margin:10px 0 12px;font-family:Georgia,'Times New Roman',serif;font-size:42px;font-weight:400;line-height:1.15;letter-spacing:-1.2px}\n.intro{max-width:340px;color:var(--muted);font-size:15px}\nform{margin-top:29px}\n.field{margin-bottom:20px}\n.field label{display:block;margin-bottom:8px;font-size:14px;font-weight:600}\n.field input{display:block;width:100%;min-width:0;height:49px;padding:12px 14px;border:1px solid #bdc8be;border-radius:4px;background:#fff;color:var(--ink);font:inherit}\ninput::placeholder{color:#828b84;opacity:1}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #a4baa9;outline-offset:3px}\n.options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:3px 0 24px;font-size:13px}\n.remember{display:flex;align-items:center;gap:8px;cursor:pointer}\n.remember input{width:16px;height:16px;margin:0;accent-color:var(--green);flex-shrink:0}\na{color:var(--green);text-underline-offset:4px;text-decoration-thickness:1px}\nbutton{display:block;width:100%;min-height:49px;padding:12px 20px;border:1px solid var(--green);border-radius:4px;background:var(--green);color:#fff;font:inherit;font-weight:600;cursor:pointer}\nbutton:hover{background:#203f30}\n.form-note{margin-top:14px;color:var(--muted);font-size:12px}\naside{padding-left:31px;border-left:1px solid var(--line)}\naside h2{margin:12px 0 13px;font-family:Georgia,'Times New Roman',serif;font-size:28px;font-weight:400;line-height:1.25;letter-spacing:-.5px}\naside>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.65}\n.detail{margin-top:28px;padding-top:17px;border-top:1px solid var(--line)}\n.detail h3{margin:0 0 13px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}\ndl{margin:0}\ndt{font-size:13px;font-weight:600;line-height:1.6;overflow-wrap:anywhere}\ndd{margin:6px 0 0;color:var(--muted);font-size:12px}\n.help{margin-top:23px;padding-top:17px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}\n.help strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:600}\nfooter{max-width:1120px;margin:auto;padding:21px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:16px}\n@media(max-width:760px){\nheader{padding:20px 24px}\n.header-note{font-size:10px;letter-spacing:.06em;max-width:120px;text-align:right}\nmain{display:block;min-height:0;max-width:460px;padding:29px 24px 30px}\nh1{font-size:35px;margin-top:8px;margin-bottom:10px}\n.intro{font-size:14px}\nform{margin-top:24px}\n.field{margin-bottom:18px}\n.options{margin-bottom:20px}\naside{margin-top:32px;padding:23px 0 0;border-left:0;border-top:1px solid var(--line)}\naside h2{font-size:23px;margin:8px 0}\naside>p:not(.eyebrow){font-size:13px}\n.detail{margin-top:18px;padding-top:14px}\n.detail h3{margin-bottom:8px}\n.help{margin-top:16px;padding-top:13px}\nfooter{padding:17px 24px;flex-wrap:wrap;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 30 30\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M3 27V3H27V27H3Z M3 15H15V27 M15 3V9 M21 15H27\" stroke=\"currentColor\" stroke-width=\"1.6\"/>\n</svg>\n<span>Isle</span>\n</div>\n<p class=\"header-note\">A workspace for your practice</p>\n</header>\n<main>\n<section aria-labelledby=\"welcome\">\n<p class=\"eyebrow\">Your studio, connected</p>\n<h1 id=\"welcome\">Welcome to Isle</h1>\n<p class=\"intro\">Sign in to pick up where your practice left off.</p>\n<form aria-label=\"Sign in to your workspace\">\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@practice.com\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\"><input id=\"remember\" name=\"remember\" type=\"checkbox\">Remember me</label>\n<a href=\"#password-help\">Forgot password?</a>\n</div>\n<button type=\"button\">Sign in</button>\n<p class=\"form-note\">Use the email associated with your studio workspace.</p>\n</form>\n</section>\n<aside aria-labelledby=\"about-isle\">\n<p class=\"eyebrow\">Made for architecture teams</p>\n<h2 id=\"about-isle\">A little more room<br>for good work.</h2>\n<p>Bring your projects, people and everyday decisions into one considered place. Less searching, more shared understanding.</p>\n<section class=\"detail\" aria-labelledby=\"workspace-detail\">\n<h3 id=\"workspace-detail\">The workspace, at a glance</h3>\n<dl>\n<dt>Project coordination, drawing reviews and the conversations between your studio, consultants and site teams</dt>\n<dd>Shared context, from first sketch to final handover.</dd>\n</dl>\n</section>\n<p class=\"help\" id=\"password-help\"><strong>Account help</strong>Your studio administrator can help with workspace invitations and password resets.</p>\n</aside>\n</main>\n<footer>\n<span>Isle · Team workspace</span>\n<span>Designed around the life of a practice.</span>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-login-09","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Juniper, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: compact but readable; use slate blue as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Welcome to Juniper\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Juniper\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Juniper</title>\n<style>\n:root{color-scheme:light;--ink:#263343;--muted:#627080;--accent:#536789;--line:#dce2e8;--paper:#fff;--soft:#f1f4f7}\n*{box-sizing:border-box}\nbody{margin:0;background:#f7f8fa;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\n.page{width:min(880px,100%);margin:0 auto;padding:64px 24px 32px}\n.brand-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:650;letter-spacing:-.7px}\n.brand svg{color:var(--accent)}\n.brand-bar span{font-size:12px;color:var(--muted)}\n.workspace{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-areas:\"intro form\" \"details form\";background:var(--soft);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 28px #26334308}\n.intro{grid-area:intro;padding:32px 30px 22px}\n.eyebrow{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}\n.intro h2{font-size:24px;line-height:1.3;letter-spacing:-.6px;font-weight:600;margin:0 0 12px;max-width:260px}\n.intro p:last-child{margin:0;color:var(--muted);font-size:14px;line-height:1.6}\n.details{grid-area:details;padding:0 30px 30px}\n.details h3{font-size:12px;font-weight:650;margin:0 0 14px}\ndl{margin:0}\n.detail{display:grid;grid-template-columns:20px 1fr;gap:10px;margin:0 0 15px}\n.detail svg{width:18px;height:18px;margin-top:2px;color:var(--accent)}\ndt{font-size:13px;font-weight:600}\ndd{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.5}\n.update{margin-top:24px;padding-top:16px;border-top:1px solid #d6dee6}\n.update-label{display:flex;align-items:center;gap:7px;color:var(--accent);font-size:11px;font-weight:650}\n.dot{height:6px;width:6px;background:var(--accent);border-radius:50%;flex:none}\n.update p{margin:6px 0 0;font-size:12px;color:var(--muted)}\n.sign-in{grid-area:form;background:var(--paper);padding:36px 34px;border-left:1px solid var(--line)}\nh1{margin:0;font-size:27px;font-weight:650;line-height:1.25;letter-spacing:-.8px}\n.subtitle{color:var(--muted);margin:9px 0 27px;font-size:13px}\n.field{margin-bottom:18px}\n.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}\ninput[type=email],input[type=password]{width:100%;height:48px;border:1px solid #bdc7d2;border-radius:6px;padding:0 13px;background:#fff;color:var(--ink);font:inherit;min-width:0}\ninput::placeholder{color:#84909e}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #aabbd5;outline-offset:3px}\n.options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;font-size:12px}\n.remember{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;white-space:nowrap}\ninput[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--accent);flex:none}\na{color:var(--accent);text-underline-offset:3px}\n.forgot{display:flex;align-items:center;min-height:44px;white-space:nowrap;font-weight:550}\n.action{display:grid;grid-template-columns:1.1fr 1fr;gap:15px;align-items:center}\nbutton{height:48px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;font:inherit;font-weight:650;cursor:pointer}\nbutton:hover{background:#445978}\n.action p{font-size:11px;line-height:1.5;color:var(--muted);margin:0}\n.help{border-top:1px solid var(--line);margin:27px 0 0;padding-top:17px;color:var(--muted);font-size:12px;line-height:1.6}\n.help strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}\n.footer{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:#74808d;font-size:11px}\n@media(min-width:700px){.page{padding-top:max(64px,calc((100vh - 620px)/2))}}\n@media(max-width:699px){\n.page{padding:22px 18px 20px}\n.brand-bar{margin-bottom:17px}\n.brand{font-size:22px}\n.brand-bar span{font-size:11px}\n.workspace{grid-template-columns:1fr;grid-template-areas:\"intro\" \"form\" \"details\";border-radius:9px}\n.intro{padding:19px 22px}\n.eyebrow{font-size:10px;margin-bottom:7px}\n.intro h2{font-size:20px;max-width:none;margin-bottom:6px}\n.intro p:last-child{font-size:12px;line-height:1.5}\n.sign-in{padding:24px 22px;border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\nh1{font-size:25px}\n.subtitle{margin:7px 0 20px}\n.field{margin-bottom:15px}\n.options{margin-bottom:14px;gap:8px}\n.help{margin-top:20px;padding-top:13px;font-size:11px}\n.help strong{display:inline;margin-right:3px}\n.details{padding:18px 22px}\n.details h3{margin-bottom:11px}\ndl{display:grid;gap:9px}\n.detail{margin:0;gap:8px}\ndt{font-size:12px}\ndd{font-size:11px;margin-top:0}\n.update{margin-top:13px;padding-top:11px}\n.update p{font-size:11px;margin-top:4px}\n.footer{font-size:10px;margin-top:13px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header class=\"brand-bar\">\n<div class=\"brand\">\n<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" aria-hidden=\"true\">\n<rect x=\"1\" y=\"1\" width=\"28\" height=\"28\" rx=\"6\" stroke=\"currentColor\"/>\n<path d=\"M9 9h12v12H9v-6h6V9m0 6h6\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"/>\n</svg>\nJuniper\n</div>\n<span>Team workspace</span>\n</header>\n<main class=\"workspace\">\n<section class=\"intro\" aria-labelledby=\"intro-title\">\n<p class=\"eyebrow\">For architecture practices</p>\n<h2 id=\"intro-title\">A shared space for better project work.</h2>\n<p>Keep drawings, decisions and your team in step, from concept to site.</p>\n</section>\n<section class=\"sign-in\" aria-labelledby=\"sign-in-title\">\n<h1 id=\"sign-in-title\">Welcome to Juniper</h1>\n<p class=\"subtitle\">Sign in to your practice’s workspace.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@practice.com\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\">\n<input id=\"remember\" name=\"remember\" type=\"checkbox\">\nRemember me\n</label>\n<a class=\"forgot\" href=\"#password-help\">Forgot password?</a>\n</div>\n<div class=\"action\">\n<button type=\"button\">Sign in</button>\n<p>Use the email on your studio invitation.</p>\n</div>\n</form>\n<p class=\"help\" id=\"password-help\"><strong>Need a hand?</strong>For password or access help, contact your studio administrator.</p>\n</section>\n<section class=\"details\" aria-labelledby=\"details-title\">\n<h3 id=\"details-title\">Less searching. More designing.</h3>\n<dl>\n<div class=\"detail\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 3h12v14H4zM7 7h6M7 10h6M7 13h3\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>\n<div><dt>Drawing sets</dt><dd>Keep issued sheets and revision notes together.</dd></div>\n</div>\n<div class=\"detail\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 4h14v10H8l-4 3v-3H3V4Z\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M6 7h8M6 10h5\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>\n<div><dt>Project decisions</dt><dd>Give design reviews a clear record of next steps.</dd></div>\n</div>\n<div class=\"detail\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"6\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M2 17v-2a6 6 0 0 1 12 0v2M14 4a3 3 0 0 1 0 6m2 2a5 5 0 0 1 2 4v1\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>\n<div><dt>Practice-wide coordination</dt><dd>Connect project teams without losing context.</dd></div>\n</div>\n</dl>\n<div class=\"update\">\n<div class=\"update-label\"><span class=\"dot\" aria-hidden=\"true\"></span>Recent update · 14 May</div>\n<p>Revision notes now appear alongside drawing sets.</p>\n</div>\n</section>\n</main>\n<footer class=\"footer\">\n<span>Juniper · Built for practice</span>\n<span>From first sketch to final issue.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-login-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Kite, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Welcome to Kite\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Kite\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Kite</title>\n<style>\n:root{color-scheme:light;--paper:#f5f2ec;--panel:#eae5dc;--ink:#282b27;--muted:#64665e;--line:#d6d1c7;--accent:#a14e36}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\na{color:var(--ink);text-underline-offset:4px}\na:hover{color:var(--accent)}\nbutton,input{font:inherit}\nbutton,a,input{ -webkit-tap-highlight-color:transparent}\n:focus-visible{outline:3px solid var(--accent);outline-offset:4px}\n.site-header{max-width:1120px;margin:auto;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:28px;height:34px;color:var(--accent)}\n.header-note{color:var(--muted);font-size:12px}\nmain{max-width:960px;margin:60px auto 72px;padding:0 24px}\n.sign-in-layout{display:grid;grid-template-columns:360px 1fr;border:1px solid var(--line)}\n.introduction{background:var(--panel);padding:40px 34px;display:flex;flex-direction:column;justify-content:space-between;gap:64px}\n.eyebrow{margin:0 0 18px;font-size:11px;letter-spacing:1.6px;font-weight:650;text-transform:uppercase;color:var(--accent)}\nh2{margin:0 0 16px;font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:29px;line-height:1.2;letter-spacing:-.5px}\n.intro-copy{margin:0;color:var(--muted);font-size:14px;line-height:1.65}\n.workspace{border-top:1px solid #ccc5ba;padding-top:22px}\n.practice{margin:0 0 10px;font-size:11px;font-weight:650;letter-spacing:1.1px;text-transform:uppercase}\n.summary{display:flex;align-items:baseline;gap:9px;margin:0 0 12px;font-size:13px}\n.summary strong{font-family:Georgia,\"Times New Roman\",serif;font-size:32px;font-weight:400;line-height:1}\n.status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}\n.status svg{width:14px;height:14px;flex-shrink:0}\n.form-panel{background:#fcfaf6;padding:40px 44px}\nh1{margin:0 0 10px;font-size:35px;font-weight:600;letter-spacing:-1.3px;line-height:1.2}\n.form-intro{margin:0 0 28px;color:var(--muted);font-size:14px;max-width:350px}\n.field{margin-bottom:19px}\n.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}\n.field input{display:block;width:100%;min-width:0;height:46px;padding:11px 13px;border:1px solid #aaa99f;border-radius:3px;background:#fffefa;color:var(--ink)}\n.field input::placeholder{color:#7b7c74;font-size:14px;opacity:1}\n.field input:hover{border-color:var(--ink)}\n.form-options{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:3px 0 25px;font-size:12px}\n.remember{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}\n.remember input{width:16px;height:16px;margin:0;accent-color:var(--ink);flex-shrink:0}\n.form-options a{white-space:nowrap}\n.sign-in{width:100%;min-height:48px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:#fffefa;font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}\n.sign-in:hover{background:#3c4038}\n.sign-in svg{width:17px;height:17px}\n.access-help{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.6}\n.access-help strong{font-weight:600;color:var(--ink)}\n.site-footer{max-width:960px;margin:0 auto;padding:0 24px 28px;display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted)}\n@media(min-width:1000px) and (min-height:800px){main{margin-top:100px}}\n@media(max-width:700px){\n.site-header{padding:20px 22px}\n.brand{font-size:23px}\n.header-note{font-size:11px}\nmain{margin:8px auto 24px;padding:0 18px}\n.sign-in-layout{grid-template-columns:1fr}\n.introduction{padding:21px 22px;gap:17px}\n.eyebrow{margin-bottom:7px;font-size:10px}\nh2{font-size:22px;letter-spacing:-.3px;margin-bottom:8px}\n.intro-copy{font-size:12px;line-height:1.5}\n.workspace{padding-top:13px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:7px 14px}\n.practice{width:100%;margin:0;font-size:10px}\n.summary{margin:0;font-size:11px;gap:6px}\n.summary strong{font-size:21px}\n.status{font-size:10px;gap:5px}\n.status svg{width:12px;height:12px}\n.form-panel{padding:25px 22px}\nh1{font-size:30px;letter-spacing:-1px}\n.form-intro{font-size:13px;margin-bottom:21px}\n.field{margin-bottom:17px}\n.form-options{margin-bottom:21px;font-size:11px;gap:10px}\n.access-help{margin-top:20px;padding-top:16px;font-size:11px}\n.site-footer{padding:0 22px 22px;font-size:10px}\n}\n@media(prefers-reduced-motion:no-preference){button,a,input{transition:background-color .15s,border-color .15s,color .15s}}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n  <div class=\"brand\" aria-label=\"Kite\">\n    <svg viewBox=\"0 0 28 34\" fill=\"none\" aria-hidden=\"true\"><path d=\"M14 2 25 13 14 25 3 13 14 2Z\" stroke=\"currentColor\" stroke-width=\"1.7\"/><path d=\"M14 2v23M3 13h22M14 25l5 7\" stroke=\"currentColor\" stroke-width=\"1.4\"/></svg>\n    <span>Kite</span>\n  </div>\n  <span class=\"header-note\">Your studio, connected.</span>\n</header>\n\n<main>\n  <div class=\"sign-in-layout\">\n    <aside class=\"introduction\" aria-labelledby=\"intro-title\">\n      <div>\n        <p class=\"eyebrow\">A workspace for architecture</p>\n        <h2 id=\"intro-title\">Built around<br>your practice.</h2>\n        <p class=\"intro-copy\">Keep drawings and decisions together, from concept to construction.</p>\n      </div>\n      <section class=\"workspace\" aria-label=\"Workspace overview\">\n        <p class=\"practice\">Northline Architects</p>\n        <p class=\"summary\"><strong>12</strong> active projects</p>\n        <span class=\"status\">\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><rect x=\"3\" y=\"7\" width=\"10\" height=\"7\" rx=\"1\" stroke=\"currentColor\"/><path d=\"M5 7V4a3 3 0 0 1 6 0v3M8 10v2\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>\n          Private team workspace\n        </span>\n      </section>\n    </aside>\n\n    <section class=\"form-panel\" aria-labelledby=\"welcome-title\">\n      <h1 id=\"welcome-title\">Welcome to Kite</h1>\n      <p class=\"form-intro\">Sign in to your practice’s shared projects, drawings and conversations.</p>\n      <form>\n        <div class=\"field\">\n          <label for=\"email\">Email address</label>\n          <input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourpractice.com\" required>\n        </div>\n        <div class=\"field\">\n          <label for=\"password\">Password</label>\n          <input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n        </div>\n        <div class=\"form-options\">\n          <label class=\"remember\" for=\"remember\">\n            <input id=\"remember\" name=\"remember\" type=\"checkbox\">\n            <span>Remember me</span>\n          </label>\n          <a href=\"#access-help\">Forgot password?</a>\n        </div>\n        <button class=\"sign-in\" type=\"button\">\n          Sign in\n          <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13M11 5l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </form>\n      <p class=\"access-help\" id=\"access-help\"><strong>Need access or a password reset?</strong><br>Contact your studio administrator for help.</p>\n    </section>\n  </div>\n</main>\n\n<footer class=\"site-footer\">\n  <span>Kite · Space for considered work.</span>\n  <span>© 2025 Kite</span>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-login-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Larch, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: practical and understated; use deep plum as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Welcome to Larch\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Larch\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Larch</title>\n<style>\n:root{color-scheme:light;--paper:#f4f5f6;--ink:#262b30;--muted:#626a72;--line:#d7dce0;--plum:#51364d}\n*{box-sizing:border-box}\nbody{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nheader,main,footer{width:min(100% - 96px,1000px);margin-inline:auto}\nheader{display:flex;align-items:center;justify-content:space-between;padding:30px 0;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:11px;color:var(--plum);font-size:28px;font-weight:650;letter-spacing:-1px;line-height:1}\n.brand svg{width:29px;height:29px}\n.header-note{color:var(--muted);font-size:13px}\nmain{flex:1;display:grid;grid-template-columns:44% 56%;align-content:center;padding-block:64px}\n.introduction{align-self:center;padding-right:64px}\n.eyebrow{margin:0 0 16px;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}\nh1,h2{font-family:Georgia,\"Times New Roman\",serif;font-weight:400;letter-spacing:-.035em}\nh1{margin:0;font-size:42px;line-height:1.15}\nh2{margin:0 0 15px;font-size:29px;line-height:1.2}\n.intro-copy{margin:0;color:var(--muted);line-height:1.65}\nfigure{margin:32px 0 0}\n.drawing{display:block;width:100%;max-width:310px;height:auto}\nfigcaption{max-width:310px;display:flex;justify-content:space-between;gap:12px;padding-top:11px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\n.revision{color:var(--plum);font-weight:600;white-space:nowrap}\n.sign-in{border-left:1px solid var(--line);padding-left:64px}\n.form-content{max-width:390px}\n.subtitle{margin:12px 0 30px;color:var(--muted)}\n.field{margin-bottom:22px}\nlabel{display:block;font-size:14px;font-weight:600;margin-bottom:8px}\ninput[type=email],input[type=password]{display:block;width:100%;height:48px;padding:11px 13px;border:1px solid #bfc6cd;border-radius:4px;background:#fff;color:var(--ink);font:inherit;min-width:0}\ninput::placeholder{color:#838990;font-size:14px;opacity:1}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #a28b9c;outline-offset:3px}\n.options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 26px;font-size:13px}\n.remember{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400;cursor:pointer}\ninput[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--plum);flex-shrink:0}\na{color:var(--plum);text-underline-offset:3px;text-decoration-thickness:1px}\na:hover{text-decoration:none}\nbutton{width:100%;height:48px;border:1px solid var(--plum);border-radius:4px;background:var(--plum);color:#fff;font:600 15px system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\nbutton:hover{background:#422c3f}\nfooter{border-top:1px solid var(--line);padding:22px 0 28px;display:flex;align-items:baseline;justify-content:space-between;gap:28px;color:var(--muted);font-size:12px}\nfooter p{margin:0}\n#password-help{max-width:410px}\n@media(min-width:1000px){main{min-height:590px}}\n@media(max-width:700px){\nheader,main,footer{width:calc(100% - 40px)}\nheader{padding:21px 0}\n.brand{font-size:25px}\n.brand svg{width:25px;height:25px}\n.header-note{font-size:11px}\nmain{display:flex;flex-direction:column;padding:28px 0 24px}\n.sign-in{order:0;border:0;padding:0}\n.form-content{max-width:none}\nh1{font-size:35px}\n.subtitle{margin:10px 0 25px;font-size:14px}\n.field{margin-bottom:18px}\n.options{margin:4px 0 22px}\n.introduction{order:1;width:100%;padding:24px 0 0;margin-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 92px;gap:16px;align-items:center}\n.eyebrow{display:none}\nh2{font-size:21px;line-height:1.2;margin-bottom:8px}\n.intro-copy{font-size:12px;line-height:1.5}\nfigure{margin:0}\n.drawing{width:92px}\nfigcaption{justify-content:center;padding-top:5px;font-size:10px}\n.drawing-title{display:none}\nfooter{padding:17px 0 21px;display:block;font-size:11px}\nfooter p+p{margin-top:5px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease}}\n</style>\n</head>\n<body>\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M7 5v21h20M13 5v15h14\" stroke=\"currentColor\" stroke-width=\"2.5\"/>\n<path d=\"M3 10h8M22 22v8\" stroke=\"currentColor\" stroke-width=\"1\"/>\n</svg>\n<span>larch</span>\n</div>\n<span class=\"header-note\">Practice workspace</span>\n</header>\n<main>\n<section class=\"introduction\" aria-labelledby=\"intro-title\">\n<div>\n<p class=\"eyebrow\">For architectural practice</p>\n<h2 id=\"intro-title\">A clear place for<br>the work ahead.</h2>\n<p class=\"intro-copy\">Keep drawings, project notes and team decisions together, from first sketch to issued set.</p>\n</div>\n<figure>\n<svg class=\"drawing\" viewBox=\"0 0 310 174\" fill=\"none\" role=\"img\" aria-labelledby=\"drawing-title drawing-desc\">\n<title id=\"drawing-title\">A shared drawing, with revision C marked</title>\n<desc id=\"drawing-desc\">A miniature floor plan with an updated doorway highlighted in plum. The caption identifies its drawing number and revision.</desc>\n<g stroke=\"#b1bac2\" stroke-width=\"1\">\n<path d=\"M40 22h231M40 18v8M271 18v8M22 39v115M18 39h8M18 154h8\"/>\n<path d=\"M40 15v18M271 15v18M15 39h18M15 154h18\" stroke=\"#d7dce0\"/>\n</g>\n<g stroke=\"#7c8791\" stroke-width=\"2\">\n<path d=\"M41 40h230v114H41V40Z\"/>\n<path d=\"M47 46h218v102H47V46Z\"/>\n<path d=\"M135 46v47m0 27v28M141 46v47m0 27v28M141 94h51m28 0h45M141 100h51m28 0h45\"/>\n<path d=\"M68 151h43M176 43h43\" stroke=\"#f4f5f6\" stroke-width=\"6\"/>\n<path d=\"M68 149h43M176 45h43\" stroke=\"#a0abb4\" stroke-width=\"1\"/>\n</g>\n<g stroke=\"#b1bac2\" stroke-width=\"1\">\n<path d=\"M138 120h26M164 120a26 26 0 0 0-26-26\" stroke-dasharray=\"3 3\"/>\n<rect x=\"64\" y=\"64\" width=\"50\" height=\"31\"/>\n<path d=\"M64 69h50M87 69v26M160 116h80M160 126h80\"/>\n</g>\n<g stroke=\"#51364d\" stroke-width=\"1.5\">\n<path d=\"M192 97v-28M192 69a28 28 0 0 1 28 28\"/>\n<path d=\"M231 79l13-14h28\"/>\n<circle cx=\"228\" cy=\"82\" r=\"3\" fill=\"#f4f5f6\"/>\n</g>\n<text x=\"278\" y=\"68\" fill=\"#51364d\" font-family=\"system-ui,sans-serif\" font-size=\"11\" font-weight=\"600\">C</text>\n</svg>\n<figcaption><span class=\"drawing-title\">A-102 · Ground floor</span><span class=\"revision\">Rev C</span></figcaption>\n</figure>\n</section>\n<section class=\"sign-in\" aria-labelledby=\"welcome-title\">\n<div class=\"form-content\">\n<h1 id=\"welcome-title\">Welcome to Larch</h1>\n<p class=\"subtitle\">Sign in to your practice workspace.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@practice.com\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\"><input id=\"remember\" name=\"remember\" type=\"checkbox\">Remember me</label>\n<a href=\"#password-help\">Forgot password?</a>\n</div>\n<button type=\"button\">Sign in</button>\n</form>\n</div>\n</section>\n</main>\n<footer>\n<p>Larch · A shared workspace for your practice.</p>\n<p id=\"password-help\">Need access or a password reset? Contact your practice administrator.</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-login-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Maple, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Welcome to Maple\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Maple\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Maple</title>\n<style>\n:root{color-scheme:light;--paper:#f6f7f2;--forest:#214638;--quiet:#5f7268;--line:#ccd5cb}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--forest);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\nheader{max-width:1120px;margin:auto;padding:30px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:650;letter-spacing:-.7px}\n.brand svg{width:28px;height:32px;flex:none}\n.workspace{font-size:12px;color:var(--quiet);letter-spacing:.02em}\nmain{max-width:1000px;margin:0 auto;min-height:calc(100svh - 95px);padding:76px 40px 90px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}\n.introduction{border-right:1px solid var(--line);padding:20px 58px 30px 0}\n.eyebrow{margin:0 0 20px;font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}\nh2{font-size:28px;line-height:1.3;font-weight:550;letter-spacing:-.7px;margin:0 0 18px}\n.introduction p:last-child{font-size:16px;line-height:1.75;color:var(--quiet);margin:0;max-width:300px}\n.sign-in{width:100%;max-width:400px}\nh1{margin:0;font-size:32px;line-height:1.2;letter-spacing:-1px;font-weight:600}\n.subtitle{margin:10px 0 30px;font-size:14px;line-height:1.5;color:var(--quiet)}\n.field{margin-bottom:22px}\nlabel,.field-heading{font-size:14px;font-weight:550}\n.field-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:9px}\n.field>label{display:block;margin-bottom:9px}\ninput[type=email],input[type=password]{display:block;width:100%;min-width:0;height:49px;padding:12px 14px;background:var(--paper);border:1px solid #9dac9e;border-radius:5px;color:var(--forest);font:inherit;font-size:15px}\ninput::placeholder{color:#738178;opacity:1}\na{color:var(--forest);text-underline-offset:4px;text-decoration-thickness:1px}\n.field-heading a{font-size:12px;font-weight:500;flex-shrink:0}\n.remember-row{display:flex;align-items:flex-start;gap:11px;margin:27px 0}\ninput[type=checkbox]{accent-color:var(--forest);width:17px;height:17px;flex:none;margin:2px 0 0}\n.remember-row label{cursor:pointer;line-height:1.45}\n.secondary-label{display:block;font-size:12px;font-weight:400;line-height:1.6;color:var(--quiet);margin-top:5px;max-width:335px}\nbutton{width:100%;min-height:49px;border:1px solid var(--forest);border-radius:5px;background:var(--forest);color:var(--paper);font:inherit;font-size:15px;font-weight:600;cursor:pointer}\nbutton:hover{background:#17382c}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--forest);outline-offset:4px}\n.help{border-top:1px solid var(--line);margin-top:28px;padding-top:20px;font-size:12px;line-height:1.7;color:var(--quiet)}\n.help p{margin:0}\n.help strong{font-weight:550;color:var(--forest)}\n@media(max-width:700px){\nheader{padding:20px 24px;gap:12px}\n.brand{font-size:21px}\n.brand svg{width:24px;height:27px}\n.workspace{font-size:11px;max-width:126px;text-align:right;line-height:1.5}\nmain{display:block;min-height:0;padding:25px 24px 32px;max-width:440px}\n.introduction{border:0;padding:0;margin-bottom:28px}\n.eyebrow{display:none}\nh2{font-size:22px;letter-spacing:-.5px;margin-bottom:7px}\n.introduction p:last-child{font-size:13px;line-height:1.6;max-width:none}\nh1{font-size:28px;letter-spacing:-.8px}\n.subtitle{margin:8px 0 24px;font-size:13px}\n.field{margin-bottom:18px}\n.remember-row{margin:21px 0}\n.help{margin-top:23px;padding-top:17px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M14 2 17 9 22 6 21 13 27 15 20 21 21 25 15 24 14 30 13 24 7 25 8 21 1 15 7 13 6 6 11 9Z\" fill=\"currentColor\"/>\n<path d=\"M14 12v12\" stroke=\"#f6f7f2\" stroke-width=\"1.3\" stroke-linecap=\"round\"/>\n</svg>\n<span>Maple</span>\n</div>\n<span class=\"workspace\">Field research workspace</span>\n</header>\n<main>\n<section class=\"introduction\" aria-labelledby=\"intro-title\">\n<p class=\"eyebrow\">Shared ground</p>\n<h2 id=\"intro-title\">Fieldwork, brought together.</h2>\n<p>Keep site notes, observations, and your team connected—from the field to the next briefing.</p>\n</section>\n<section class=\"sign-in\" aria-labelledby=\"sign-in-title\">\n<h1 id=\"sign-in-title\">Welcome to Maple</h1>\n<p class=\"subtitle\">Sign in to your team’s research workspace.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"you@research.org\" autocomplete=\"username\" autocapitalize=\"none\" spellcheck=\"false\" required>\n</div>\n<div class=\"field\">\n<div class=\"field-heading\">\n<label for=\"password\">Password</label>\n<a href=\"/forgot-password\">Forgot password?</a>\n</div>\n<input id=\"password\" name=\"password\" type=\"password\" placeholder=\"Enter your password\" autocomplete=\"current-password\" required>\n</div>\n<div class=\"remember-row\">\n<input id=\"remember\" name=\"remember\" type=\"checkbox\">\n<label for=\"remember\">Remember me\n<span class=\"secondary-label\">Use only on your own device, not on shared field-station computers or tablets.</span>\n</label>\n</div>\n<button type=\"button\">Sign in</button>\n</form>\n<div class=\"help\">\n<p><strong>Joining a research team?</strong><br>Your project coordinator can invite you to Maple.</p>\n</div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-login-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for North, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Welcome to North\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to North\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · North</title>\n<style>\n:root{color-scheme:light;--ink:#263342;--muted:#647180;--accent:#4d6286;--line:#dce2e8;--paper:#fff}\n*{box-sizing:border-box}\nbody{margin:0;background:#f4f6f8;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\n.page{min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:904px;margin:auto;padding:48px 24px}\n.brandbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}\n.brand{display:flex;align-items:center;gap:9px;font-size:25px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:27px;height:29px;color:var(--accent)}\n.brandbar small{color:var(--muted);font-size:12px}\n.panel{display:grid;grid-template-columns:1fr 1.18fr;column-gap:56px;row-gap:40px;padding:40px;background:var(--paper);border:1px solid var(--line);border-radius:8px}\n.intro{grid-column:1;grid-row:1;align-self:start;padding-top:4px}\n.eyebrow{margin:0 0 12px;color:var(--accent);font-size:10px;line-height:1.4;letter-spacing:1.4px;font-weight:700}\nh2{margin:0;font-size:24px;font-weight:550;line-height:1.25;letter-spacing:-.6px}\n.intro p:last-child{max-width:270px;margin:14px 0 0;color:var(--muted);line-height:1.65}\n.signin{grid-column:2;grid-row:1 / span 2}\nh1{margin:0;font-size:29px;line-height:1.2;letter-spacing:-.8px;font-weight:600}\n.lead{max-width:310px;margin:10px 0 26px;color:var(--muted)}\n.field{margin-bottom:18px}\n.field label{display:block;margin-bottom:7px;font-weight:550;font-size:13px}\ninput[type=email],input[type=password]{display:block;width:100%;min-width:0;height:44px;padding:10px 12px;border:1px solid #cbd3dc;border-radius:4px;background:#fff;color:var(--ink);font:inherit}\ninput::placeholder{color:#8a94a0}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #afbed8;outline-offset:3px}\n.options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0 24px;font-size:12px}\n.remember{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}\ninput[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent);flex-shrink:0}\na{color:var(--accent);text-underline-offset:3px}\n.options a{text-decoration:none;white-space:nowrap}\na:hover{text-decoration:underline}\n.action{display:flex;align-items:center;gap:16px}\nbutton{min-height:44px;flex:0 0 145px;border:1px solid var(--accent);border-radius:4px;padding:10px 20px;background:var(--accent);color:white;font:inherit;font-weight:600;cursor:pointer}\nbutton:hover{background:#405577}\n.action p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;max-width:150px}\n.update{grid-column:1;grid-row:2;align-self:end;border-top:1px solid var(--line);padding-top:18px}\n.update-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;color:var(--muted);font-size:10px;letter-spacing:.8px;text-transform:uppercase}\n.update-meta span{display:flex;align-items:center;gap:6px}\n.dot{height:5px;width:5px;border-radius:50%;background:var(--accent)}\n.update h3{margin:0 0 5px;font-size:13px;font-weight:600}\n.update p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}\n.support{margin:20px 0 0;text-align:center;color:var(--muted);font-size:12px}\n.support strong{font-weight:500;color:#495766}\n@media(max-width:620px){\n.page{justify-content:flex-start;padding:22px 18px}\n.brandbar{margin-bottom:18px}\n.brandbar small{font-size:11px}\n.panel{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px 22px}\n.intro{grid-column:1;grid-row:1;padding:0 0 18px;border-bottom:1px solid var(--line)}\n.intro .eyebrow{display:none}\nh2{font-size:20px;letter-spacing:-.4px}\n.intro p:last-child{max-width:none;margin-top:8px;font-size:13px;line-height:1.5}\n.signin{grid-column:1;grid-row:2}\nh1{font-size:27px}\n.lead{margin:8px 0 22px;font-size:13px;max-width:270px}\n.options{margin-bottom:22px}\n.action{gap:14px}\nbutton{flex-basis:132px}\n.action p{font-size:11px}\n.update{grid-column:1;grid-row:3;padding-top:15px}\n.update-meta{margin-bottom:6px}\n.update p{font-size:11px}\n.support{margin-top:16px;max-width:300px;align-self:center;font-size:11px}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header class=\"brandbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 30\" fill=\"none\" aria-hidden=\"true\"><path d=\"M5 25V5l18 20V5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"square\"/><path d=\"M14 1v5\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<span>north</span>\n</div>\n<small>A workspace for field teams</small>\n</header>\n<main class=\"panel\">\n<section class=\"intro\" aria-labelledby=\"intro-title\">\n<p class=\"eyebrow\">From fieldwork to findings</p>\n<h2 id=\"intro-title\">Fieldwork, together.</h2>\n<p>Keep site records, observations and team decisions in one shared workspace.</p>\n</section>\n<section class=\"signin\" aria-labelledby=\"welcome\">\n<h1 id=\"welcome\">Welcome to North</h1>\n<p class=\"lead\">Sign in to pick up where your field team left off.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@yourteam.org\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\"><input id=\"remember\" name=\"remember\" type=\"checkbox\">Remember me</label>\n<a href=\"#account-support\">Forgot password?</a>\n</div>\n<div class=\"action\">\n<button type=\"button\">Sign in</button>\n<p>Use the email linked to your team workspace.</p>\n</div>\n</form>\n</section>\n<aside class=\"update\" aria-labelledby=\"update-title\">\n<div class=\"update-meta\"><span><i class=\"dot\" aria-hidden=\"true\"></i>Recent update</span><time datetime=\"2025-06-12\">12 Jun</time></div>\n<h3 id=\"update-title\">Field notes, easier to find</h3>\n<p>Filter observations by site to prepare for your next team review.</p>\n</aside>\n</main>\n<footer class=\"support\" id=\"account-support\">\nNeed access or a password reset? <strong>Your project coordinator can help.</strong>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-login-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Orbit, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Welcome to Orbit\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Orbit\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Orbit</title>\n<style>\n:root{color-scheme:light;--paper:#f8f6f1;--ink:#292d28;--muted:#686c64;--line:#dedfd6;--accent:#a34e38}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\n.page{max-width:1120px;min-height:100svh;margin:auto;padding:0 48px;display:flex;flex-direction:column}\nheader{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:11px;font-size:27px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:31px;height:31px;color:var(--accent);flex:none}\n.status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}\n.status svg{width:14px;height:14px;flex:none}\nmain{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:\"intro signin\" \"recent signin\";column-gap:72px;row-gap:46px;margin:76px 0 64px;align-items:start}\n.introduction{grid-area:intro;max-width:365px}\n.eyebrow{margin:0 0 17px;font-size:11px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase;color:var(--accent)}\nh1,h2,p{margin:0}\n.introduction h2{font-family:Georgia,\"Times New Roman\",serif;font-size:32px;line-height:1.2;font-weight:400;letter-spacing:-.6px;max-width:310px}\n.introduction p:last-child{margin-top:17px;color:var(--muted);font-size:15px;line-height:1.7}\n.signin{grid-area:signin;border-left:1px solid var(--line);padding-left:48px}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:36px;line-height:1.2;font-weight:400;letter-spacing:-.8px}\n.lead{margin-top:10px;color:var(--muted);font-size:14px}\nform{margin-top:30px}\n.field{margin-bottom:21px}\n.field label{display:block;margin-bottom:8px;font-size:13px;font-weight:600}\n.field input{width:100%;min-width:0;height:50px;border:1px solid #bfc2b8;border-radius:4px;background:#fffefa;padding:0 13px;color:var(--ink);font:inherit}\ninput::placeholder{color:#878b81;font-size:14px}\ninput:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #d6a18e;outline-offset:3px}\n.options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-5px 0 17px;font-size:13px}\n.remember{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer}\n.remember input{width:17px;height:17px;margin:0;accent-color:var(--accent);flex:none}\na{color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}\n.forgot{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}\nbutton{width:100%;min-height:50px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fffaf5;font:600 15px system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\nbutton:hover{background:#8d422e;border-color:#8d422e}\n.account-help{border-top:1px solid var(--line);margin-top:26px;padding-top:19px;font-size:12px;line-height:1.7;color:var(--muted)}\n.account-help strong{display:block;color:var(--ink);font-size:13px;font-weight:600;margin-bottom:3px}\n.recent{grid-area:recent;border-top:1px solid var(--line);padding-top:21px;max-width:365px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px}\n.section-heading h2{font-size:14px;font-weight:600;letter-spacing:-.1px}\n.count{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}\n.empty{display:flex;gap:13px;margin-top:21px}\n.empty svg{width:25px;height:25px;flex:none;color:#95998e;margin-top:1px}\n.empty h3{margin:0 0 6px;font-size:13px;font-weight:500}\n.empty p{color:var(--muted);font-size:13px;line-height:1.65;max-width:285px}\nfooter{margin-top:auto;min-height:70px;padding:18px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}\n.footer-label{letter-spacing:1px;text-transform:uppercase}\n@media(max-width:760px){\n.page{padding:0 24px}\nheader{min-height:72px;gap:12px}\n.brand{font-size:25px}\n.status{font-size:11px;gap:5px}\nmain{grid-template-columns:1fr;grid-template-areas:\"intro\" \"signin\" \"recent\";gap:26px;margin:25px 0 35px}\n.introduction,.recent{max-width:none}\n.eyebrow{margin-bottom:7px;font-size:10px}\n.introduction h2{font-size:23px;max-width:none}\n.introduction p:last-child{margin-top:8px;font-size:13px;line-height:1.6}\n.signin{border-left:0;border-top:1px solid var(--line);padding:23px 0 0}\nh1{font-size:31px}\n.lead{margin-top:7px;font-size:13px}\nform{margin-top:23px}\n.field{margin-bottom:18px}\n.field input{height:48px}\n.account-help{margin-top:21px;padding-top:16px}\n.recent{padding-top:19px}\n.empty{margin-top:17px}\n.empty p{max-width:none}\nfooter{min-height:65px;align-items:flex-start;font-size:10px;gap:16px}\nfooter span:last-child{text-align:right}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"16\" cy=\"16\" r=\"10\" stroke=\"currentColor\" stroke-width=\"1.5\"/><ellipse cx=\"16\" cy=\"16\" rx=\"16\" ry=\"6\" transform=\"rotate(-38 16 16)\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"24\" cy=\"8\" r=\"3\" fill=\"currentColor\" stroke=\"#f8f6f1\" stroke-width=\"2\"/></svg>\n<span>Orbit</span>\n</div>\n<span class=\"status\">\n<svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><rect x=\"3.5\" y=\"7\" width=\"9\" height=\"7\" rx=\"1.5\" stroke=\"currentColor\"/><path d=\"M5.5 7V4.5a2.5 2.5 0 0 1 5 0V7\" stroke=\"currentColor\"/></svg>\nInvitation-only access\n</span>\n</header>\n<main>\n<section class=\"introduction\" aria-labelledby=\"intro-title\">\n<p class=\"eyebrow\">Your field research workspace</p>\n<h2 id=\"intro-title\">Fieldwork, in good company.</h2>\n<p>One place for your team’s field notes, observations, and research materials.</p>\n</section>\n\n<section class=\"signin\" aria-labelledby=\"signin-title\">\n<h1 id=\"signin-title\">Welcome to Orbit</h1>\n<p class=\"lead\">Use your team account to continue.</p>\n<form>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@research.org\" required>\n</div>\n<div class=\"field\">\n<label for=\"password\">Password</label>\n<input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n</div>\n<div class=\"options\">\n<label class=\"remember\" for=\"remember\"><input id=\"remember\" name=\"remember\" type=\"checkbox\">Remember me</label>\n<a class=\"forgot\" href=\"#password-help\">Forgot password?</a>\n</div>\n<button type=\"button\">Sign in</button>\n</form>\n<p class=\"account-help\" id=\"password-help\"><strong>Need a hand getting in?</strong>Contact your project lead for an invitation or help resetting your password.</p>\n</section>\n\n<section class=\"recent\" aria-labelledby=\"recent-title\">\n<div class=\"section-heading\">\n<h2 id=\"recent-title\">Recent workspaces</h2>\n<span class=\"count\">0 workspaces</span>\n</div>\n<div class=\"empty\">\n<svg viewBox=\"0 0 26 26\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 7.5h7l2-3h10v17h-19v-14Z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/><path d=\"M8 13h10M8 17h6\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\n<div>\n<h3>No recent workspaces on this device</h3>\n<p>Workspaces you visit after signing in will appear here, so you can return to your team’s research quickly.</p>\n</div>\n</div>\n</section>\n</main>\n<footer>\n<span class=\"footer-label\">Orbit · Team workspace</span>\n<span>Shared context. Better fieldwork.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-login-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a sign-in screen for Pine, a team workspace. Include email and password inputs, Remember me checkbox, Sign in button and Forgot password? link. Include a small brand introduction without overwhelming the form. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Welcome to Pine\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Welcome to Pine\", \"Email address\", \"Password\", \"Remember me\", \"Sign in\", \"Forgot password?\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Sign in · Pine</title>\n<style>\n:root{color-scheme:light;--bg:#f5f2ec;--surface:#fffdfa;--ink:#29252b;--muted:#6c666c;--plum:#492b43;--line:#ded8d1}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\nheader{max-width:1120px;margin:auto;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1px;color:var(--plum)}\n.brand svg{width:27px;height:30px}\n.workspace-label{color:var(--muted);font-size:13px}\nmain{max-width:970px;margin:66px auto 80px;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:76px;align-items:center}\n.introduction{max-width:335px}\n.eyebrow{margin:0 0 15px;color:var(--plum);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh2{margin:0 0 14px;font-size:27px;font-weight:600;letter-spacing:-.7px;line-height:1.25}\n.introduction>p:not(.eyebrow){margin:0;color:var(--muted);font-size:15px;line-height:1.7}\nfigure{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:18px}\nfigure svg{width:112px;height:78px;flex-shrink:0}\nfigcaption{font-size:13px;color:var(--muted);line-height:1.6}\nfigcaption strong{display:block;color:var(--ink);font-size:13px;font-weight:600;margin-bottom:3px}\n.sign-in{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:36px;box-shadow:0 6px 24px #29252b05}\nh1{font-size:29px;letter-spacing:-.8px;line-height:1.25;font-weight:650;margin:0 0 10px}\n.supporting{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 27px}\n.field{margin-bottom:20px}\n.field label{display:block;font-size:14px;font-weight:550;margin-bottom:8px}\ninput[type=email],input[type=password]{width:100%;min-width:0;height:47px;border:1px solid #bdb5bd;border-radius:6px;background:#fff;padding:0 13px;font:inherit;font-size:15px;color:var(--ink)}\ninput::placeholder{color:#89828a;opacity:1}\ninput:focus-visible{outline:3px solid #492b4326;outline-offset:2px;border-color:var(--plum)}\n.options{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}\n.remember{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}\ninput[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--plum);flex-shrink:0}\na{color:var(--plum);text-decoration:underline;text-decoration-color:#b2a1ae;text-underline-offset:3px}\na:hover{text-decoration-color:var(--plum)}\na:focus-visible,button:focus-visible,input[type=checkbox]:focus-visible{outline:3px solid #92708a;outline-offset:4px}\nbutton{width:100%;margin-top:25px;min-height:48px;border:1px solid var(--plum);border-radius:6px;background:var(--plum);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}\nbutton:hover{background:#382033}\n.help{margin:25px 0 0;border-top:1px solid var(--line);padding-top:19px;color:var(--muted);font-size:12px;line-height:1.65}\n.help strong{color:var(--ink);font-weight:550}\n@media(max-width:760px){\nheader{padding:23px 24px}\nmain{max-width:470px;margin:19px auto 35px;padding:0 24px;grid-template-columns:minmax(0,1fr);gap:25px}\n.introduction{max-width:none}\n.eyebrow{display:none}\nh2{font-size:22px;margin-bottom:8px}\n.introduction>p:not(.eyebrow){font-size:14px;line-height:1.55}\nfigure{margin-top:17px;padding-top:14px;gap:15px}\nfigure svg{width:86px;height:56px}\nfigcaption{font-size:12px;line-height:1.5}\nfigcaption strong{font-size:12px;margin-bottom:1px}\n.sign-in{padding:25px 23px}\nh1{font-size:27px}\n.supporting{margin-bottom:23px;font-size:13px}\n.field{margin-bottom:18px}\n.options{font-size:12px}\nbutton{margin-top:22px}\n.help{margin-top:21px;padding-top:16px}\n}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"brand\">\n    <svg viewBox=\"0 0 28 32\" aria-hidden=\"true\" fill=\"none\">\n      <path d=\"M14 3 5 15h5L3 25h22l-7-10h5L14 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"/>\n      <path d=\"M14 25v5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    <span>Pine</span>\n  </div>\n  <span class=\"workspace-label\">Team workspace</span>\n</header>\n<main>\n  <section class=\"introduction\" aria-labelledby=\"intro-heading\">\n    <p class=\"eyebrow\">Made for field research</p>\n    <h2 id=\"intro-heading\">Fieldwork, together.</h2>\n    <p>A shared workspace for site observations, research notes and the people behind them.</p>\n    <figure>\n      <svg viewBox=\"0 0 112 78\" role=\"img\" aria-labelledby=\"map-title\">\n        <title id=\"map-title\">Three observation points connected along a survey route</title>\n        <rect x=\"1\" y=\"1\" width=\"110\" height=\"76\" rx=\"7\" fill=\"#ebe7df\" stroke=\"#ded8d1\"/>\n        <path d=\"M2 51C25 36 39 65 63 51S89 17 111 29M2 24C31 8 43 36 68 22S93 8 111 15\" fill=\"none\" stroke=\"#d5cec3\" stroke-width=\"1\"/>\n        <path d=\"m22 56 30-30 36 21\" fill=\"none\" stroke=\"#795e71\" stroke-width=\"1.5\" stroke-dasharray=\"3 4\"/>\n        <g fill=\"#492b43\" stroke=\"#f5f2ec\" stroke-width=\"2\">\n          <circle cx=\"22\" cy=\"56\" r=\"4.5\"/>\n          <circle cx=\"52\" cy=\"26\" r=\"4.5\"/>\n          <circle cx=\"88\" cy=\"47\" r=\"4.5\"/>\n        </g>\n        <path d=\"M98 13V6m0 0-2 3m2-3 2 3\" fill=\"none\" stroke=\"#77706c\" stroke-width=\"1\"/>\n      </svg>\n      <figcaption><strong>Every observation has a place.</strong>Keep field notes connected to their survey sites.</figcaption>\n    </figure>\n  </section>\n\n  <section class=\"sign-in\" aria-labelledby=\"welcome-heading\">\n    <h1 id=\"welcome-heading\">Welcome to Pine</h1>\n    <p class=\"supporting\">Sign in to pick up where your team left off.</p>\n    <form>\n      <div class=\"field\">\n        <label for=\"email\">Email address</label>\n        <input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"username\" placeholder=\"you@research.org\" required>\n      </div>\n      <div class=\"field\">\n        <label for=\"password\">Password</label>\n        <input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" placeholder=\"Enter your password\" required>\n      </div>\n      <div class=\"options\">\n        <label class=\"remember\" for=\"remember\">\n          <input id=\"remember\" name=\"remember\" type=\"checkbox\">\n          <span>Remember me</span>\n        </label>\n        <a href=\"#sign-in-help\">Forgot password?</a>\n      </div>\n      <button type=\"button\">Sign in</button>\n    </form>\n    <p class=\"help\" id=\"sign-in-help\"><strong>Need access or password help?</strong><br>Contact your project lead or workspace administrator.</p>\n  </section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-contact-00","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Alder, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Contact Alder\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Alder\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"theme-color\" content=\"#f7f5ef\">\n<title>Contact Alder — Independent creative studio</title>\n<style>\n:root{color-scheme:light;--paper:#f7f5ef;--ink:#26352e;--green:#173f30;--muted:#626b63;--line:#d8ddd3;--panel:#eeeee5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1120px;margin:auto;padding:24px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.wordmark{font-family:Georgia,\"Times New Roman\",serif;font-size:32px;letter-spacing:-1.5px;color:var(--green);line-height:1}\n.studio-label{font-size:12px;letter-spacing:.06em;color:var(--muted)}\nmain{max-width:1120px;margin:auto;padding:60px 40px 72px}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:54px;letter-spacing:-1.8px;line-height:1.12;margin:0 0 18px}\n.intro{max-width:610px;margin:0;font-size:17px;line-height:1.65;color:var(--muted)}\n.contact-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:64px;align-items:start;margin-top:36px}\nform{min-width:0}\n.name-email{display:grid;grid-template-columns:1fr 1fr;gap:20px}\n.field{min-width:0;margin-bottom:24px}\nlabel{display:block;font-size:14px;font-weight:600;margin-bottom:9px}\ninput,textarea{display:block;width:100%;border:1px solid #bcc6bb;border-radius:5px;background:#fffefa;color:var(--ink);font:inherit;font-size:16px;padding:13px 14px;box-shadow:0 1px 2px #26352e05}\ninput{height:50px}\ntextarea{min-height:176px;resize:vertical;line-height:1.5}\ninput::placeholder,textarea::placeholder{color:#80867e;opacity:1}\ninput:focus,textarea:focus{outline:2px solid var(--green);outline-offset:3px;border-color:var(--green)}\nbutton{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;min-height:52px;padding:14px 20px;border:1px solid var(--green);border-radius:5px;background:var(--green);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}\nbutton:hover{background:#24523e}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:4px}\nbutton svg{width:18px;height:18px;flex-shrink:0}\n.form-note{margin:13px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}\naside{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:28px}\nh2{font-family:Georgia,\"Times New Roman\",serif;font-size:25px;font-weight:400;letter-spacing:-.5px;margin:0 0 10px;line-height:1.25}\n.aside-intro{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 24px}\ndl{margin:0}\ndt{font-size:12px;font-weight:600;line-height:1.6;color:var(--muted);margin-bottom:7px}\ndd{margin:0;font-size:15px;line-height:1.65}\na{color:var(--green);text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}\n.hours{margin-top:24px;padding-top:22px;border-top:1px solid #d2d7cd}\n.hours dd span{display:block}\n.reply-note{margin:22px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}\nfooter{max-width:1040px;margin:0 auto;padding:22px 0 28px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.6}\n@media(max-width:700px){\n.header-inner{padding:20px 24px}\n.wordmark{font-size:29px}\n.studio-label{font-size:11px;letter-spacing:0;max-width:125px;text-align:right}\nmain{padding:26px 24px 36px}\nh1{font-size:40px;letter-spacing:-1.2px;margin-bottom:12px}\n.intro{font-size:15px;line-height:1.6}\n.contact-layout{grid-template-columns:1fr;gap:28px;margin-top:25px}\n.name-email{grid-template-columns:1fr;gap:0}\n.field{margin-bottom:18px}\nlabel{margin-bottom:7px;font-size:13px}\ninput{height:46px}\ntextarea{min-height:120px}\nbutton{min-height:48px}\naside{padding:23px}\n.aside-intro{margin-bottom:18px}\n.hours{margin-top:18px;padding-top:18px}\n.reply-note{margin-top:16px}\nfooter{margin:0 24px;padding:18px 0 24px}\n}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"header-inner\">\n    <div class=\"wordmark\" aria-label=\"Alder\">alder</div>\n    <span class=\"studio-label\">Independent creative studio</span>\n  </div>\n</header>\n<main>\n  <h1>Contact Alder</h1>\n  <p class=\"intro\">From a new shop website to a fresh identity, tell us what’s next for your bike shop.</p>\n  <div class=\"contact-layout\">\n    <form aria-label=\"Contact Alder\" aria-describedby=\"form-note\">\n      <div class=\"name-email\">\n        <div class=\"field\">\n          <label for=\"full-name\">Full name</label>\n          <input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"Your name\" required>\n        </div>\n        <div class=\"field\">\n          <label for=\"email\">Email address</label>\n          <input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourshop.com\" required>\n        </div>\n      </div>\n      <div class=\"field\">\n        <label for=\"message\">Message</label>\n        <textarea id=\"message\" name=\"message\" placeholder=\"A little about your shop and what you have in mind…\" required></textarea>\n      </div>\n      <button type=\"button\">\n        Send message\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M4 12h15m-6-6 6 6-6 6\"/></svg>\n      </button>\n      <p class=\"form-note\" id=\"form-note\">A few lines is plenty. No polished brief needed.</p>\n    </form>\n    <aside aria-labelledby=\"direct-contact\">\n      <h2 id=\"direct-contact\">Prefer a direct hello?</h2>\n      <p class=\"aside-intro\">Drop us an email. We’re a small team, and you’ll speak to the people doing the work.</p>\n      <dl>\n        <dt>For shop websites, brand identities and the little details that bring them together</dt>\n        <dd><a href=\"mailto:hello@alder.studio\">hello@alder.studio</a></dd>\n        <div class=\"hours\">\n          <dt>Studio hours</dt>\n          <dd><span>Monday–Friday</span><span>9am–5pm · Pacific time</span></dd>\n        </div>\n      </dl>\n      <p class=\"reply-note\">We usually reply within two studio days.</p>\n    </aside>\n  </div>\n</main>\n<footer>Thoughtful design for independent bike shops.</footer>\n</body>\n</html>"}]}
{"id":"sft-contact-01","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Birch, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Contact Birch\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Birch\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Birch — Brand & web design</title>\n<style>\n:root{--ink:#26313e;--muted:#647080;--accent:#516984;--line:#dce2e8;--surface:#edf1f5}\n*{box-sizing:border-box}\nbody{margin:0;background:#f6f8fa;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\na{color:var(--accent);text-underline-offset:4px}\na:hover{text-decoration-thickness:2px}\nbutton,input,textarea{font:inherit}\n.wrap{width:min(100% - 64px,1000px);margin-inline:auto}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:700;letter-spacing:-.8px;text-decoration:none;color:var(--ink)}\n.brand-mark{width:32px;height:36px;border-radius:4px;background:var(--accent);color:white;display:grid;place-items:center;font-size:24px;font-weight:500}\n.header-note{font-size:13px;color:var(--muted)}\nmain{padding-top:45px;padding-bottom:48px}\n.eyebrow{margin:0 0 10px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh1{margin:0;font-size:46px;line-height:1.15;letter-spacing:-1.8px;font-weight:650}\n.intro{max-width:570px;margin:15px 0 29px;color:var(--muted);font-size:16px;line-height:1.65}\n.contact-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px;align-items:start}\n.form-card{background:white;border:1px solid var(--line);border-radius:8px;padding:27px}\nh2{margin:0;font-size:19px;line-height:1.35;letter-spacing:-.3px;font-weight:650}\n.form-intro{margin:7px 0 23px;color:var(--muted);font-size:14px;max-width:390px}\n.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n.field{min-width:0;margin-bottom:19px}\nlabel{display:block;margin-bottom:7px;font-size:13px;font-weight:650}\ninput,textarea{display:block;width:100%;border:1px solid #cbd3dc;background:#fcfdfe;color:var(--ink);border-radius:4px;padding:10px 12px;outline:none}\ninput{height:43px}\ntextarea{height:137px;resize:vertical;min-height:100px}\ninput::placeholder,textarea::placeholder{color:#818c99;font-size:14px;opacity:1}\ninput:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #5169841c}\n.field-hint{margin:7px 0 0;font-size:12px;color:var(--muted)}\n.form-actions{display:flex;align-items:center;gap:18px;padding-top:3px}\nbutton{border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:white;font-size:14px;font-weight:600;min-height:44px;padding:11px 17px;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#405972}\nbutton:focus-visible,a:focus-visible{outline:3px solid #93a7bc;outline-offset:4px}\n.action-hint{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}\n.studio-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:26px}\n.studio-panel h2{font-size:18px}\n.panel-copy{margin:8px 0 17px;font-size:14px;color:var(--muted)}\n.email-link{font-size:17px;font-weight:600;overflow-wrap:anywhere}\n.panel-section{margin-top:24px;padding-top:21px;border-top:1px solid #d4dce5}\nh3{margin:0;font-size:13px;font-weight:700}\n.timezone{margin:3px 0 12px;font-size:12px;color:var(--muted)}\ntable{border-collapse:collapse;width:100%;font-size:13px}\nth,td{padding:5px 0}\nth{text-align:left;font-weight:400}\ntd{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}\n.closed{color:var(--muted)}\n.update-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--accent)}\n.update-label::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--accent)}\n.update-copy{margin:7px 0 0;font-size:13px;line-height:1.6}\nfooter{border-top:1px solid var(--line)}\n.footer-inner{display:flex;justify-content:space-between;gap:16px;padding:19px 0;color:var(--muted);font-size:12px}\n@media(max-width:650px){\n.wrap{width:calc(100% - 36px)}\n.header-inner{min-height:67px}\n.brand{font-size:21px}\n.brand-mark{width:27px;height:31px;font-size:21px}\n.header-note{font-size:11px;max-width:120px;text-align:right}\nmain{padding-top:25px;padding-bottom:28px}\n.eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:8px}\nh1{font-size:34px;letter-spacing:-1.2px}\n.intro{font-size:14px;line-height:1.6;margin:12px 0 21px}\n.contact-grid{grid-template-columns:1fr;gap:18px}\n.form-card,.studio-panel{padding:20px}\nh2{font-size:17px}\n.form-intro{font-size:13px;margin-bottom:18px}\n.field-row{grid-template-columns:1fr;gap:0}\n.field{margin-bottom:15px}\ntextarea{height:105px}\n.form-actions{gap:13px}\nbutton{padding-inline:14px;font-size:13px}\n.action-hint{font-size:11px}\n.footer-inner{flex-direction:column;gap:4px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"wrap header-inner\">\n<a class=\"brand\" href=\"#contact\" aria-label=\"Birch contact\"><span class=\"brand-mark\" aria-hidden=\"true\">b</span>Birch</a>\n<span class=\"header-note\">Independent studio.<br>Brand &amp; web design.</span>\n</div>\n</header>\n<main class=\"wrap\" id=\"contact\">\n<p class=\"eyebrow\">For independent bike shops</p>\n<h1>Contact Birch</h1>\n<p class=\"intro\">A new shop identity, a better website, or a fresh start.<br>Tell us where your bike shop is headed. We’ll help you get there.</p>\n<div class=\"contact-grid\">\n<section class=\"form-card\" aria-labelledby=\"form-title\">\n<h2 id=\"form-title\">Tell us what you have in mind</h2>\n<p class=\"form-intro\">Opening your first shop or growing an established one? We’d love to hear about it.</p>\n<form>\n<div class=\"field-row\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"Your name\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourshop.co.uk\" required>\n</div>\n</div>\n<div class=\"field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"A little about your shop and what you’d like to change…\" aria-describedby=\"message-hint\" required></textarea>\n<p class=\"field-hint\" id=\"message-hint\">Project, timing and a rough budget are a good start.</p>\n</div>\n<div class=\"form-actions\">\n<button type=\"button\">Send message <span aria-hidden=\"true\">↗</span></button>\n<p class=\"action-hint\">Just a few lines is enough.<br>Reply in 2 working days.</p>\n</div>\n</form>\n</section>\n<aside class=\"studio-panel\" aria-labelledby=\"studio-title\">\n<h2 id=\"studio-title\">Prefer a direct hello?</h2>\n<p class=\"panel-copy\">Email us your ideas, a rough brief, or a link to your current shop website.</p>\n<a class=\"email-link\" href=\"mailto:hello@birch.studio\">hello@birch.studio</a>\n<section class=\"panel-section\" aria-labelledby=\"hours-title\">\n<h3 id=\"hours-title\">Studio hours</h3>\n<p class=\"timezone\">UK time · GMT / BST</p>\n<table aria-labelledby=\"hours-title\">\n<tbody>\n<tr><th scope=\"row\">Monday–Thursday</th><td>9:00–17:00</td></tr>\n<tr><th scope=\"row\">Friday</th><td>9:00–13:00</td></tr>\n<tr class=\"closed\"><th scope=\"row\">Saturday–Sunday</th><td>Out riding</td></tr>\n</tbody>\n</table>\n</section>\n<section class=\"panel-section\" aria-label=\"Recent studio update\">\n<div class=\"update-label\">Studio update · 12 June</div>\n<p class=\"update-copy\">Now booking late-summer projects for shop launches and website refreshes.</p>\n</section>\n</aside>\n</div>\n</main>\n<footer>\n<div class=\"wrap footer-inner\">\n<span>© Birch Studio</span>\n<span>Small studio. A personal approach.</span>\n</div>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-contact-02","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Cedar, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Contact Cedar\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Cedar\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Cedar — Independent creative studio</title>\n<style>\n:root{--paper:#f7f3ed;--ink:#302923;--accent:#a34e37;--muted:#71685f;--line:#d9d0c6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\na{color:var(--accent);text-underline-offset:4px}\na:hover{text-decoration-thickness:2px}\nbutton,input,textarea{font:inherit}\nbutton,a,input,textarea{outline-offset:4px}\n:focus-visible{outline:2px solid var(--accent)}\n.wrap{width:min(1080px,calc(100% - 80px));margin:auto}\nheader{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;border-bottom:1px solid var(--line)}\n.wordmark{font-family:Georgia,'Times New Roman',serif;font-size:36px;font-weight:bold;line-height:1;letter-spacing:-2px}\n.wordmark span{color:var(--accent)}\n.header-note{margin:0;color:var(--muted);font-size:12px}\nmain{padding:48px 0 54px}\n.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:38px}\nh1,h2,p{margin:0}\nh1{font-family:Georgia,'Times New Roman',serif;font-weight:normal;font-size:64px;line-height:1.08;letter-spacing:-2.6px;margin-bottom:18px}\n.lead{max-width:570px;font-size:17px;line-height:1.6}\n.status{flex:none;border-top:2px solid var(--accent);padding-top:10px;margin-top:7px;min-width:176px}\n.eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}\n.status p:last-child{font-size:13px;margin-top:4px}\n.layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;border-top:1px solid var(--line);padding-top:25px}\n.form-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:23px}\nh2{font-size:17px;font-weight:600}\n.number{color:var(--accent);font-size:12px;margin-right:9px;font-weight:normal}\n.count{font-size:12px;color:var(--muted);white-space:nowrap}\n.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}\n.field{min-width:0}\nlabel{display:block;font-size:13px;font-weight:600;margin-bottom:7px}\ninput,textarea{display:block;width:100%;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);padding:11px 12px}\ninput{height:45px}\ntextarea{min-height:150px;resize:vertical}\ninput:hover,textarea:hover{border-color:var(--muted)}\n.message{margin-top:21px}\n.hint{font-size:12px;color:var(--muted);margin-top:7px}\n.send-row{display:flex;align-items:center;gap:18px;margin-top:24px}\nbutton{border:1px solid var(--accent);border-radius:0;background:var(--accent);color:var(--paper);padding:13px 22px;min-height:48px;font-weight:600;cursor:pointer}\nbutton:hover{background:var(--ink);border-color:var(--ink)}\nbutton span{margin-left:18px}\n.send-note{font-size:12px;color:var(--muted);max-width:170px}\naside{border-left:1px solid var(--line);padding-left:36px}\n.contact-block p{margin-top:10px;color:var(--muted);font-size:14px;max-width:270px}\n.email{display:inline-block;font-family:Georgia,'Times New Roman',serif;font-size:25px;letter-spacing:-.5px;margin-top:14px;overflow-wrap:anywhere}\n.hours{margin-top:28px;padding-top:21px;border-top:1px solid var(--line)}\n.hours h3,.next h3{font-size:12px;font-weight:600;margin:0 0 8px}\ndl{margin:0;font-size:14px}\ndt,dd{margin:0}\ndd{color:var(--muted);margin-top:3px}\n.next{margin-top:29px;padding-top:21px;border-top:1px solid var(--line)}\n.next h3{font-size:15px}\n.next p{font-size:14px;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0 25px;font-size:11px;color:var(--muted)}\n@media(max-width:700px){\n.wrap{width:calc(100% - 40px)}\nheader{padding:19px 0;gap:18px}\n.wordmark{font-size:30px}\n.header-note{font-size:11px;max-width:145px;text-align:right}\nmain{padding:25px 0 28px}\n.intro{display:block;margin-bottom:22px}\nh1{font-size:43px;letter-spacing:-1.8px;margin-bottom:12px}\n.lead{font-size:14px;line-height:1.5}\n.status{display:flex;align-items:baseline;gap:12px;min-width:0;border:0;padding:0;margin-top:15px}\n.status p:last-child{margin:0;font-size:12px}\n.eyebrow{font-size:10px;letter-spacing:1px}\n.layout{display:block;padding-top:18px}\n.form-heading{margin-bottom:16px}\nh2{font-size:15px}\n.count{font-size:11px}\n.fields{grid-template-columns:1fr;gap:13px}\nlabel{margin-bottom:5px}\ninput{height:41px}\n.message{margin-top:13px}\ntextarea{min-height:104px}\n.send-row{margin-top:17px;gap:14px}\nbutton{padding:11px 16px;white-space:nowrap;min-height:44px;font-size:14px}\nbutton span{margin-left:10px}\n.send-note{font-size:11px}\naside{border-left:0;border-top:1px solid var(--line);padding:20px 0 0;margin-top:24px}\n.contact-block p{margin-top:6px;max-width:none;font-size:13px}\n.email{font-size:23px;margin-top:8px}\n.hours{margin-top:17px;padding-top:15px}\ndl{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}\ndd{margin:0}\n.next{margin-top:17px;padding-top:15px}\n.next p{font-size:13px}\nfooter{font-size:10px;padding:16px 0;flex-wrap:wrap;gap:5px}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header>\n<div class=\"wordmark\" aria-label=\"Cedar\">cedar<span>.</span></div>\n<p class=\"header-note\">Design for independent bike shops</p>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<h1 id=\"page-title\">Contact Cedar</h1>\n<p class=\"lead\">A fresh identity, a better website, or a new chapter for your bike shop. Tell our small creative studio what you have in mind.</p>\n</div>\n<div class=\"status\">\n<p class=\"eyebrow\">Studio status</p>\n<p>Enquiries open</p>\n</div>\n</section>\n<div class=\"layout\">\n<section aria-labelledby=\"enquiry-title\">\n<div class=\"form-heading\">\n<h2 id=\"enquiry-title\"><span class=\"number\">01</span>Your enquiry</h2>\n<p class=\"count\">3 fields · all required</p>\n</div>\n<form>\n<div class=\"fields\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required>\n</div>\n</div>\n<div class=\"field message\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" aria-describedby=\"message-hint\" required></textarea>\n<p class=\"hint\" id=\"message-hint\">Include your shop’s name, what you need, and any timing you have in mind.</p>\n</div>\n<div class=\"send-row\">\n<button type=\"button\">Send message <span aria-hidden=\"true\">↗</span></button>\n<p class=\"send-note\">No commitment.<br>Just a conversation.</p>\n</div>\n</form>\n</section>\n<aside aria-label=\"Other ways to get in touch\">\n<section class=\"contact-block\" aria-labelledby=\"email-title\">\n<h2 id=\"email-title\">Prefer email?</h2>\n<p>Between customers or closing up the shop? Drop us a line whenever suits you.</p>\n<a class=\"email\" href=\"mailto:hello@cedar.studio\">hello@cedar.studio</a>\n</section>\n<section class=\"hours\" aria-labelledby=\"hours-title\">\n<h3 id=\"hours-title\">Studio hours</h3>\n<dl>\n<dt>Monday–Friday</dt>\n<dd>9:00–17:00 · UK time</dd>\n</dl>\n</section>\n<section class=\"next\" aria-labelledby=\"next-title\">\n<h3 id=\"next-title\"><span class=\"number\">02</span>What happens next</h3>\n<p>We aim to reply within two studio days. We’ll ask a few questions, then arrange a short chat to see how we can help.</p>\n</section>\n</aside>\n</div>\n</main>\n<footer>\n<p>Cedar · Independent creative studio</p>\n<p>Brand identity / Websites / Print</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-contact-03","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Dune, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Contact Dune\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Dune\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Dune — Creative studio for bike shops</title>\n<style>\n:root{--paper:#f8f7f3;--ink:#29262a;--muted:#6b666b;--plum:#512e48;--line:#dcd8d5;--panel:#eeece7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\na{color:var(--plum);text-underline-offset:4px}\na:hover{text-decoration-thickness:2px}\nbutton,input,textarea{font:inherit}\n.wrap{width:min(1080px,calc(100% - 80px));margin:auto}\n.site-header{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--line)}\n.identity{display:flex;align-items:center;gap:20px}\n.wordmark{font-family:Georgia,\"Times New Roman\",serif;font-size:35px;line-height:1;letter-spacing:-2px;color:var(--plum);font-weight:bold}\n.studio-label{border-left:1px solid var(--line);padding-left:20px;font-size:12px;color:var(--muted)}\n.disciplines{font-size:12px;letter-spacing:.04em;color:var(--muted)}\nmain{padding:44px 0 50px}\n.eyebrow{margin:0 0 12px;color:var(--plum);font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:70px;font-weight:400;letter-spacing:-2.8px;line-height:1.08;margin:0 0 20px}\n.intro{max-width:610px;margin:0;color:var(--muted);font-size:17px;line-height:1.6}\n.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:76px;margin-top:38px}\n.form-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}\nh2{font-size:17px;line-height:1.4;margin:0;font-weight:650}\n.required{font-size:12px;color:var(--muted)}\n.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}\n.field{min-width:0}\nlabel{display:block;font-size:13px;font-weight:600;margin-bottom:7px}\ninput,textarea{display:block;width:100%;min-width:0;color:var(--ink);background:#fff;border:1px solid #c9c3c7;border-radius:3px;padding:11px 13px}\ninput{height:46px}\ntextarea{min-height:154px;resize:vertical;line-height:1.5}\ninput::placeholder,textarea::placeholder{color:#827c82;opacity:1}\ninput:focus,textarea:focus{outline:2px solid var(--plum);outline-offset:2px;border-color:var(--plum)}\n.message-field{margin-top:21px}\n.hint{margin:8px 0 22px;font-size:12px;color:var(--muted)}\n.submit-row{display:flex;align-items:center;gap:20px}\nbutton{border:1px solid var(--plum);border-radius:3px;background:var(--plum);color:#fff;font-size:14px;font-weight:600;min-height:46px;padding:11px 21px;cursor:pointer}\nbutton:hover{background:#3f2338}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--plum);outline-offset:4px}\n.privacy{font-size:12px;color:var(--muted);max-width:195px;margin:0}\n.contact-panel{background:var(--panel);border-top:3px solid var(--plum);padding:24px}\n.email-link{display:inline-block;font-family:Georgia,\"Times New Roman\",serif;font-size:23px;margin-top:8px;overflow-wrap:anywhere}\n.panel-note{font-size:13px;color:var(--muted);margin:8px 0 24px}\ntable{width:100%;border-collapse:collapse;font-size:13px}\ncaption{text-align:left;font-size:12px;font-weight:650;margin-bottom:9px;color:var(--ink)}\nth,td{padding:5px 0;font-weight:400;text-align:left}\ntd{text-align:right;font-variant-numeric:tabular-nums}\n.timezone{margin:8px 0 0;font-size:11px;color:var(--muted)}\n.next{border-top:1px solid #d3cfcb;margin-top:22px;padding-top:19px}\nh3{font-size:12px;font-weight:650;margin:0 0 10px}\n.process{display:block;width:100%;height:42px;color:var(--plum)}\n.process-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:3px}\n.next p{font-size:12px;color:var(--muted);margin:13px 0 0;line-height:1.6}\n.site-footer{border-top:1px solid var(--line);padding:20px 0 26px;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px}\n@media(max-width:760px){\n.wrap{width:calc(100% - 40px)}\n.site-header{padding:20px 0}\n.identity{gap:14px}\n.studio-label{padding-left:14px}\n.disciplines{display:none}\nmain{padding:28px 0 32px}\n.eyebrow{font-size:10px;letter-spacing:.08em;margin-bottom:11px}\nh1{font-size:46px;letter-spacing:-1.8px;margin-bottom:14px}\n.intro{font-size:14px;line-height:1.6}\n.contact-grid{grid-template-columns:1fr;gap:30px;margin-top:26px}\n.form-heading{margin-bottom:16px}\nh2{font-size:16px}\n.fields{grid-template-columns:1fr;gap:15px}\n.message-field{margin-top:15px}\ntextarea{min-height:115px}\n.hint{margin-bottom:17px}\n.submit-row{gap:14px}\nbutton{padding:11px 16px;flex-shrink:0}\n.privacy{font-size:11px;line-height:1.5}\n.contact-panel{padding:21px}\n.panel-note{margin-bottom:20px}\n.site-footer{font-size:10px}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header class=\"site-header\">\n<div class=\"identity\">\n<span class=\"wordmark\" aria-label=\"Dune\">dune.</span>\n<span class=\"studio-label\">Independent<br>creative studio</span>\n</div>\n<span class=\"disciplines\">Branding · Websites · Print</span>\n</header>\n\n<main>\n<p class=\"eyebrow\">For independent bike shops</p>\n<h1>Contact Dune</h1>\n<p class=\"intro\">Good work starts with a conversation. Tell us about your bike shop and what you need, from a clearer website to a fresh shopfront identity.</p>\n\n<div class=\"contact-grid\">\n<section aria-labelledby=\"form-title\">\n<div class=\"form-heading\">\n<h2 id=\"form-title\">Start a conversation</h2>\n<span class=\"required\">All fields required</span>\n</div>\n<form>\n<div class=\"fields\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"Sam Taylor\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"sam@yourshop.co.uk\" required>\n</div>\n</div>\n<div class=\"field message-field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"A little about your shop and what you have in mind…\" aria-describedby=\"message-hint\" required></textarea>\n<p class=\"hint\" id=\"message-hint\">Your plans, rough timing and a link to your shop are a useful start.</p>\n</div>\n<div class=\"submit-row\">\n<button type=\"button\">Send message</button>\n<p class=\"privacy\">We’ll only use your details to reply to your enquiry.</p>\n</div>\n</form>\n</section>\n\n<aside class=\"contact-panel\" aria-labelledby=\"email-title\">\n<h2 id=\"email-title\">Prefer email?</h2>\n<a class=\"email-link\" href=\"mailto:hello@dune.studio\">hello@dune.studio</a>\n<p class=\"panel-note\">For new projects, quick questions and ideas that aren’t quite a brief yet.</p>\n\n<table>\n<caption>Studio hours</caption>\n<tbody>\n<tr><th scope=\"row\">Monday–Thursday</th><td>09:00–17:00</td></tr>\n<tr><th scope=\"row\">Friday</th><td>09:00–13:00</td></tr>\n</tbody>\n</table>\n<p class=\"timezone\">UK time · Closed weekends</p>\n\n<div class=\"next\">\n<h3>What happens next</h3>\n<svg class=\"process\" viewBox=\"0 0 280 42\" role=\"img\" aria-labelledby=\"process-title\">\n<title id=\"process-title\">Your note comes first, followed by a reply from the studio.</title>\n<path d=\"M38 21H241M235 16l6 5-6 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n<circle cx=\"20\" cy=\"21\" r=\"17\" fill=\"none\" stroke=\"currentColor\"/>\n<circle cx=\"260\" cy=\"21\" r=\"17\" fill=\"none\" stroke=\"currentColor\"/>\n<text x=\"20\" y=\"26\" text-anchor=\"middle\" fill=\"currentColor\" font-family=\"system-ui, sans-serif\" font-size=\"13\">1</text>\n<text x=\"260\" y=\"26\" text-anchor=\"middle\" fill=\"currentColor\" font-family=\"system-ui, sans-serif\" font-size=\"13\">2</text>\n</svg>\n<div class=\"process-labels\"><span>Your note</span><span>Our reply</span></div>\n<p>Expect a reply within two working days. We’ll suggest a short call or a few questions to get things moving.</p>\n</div>\n</aside>\n</div>\n</main>\n\n<footer class=\"site-footer\">\n<span>© Dune · Small studio, thoughtful work.</span>\n<span>Made for the local bike shop.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-contact-04","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Elm, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: calm and spacious; use forest green as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Contact Elm\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Elm\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Elm — Creative studio</title>\n<style>\n:root{color-scheme:light;--paper:#f6f7f2;--ink:#263a30;--muted:#626e65;--green:#285440;--line:#d6ddd3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.6}\na{color:var(--green);text-underline-offset:4px}\na:hover{text-decoration-thickness:2px}\n.shell{max-width:1104px;margin:auto;padding:0 40px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;border-bottom:1px solid var(--line)}\n.wordmark{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:35px;line-height:1;letter-spacing:-1.5px}\n.wordmark svg{width:25px;height:31px;color:var(--green)}\n.tagline{font-size:13px;color:var(--muted)}\nmain{padding:52px 0 64px}\n.eyebrow{margin:0 0 12px;color:var(--green);font-size:11px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:56px;line-height:1.12;letter-spacing:-1.8px}\n.intro{max-width:560px;margin:18px 0 0;color:var(--muted);font-size:17px;line-height:1.65}\n.contact-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:52px;margin-top:38px}\nform{min-width:0}\n.details{display:grid;grid-template-columns:1fr 1fr;gap:20px}\n.field{min-width:0}\nlabel{display:block;margin-bottom:8px;font-size:14px;font-weight:600}\ninput,textarea{display:block;width:100%;min-width:0;border:1px solid #b8c4b9;border-radius:3px;background:#fff;color:var(--ink);font:inherit;padding:11px 13px}\ninput{height:48px}\ntextarea{min-height:144px;resize:vertical;line-height:1.5}\ninput:focus,textarea:focus{outline:2px solid var(--green);outline-offset:2px}\n.message-field{margin-top:23px}\n.help{display:block;margin:-3px 0 11px;color:var(--muted);font-size:13px;line-height:1.55;max-width:470px}\n.form-bottom{display:flex;align-items:center;gap:20px;margin-top:22px}\nbutton{flex-shrink:0;min-height:48px;padding:12px 22px;border:1px solid var(--green);border-radius:3px;background:var(--green);color:white;font:inherit;font-size:14px;font-weight:600;cursor:pointer}\nbutton:hover{background:#1c4130}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:4px}\n.reply-note{margin:0;max-width:205px;color:var(--muted);font-size:12px;line-height:1.6}\naside{min-width:0;border-left:1px solid var(--line);padding-left:36px}\nh2{margin:0 0 9px;font-family:Georgia,\"Times New Roman\",serif;font-size:25px;line-height:1.25;font-weight:400;letter-spacing:-.4px}\n.aside-intro{margin:0;color:var(--muted);font-size:14px;line-height:1.65}\n.contact-list{margin:23px 0 0}\n.contact-list>div{padding:19px 0;border-top:1px solid var(--line)}\ndt{margin:0 0 8px;font-size:12px;font-weight:600;line-height:1.6}\ndd{margin:0}\n.email{display:inline-block;min-height:36px;max-width:100%;padding:2px 0;overflow-wrap:anywhere;font-size:17px}\n.hours{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 14px;font-size:13px}\n.hours span:nth-child(even){text-align:right}\n.timezone{margin:9px 0 0;color:var(--muted);font-size:12px}\n.studio-note{margin:0;padding-top:17px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.65}\nfooter{display:flex;justify-content:space-between;gap:16px;padding:20px 0 27px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}\n@media(max-width:700px){\n.shell{padding:0 24px}\nheader{padding:20px 0;gap:16px}\n.wordmark{font-size:31px}\n.tagline{max-width:145px;text-align:right;font-size:11px;line-height:1.5}\nmain{padding:30px 0 36px}\n.eyebrow{font-size:10px;letter-spacing:1.4px;margin-bottom:10px}\nh1{font-size:43px;letter-spacing:-1.3px}\n.intro{font-size:15px;line-height:1.6;margin-top:13px}\n.contact-layout{grid-template-columns:1fr;gap:33px;margin-top:25px}\n.details{grid-template-columns:1fr;gap:15px}\nlabel{margin-bottom:6px}\n.message-field{margin-top:17px}\ntextarea{min-height:114px}\n.help{font-size:12px;margin-bottom:10px}\n.form-bottom{align-items:flex-start;gap:14px;margin-top:18px}\nbutton{padding:12px 18px}\n.reply-note{padding-top:3px;font-size:11px}\naside{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}\nh2{font-size:24px}\n.contact-list{margin-top:19px}\n.contact-list>div{padding:16px 0}\nfooter{flex-direction:column;gap:3px;padding:18px 0 24px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header>\n<div class=\"wordmark\" aria-label=\"Elm creative studio\">\n<svg viewBox=\"0 0 25 31\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M12 29V14M12 20C3 19 1 12 3 5c8 0 12 5 9 15ZM13 16C11 8 15 3 23 2c1 8-3 13-10 14Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\nelm\n</div>\n<span class=\"tagline\">Design for the common good.</span>\n</header>\n<main id=\"contact\">\n<p class=\"eyebrow\">Small studio, shared values</p>\n<h1 id=\"contact-title\">Contact Elm</h1>\n<p class=\"intro\">We help community food co-ops tell their stories and welcome more neighbours. Tell us what you’re working on.</p>\n<div class=\"contact-layout\">\n<form aria-labelledby=\"contact-title\">\n<div class=\"details\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required>\n</div>\n</div>\n<div class=\"field message-field\">\n<label for=\"message\">Message</label>\n<span class=\"help\" id=\"message-help\">A little about your co-op, what you have in mind, and any dates you’re working towards.</span>\n<textarea id=\"message\" name=\"message\" aria-describedby=\"message-help\" required></textarea>\n</div>\n<div class=\"form-bottom\">\n<button type=\"button\">Send message</button>\n<p class=\"reply-note\">We usually reply within two working days.</p>\n</div>\n</form>\n<aside aria-labelledby=\"direct-title\">\n<h2 id=\"direct-title\">A more direct hello</h2>\n<p class=\"aside-intro\">Prefer email? A rough idea is a perfectly good place to start.</p>\n<dl class=\"contact-list\">\n<div>\n<dt>Co-op branding, member communications and neighbourhood food project enquiries</dt>\n<dd><a class=\"email\" href=\"mailto:hello@elm.studio\">hello@elm.studio</a></dd>\n</div>\n<div>\n<dt>Studio hours</dt>\n<dd>\n<div class=\"hours\">\n<span>Monday–Thursday</span><span>9am–4pm</span>\n<span>Friday</span><span>By appointment</span>\n</div>\n<p class=\"timezone\">UK time · Closed on public holidays</p>\n</dd>\n</div>\n</dl>\n<p class=\"studio-note\">A small, independent studio for the people making good food more accessible.</p>\n</aside>\n</div>\n</main>\n<footer>\n<span>Elm · Independent creative studio</span>\n<span>Rooted in community.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-contact-05","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Fjord, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: compact but readable; use slate blue as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Contact Fjord\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Fjord\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Fjord</title>\n<style>\n:root{color-scheme:light;--paper:#f6f4ee;--ink:#253744;--muted:#626b6d;--accent:#485f7b;--line:#d7d9d2}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\n.wrap{max-width:1080px;margin:auto;padding:0 36px}\nheader{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:25px;padding-bottom:23px;border-bottom:1px solid var(--line)}\n.wordmark{font-size:31px;font-weight:750;letter-spacing:-1.6px;line-height:1;color:var(--ink);text-decoration:none}\n.header-note{font-size:13px;color:var(--muted)}\nmain{padding-top:48px}\n.eyebrow{margin:0 0 10px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh1{font-size:50px;line-height:1.12;letter-spacing:-2px;margin:0 0 16px;font-weight:650}\n.intro{max-width:580px;margin:0;color:var(--muted);font-size:17px;line-height:1.6}\n.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:48px;border-top:1px solid var(--line);margin-top:32px;padding-top:28px}\nh2{font-size:19px;line-height:1.35;letter-spacing:-.3px;margin:0;font-weight:650}\n.form-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px}\n.form-heading span{font-size:12px;color:var(--muted);white-space:nowrap}\n.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.field{min-width:0}\n.field.message{grid-column:1/-1}\nlabel{display:block;font-size:13px;font-weight:650;margin-bottom:7px}\ninput,textarea{display:block;width:100%;border:1px solid #b8c0c1;border-radius:4px;background:#fffefa;color:var(--ink);font:inherit;padding:11px 12px;outline-offset:3px}\ninput{height:45px}\ntextarea{height:160px;min-height:110px;resize:vertical}\n::placeholder{color:#798185;opacity:1;font-size:14px}\ninput:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent)}\n.action{display:flex;align-items:center;gap:20px;margin-top:20px}\nbutton{flex-shrink:0;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:4px;padding:12px 20px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;min-height:46px}\nbutton:hover{background:var(--accent)}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\n.action p{font-size:12px;line-height:1.5;max-width:225px;margin:0;color:var(--muted)}\naside{border-left:1px solid var(--line);padding-left:28px}\naside h2{margin-bottom:13px}\naside p{margin:0;color:var(--muted);font-size:14px}\n.email{display:inline-block;color:var(--accent);font-size:17px;font-weight:600;text-decoration-thickness:1px;text-underline-offset:4px;margin:0 0 9px;overflow-wrap:anywhere}\n.hours{margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}\nh3{font-size:13px;font-weight:700;margin:0 0 8px}\n.hours p{line-height:1.7}\n.location{margin-top:12px!important;font-size:12px!important}\n.update{margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}\n.update-label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--accent);font-weight:650;margin-bottom:7px}\n.dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}\n.update p{font-size:13px}\nfooter{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:18px 0 24px;margin-top:48px;color:var(--muted);font-size:12px}\n@media(max-width:700px){\n.wrap{padding:0 22px}\nheader{padding-top:20px;padding-bottom:18px;gap:16px}\n.wordmark{font-size:28px}\n.header-note{font-size:11px;text-align:right;max-width:155px;line-height:1.4}\nmain{padding-top:27px}\n.eyebrow{font-size:10px;margin-bottom:8px}\nh1{font-size:38px;letter-spacing:-1.4px;margin-bottom:12px}\n.intro{font-size:14px;line-height:1.55}\n.contact-layout{grid-template-columns:1fr;gap:28px;margin-top:23px;padding-top:20px}\n.form-heading{margin-bottom:16px;gap:8px}\nh2{font-size:17px}\n.form-heading span{font-size:10px}\n.fields{grid-template-columns:1fr;gap:13px}\nlabel{margin-bottom:5px;font-size:12px}\ninput{height:42px}\ntextarea{height:119px}\n.action{gap:13px;margin-top:16px;align-items:center}\nbutton{padding:11px 16px;min-height:44px}\n.action p{font-size:11px}\naside{border-left:0;border-top:1px solid var(--line);padding:23px 0 0}\n.hours{margin-top:18px;padding-top:17px}\n.update{margin-top:18px;padding-top:17px}\nfooter{margin-top:30px;font-size:11px;flex-wrap:wrap}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header>\n<a class=\"wordmark\" href=\"#\" aria-label=\"Fjord home\">Fjord<span aria-hidden=\"true\">.</span></a>\n<span class=\"header-note\">A small creative studio<br>for community food co-ops</span>\n</header>\n<main>\n<section aria-labelledby=\"page-title\">\n<p class=\"eyebrow\">Good food. Shared purpose.</p>\n<h1 id=\"page-title\">Contact Fjord</h1>\n<p class=\"intro\">From a new member campaign to a clearer co-op website, we help good ideas take root. Tell us what your community needs.</p>\n</section>\n<div class=\"contact-layout\">\n<section aria-labelledby=\"form-title\">\n<div class=\"form-heading\">\n<h2 id=\"form-title\">What are you planning?</h2>\n<span>All fields required</span>\n</div>\n<form>\n<div class=\"fields\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"Your name\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourcoop.org\" required>\n</div>\n<div class=\"field message\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"A little about your co-op, your project, and any timing you have in mind…\" required></textarea>\n</div>\n</div>\n<div class=\"action\">\n<button type=\"button\">Send message</button>\n<p>No polished brief needed.<br>A few lines is a great start.</p>\n</div>\n</form>\n</section>\n<aside aria-labelledby=\"direct-title\">\n<h2 id=\"direct-title\">Prefer a direct hello?</h2>\n<a class=\"email\" href=\"mailto:hello@fjord.studio\">hello@fjord.studio</a>\n<p>We usually reply within two studio days.</p>\n<section class=\"hours\" aria-labelledby=\"hours-title\">\n<h3 id=\"hours-title\">Studio hours</h3>\n<p>Monday–Thursday<br>9am–5pm · Central time</p>\n<p class=\"location\">Based in Minneapolis.<br>Working with co-ops everywhere.</p>\n</section>\n<section class=\"update\" aria-label=\"Recent studio update\">\n<div class=\"update-label\"><span class=\"dot\" aria-hidden=\"true\"></span>Studio update · <time datetime=\"2026-05-12\">12 May</time></div>\n<p>Now welcoming late-summer projects for member drives and harvest-season campaigns.</p>\n</section>\n</aside>\n</div>\n</main>\n<footer>\n<span>Fjord · Independent creative studio</span>\n<span>Rooted in community. Built together.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-contact-06","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Grove, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Contact Grove\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Grove\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Grove</title>\n<style>\n:root{color-scheme:light;--ink:#26312e;--muted:#606c66;--accent:#a74732;--line:#ccd3cf;--surface:#edf1ef;--paper:#f8f9f7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}\na{color:inherit;text-underline-offset:4px}\nbutton,input,textarea{font:inherit}\n.shell{width:min(1080px,calc(100% - 80px));margin:auto}\n.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:90px;border-bottom:1px solid var(--line)}\n.wordmark{font-family:Georgia,serif;font-size:32px;letter-spacing:-1.5px;text-decoration:none;font-weight:bold}\n.wordmark span{color:var(--accent)}\n.studio-description{font-size:12px;color:var(--muted);letter-spacing:.02em}\nmain{padding:54px 0 64px}\n.eyebrow{margin:0 0 12px;color:var(--accent);font-size:11px;font-weight:bold;letter-spacing:.13em;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,serif;font-size:68px;font-weight:normal;line-height:1.08;letter-spacing:-2.5px}\n.intro{max-width:590px;margin:20px 0 38px;color:var(--muted);font-size:17px;line-height:1.6}\n.contact-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:64px;align-items:start}\nform{min-width:0}\n.form-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:17px;margin-bottom:23px}\n.form-topline h2{margin:0;font-size:16px;font-weight:600}\n.form-topline p{margin:0;color:var(--muted);font-size:12px}\n.name-email{display:grid;grid-template-columns:1fr 1fr;gap:20px}\n.field{margin-bottom:22px;min-width:0}\nlabel{display:block;font-size:13px;font-weight:600;margin-bottom:8px}\ninput,textarea{display:block;width:100%;min-width:0;border:1px solid #aebbb3;border-radius:3px;background:#fff;color:var(--ink);padding:12px 13px}\ninput{height:47px}\ntextarea{min-height:152px;resize:vertical}\n::placeholder{color:#77817c;opacity:1}\ninput:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px}\n.helper{margin:8px 0 0;font-size:12px;color:var(--muted)}\n.form-actions{display:flex;align-items:center;gap:22px;margin-top:26px}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:12px 21px;border:1px solid var(--accent);border-radius:3px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer}\nbutton:hover{background:#903c2b;border-color:#903c2b}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\nbutton svg{width:17px;height:17px;flex:none}\n.privacy{max-width:155px;margin:0;font-size:12px;color:var(--muted)}\n.contact-panel{background:var(--surface);padding:26px 28px;border-radius:3px}\nh2{font-size:19px;line-height:1.3;margin:0 0 12px;font-weight:600}\n.contact-panel>p{margin:0 0 19px;font-size:14px;color:var(--muted)}\n.email-link{font-size:19px;text-decoration-color:#9aa69e;overflow-wrap:anywhere}\n.hours{border-top:1px solid var(--line);margin:25px 0 0;padding-top:20px}\n.hours dt{font-size:12px;font-weight:600;margin-bottom:6px}\n.hours dd{margin:0;font-size:14px}\n.hours dd span{display:block;color:var(--muted)}\n.status{display:flex;align-items:center;gap:8px;margin-top:20px;color:var(--muted);font-size:12px}\n.status svg{width:14px;height:14px;flex:none}\n.empty-section{margin-top:27px;padding-top:20px;border-top:1px solid var(--line)}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}\n.section-heading h2{margin:0;font-size:14px}\n.count{font-size:11px;color:var(--muted);white-space:nowrap}\n.empty-section h3{margin:18px 0 6px;font-family:Georgia,serif;font-size:20px;font-weight:normal}\n.empty-section p{margin:0;font-size:13px;color:var(--muted);line-height:1.65}\nfooter{border-top:1px solid var(--line);padding:20px 0 26px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:16px}\n@media(max-width:700px){\n.shell{width:calc(100% - 40px)}\n.site-header{min-height:65px;gap:12px}\n.wordmark{font-size:29px}\n.studio-description{font-size:11px}\nmain{padding:25px 0 35px}\n.eyebrow{font-size:10px;margin-bottom:10px;letter-spacing:.1em}\nh1{font-size:44px;letter-spacing:-1.6px}\n.intro{font-size:14px;line-height:1.55;margin:14px 0 23px}\n.contact-layout{grid-template-columns:1fr;gap:32px}\n.form-topline{padding-top:13px;margin-bottom:18px}\n.name-email{grid-template-columns:1fr;gap:0}\n.field{margin-bottom:16px}\nlabel{margin-bottom:6px}\ninput{height:43px}\ntextarea{min-height:105px}\n.form-actions{margin-top:20px;display:block}\nbutton{width:100%}\n.privacy{max-width:none;text-align:center;margin:10px 0 0;font-size:11px}\n.contact-panel{padding:23px}\n.empty-section{margin-top:23px}\nfooter{display:block}\nfooter span{display:block;margin-top:4px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"site-header\">\n<a class=\"wordmark\" href=\"#contact\" aria-label=\"Grove contact page\">grove<span>.</span></a>\n<span class=\"studio-description\">Independent creative studio</span>\n</header>\n\n<main id=\"contact\">\n<p class=\"eyebrow\">Good food. Shared values. Thoughtful design.</p>\n<h1>Contact Grove</h1>\n<p class=\"intro\">From member campaigns to a fresh co-op identity, we help community food co-ops tell their story. Tell us what you’re planning.</p>\n\n<div class=\"contact-layout\">\n<form aria-labelledby=\"form-heading\">\n<div class=\"form-topline\">\n<h2 id=\"form-heading\">Let’s start a conversation</h2>\n<p>All fields required</p>\n</div>\n<div class=\"name-email\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"Sam Rivera\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"sam@yourcoop.org\" required>\n</div>\n</div>\n<div class=\"field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"What’s happening at your co-op?\" aria-describedby=\"message-help\" required></textarea>\n<p class=\"helper\" id=\"message-help\">A little context is plenty: your goals, timing, or a question.</p>\n</div>\n<div class=\"form-actions\">\n<button type=\"button\">Send message\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M4 12h15M13 6l6 6-6 6\"/></svg>\n</button>\n<p class=\"privacy\">Your details stay with our studio.</p>\n</div>\n</form>\n\n<aside aria-label=\"Other ways to connect\">\n<section class=\"contact-panel\" aria-labelledby=\"alternative-heading\">\n<h2 id=\"alternative-heading\">Prefer email?</h2>\n<p>Reach out directly with a question, a brief, or an idea for your co-op.</p>\n<a class=\"email-link\" href=\"mailto:hello@grove.studio\">hello@grove.studio</a>\n<dl class=\"hours\">\n<dt>Studio hours</dt>\n<dd>Monday–Thursday<span>9am–5pm · Eastern time</span></dd>\n</dl>\n<div class=\"status\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M10 6v4l3 2\"/></svg>\n<span>Usually replies within 2 studio days</span>\n</div>\n</section>\n\n<section class=\"empty-section\" aria-labelledby=\"drop-in-heading\">\n<div class=\"section-heading\">\n<h2 id=\"drop-in-heading\">Community drop-ins</h2>\n<span class=\"count\">0 upcoming</span>\n</div>\n<h3>No sessions scheduled just yet.</h3>\n<p>Our open studio calendar is quiet for now. Email us to arrange a conversation about your co-op instead.</p>\n</section>\n</aside>\n</div>\n</main>\n\n<footer>\n<div>Grove · Creative work rooted in community.</div>\n<span>For the people behind good food.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-contact-07","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Harbor, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: practical and understated; use deep plum as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Contact Harbor\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Harbor\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Harbor</title>\n<style>\n:root{--paper:#faf9f6;--plum:#442d40;--muted:#786975;--line:#ded7dc;--soft:#f1edf0}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--plum);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:16px;line-height:1.55}\na{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}\na:hover{ text-decoration-thickness:2px}\nbutton,input,textarea{font:inherit}\nbutton,a,input,textarea{outline-offset:4px}\n:focus-visible{outline:2px solid var(--plum)}\n.shell{width:min(1080px,calc(100% - 64px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.wordmark{font-size:28px;font-weight:650;letter-spacing:-1.4px;text-decoration:none}\n.header-note{font-size:13px;color:var(--muted);margin:0}\nmain{padding-top:54px;padding-bottom:64px}\n.eyebrow{margin:0 0 10px;font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}\nh1{font-size:48px;line-height:1.12;letter-spacing:-1.8px;font-weight:600;margin:0 0 18px}\n.intro{max-width:565px;margin:0;font-size:18px;line-height:1.55;color:var(--muted)}\n.contact-layout{display:grid;grid-template-columns:minmax(0,650px) minmax(0,280px);gap:80px;margin-top:38px;align-items:start}\n.form-note{margin:0 0 20px;color:var(--muted);font-size:13px}\n.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}\n.field{min-width:0}\n.message-field{margin-top:22px}\nlabel{display:block;font-size:14px;font-weight:600;margin-bottom:8px}\ninput,textarea{display:block;width:100%;min-width:0;padding:11px 13px;color:var(--plum);background:transparent;border:1px solid #baacb6;border-radius:3px}\ninput{height:46px}\ntextarea{height:144px;resize:vertical}\ninput:hover,textarea:hover{border-color:var(--plum)}\n.hint{font-size:13px;color:var(--muted);margin:8px 0 0}\n.actions{display:flex;align-items:center;gap:20px;margin-top:24px}\nbutton{flex-shrink:0;border:1px solid var(--plum);border-radius:3px;background:var(--plum);color:var(--paper);padding:11px 21px;font-weight:600;font-size:14px;min-height:46px;cursor:pointer}\nbutton:hover{background:var(--paper);color:var(--plum)}\n.privacy{margin:0;font-size:12px;color:var(--muted);max-width:220px}\naside{border-left:1px solid var(--line);padding-left:30px}\nh2{margin:0 0 9px;font-size:19px;line-height:1.35;letter-spacing:-.3px;font-weight:600}\n.aside-copy{margin:0 0 15px;font-size:14px;color:var(--muted)}\n.email{font-size:16px;font-weight:550;overflow-wrap:anywhere}\n.reply-note{margin:7px 0 25px;font-size:12px;color:var(--muted)}\nh3{margin:0 0 9px;font-size:13px;font-weight:650}\n.hours{margin:0;font-size:13px}\n.hours div{margin-bottom:10px}\n.hours dt{font-weight:500}\n.hours dd{margin:0;color:var(--muted)}\n.timezone{font-size:12px;color:var(--muted);margin:10px 0 0}\nfigure{margin:25px 0 0;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:13px;align-items:flex-start}\nfigure svg{width:86px;height:70px;flex:none;color:var(--plum)}\nfigcaption{font-size:12px;line-height:1.5;color:var(--muted)}\nfigcaption strong{display:block;color:var(--plum);font-size:12px;margin-bottom:4px;font-weight:600}\nfooter{border-top:1px solid var(--line)}\n.footer-inner{display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-size:12px;color:var(--muted)}\n.footer-inner p{margin:0}\n@media(max-width:760px){\n.shell{width:calc(100% - 40px)}\n.header-inner{min-height:70px;gap:20px}\n.wordmark{font-size:26px}\n.header-note{max-width:145px;text-align:right;font-size:12px;line-height:1.4}\nmain{padding-top:30px;padding-bottom:36px}\n.eyebrow{font-size:11px;margin-bottom:9px}\nh1{font-size:36px;letter-spacing:-1.2px;margin-bottom:13px}\n.intro{font-size:16px;line-height:1.5}\n.contact-layout{grid-template-columns:1fr;gap:34px;margin-top:25px}\n.form-note{margin-bottom:15px;font-size:12px}\n.fields{grid-template-columns:1fr;gap:16px}\n.message-field{margin-top:16px}\nlabel{margin-bottom:6px}\ntextarea{height:112px}\n.actions{margin-top:18px;align-items:flex-start;flex-direction:column;gap:10px}\nbutton{width:100%}\n.privacy{max-width:none}\naside{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}\n.hours{display:grid;grid-template-columns:1fr 1fr;gap:15px}\n.hours div{margin:0}\n.reply-note{margin-bottom:20px}\nfigure{max-width:350px;margin-top:20px;padding-top:18px}\n.footer-inner{flex-direction:column;gap:5px;padding:18px 0}\n}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"shell header-inner\">\n    <a class=\"wordmark\" href=\"#contact\" aria-label=\"Harbor contact\">harbor</a>\n    <p class=\"header-note\">Independent design for community food.</p>\n  </div>\n</header>\n\n<main class=\"shell\" id=\"contact\">\n  <p class=\"eyebrow\">Let’s make something useful</p>\n  <h1>Contact Harbor</h1>\n  <p class=\"intro\">New shop signage, a member newsletter, or a fresh look for your co-op? Tell us what you have in mind.</p>\n\n  <div class=\"contact-layout\">\n    <form aria-label=\"Contact Harbor enquiry\">\n      <p class=\"form-note\">A few details are plenty to start. All fields are required.</p>\n      <div class=\"fields\">\n        <div class=\"field\">\n          <label for=\"full-name\">Full name</label>\n          <input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" required>\n        </div>\n        <div class=\"field\">\n          <label for=\"email\">Email address</label>\n          <input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required>\n        </div>\n      </div>\n      <div class=\"field message-field\">\n        <label for=\"message\">Message</label>\n        <textarea id=\"message\" name=\"message\" aria-describedby=\"message-hint\" required></textarea>\n        <p class=\"hint\" id=\"message-hint\">A little about your co-op, what you need, and when you need it.</p>\n      </div>\n      <div class=\"actions\">\n        <button type=\"button\">Send message</button>\n        <p class=\"privacy\">Please email the studio while this form is in preview.</p>\n      </div>\n    </form>\n\n    <aside aria-labelledby=\"studio-contact\">\n      <h2 id=\"studio-contact\">Prefer email?</h2>\n      <p class=\"aside-copy\">Project notes, early ideas, and questions are all welcome.</p>\n      <a class=\"email\" href=\"mailto:hello@harbor.studio\">hello@harbor.studio</a>\n      <p class=\"reply-note\">We usually reply within two working days.</p>\n\n      <h3>Studio hours</h3>\n      <dl class=\"hours\">\n        <div>\n          <dt>Monday–Thursday</dt>\n          <dd>9 am–5 pm</dd>\n        </div>\n        <div>\n          <dt>Friday</dt>\n          <dd>9 am–1 pm</dd>\n        </div>\n      </dl>\n      <p class=\"timezone\">Eastern time · Closed on weekends</p>\n\n      <figure>\n        <svg viewBox=\"0 0 86 70\" role=\"img\" aria-labelledby=\"shelf-title\">\n          <title id=\"shelf-title\">Example co-op shelf sign with local origin, product name, and price per pound</title>\n          <path d=\"M1 61h84M10 61v5m66-5v5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n          <rect x=\"6\" y=\"7\" width=\"74\" height=\"48\" rx=\"2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n          <text x=\"13\" y=\"20\" fill=\"currentColor\" font-family=\"system-ui, sans-serif\" font-size=\"6\" letter-spacing=\"1\">GROWN LOCALLY</text>\n          <text x=\"13\" y=\"34\" fill=\"currentColor\" font-family=\"system-ui, sans-serif\" font-size=\"11\" font-weight=\"600\">Apples</text>\n          <text x=\"13\" y=\"46\" fill=\"currentColor\" font-family=\"system-ui, sans-serif\" font-size=\"8\">$2.50 / lb</text>\n        </svg>\n        <figcaption><strong>Clear at a glance.</strong>From shelf signs to member guides, we design for everyday co-op life.</figcaption>\n      </figure>\n    </aside>\n  </div>\n</main>\n\n<footer>\n  <div class=\"shell footer-inner\">\n    <p>© 2026 Harbor · A small creative studio</p>\n    <p>Good design. Shared purpose.</p>\n  </div>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-contact-08","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Isle, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: calm and spacious; use forest green as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Contact Isle\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Isle\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Isle — Architecture &amp; Interiors</title>\n<style>\n:root{--paper:#f7f7f2;--ink:#26352d;--green:#284d3c;--muted:#626c64;--line:#d7dcd3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\n.shell{width:min(1080px,calc(100% - 96px));margin:auto}\n.masthead{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}\n.wordmark{font-family:Georgia,serif;font-size:38px;letter-spacing:-2px;color:var(--green)}\n.descriptor{margin:0;font-size:12px;line-height:1.5;text-align:right}\nmain{padding-top:64px}\n.intro{padding-bottom:36px;border-bottom:1px solid var(--line)}\n.eyebrow{margin:0 0 17px;font-size:11px;letter-spacing:1.7px;text-transform:uppercase;color:var(--green)}\nh1{margin:0 0 18px;font-family:Georgia,serif;font-weight:400;font-size:66px;line-height:1.05;letter-spacing:-2px}\n.lead{max-width:550px;margin:0;color:var(--muted);font-size:16px;line-height:1.7}\n.contact-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:64px;padding-top:36px}\nform{min-width:0}\n.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}\n.field{min-width:0}\nlabel{display:block;margin-bottom:10px;font-size:13px;font-weight:600}\ninput,textarea{display:block;width:100%;border:1px solid #bac5ba;border-radius:2px;background:#fff;color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif;padding:11px 13px}\ninput{height:48px}\ntextarea{min-height:158px;resize:vertical}\ntextarea::placeholder{color:#7a827a;font-size:14px}\n.message-field{margin-top:25px}\n.actions{display:flex;align-items:center;gap:24px;margin-top:24px}\nbutton{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;padding:13px 19px;border:1px solid var(--green);border-radius:2px;background:var(--green);color:#fff;font:600 14px Arial,Helvetica,sans-serif;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#1c3c2d}\nbutton svg{width:18px;height:18px;flex:none}\n.response-note{max-width:190px;margin:0;color:var(--muted);font-size:12px;line-height:1.6}\ninput:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:4px}\naside{border-left:1px solid var(--line);padding-left:32px}\nh2{font-family:Georgia,serif;font-size:27px;font-weight:400;line-height:1.2;margin:0 0 22px;letter-spacing:-.5px}\n.detail-label{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.65;font-weight:400;max-width:255px}\n.email{display:inline-block;max-width:100%;color:var(--green);font-size:18px;text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere}\n.hours{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}\nh3{margin:0 0 12px;font-size:12px;font-weight:600}\ndl{margin:0;font-size:13px;line-height:1.6}\n.hours-row{display:flex;justify-content:space-between;gap:12px}\ndt,dd{margin:0}\ndd{color:var(--muted)}\n.location{margin:20px 0 0;font-size:12px;line-height:1.65;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:64px;padding:20px 0 28px;color:var(--muted);font-size:11px;line-height:1.5}\nfooter p{margin:0}\n@media(max-width:700px){\n.shell{width:calc(100% - 40px)}\n.masthead{min-height:72px}\n.wordmark{font-size:32px}\n.descriptor{font-size:11px}\nmain{padding-top:30px}\n.intro{padding-bottom:24px}\n.eyebrow{font-size:10px;margin-bottom:12px}\nh1{font-size:43px;letter-spacing:-1.4px;margin-bottom:12px}\n.lead{font-size:14px;line-height:1.6}\n.contact-layout{grid-template-columns:1fr;gap:28px;padding-top:24px}\n.fields{grid-template-columns:1fr;gap:16px}\nlabel{margin-bottom:7px;font-size:12px}\ninput{height:44px}\n.message-field{margin-top:16px}\ntextarea{min-height:106px}\n.actions{margin-top:18px;gap:16px}\nbutton{gap:16px;padding:12px 15px;font-size:13px}\n.response-note{font-size:11px;line-height:1.5}\naside{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}\nh2{font-size:24px;margin-bottom:16px}\n.detail-label{max-width:290px;margin-bottom:8px}\n.email{font-size:17px}\n.hours{margin-top:22px;padding-top:18px}\n.location{margin-top:14px}\nfooter{margin-top:30px;padding-top:16px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"masthead\">\n<div class=\"wordmark\" aria-label=\"Isle\">Isle</div>\n<p class=\"descriptor\">Independent architecture<br>&amp; interiors</p>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"contact-title\">\n<p class=\"eyebrow\">Every project starts with a conversation</p>\n<h1 id=\"contact-title\">Contact Isle</h1>\n<p class=\"lead\">Tell us about your place and what you have in mind. From a first sketch to a considered brief, we’d love to hear from you.</p>\n</section>\n<div class=\"contact-layout\">\n<form aria-label=\"Contact enquiry\">\n<div class=\"fields\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required>\n</div>\n</div>\n<div class=\"field message-field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"A little about the site, your ambitions and your timeframe.\" required></textarea>\n</div>\n<div class=\"actions\">\n<button type=\"button\">Send message\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M4 12h15M13 6l6 6-6 6\"/></svg>\n</button>\n<p class=\"response-note\">We aim to reply within<br>two working days.</p>\n</div>\n</form>\n<aside aria-labelledby=\"direct-title\">\n<h2 id=\"direct-title\">A direct line</h2>\n<p class=\"detail-label\">For new commissions, creative collaborations and enquiries about an existing architectural project</p>\n<a class=\"email\" href=\"mailto:hello@isle.studio\">hello@isle.studio</a>\n<section class=\"hours\" aria-labelledby=\"hours-title\">\n<h3 id=\"hours-title\">Studio hours</h3>\n<dl>\n<div class=\"hours-row\"><dt>Monday–Friday</dt><dd>09:00–17:30</dd></div>\n<div class=\"hours-row\"><dt>Saturday–Sunday</dt><dd>Closed</dd></div>\n</dl>\n<p class=\"location\">London time · Visits by appointment<br>Based in London, working across the UK.</p>\n</section>\n</aside>\n</div>\n</main>\n<footer>\n<p>Isle — Architecture &amp; interiors</p>\n<p>Places made with care.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-contact-09","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Juniper, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: compact but readable; use slate blue as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Contact Juniper\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Juniper\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Juniper — Architecture & interiors</title>\n<style>\n:root{color-scheme:light;--ink:#26323b;--muted:#626f79;--accent:#526980;--line:#d9dfe3;--paper:#fff;--ground:#f5f6f5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\na{color:var(--accent);text-underline-offset:4px}\na:hover{color:#314960}\n.site-header{border-bottom:1px solid var(--line);background:var(--paper)}\n.header-inner{max-width:1040px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:650;letter-spacing:-.7px}\n.brand svg{width:26px;height:28px;color:var(--accent)}\n.discipline{font-size:12px;color:var(--muted);letter-spacing:.03em}\nmain{max-width:1040px;margin:auto;padding:48px 32px 28px}\n.eyebrow{margin:0 0 8px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}\nh1{margin:0;font-size:42px;line-height:1.15;font-weight:600;letter-spacing:-1.3px}\n.intro{max-width:600px;margin:14px 0 28px;color:var(--muted);font-size:16px}\n.contact-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper)}\nform{padding:28px}\n.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px}\nh2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.2px}\n.small{font-size:12px;color:var(--muted)}\n.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n.field{min-width:0;margin-bottom:20px}\nlabel{display:block;margin-bottom:7px;font-size:13px;font-weight:600}\ninput,textarea{display:block;width:100%;border:1px solid #bbc5cd;border-radius:4px;background:#fff;color:var(--ink);font:inherit;padding:11px 12px}\ninput{min-height:46px}\ntextarea{min-height:154px;resize:vertical}\ninput::placeholder,textarea::placeholder{color:#78838c;opacity:1;font-size:14px}\ninput:focus,textarea:focus{border-color:var(--accent);outline:3px solid #e3eaf0;outline-offset:1px}\n.action-row{display:flex;align-items:center;gap:18px}\nbutton{flex-shrink:0;min-height:46px;padding:11px 20px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fff;font:600 14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\nbutton:hover{background:#425970}\nbutton:focus-visible,a:focus-visible{outline:3px solid #97aabc;outline-offset:4px}\n.action-hint{margin:0;max-width:225px;font-size:12px;line-height:1.45;color:var(--muted)}\naside{padding:28px;background:#f0f3f5;border-left:1px solid var(--line)}\naside h2{margin-bottom:10px}\n.aside-intro{margin:0 0 16px;color:var(--muted);font-size:13px}\n.contact-links{display:grid;gap:5px;margin-bottom:24px}\n.contact-links a{display:inline-flex;align-items:center;min-height:32px;width:fit-content;font-size:15px;font-weight:500}\nh3{margin:0 0 9px;font-size:12px;font-weight:700}\ndl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px}\ndt,dd{margin:0}\ndd{font-variant-numeric:tabular-nums}\n.timezone{margin:9px 0 0;font-size:12px;color:var(--muted)}\n.update{margin-top:23px;padding-top:18px;border-top:1px solid var(--line)}\n.update-label{display:flex;align-items:center;gap:7px;margin:0 0 5px;font-size:11px;color:var(--muted)}\n.dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}\n.update p:last-child{margin:0;font-size:13px}\n.page-footer{display:flex;justify-content:space-between;gap:16px;margin-top:18px;font-size:11px;color:var(--muted)}\n.page-footer p{margin:0}\n@media(max-width:700px){\n.header-inner{padding:17px 22px}\n.brand{font-size:21px}\n.discipline{font-size:11px}\nmain{padding:27px 22px 24px}\nh1{font-size:34px;letter-spacing:-1px}\n.intro{font-size:14px;margin:11px 0 22px}\n.contact-grid{grid-template-columns:1fr}\nform,aside{padding:20px}\n.section-heading{margin-bottom:17px}\nh2{font-size:17px}\n.field-row{grid-template-columns:1fr;gap:0}\n.field{margin-bottom:15px}\ntextarea{min-height:98px}\n.action-row{gap:12px}\nbutton{padding:11px 16px}\n.action-hint{font-size:11px}\naside{border-left:0;border-top:1px solid var(--line)}\n.aside-intro{margin-bottom:8px}\n.contact-links{margin-bottom:16px;gap:0}\n.update{margin-top:16px;padding-top:13px}\n.page-footer{font-size:10px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 26 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 25V8l10-5 10 5v17M3 15l10-5 10 5M13 10v15M3 25h20\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"/></svg>\n<span>Juniper</span>\n</div>\n<span class=\"discipline\">Architecture &amp; interiors</span>\n</div>\n</header>\n<main>\n<header>\n<p class=\"eyebrow\">Start a conversation</p>\n<h1>Contact Juniper</h1>\n<p class=\"intro\">Planning a new home, a careful renovation or a place to work? Tell us what you have in mind.</p>\n</header>\n<div class=\"contact-grid\">\n<form aria-labelledby=\"enquiry-heading\">\n<div class=\"section-heading\">\n<h2 id=\"enquiry-heading\">Project enquiries</h2>\n<span class=\"small\">All fields required</span>\n</div>\n<div class=\"field-row\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"Alex Morgan\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"alex@example.com\" required>\n</div>\n</div>\n<div class=\"field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"A little about your project and what you’d like our help with…\" aria-describedby=\"message-hint\" required></textarea>\n</div>\n<div class=\"action-row\">\n<button type=\"button\">Send message</button>\n<p class=\"action-hint\" id=\"message-hint\">A location and rough timeline are a useful starting point.</p>\n</div>\n</form>\n<aside aria-labelledby=\"direct-heading\">\n<h2 id=\"direct-heading\">Contact the studio directly</h2>\n<p class=\"aside-intro\">For a first conversation or an existing project.</p>\n<div class=\"contact-links\">\n<a href=\"mailto:hello@juniper.studio\">hello@juniper.studio</a>\n<a href=\"tel:+442079460182\">+44 (0)20 7946 0182</a>\n</div>\n<section aria-labelledby=\"hours-heading\">\n<h3 id=\"hours-heading\">Studio hours</h3>\n<dl>\n<dt>Monday–Thursday</dt><dd>09:00–17:30</dd>\n<dt>Friday</dt><dd>09:00–13:00</dd>\n</dl>\n<p class=\"timezone\">London, UK · Local time · Visits by appointment</p>\n</section>\n<div class=\"update\">\n<p class=\"update-label\"><span class=\"dot\" aria-hidden=\"true\"></span>Studio note · <time datetime=\"2026-05-06\">6 May 2026</time></p>\n<p>Now discussing project starts for autumn 2026.</p>\n</div>\n</aside>\n</div>\n<footer class=\"page-footer\">\n<p>Independent architecture. Considered spaces.</p>\n<p>© 2026 Juniper</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-contact-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Kite, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Contact Kite\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Kite\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Kite — Creative studio for architecture</title>\n<style>\n:root{--paper:#f7f4ee;--ink:#272923;--muted:#66675e;--line:#d7d3c9;--accent:#a54e35;--panel:#eeebe3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\n.shell{width:min(1100px,100% - 96px);margin:auto}\n.site-header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:700;letter-spacing:2px}\n.brand svg{width:29px;height:36px;color:var(--accent)}\n.header-note{color:var(--muted);font-size:13px}\n.intro{padding:43px 0 35px}\n.eyebrow{margin:0 0 12px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase}\nh1{margin:0 0 17px;font-family:Georgia,'Times New Roman',serif;font-size:72px;font-weight:400;line-height:1.05;letter-spacing:-2.5px}\n.lead{max-width:550px;margin:0;font-size:18px;line-height:1.6;color:var(--muted)}\n.contact-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:64px;padding-bottom:46px}\n.form-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:2px solid var(--ink);padding:17px 0 22px}\n.form-heading p{margin:0;font-size:12px;color:var(--muted)}\n.status{white-space:nowrap}\n.status strong{font-weight:400;color:var(--ink)}\n.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}\n.field{min-width:0}\n.message-field{grid-column:1/-1}\nlabel{display:block;margin-bottom:8px;font-size:14px;font-weight:600}\ninput,textarea{display:block;width:100%;min-width:0;border:1px solid #b9b6ab;border-radius:2px;background:#fcfaf6;color:var(--ink);font:inherit;padding:12px}\ninput{height:47px}\ntextarea{height:135px;resize:vertical}\ninput:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}\n.hint{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}\n.form-actions{display:flex;align-items:center;gap:22px;margin-top:24px}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:27px;flex-shrink:0;min-height:48px;padding:12px 20px;background:var(--ink);border:1px solid var(--ink);border-radius:2px;color:#fff;font:600 14px Arial,Helvetica,sans-serif;cursor:pointer}\nbutton:hover{background:#414439}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\nbutton span{font-size:20px;line-height:1;font-weight:400}\n.privacy{margin:0;max-width:235px;color:var(--muted);font-size:12px;line-height:1.5}\n.studio-panel{background:var(--panel);padding:27px 30px;border-top:2px solid var(--accent)}\nh2{margin:0 0 11px;font:400 28px/1.2 Georgia,'Times New Roman',serif;letter-spacing:-.5px}\n.panel-copy{margin:0 0 19px;color:var(--muted);font-size:14px;max-width:260px}\n.email-link{display:inline-block;color:var(--ink);font-size:20px;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:1px;overflow-wrap:anywhere}\n.hours{margin-top:25px;padding-top:20px;border-top:1px solid #d0ccc1}\nh3{margin:0 0 7px;font-size:12px;font-weight:700}\n.hours p{margin:0;font-size:14px}\n.hours small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}\n.next-steps{padding-top:24px}\n.next-steps h3{margin-bottom:14px;color:var(--accent);text-transform:uppercase;font-size:11px;letter-spacing:1.2px}\nol{list-style:none;margin:0;padding:0;counter-reset:steps}\nli{display:flex;gap:12px;margin-top:13px;counter-increment:steps}\nli:before{content:\"0\" counter(steps);flex:0 0 26px;font-size:12px;color:var(--muted);padding-top:2px}\nli strong{display:block;font-size:13px;font-weight:600}\nli p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.5}\nfooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:19px 0 24px;color:var(--muted);font-size:12px}\nfooter p{margin:0}\n@media(max-width:700px){\n.shell{width:calc(100% - 40px)}\n.site-header{height:70px}\n.brand{font-size:22px;gap:9px}\n.brand svg{width:24px;height:30px}\n.header-note{max-width:125px;text-align:right;font-size:11px;line-height:1.4}\n.intro{padding:29px 0 26px}\n.eyebrow{font-size:10px;margin-bottom:11px}\nh1{font-size:48px;letter-spacing:-1.6px;margin-bottom:13px}\n.lead{font-size:16px;line-height:1.5}\n.contact-grid{grid-template-columns:1fr;gap:30px;padding-bottom:30px}\n.form-heading{padding:14px 0 18px;gap:8px}\n.form-heading p{font-size:11px}\n.fields{grid-template-columns:1fr;gap:16px}\n.message-field{grid-column:auto}\nlabel{margin-bottom:6px}\ninput{height:44px}\ntextarea{height:108px}\n.form-actions{margin-top:20px;gap:15px;align-items:flex-start}\nbutton{padding:12px 15px;gap:17px}\n.privacy{font-size:11px;max-width:145px}\n.studio-panel{padding:23px}\nh2{font-size:27px}\n.next-steps{padding-top:22px}\nfooter{font-size:11px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease}}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"site-header\">\n<div class=\"brand\" aria-label=\"Kite\">\n<svg viewBox=\"0 0 32 40\" fill=\"none\" aria-hidden=\"true\"><path d=\"M16 2 29 14 16 30 3 14 16 2ZM16 2v28M3 14h26M16 30l-4 5 7 3\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<span>KITE</span>\n</div>\n<div class=\"header-note\">A creative studio<br>for architecture.</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<p class=\"eyebrow\">Good projects start with a conversation</p>\n<h1 id=\"page-title\">Contact Kite</h1>\n<p class=\"lead\">From a new practice identity to a project’s story,<br class=\"desktop-break\"> tell us what you’re ready to build.</p>\n</section>\n<div class=\"contact-grid\">\n<form aria-label=\"Project enquiry\">\n<div class=\"form-heading\">\n<p>3 fields · all required</p>\n<p class=\"status\">Status: <strong>Not sent</strong></p>\n</div>\n<div class=\"fields\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required>\n</div>\n<div class=\"field message-field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" aria-describedby=\"message-hint\" required></textarea>\n<p class=\"hint\" id=\"message-hint\">A little context helps: your practice, project scope and ideal timing.</p>\n</div>\n</div>\n<div class=\"form-actions\">\n<button type=\"button\">Send message <span aria-hidden=\"true\">↗</span></button>\n<p class=\"privacy\">Your details are only used to respond to your enquiry.</p>\n</div>\n</form>\n<aside aria-label=\"Studio contact and next steps\">\n<section class=\"studio-panel\" aria-labelledby=\"direct-title\">\n<h2 id=\"direct-title\">Direct to the studio</h2>\n<p class=\"panel-copy\">Prefer email? Share your brief or arrange an introductory conversation.</p>\n<a class=\"email-link\" href=\"mailto:hello@kite.studio\">hello@kite.studio</a>\n<div class=\"hours\">\n<h3>Studio hours</h3>\n<p>Monday–Friday · 09:00–18:00</p>\n<small>London time · Closed on public holidays</small>\n</div>\n</section>\n<section class=\"next-steps\" aria-labelledby=\"next-title\">\n<h3 id=\"next-title\">What happens next</h3>\n<ol>\n<li><div><strong>Share your brief</strong><p>A few lines are enough to start. No finished brief needed.</p></div></li>\n<li><div><strong>A considered reply</strong><p>We aim to respond within two working days, with questions and a suggested next step.</p></div></li>\n</ol>\n</section>\n</aside>\n</div>\n</main>\n<footer>\n<p>Kite · Independent creative studio</p>\n<p>For people shaping places.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-contact-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Larch, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: practical and understated; use deep plum as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Contact Larch\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Larch\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Larch — Architecture & interiors</title>\n<style>\n:root{--paper:#f3f4f3;--ink:#292b2d;--muted:#64686a;--line:#d4d8d6;--plum:#542d49}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}\na{color:var(--plum);text-underline-offset:5px}\na:hover{text-decoration-thickness:2px}\nbutton,input,textarea{font:inherit}\n.wrap{width:min(1120px,calc(100% - 112px));margin:auto}\n.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px;border-bottom:1px solid var(--line)}\n.identity{display:flex;align-items:center;gap:28px}\n.wordmark{font-family:Georgia,'Times New Roman',serif;font-size:34px;letter-spacing:-1.5px;text-decoration:none;color:var(--ink)}\n.identity p,.location{margin:0;color:var(--muted);font-size:12px;line-height:1.5}\n.location{text-align:right}\n.intro{padding:48px 0 36px;max-width:760px}\n.eyebrow{margin:0 0 14px;color:var(--plum);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh1{margin:0 0 18px;font-family:Georgia,'Times New Roman',serif;font-size:68px;font-weight:400;line-height:1.05;letter-spacing:-2px}\n.intro .lead{max-width:600px;margin:0;color:#505557;font-size:17px;line-height:1.65}\n.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:60px;border-top:1px solid var(--line);padding:30px 0 48px}\n.form-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}\nh2{font-size:16px;font-weight:600;margin:0}\n.required-note{font-size:11px;color:var(--muted);margin:0}\n.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}\n.field{min-width:0}\nlabel{display:block;font-size:13px;font-weight:600;margin-bottom:8px}\n.required{color:var(--plum)}\ninput,textarea{display:block;width:100%;min-width:0;border:1px solid #b9bfbc;border-radius:2px;background:#fcfdfc;color:var(--ink);padding:11px 13px;outline:none}\ninput{height:46px}\ntextarea{height:148px;resize:vertical;min-height:100px}\ninput:focus,textarea:focus{border-color:var(--plum);box-shadow:0 0 0 2px #542d491a}\n.message-field{margin-top:22px}\n.hint{margin:8px 0 0;font-size:12px;color:var(--muted)}\n.form-bottom{display:flex;align-items:center;gap:24px;margin-top:24px}\nbutton{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:47px;padding:11px 20px;border:1px solid var(--plum);border-radius:2px;background:var(--plum);color:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#402237}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--plum);outline-offset:4px}\n.privacy{margin:0;max-width:220px;color:var(--muted);font-size:11px;line-height:1.6}\naside{border-left:1px solid var(--line);padding-left:32px}\naside h2{margin-bottom:17px}\naside p{margin:0}\n.aside-intro{color:var(--muted);font-size:13px;max-width:250px;margin-bottom:12px}\n.email{font-family:Georgia,'Times New Roman',serif;font-size:22px;overflow-wrap:anywhere}\n.hours{margin-top:26px}\nh3{font-size:12px;font-weight:600;margin:0 0 7px}\n.hours p{font-size:13px}\n.hours .appointment{margin-top:8px;color:var(--muted);font-size:12px}\n.site-note{display:flex;align-items:flex-start;gap:17px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}\n.site-note svg{flex:0 0 78px;width:78px;height:94px}\n.site-note h3{line-height:1.5}\n.site-note p{font-size:12px;line-height:1.65;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:21px 0 28px;font-size:11px;color:var(--muted)}\nfooter p{margin:0}\n@media(min-width:1440px){.intro{padding-top:65px}}\n@media(max-width:800px){\n.wrap{width:calc(100% - 48px)}\n.contact-layout{gap:30px;grid-template-columns:minmax(0,1fr) 255px}\naside{padding-left:24px}\n.fields{grid-template-columns:1fr;gap:18px}\n.form-bottom{align-items:flex-start;flex-direction:column;gap:14px}\n.privacy{max-width:100%}\n}\n@media(max-width:600px){\n.wrap{width:calc(100% - 40px)}\n.site-header{min-height:74px;gap:12px}\n.wordmark{font-size:30px}\n.identity{gap:15px}\n.identity p{font-size:10px}\n.location{font-size:10px;max-width:86px}\n.intro{padding:28px 0 25px}\n.eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:12px}\nh1{font-size:46px;letter-spacing:-1.5px;margin-bottom:13px}\n.intro .lead{font-size:14px;line-height:1.6}\n.contact-layout{grid-template-columns:1fr;gap:28px;padding:22px 0 30px}\n.form-heading{margin-bottom:18px}\n.fields{gap:15px}\nlabel{margin-bottom:6px}\ninput{height:43px}\n.message-field{margin-top:15px}\ntextarea{height:104px}\n.hint{font-size:11px}\n.form-bottom{gap:12px;margin-top:18px}\nbutton{width:100%;min-height:45px}\n.privacy{font-size:10px}\naside{border-left:0;border-top:1px solid var(--line);padding:23px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}\naside h2{font-size:14px;margin-bottom:10px}\n.aside-intro{font-size:12px;margin-bottom:8px}\n.email{font-size:18px}\n.hours{margin-top:0}\n.hours p{font-size:12px}\n.site-note{grid-column:1/-1;margin-top:0;padding-top:18px;align-items:center}\n.site-note svg{width:65px;height:78px;flex-basis:65px}\n.site-note h3{margin-bottom:4px}\nfooter{font-size:10px;gap:20px;padding-top:18px}\nfooter p:last-child{text-align:right}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header class=\"site-header\">\n<div class=\"identity\">\n<a class=\"wordmark\" href=\"#contact\" aria-label=\"Larch contact\">Larch</a>\n<p>Architecture<br>&amp; interiors</p>\n</div>\n<p class=\"location\">London studio<br>Projects across the UK</p>\n</header>\n<main id=\"contact\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<p class=\"eyebrow\">New projects &amp; general enquiries</p>\n<h1 id=\"page-title\">Contact Larch</h1>\n<p class=\"lead\">Thoughtful spaces start with a conversation. Tell us what you have in mind, from a first idea for your home to a considered refurbishment.</p>\n</section>\n<div class=\"contact-layout\">\n<section aria-labelledby=\"enquiry-title\">\n<div class=\"form-heading\">\n<h2 id=\"enquiry-title\">Your enquiry</h2>\n<p class=\"required-note\">All fields required</p>\n</div>\n<form>\n<div class=\"fields\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required>\n</div>\n</div>\n<div class=\"field message-field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" aria-describedby=\"message-hint\" required></textarea>\n<p class=\"hint\" id=\"message-hint\">A few sentences are enough to get started.</p>\n</div>\n<div class=\"form-bottom\">\n<button type=\"button\">Send message <span aria-hidden=\"true\">↗</span></button>\n<p class=\"privacy\">Your contact details are only used to respond to your enquiry.</p>\n</div>\n</form>\n</section>\n<aside aria-labelledby=\"direct-title\">\n<div>\n<h2 id=\"direct-title\">Prefer email?</h2>\n<p class=\"aside-intro\">For project enquiries, collaborations or a quick question.</p>\n<a class=\"email\" href=\"mailto:hello@larch.studio\">hello@larch.studio</a>\n</div>\n<div class=\"hours\">\n<h3>Studio hours</h3>\n<p>Monday–Friday<br>09:00–17:30 · UK time</p>\n<p class=\"appointment\">Studio visits by appointment.</p>\n</div>\n<div class=\"site-note\">\n<svg viewBox=\"0 0 78 94\" role=\"img\" aria-labelledby=\"site-title\">\n<title id=\"site-title\">A simple site plan showing a building, plot boundary and street</title>\n<path d=\"M8 19H59V71H8Z\" fill=\"none\" stroke=\"#9ba39e\" stroke-dasharray=\"3 3\"/>\n<path d=\"M21 31H47V57H34V63H21Z\" fill=\"#542d490c\" stroke=\"#542d49\" stroke-width=\"1.5\"/>\n<path d=\"M8 80H59M8 84H59\" stroke=\"#9ba39e\"/>\n<path d=\"M68 30V12m-3 4 3-4 3 4\" fill=\"none\" stroke=\"#542d49\"/>\n<text x=\"68\" y=\"8\" text-anchor=\"middle\" font-family=\"Arial,sans-serif\" font-size=\"6\" fill=\"#64686a\">N</text>\n<text x=\"33\" y=\"93\" text-anchor=\"middle\" font-family=\"Arial,sans-serif\" font-size=\"6\" letter-spacing=\"1\" fill=\"#64686a\">STREET</text>\n</svg>\n<div>\n<h3>Have a site in mind?</h3>\n<p>Include the address, project scope and ideal start date. You don’t need a finished brief to talk to us.</p>\n</div>\n</div>\n</aside>\n</div>\n</main>\n<footer>\n<p>Larch · An independent architecture studio</p>\n<p>Homes, interiors &amp; existing buildings</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-contact-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Maple, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Contact Maple\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Maple\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Maple</title>\n<style>\n:root{--paper:#f7f8f2;--green:#214b3b;--muted:#647a6c;--line:#cdd6cc}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--green);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\na{color:inherit;text-underline-offset:4px}\nbutton,input,textarea{font:inherit}\n.wrap{max-width:1120px;margin:auto;padding:0 40px}\nheader .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:28px;letter-spacing:-1px}\n.brand svg{width:24px;height:28px}\n.header-note{color:var(--muted);font-size:13px}\nmain{padding-top:62px;padding-bottom:64px}\n.eyebrow{margin:0 0 12px;font-size:11px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,serif;font-size:62px;line-height:1.1;font-weight:400;letter-spacing:-2px}\n.intro{max-width:510px;margin:20px 0 0;color:var(--muted);font-size:17px;line-height:1.6}\n.contact-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:88px;margin-top:44px}\nform{min-width:0}\n.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}\n.field{margin-bottom:22px;min-width:0}\nlabel{display:block;margin-bottom:8px;font-size:14px;font-weight:550}\ninput,textarea{display:block;width:100%;min-width:0;border:1px solid #a6b7a9;border-radius:3px;background:transparent;color:var(--green);padding:12px 14px}\ninput{height:48px}\ntextarea{height:146px;resize:vertical;line-height:1.6}\n::placeholder{color:var(--muted);opacity:1}\ninput:focus,textarea:focus{outline:2px solid var(--green);outline-offset:3px}\n.privacy{margin:-9px 0 22px;color:var(--muted);font-size:12px;line-height:1.5}\nbutton{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;min-height:48px;padding:12px 20px;border:1px solid var(--green);border-radius:3px;background:var(--green);color:var(--paper);font-size:14px;font-weight:550;cursor:pointer}\nbutton svg{width:18px;height:18px}\nbutton:hover{background:var(--paper);color:var(--green)}\na:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:4px}\naside{min-width:0}\nh2{font-family:Georgia,serif;font-size:26px;font-weight:400;line-height:1.25;margin:0 0 10px;letter-spacing:-.5px}\n.aside-intro{margin:0 0 25px;color:var(--muted);font-size:14px}\ndl{margin:0;border-top:1px solid var(--line)}\n.contact-row{padding:18px 0;border-bottom:1px solid var(--line)}\ndt{margin-bottom:6px;font-size:12px;color:var(--muted);line-height:1.5}\ndd{margin:0;font-size:15px;line-height:1.6;overflow-wrap:anywhere}\n.email{font-size:18px;text-decoration-thickness:1px}\n.hours{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}\n.timezone{display:block;color:var(--muted);font-size:12px;margin-top:3px}\n.scheduling dd{font-size:14px}\nfooter .wrap{border-top:1px solid var(--line);padding-top:20px;padding-bottom:24px;display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px}\n@media(max-width:700px){\n.wrap{padding-left:22px;padding-right:22px}\nheader .wrap{min-height:72px}\n.brand{font-size:25px}\n.header-note{font-size:11px;max-width:125px;text-align:right}\nmain{padding-top:30px;padding-bottom:34px}\nh1{font-size:44px;letter-spacing:-1.5px}\n.eyebrow{margin-bottom:10px}\n.intro{margin-top:14px;font-size:15px}\n.contact-layout{grid-template-columns:1fr;gap:32px;margin-top:26px}\n.field-row{grid-template-columns:1fr;gap:0}\n.field{margin-bottom:17px}\nlabel{margin-bottom:6px}\ninput{height:44px}\ntextarea{height:104px}\n.privacy{margin:-5px 0 16px}\nbutton{width:100%}\nh2{font-size:24px}\n.aside-intro{margin-bottom:18px}\n.contact-row{padding:14px 0}\nfooter .wrap{font-size:11px;flex-wrap:wrap}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wrap\">\n<div class=\"brand\" aria-label=\"Maple studio\">\n<svg viewBox=\"0 0 24 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 26V13M12 18C4 18 2 12 3 4c8 0 10 5 9 14ZM12 21c0-9 3-14 10-15 1 8-3 14-10 15Z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n<span>Maple</span>\n</div>\n<span class=\"header-note\">A small creative studio</span>\n</div>\n</header>\n<main class=\"wrap\">\n<p class=\"eyebrow\">Start a conversation</p>\n<h1>Contact Maple</h1>\n<p class=\"intro\">Tell us about your next field study and the research or design support your team needs.</p>\n<div class=\"contact-layout\">\n<form action=\"#\" method=\"get\" aria-label=\"Contact Maple\">\n<div class=\"field-row\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"Your full name\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@yourteam.org\" required>\n</div>\n</div>\n<div class=\"field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"A little about your study, team and timeline…\" aria-describedby=\"privacy-note\" required></textarea>\n</div>\n<p class=\"privacy\" id=\"privacy-note\">Please leave out participant names or sensitive field notes.</p>\n<button type=\"submit\">\n<span>Send message</span>\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</button>\n</form>\n<aside aria-labelledby=\"alternative-title\">\n<h2 id=\"alternative-title\">Prefer a direct line?</h2>\n<p class=\"aside-intro\">For project enquiries and fieldwork collaborations, you can also reach us by email.</p>\n<dl>\n<div class=\"contact-row\">\n<dt>Studio inbox</dt>\n<dd><a class=\"email\" href=\"mailto:hello@maple.studio\">hello@maple.studio</a></dd>\n</div>\n<div class=\"contact-row\">\n<dt>Studio hours</dt>\n<dd><div class=\"hours\"><span>Monday–Friday</span><span>09:00–17:00</span></div><span class=\"timezone\">All times UTC</span></dd>\n</div>\n<div class=\"contact-row scheduling\">\n<dt>Scheduling for field teams working across time zones and remote research locations</dt>\n<dd>Include your time zone and a good window to connect.</dd>\n</div>\n</dl>\n</aside>\n</div>\n</main>\n<footer>\n<div class=\"wrap\"><span>© 2026 Maple</span><span>Thoughtful design, grounded in research.</span></div>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-contact-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for North, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Contact North\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact North\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact North</title>\n<style>\n:root{color-scheme:light;--ink:#28333c;--muted:#626e77;--accent:#526b83;--line:#d5dce0;--paper:#f8f9f6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nheader,main,footer{width:min(960px,calc(100% - 48px));margin-inline:auto}\nheader{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;border-bottom:1px solid var(--line)}\n.wordmark{font-size:23px;font-weight:750;letter-spacing:-1px;line-height:1}\n.studio-description{margin:0;color:var(--muted);font-size:12px;text-align:right}\nmain{padding:55px 0 64px}\n.eyebrow{margin:0 0 12px;color:var(--accent);font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}\nh1{margin:0;font-size:46px;font-weight:550;letter-spacing:-1.7px;line-height:1.12}\n.intro{max-width:470px;margin:16px 0 34px;color:var(--muted);font-size:16px;line-height:1.6}\n.contact-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:start}\nform{min-width:0}\n.identity-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.field{margin-bottom:20px;min-width:0}\nlabel{display:block;margin-bottom:7px;font-size:13px;font-weight:600}\ninput,textarea{display:block;width:100%;max-width:100%;border:1px solid #bcc7cf;border-radius:3px;background:#fff;color:var(--ink);font:inherit;padding:11px 12px}\ninput{height:44px}\ntextarea{height:142px;min-height:100px;resize:vertical;line-height:1.5}\ninput::placeholder,textarea::placeholder{color:#7b858d;opacity:1;font-size:14px}\ninput:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px}\n.field-hint{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5}\n.action-row{display:flex;align-items:center;gap:18px;margin-top:23px}\nbutton{flex-shrink:0;border:1px solid var(--accent);border-radius:3px;background:var(--accent);color:white;padding:11px 18px;font:inherit;font-size:14px;font-weight:600;min-height:44px;cursor:pointer}\nbutton:hover{background:#435b72}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\n.action-hint{margin:0;color:var(--muted);font-size:12px;line-height:1.5}\naside{background:#eef1f2;border:1px solid #dce2e5;border-radius:4px;padding:24px}\nh2,h3{margin:0 0 10px;font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}\n.email-link{color:var(--ink);font-size:17px;font-weight:550;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}\n.aside-copy{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.6}\n.hours{margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}\n.hours p{margin:0;font-size:13px;line-height:1.7}\n.hours .timezone{color:var(--muted);font-size:12px}\n.update{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}\n.update-label{display:flex;align-items:center;gap:7px;margin:0 0 6px;color:var(--muted);font-size:11px}\n.update-label::before{content:\"\";width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}\n.update p:last-child{margin:0;font-size:12px;line-height:1.6}\nfooter{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:18px 0 26px;color:var(--muted);font-size:11px}\nfooter p{margin:0}\n@media(max-width:640px){\nheader,main,footer{width:calc(100% - 40px)}\nheader{padding:18px 0}\n.wordmark{font-size:21px}\n.studio-description{font-size:11px}\nmain{padding:25px 0 24px}\n.eyebrow{margin-bottom:8px;font-size:10px}\nh1{font-size:35px;letter-spacing:-1.2px}\n.intro{margin:12px 0 23px;font-size:14px;line-height:1.5}\n.contact-layout{grid-template-columns:1fr;gap:24px}\n.identity-fields{grid-template-columns:1fr;gap:0}\n.field{margin-bottom:14px}\nlabel{margin-bottom:6px}\ninput{height:42px;padding:9px 11px}\ntextarea{height:96px;min-height:96px;padding:10px 11px}\n.field-hint{margin-top:7px;font-size:11px}\n.action-row{margin-top:17px;gap:14px}\nbutton{padding:10px 15px;font-size:13px}\n.action-hint{font-size:11px}\naside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;padding:16px}\nh2,h3{font-size:10px;margin-bottom:7px}\n.email-link{font-size:14px}\n.aside-copy{font-size:11px;line-height:1.5;margin-top:6px}\n.hours{margin:0;padding:0;border:0}\n.hours p{font-size:11px;line-height:1.7}\n.hours .timezone{font-size:11px}\n.update{grid-column:1/-1;margin-top:13px;padding-top:11px}\n.update-label{margin-bottom:3px;font-size:10px}\n.update p:last-child{font-size:11px}\nfooter{padding:13px 0 20px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wordmark\" aria-label=\"North studio\">north</div>\n<p class=\"studio-description\">Small creative studio<br>Research, strategy &amp; design</p>\n</header>\n<main>\n<p class=\"eyebrow\">From the field to the studio</p>\n<h1>Contact North</h1>\n<p class=\"intro\">Tell us what you’re exploring, where you’re headed, and how we can help.</p>\n<div class=\"contact-layout\">\n<form aria-label=\"Contact North\">\n<div class=\"identity-fields\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"Alex Morgan\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"alex@yourteam.org\" required>\n</div>\n</div>\n<div class=\"field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"Tell us about your study, location and timeline.\" aria-describedby=\"message-hint\" required></textarea>\n<p class=\"field-hint\" id=\"message-hint\">Please leave out participant names and sensitive field notes.</p>\n</div>\n<div class=\"action-row\">\n<button type=\"button\">Send message</button>\n<p class=\"action-hint\">A rough brief is welcome.<br>We usually reply within 2 working days.</p>\n</div>\n</form>\n<aside aria-label=\"Alternative contact and studio details\">\n<section>\n<h2>Direct contact</h2>\n<a class=\"email-link\" href=\"mailto:hello@north.studio\">hello@north.studio</a>\n<p class=\"aside-copy\">For research briefs and a conversation before you set out.</p>\n</section>\n<section class=\"hours\">\n<h3>Studio hours</h3>\n<p>Monday–Friday<br>09:00–17:00</p>\n<p class=\"timezone\">London · GMT / BST</p>\n</section>\n<section class=\"update\" aria-label=\"Recent studio update\">\n<p class=\"update-label\">Studio note · <time datetime=\"2025-05-14\">14 May</time></p>\n<p>Now planning creative support for summer fieldwork.</p>\n</section>\n</aside>\n</div>\n</main>\n<footer>\n<p>North · Independent creative studio</p>\n<p>Based in London. Field-ready.</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-contact-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Orbit, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Contact Orbit\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Orbit\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Orbit — Creative studio</title>\n<style>\n:root{--paper:#f7f4ee;--ink:#292b26;--muted:#686b62;--line:#d8d4ca;--accent:#98482f}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\na{color:var(--accent);text-underline-offset:4px}\nbutton,input,textarea{font:inherit}\n.wrap{max-width:1120px;margin:auto;padding:0 40px}\nheader .wrap{display:flex;align-items:center;justify-content:space-between;min-height:88px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:10px}\n.brand svg{width:32px;height:32px;color:var(--accent)}\n.wordmark{font-size:29px;line-height:1;font-weight:700;letter-spacing:-1.5px}\n.studio{margin-left:20px;padding-left:20px;border-left:1px solid var(--line);font-size:12px;color:var(--muted)}\n.status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}\n.status::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#777e69}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:40px 0 30px;border-bottom:1px solid var(--line)}\nh1{margin:0 0 12px;font-family:Georgia,'Times New Roman',serif;font-size:56px;line-height:1.08;font-weight:400;letter-spacing:-2px}\n.intro p{max-width:590px;margin:0;color:var(--muted);font-size:16px;line-height:1.6}\n.summary{flex-shrink:0;color:var(--muted);font-size:12px;white-space:nowrap}\n.summary span{color:var(--accent);font-weight:700;margin-right:6px}\n.content{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);padding:32px 0 40px}\n.form-section{padding-right:48px}\n.section-heading{display:flex;align-items:baseline;gap:12px;margin-bottom:22px}\n.number{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1px}\nh2{font-size:18px;line-height:1.35;margin:0;font-weight:600;letter-spacing:-.3px}\n.required-note{font-size:12px;color:var(--muted);margin:6px 0 0 28px}\n.section-heading:has(+ form){margin-bottom:20px}\n.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.field{min-width:0}\nlabel{display:block;font-size:13px;font-weight:600;margin-bottom:7px}\ninput,textarea{display:block;width:100%;border:1px solid #bdbeb4;border-radius:3px;background:#fffdf9;color:var(--ink);padding:12px 13px;min-height:48px}\ninput::placeholder,textarea::placeholder{color:#85857c;opacity:1}\ninput:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}\n.message{margin-top:18px}\ntextarea{min-height:150px;resize:vertical;line-height:1.5}\n.form-bottom{display:flex;align-items:center;gap:20px;margin-top:20px}\nbutton{flex-shrink:0;min-height:48px;padding:12px 23px;border:1px solid var(--accent);border-radius:3px;background:var(--accent);color:white;font-weight:600;cursor:pointer}\nbutton:hover{background:#7d3925}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\n.privacy{margin:0;font-size:12px;line-height:1.5;color:var(--muted);max-width:280px}\naside{border-left:1px solid var(--line);padding-left:36px}\naside .section-heading{margin-bottom:17px}\n.aside-copy{margin:0 0 10px;color:var(--muted);font-size:14px}\n.email{display:inline-block;font-size:21px;letter-spacing:-.4px;margin-bottom:7px;overflow-wrap:anywhere}\n.response{font-size:12px;color:var(--muted);margin:0}\n.hours{margin:24px 0 0}\n.hours dt{font-size:12px;font-weight:600;margin-bottom:5px}\n.hours dd{margin:0;font-size:14px}\n.location{display:block;color:var(--muted);font-size:12px;margin-top:3px}\n.materials{border-top:1px solid var(--line);margin-top:28px;padding-top:21px}\n.materials-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}\nh3{margin:0;font-size:13px;font-weight:600}\n.count{font-size:11px;color:var(--muted);white-space:nowrap}\n.empty-title{margin:15px 0 4px;font-size:14px}\n.empty-copy{margin:0;color:var(--muted);font-size:13px;line-height:1.6}\nfooter{border-top:1px solid var(--line);padding:18px 0 24px;display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:11px}\n@media(max-width:700px){\n.wrap{padding:0 20px}\nheader .wrap{min-height:66px}\n.wordmark{font-size:26px}\n.brand svg{width:28px;height:28px}\n.studio{display:none}\n.status{font-size:11px}\n.intro{display:block;padding:24px 0 20px}\nh1{font-size:40px;letter-spacing:-1.3px;margin-bottom:10px}\n.intro p{font-size:14px;line-height:1.5}\n.summary{margin-top:12px}\n.content{display:block;padding:22px 0 26px}\n.form-section{padding-right:0}\n.section-heading{margin-bottom:16px;gap:10px}\nh2{font-size:17px}\n.required-note{margin-left:26px}\n.fields{grid-template-columns:1fr;gap:13px}\n.message{margin-top:13px}\ntextarea{min-height:112px}\n.form-bottom{display:block;margin-top:16px}\nbutton{width:100%}\n.privacy{max-width:none;margin-top:10px}\naside{border-left:0;border-top:1px solid var(--line);padding:24px 0 0;margin-top:26px}\n.hours{margin-top:18px}\n.materials{margin-top:22px;padding-top:18px}\nfooter{display:block;padding:16px 0 22px}\nfooter span{display:block}\nfooter span+span{margin-top:4px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wrap\">\n<div class=\"brand\" aria-label=\"Orbit creative studio\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n<circle cx=\"16\" cy=\"16\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<ellipse cx=\"16\" cy=\"16\" rx=\"15\" ry=\"5.5\" transform=\"rotate(-35 16 16)\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<circle cx=\"26\" cy=\"8\" r=\"2.5\" fill=\"currentColor\"/>\n</svg>\n<span class=\"wordmark\">orbit</span>\n<span class=\"studio\">Independent<br>creative studio</span>\n</div>\n<span class=\"status\">Enquiries welcome</span>\n</div>\n</header>\n\n<main class=\"wrap\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<h1 id=\"page-title\">Contact Orbit</h1>\n<p>From field notes to a clear visual story. Tell us about your research, your team and the creative support you need.</p>\n</div>\n<div class=\"summary\"><span>2</span> contact options</div>\n</section>\n\n<div class=\"content\">\n<section class=\"form-section\" aria-labelledby=\"message-heading\">\n<div class=\"section-heading\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div>\n<h2 id=\"message-heading\">Tell us about your fieldwork</h2>\n<p class=\"required-note\">All fields required</p>\n</div>\n</div>\n<form>\n<div class=\"fields\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"full-name\" type=\"text\" autocomplete=\"name\" placeholder=\"e.g. Maya Chen\" required>\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@your-team.org\" required>\n</div>\n</div>\n<div class=\"field message\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" placeholder=\"What are you studying? Share your location, timeline and what you’d like to create.\" aria-describedby=\"privacy-note\" required></textarea>\n</div>\n<div class=\"form-bottom\">\n<button type=\"button\">Send message</button>\n<p class=\"privacy\" id=\"privacy-note\">Please leave out participant names and sensitive research data.</p>\n</div>\n</form>\n</section>\n\n<aside aria-labelledby=\"direct-heading\">\n<section>\n<div class=\"section-heading\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<h2 id=\"direct-heading\">Prefer a direct email?</h2>\n</div>\n<p class=\"aside-copy\">For project briefs, fieldwork questions or a first conversation.</p>\n<a class=\"email\" href=\"mailto:hello@orbit.studio\">hello@orbit.studio</a>\n<p class=\"response\">Typical response: within 2 working days</p>\n<dl class=\"hours\">\n<dt>Studio hours</dt>\n<dd>Monday–Friday, 09:00–17:00<span class=\"location\">London · UK time</span></dd>\n</dl>\n</section>\n\n<section class=\"materials\" aria-labelledby=\"materials-heading\">\n<div class=\"materials-head\">\n<h3 id=\"materials-heading\">Supporting material</h3>\n<span class=\"count\">0 files shared</span>\n</div>\n<p class=\"empty-title\">No supporting files yet.</p>\n<p class=\"empty-copy\">Attachments aren’t needed to get started. Mention any maps, images or field notes in your message; we can discuss a secure handover.</p>\n</section>\n</aside>\n</div>\n\n<footer>\n<span>Orbit · Independent creative studio</span>\n<span>Thoughtful design for work in the field.</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-contact-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a contact page for Pine, a small creative studio. Include full name, email and message fields, Send message button, and a concise alternative contact panel with studio hours. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Contact Pine\", \"Full name\", \"Email address\", \"Message\", \"Send message\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Contact Pine\", \"Full name\", \"Email address\", \"Message\", \"Send message\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Contact Pine</title>\n<style>\n:root{color-scheme:light;--paper:#f6f3ee;--ink:#29262a;--muted:#68616a;--plum:#482a43;--line:#d8d0d6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:16px;line-height:1.5}\nheader,main,footer{width:min(1040px,calc(100% - 80px));margin-inline:auto}\nheader{padding:30px 0 25px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:20px}\n.wordmark{font-size:29px;font-weight:650;letter-spacing:-1.4px;color:var(--plum)}\n.studio-description{font-size:13px;color:var(--muted)}\nmain{padding:58px 0 70px}\n.intro{max-width:650px;margin-bottom:36px}\n.eyebrow{margin:0 0 12px;color:var(--plum);font-size:11px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase}\nh1{margin:0 0 16px;font-size:54px;font-weight:600;letter-spacing:-2px;line-height:1.1}\n.intro p:last-child{margin:0;color:var(--muted);font-size:18px;line-height:1.6;max-width:590px}\n.contact-layout{display:grid;grid-template-columns:minmax(0,590px) minmax(0,1fr);gap:76px;align-items:start}\nform{min-width:0}\n.field{margin-bottom:21px}\nlabel{display:block;margin-bottom:7px;font-size:14px;font-weight:600}\ninput,textarea{display:block;width:100%;border:1px solid #bfb5bf;border-radius:4px;background:#fffdfb;color:var(--ink);font:inherit;padding:11px 13px;min-height:46px;outline-offset:3px}\ntextarea{min-height:138px;resize:vertical;line-height:1.5}\ninput:focus,textarea:focus{border-color:var(--plum);outline:2px solid var(--plum)}\n.hint{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.45}\n.submit-row{display:flex;align-items:center;gap:20px;margin-top:25px}\nbutton{border:1px solid var(--plum);border-radius:4px;padding:12px 22px;background:var(--plum);color:white;font:inherit;font-size:14px;font-weight:600;min-height:46px;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#362032}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--plum);outline-offset:4px}\n.submit-note{margin:0;color:var(--muted);font-size:12px;max-width:230px}\naside{padding:3px 0 0 27px;border-left:1px solid var(--line)}\nh2{margin:0 0 8px;font-size:18px;font-weight:600;letter-spacing:-.3px}\na{color:var(--plum);text-underline-offset:4px;text-decoration-thickness:1px;overflow-wrap:anywhere}\n.email{font-size:17px}\n.hours{margin-top:31px}\n.hours h3{margin:0 0 8px;font-size:13px;font-weight:650}\n.hours p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}\nfigure{margin:19px 0 0}\nfigure svg{display:block;width:100%;height:auto;max-width:290px}\nfigcaption{margin-top:5px;color:var(--muted);font-size:11px}\n.reply-note{margin:23px 0 0;font-size:13px;color:var(--muted);line-height:1.65;max-width:280px}\nfooter{padding:19px 0 27px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}\n@media(max-width:720px){\nheader,main,footer{width:calc(100% - 40px)}\nheader{padding:18px 0 16px;gap:15px}\n.wordmark{font-size:26px}\n.studio-description{font-size:11px;text-align:right;max-width:150px}\nmain{padding:27px 0 35px}\n.intro{margin-bottom:25px}\n.eyebrow{margin-bottom:9px;font-size:10px}\nh1{font-size:39px;letter-spacing:-1.4px;margin-bottom:12px}\n.intro p:last-child{font-size:15px;line-height:1.55}\n.contact-layout{display:block}\n.field{margin-bottom:17px}\ntextarea{min-height:112px}\n.submit-row{margin-top:20px;gap:15px}\n.submit-note{font-size:11px}\nbutton{padding-inline:18px}\naside{margin-top:33px;padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}\n.hours{margin-top:22px}\nfigure{max-width:290px;margin-top:14px}\n.reply-note{margin-top:17px;max-width:none}\nfooter{font-size:11px;padding-block:17px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wordmark\" aria-label=\"Pine studio\">Pine.</div>\n<div class=\"studio-description\">Independent creative studio</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"contact-title\">\n<p class=\"eyebrow\">Good work starts with a conversation</p>\n<h1 id=\"contact-title\">Contact Pine</h1>\n<p>Tell us about your next field study. We design research materials that make work on the ground a little easier.</p>\n</section>\n<div class=\"contact-layout\">\n<form aria-label=\"Contact Pine\">\n<div class=\"field\">\n<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"name\" type=\"text\" autocomplete=\"name\">\n</div>\n<div class=\"field\">\n<label for=\"email\">Email address</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\">\n</div>\n<div class=\"field\">\n<label for=\"message\">Message</label>\n<textarea id=\"message\" name=\"message\" aria-describedby=\"message-hint\"></textarea>\n<p class=\"hint\" id=\"message-hint\">Your study location, timing and what your team needs are a good place to start.</p>\n</div>\n<div class=\"submit-row\">\n<button type=\"button\">Send message</button>\n<p class=\"submit-note\">Please leave out participant names and sensitive research data.</p>\n</div>\n</form>\n<aside aria-labelledby=\"alternative-title\">\n<h2 id=\"alternative-title\">Prefer email?</h2>\n<a class=\"email\" href=\"mailto:hello@pine.studio\">hello@pine.studio</a>\n<section class=\"hours\" aria-labelledby=\"hours-title\">\n<h3 id=\"hours-title\">Studio hours</h3>\n<p>Monday–Friday<br>9:00 am–5:00 pm · Eastern time</p>\n<figure>\n<svg viewBox=\"0 0 280 55\" role=\"img\" aria-labelledby=\"window-title\">\n<title id=\"window-title\">Studio availability across a 24-hour day: 9 am to 5 pm Eastern time</title>\n<rect x=\"8\" y=\"12\" width=\"264\" height=\"7\" rx=\"3.5\" fill=\"#e0d9df\"/>\n<rect x=\"107\" y=\"12\" width=\"88\" height=\"7\" rx=\"3.5\" fill=\"#482a43\"/>\n<path d=\"M107 7v17M195 7v17\" stroke=\"#482a43\" stroke-width=\"1\"/>\n<g fill=\"#68616a\" font-family=\"system-ui, sans-serif\" font-size=\"10\">\n<text x=\"8\" y=\"43\">12 am</text>\n<text x=\"107\" y=\"43\" text-anchor=\"middle\" fill=\"#482a43\">9 am</text>\n<text x=\"195\" y=\"43\" text-anchor=\"middle\" fill=\"#482a43\">5 pm</text>\n<text x=\"272\" y=\"43\" text-anchor=\"end\">12 am</text>\n</g>\n</svg>\n<figcaption>Our weekday reply window, in Eastern time.</figcaption>\n</figure>\n</section>\n<p class=\"reply-note\">We usually reply within two studio days. Working across time zones? Include yours so we can find a good time to talk.</p>\n</aside>\n</div>\n</main>\n<footer>\n<span>Thoughtful design for field research.</span>\n<span>Pine studio</span>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-dashboard-00","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Alder. Show Revenue $12000, Orders 80, Customers 400, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Alder overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Alder overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Alder overview</title>\n<style>\n:root{color-scheme:light;--ink:#25372f;--muted:#657068;--green:#214b39;--line:#e3e5dc;--paper:#fffefb}\n*{box-sizing:border-box}\nbody{margin:0;background:#f5f3ed;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit;cursor:pointer}\nbutton:focus-visible{outline:3px solid #9aae8e;outline-offset:4px}\n.topbar{background:var(--paper);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1120px;margin:auto;min-height:76px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.6px}\n.brand-mark{width:32px;height:32px;background:var(--green);color:#fff;border-radius:8px;display:grid;place-items:center}\n.shop{color:var(--muted);font-size:13px;text-align:right}\nmain{max-width:1120px;margin:0 auto;padding:36px 28px 40px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0 0 8px;font-weight:650}\np{margin:0}\n.supporting{color:var(--muted)}\n.period{flex-shrink:0;color:var(--muted);font-size:13px}\n.next-action{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;background:#edf1e9;border:1px solid #d7dfd1;border-radius:12px;margin-bottom:20px}\n.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.6px;color:var(--green);margin-bottom:5px}\nh2{margin:0;font-size:19px;line-height:1.35;font-weight:650;letter-spacing:-.3px}\n.next-action p{color:#536355;margin-top:5px;font-size:13px}\n.primary{border:1px solid var(--green);background:var(--green);color:white;padding:11px 17px;border-radius:7px;font-weight:600;flex-shrink:0}\n.primary:hover{background:#173c2c}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--paper);border:1px solid var(--line);border-radius:12px;margin:0 0 28px;padding:20px 0}\n.metric{padding:0 24px}\n.metric+.metric{border-left:1px solid var(--line)}\ndt{font-size:13px;color:var(--muted);margin-bottom:5px}\ndd{margin:0;font-size:30px;font-weight:650;line-height:1.2;letter-spacing:-.8px;font-variant-numeric:tabular-nums}\n.metric-note{font-size:11px;color:var(--muted);margin-top:7px}\n.orders{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:23px 24px}\n.section-heading p{font-size:12px;color:var(--muted);margin-top:5px}\n.secondary{background:transparent;border:1px solid #cdd4c9;border-radius:7px;padding:8px 15px;color:var(--green);font-weight:600;flex-shrink:0}\n.secondary:hover{background:#f1f4ed}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\ncol.order{width:57%}col.status{width:25%}col.amount{width:18%}\nth{text-align:left;font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--muted);background:#f8f8f3;padding:10px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\ntd{padding:19px 24px;vertical-align:middle;border-bottom:1px solid var(--line)}\ntbody tr:last-child td{border-bottom:0}\n.customer{font-weight:600;font-size:14px}\n.order-id{color:var(--muted);font-size:12px;font-weight:400;margin-right:10px}\n.product{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5;overflow-wrap:anywhere}\n.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;font-size:11px;font-weight:600;line-height:1.4}\n.badge::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}\n.pack{color:#805322;background:#f6eddc}\n.pickup{color:#28573b;background:#e9f0e5}\n.complete{color:#5e685f;background:#eff0eb}\n.money{text-align:right;font-weight:650;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}\nth.money{font-size:11px;font-weight:600}\n.table-footer{padding:12px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:12px}\n@media(max-width:600px){\n.topbar-inner{min-height:60px;padding:12px 20px}.brand{font-size:20px}.brand-mark{width:28px;height:28px}.shop{font-size:11px;max-width:145px}\nmain{padding:24px 16px}.page-heading{display:block;margin-bottom:18px}h1{font-size:27px;margin-bottom:6px}.supporting{font-size:13px}.period{margin-top:8px;font-size:11px}\n.next-action{padding:16px;gap:13px;align-items:flex-start;flex-direction:column;margin-bottom:16px}.next-action h2{font-size:18px}.next-action p{font-size:12px}.primary{padding:9px 14px;font-size:12px}\n.metrics{padding:16px 0;margin-bottom:20px}.metric{padding:0 12px}dt{font-size:11px}dd{font-size:24px;letter-spacing:-.5px}.metric-note{font-size:10px;margin-top:5px}\n.section-heading{padding:17px 14px;gap:10px}.section-heading h2{font-size:17px}.section-heading p{font-size:11px}.secondary{padding:7px 11px;font-size:12px}\ncol.order{width:51%}col.status{width:27%}col.amount{width:22%}\nth{padding:9px 12px;font-size:10px}td{padding:14px 12px}.customer{font-size:12px}.order-id{display:block;font-size:10px;margin:0 0 2px}.product{font-size:11px;line-height:1.4}.badge{font-size:10px;padding:4px 6px;gap:4px}.money{font-size:12px}th.money{font-size:10px}.table-footer{padding:12px 14px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<span class=\"brand-mark\" aria-hidden=\"true\">\n<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 19 12 5l7 14M8 14h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</span>\nAlder\n</div>\n<div class=\"shop\">Riverbend Cycle Co.</div>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<h1>Alder overview</h1>\n<p class=\"supporting\">A clear look at your bike shop’s sales and orders.</p>\n</div>\n<p class=\"period\">Month to date · June 2025</p>\n</div>\n\n<section class=\"next-action\" aria-labelledby=\"next-heading\">\n<div>\n<div class=\"eyebrow\">UP NEXT · 2 ORDERS TO PACK</div>\n<h2 id=\"next-heading\">Pack the next order</h2>\n<p>Maya’s commuter lighting bundle is first in line.</p>\n</div>\n<button class=\"primary\" type=\"button\">Review order #1048 <span aria-hidden=\"true\">→</span></button>\n</section>\n\n<dl class=\"metrics\" aria-label=\"Month-to-date shop summary\">\n<div class=\"metric\">\n<dt>Revenue</dt>\n<dd>$12,000</dd>\n<p class=\"metric-note\">Net sales · USD</p>\n</div>\n<div class=\"metric\">\n<dt>Orders</dt>\n<dd>80</dd>\n<p class=\"metric-note\">This month</p>\n</div>\n<div class=\"metric\">\n<dt>Customers</dt>\n<dd>400</dd>\n<p class=\"metric-note\">Total riders</p>\n</div>\n</dl>\n\n<section class=\"orders\" aria-labelledby=\"orders-heading\">\n<div class=\"section-heading\">\n<div>\n<h2 id=\"orders-heading\">Recent orders</h2>\n<p>Latest activity · 18 June 2025</p>\n</div>\n<button class=\"secondary\" type=\"button\">View all</button>\n</div>\n<table aria-labelledby=\"orders-heading\">\n<colgroup><col class=\"order\"><col class=\"status\"><col class=\"amount\"></colgroup>\n<thead>\n<tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th class=\"money\" scope=\"col\">Amount</th></tr>\n</thead>\n<tbody>\n<tr>\n<td><div class=\"customer\"><span class=\"order-id\">#1048</span>Maya Chen</div><span class=\"product\">All-weather commuter lighting and reflective accessory bundle</span></td>\n<td><span class=\"badge pack\">To pack</span></td>\n<td class=\"money\">$89.00</td>\n</tr>\n<tr>\n<td><div class=\"customer\"><span class=\"order-id\">#1047</span>Elliot Brooks</div><span class=\"product\">Rear rack &amp; bungee straps</span></td>\n<td><span class=\"badge pickup\">Pickup ready</span></td>\n<td class=\"money\">$64.00</td>\n</tr>\n<tr>\n<td><div class=\"customer\"><span class=\"order-id\">#1046</span>Nora Williams</div><span class=\"product\">Waterproof pannier pair</span></td>\n<td><span class=\"badge pack\">To pack</span></td>\n<td class=\"money\">$145.00</td>\n</tr>\n<tr>\n<td><div class=\"customer\"><span class=\"order-id\">#1045</span>Leo Martin</div><span class=\"product\">Chain lubricant &amp; repair kit</span></td>\n<td><span class=\"badge complete\">Completed</span></td>\n<td class=\"money\">$38.00</td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-footer\"><span>Showing the 4 latest orders</span><span>All amounts in USD</span></div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-01","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Birch. Show Revenue $12731, Orders 87, Customers 423, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Birch overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Birch overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Birch overview</title>\n<style>\n:root{color-scheme:light;--bg:#f3f5f8;--surface:#fff;--ink:#243044;--muted:#667286;--line:#dfe5ed;--accent:#4c628b;--soft:#edf1f8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\n.topbar{background:var(--surface);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1120px;margin:auto;padding:17px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:11px}\n.brand-mark{width:32px;height:32px;display:grid;place-items:center;background:var(--accent);color:white;border-radius:8px}\n.brand-name{font-size:19px;font-weight:700;letter-spacing:-.5px}\n.brand-note{color:var(--muted);font-size:12px;border-left:1px solid var(--line);padding-left:15px;margin-left:5px}\n.store-state{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}\n.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}\nmain{max-width:1120px;margin:auto;padding:30px 28px 24px}\n.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:23px}\nh1{font-size:29px;line-height:1.2;letter-spacing:-.9px;margin:0 0 7px;font-weight:650}\n.intro p{margin:0;color:var(--muted)}\n.period{margin-top:5px;color:var(--muted);font-size:12px;white-space:nowrap}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 27px}\n.metric{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:19px 21px}\n.metric dt{color:var(--muted);font-size:13px;font-weight:500}\n.metric dd{margin:5px 0 8px;font-size:32px;line-height:1.2;font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums}\n.metric small{display:block;color:var(--muted);font-size:12px}\n.metric .change{color:var(--accent);font-weight:600}\n.orders{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.section-head{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}\nh2{margin:0 0 3px;font-size:18px;letter-spacing:-.3px;font-weight:650}\n.section-head p{margin:0;color:var(--muted);font-size:13px}\n.action{display:flex;align-items:center;gap:14px}\n.action .hint{max-width:145px;font-size:12px;line-height:1.4}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;background:var(--accent);border:1px solid var(--accent);border-radius:6px;color:white;padding:9px 14px;font-weight:600;font-size:13px;cursor:pointer}\nbutton:hover{background:#3e5277}\nbutton:focus-visible{outline:3px solid #a9b9d4;outline-offset:3px}\ntable{border-collapse:collapse;width:100%;table-layout:fixed}\ncol.status-col{width:155px}\ncol.amount-col{width:135px}\nth{background:#f8f9fb;color:var(--muted);font-size:11px;font-weight:600;text-align:left;letter-spacing:.6px;text-transform:uppercase;padding:10px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\ntd{padding:18px 22px;border-bottom:1px solid var(--line);vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\n.order-detail{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center}\n.order-number{font-size:13px;font-weight:650;color:var(--accent)}\n.customer{display:block;color:var(--muted);font-size:12px;margin-top:2px}\n.product{font-size:13px;line-height:1.45}\n.product small{display:block;font-size:12px;color:var(--muted);margin-top:2px}\n.status{display:inline-block;padding:4px 8px;border-radius:5px;background:var(--soft);color:var(--accent);font-size:11px;line-height:1.4;font-weight:600}\n.status.pending{background:#f3f4f6;color:#697384;border:1px solid var(--line)}\n.amount{text-align:right;font-weight:650;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}\nth.amount{font-size:11px;font-weight:600}\n.table-foot{padding:12px 22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px}\n.updated{display:flex;align-items:center;gap:6px}\n.page-foot{margin:13px 2px 0;color:var(--muted);font-size:11px}\n@media(max-width:600px){\n.topbar-inner{padding:13px 16px}\n.brand-note{display:none}\nmain{padding:22px 16px 18px}\n.intro{display:block;margin-bottom:18px}\nh1{font-size:27px}\n.intro p{font-size:13px;max-width:300px}\n.period{margin-top:10px;font-size:11px}\n.metrics{gap:8px;margin-bottom:20px}\n.metric{padding:12px 10px;border-radius:8px}\n.metric dt{font-size:11px}\n.metric dd{font-size:23px;letter-spacing:-.8px;margin:7px 0}\n.metric small{font-size:10px;line-height:1.4}\n.section-head{padding:16px 14px;display:block}\nh2{font-size:17px}\n.section-head p{font-size:12px}\n.action{margin-top:12px;justify-content:space-between;gap:12px}\n.action .hint{max-width:190px;font-size:11px}\nbutton{padding:8px 12px}\ncol.status-col{width:86px}\ncol.amount-col{width:85px}\nth{padding:9px 10px;font-size:10px}\ntd{padding:13px 10px}\n.order-detail{display:block}\n.customer{font-size:11px;margin-top:1px}\n.product{font-size:12px;margin-top:5px}\n.product small{display:none}\n.status{font-size:10px;padding:4px 6px}\n.amount{font-size:13px}\nth.amount{font-size:10px}\n.table-foot{padding:11px 12px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<span class=\"brand-mark\" aria-hidden=\"true\">\n<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n<circle cx=\"5\" cy=\"16\" r=\"3.5\"/><circle cx=\"19\" cy=\"16\" r=\"3.5\"/><path d=\"m5 16 4-8 5 8H5l6-6h5l3 6M8 8h4m3-3h2l-1 5\"/>\n</svg>\n</span>\n<span class=\"brand-name\">Birch</span>\n<span class=\"brand-note\">Independent bike shop</span>\n</div>\n<span class=\"store-state\"><span class=\"dot\" aria-hidden=\"true\"></span>Online store</span>\n</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"overview-title\">\n<div>\n<h1 id=\"overview-title\">Birch overview</h1>\n<p>Your shop at a glance, from everyday rides to weekend upgrades.</p>\n</div>\n<div class=\"period\">Last 30 days · Jun 1–30, 2025</div>\n</section>\n\n<dl class=\"metrics\" aria-label=\"Shop performance over the last 30 days\">\n<div class=\"metric\">\n<dt>Revenue</dt>\n<dd>$12,731</dd>\n<small><span class=\"change\">+8.2%</span> vs. last period</small>\n</div>\n<div class=\"metric\">\n<dt>Orders</dt>\n<dd>87</dd>\n<small>12 awaiting fulfilment</small>\n</div>\n<div class=\"metric\">\n<dt>Customers</dt>\n<dd>423</dd>\n<small>28 new this month</small>\n</div>\n</dl>\n\n<section class=\"orders\" aria-labelledby=\"orders-title\">\n<div class=\"section-head\">\n<div>\n<h2 id=\"orders-title\">Recent orders</h2>\n<p>The latest bikes, parts and workshop bookings.</p>\n</div>\n<div class=\"action\">\n<p class=\"hint\" id=\"view-hint\">All 87 orders, including shop pickups.</p>\n<button type=\"button\" aria-describedby=\"view-hint\">View all <span aria-hidden=\"true\">→</span></button>\n</div>\n</div>\n<table aria-label=\"Four most recent shop orders\">\n<colgroup><col><col class=\"status-col\"><col class=\"amount-col\"></colgroup>\n<thead>\n<tr><th scope=\"col\">Order / items</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"amount\">Amount</th></tr>\n</thead>\n<tbody>\n<tr>\n<td><div class=\"order-detail\"><div><span class=\"order-number\">#B-1048</span><span class=\"customer\">Maya Chen</span></div><div class=\"product\">All-weather commuter tyre pair<small>2 items · Shop pickup</small></div></div></td>\n<td><span class=\"status\">Pickup ready</span></td>\n<td class=\"amount\">$94.00</td>\n</tr>\n<tr>\n<td><div class=\"order-detail\"><div><span class=\"order-number\">#B-1047</span><span class=\"customer\">Oliver Brooks</span></div><div class=\"product\">Gravel wheelset · 700c<small>1 item · Home delivery</small></div></div></td>\n<td><span class=\"status\">Shipped</span></td>\n<td class=\"amount\">$489.00</td>\n</tr>\n<tr>\n<td><div class=\"order-detail\"><div><span class=\"order-number\">#B-1046</span><span class=\"customer\">Priya Patel</span></div><div class=\"product\">Rechargeable front &amp; rear light set<small>1 item · Home delivery</small></div></div></td>\n<td><span class=\"status\">Packing</span></td>\n<td class=\"amount\">$68.50</td>\n</tr>\n<tr>\n<td><div class=\"order-detail\"><div><span class=\"order-number\">#B-1045</span><span class=\"customer\">Sam Rivera</span></div><div class=\"product\">Spring tune-up &amp; new brake pads<small>Workshop booking · Drop-off</small></div></div></td>\n<td><span class=\"status pending\">Awaiting payment</span></td>\n<td class=\"amount\">$145.00</td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-foot\">\n<span>4 latest orders · Amounts in USD</span>\n<span class=\"updated\"><span class=\"dot\" aria-hidden=\"true\"></span>Updated 4 min ago</span>\n</div>\n</section>\n<p class=\"page-foot\">Online sales and workshop bookings. In-store till sales are not included.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-02","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Cedar. Show Revenue $13462, Orders 94, Customers 446, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Cedar overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Cedar overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Cedar overview</title>\n<style>\n:root{--paper:#f8f5ef;--ink:#302c28;--muted:#70685f;--accent:#a64f35;--line:#ded7cd}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px}\nbutton,select{font:inherit}\nbutton,select{outline-offset:4px}\nbutton:focus-visible,select:focus-visible{outline:2px solid var(--accent)}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1120px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between}\n.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:30px;height:30px;color:var(--accent)}\n.shop-label{font-size:12px;color:var(--muted);letter-spacing:.03em}\nmain{max-width:1120px;margin:auto;padding:46px 32px 28px}\n.intro{display:flex;justify-content:space-between;align-items:center;gap:28px}\n.eyebrow{margin:0 0 10px;color:var(--accent);font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}\nh1,h2{font-family:Georgia,\"Times New Roman\",serif;font-weight:400}\nh1{margin:0;font-size:46px;line-height:1.1;letter-spacing:-1.5px}\n.description{margin:12px 0 0;color:var(--muted);line-height:1.5}\n.period{min-width:180px}\n.period label{display:block;margin-bottom:7px;color:var(--muted);font-size:12px}\nselect{width:100%;padding:10px 30px 10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink)}\n.metrics{display:grid;grid-template-columns:1.3fr 1fr 1fr;margin:35px 0 40px;padding:25px 0 27px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.metric{padding:0 30px;border-left:1px solid var(--line)}\n.metric:first-child{padding-left:0;border-left:0}\n.metric:last-child{padding-right:0}\n.metrics dt{font-size:13px;font-weight:550}\n.metrics dd{margin:9px 0 0;font-size:43px;font-weight:500;letter-spacing:-1.5px;line-height:1.1;font-variant-numeric:tabular-nums}\n.metric-note{display:block;margin-top:12px;font-size:12px;color:var(--muted)}\n.trend{color:var(--accent);font-weight:600}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:23px}\nh2{font-size:28px;letter-spacing:-.5px;margin:0 0 6px}\n.summary{margin:0;font-size:12px;color:var(--muted)}\n.summary strong{color:var(--ink);font-weight:550}\n.button{flex-shrink:0;padding:10px 17px;background:transparent;border:1px solid var(--accent);border-radius:3px;color:var(--accent);font-weight:600;cursor:pointer}\n.button:hover{background:#a64f350b}\ntable{width:100%;border-collapse:collapse;text-align:left}\ncaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\nthead th{padding:0 0 12px;font-size:11px;font-weight:550;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right}\ntbody td{padding:22px 18px 22px 0;border-bottom:1px solid var(--line);vertical-align:middle}\ntbody td:last-child{padding-right:0}\n.order-id{display:block;margin-bottom:6px;font-size:12px;color:var(--muted)}\n.order-id strong{color:var(--ink);font-weight:600}\n.product{font-weight:550}\n.customer-name{display:block;font-size:14px}\n.secondary{display:block;margin-top:5px;font-size:12px;color:var(--muted)}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent)}\n.status.complete{color:var(--ink)}\n.status-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid currentColor;border-radius:50%;font-size:10px;line-height:1;flex-shrink:0}\n.amount{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}\n.table-footer{display:flex;justify-content:space-between;gap:16px;margin-top:15px;color:var(--muted);font-size:11px;line-height:1.5}\n.table-footer p{margin:0}\n@media(max-width:600px){\n.header-inner{padding:15px 24px}\n.brand{font-size:21px}\n.brand svg{width:25px;height:25px}\n.shop-label{font-size:11px}\nmain{padding:25px 24px 20px}\n.intro{display:block}\n.eyebrow{margin-bottom:8px;font-size:10px}\nh1{font-size:35px;letter-spacing:-1px}\n.description{margin-top:8px;font-size:12px}\n.period{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}\n.period label{margin:0;font-size:11px}\nselect{width:155px;padding:7px 24px 7px 9px;font-size:12px}\n.metrics{grid-template-columns:1.25fr 1fr 1fr;margin:22px 0 25px;padding:19px 0}\n.metric{padding:0 13px}\n.metrics dt{font-size:11px}\n.metrics dd{font-size:28px;letter-spacing:-1px;margin-top:8px}\n.metric-note{font-size:10px;line-height:1.4;margin-top:9px}\n.section-heading{margin-bottom:15px}\nh2{font-size:25px}\n.summary{font-size:11px}\n.button{padding:8px 13px;font-size:12px}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntable,tbody{display:block;width:100%}\ntbody{border-top:1px solid var(--line)}\ntr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:15px 0;border-bottom:1px solid var(--line)}\ntbody td{display:block;padding:0;border:0;min-width:0}\ntd.order{grid-column:1;grid-row:1}\ntd.customer{grid-column:1;grid-row:2;align-self:end}\ntd.fulfillment{grid-column:2;grid-row:2;text-align:right}\ntd.total{grid-column:2;grid-row:1;align-self:center}\n.order-id{font-size:10px;margin-bottom:4px}\n.product{font-size:12px}\n.customer-name{font-size:11px;color:var(--muted)}\n.customer .secondary{display:none}\n.status{font-size:11px;gap:4px}\n.status-icon{width:13px;height:13px;font-size:9px}\n.fulfillment .secondary{font-size:10px;margin-top:3px}\n.amount{font-size:17px}\n.table-footer{font-size:10px;flex-direction:column;gap:3px;margin-top:12px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"16\" cy=\"16\" r=\"13\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"16\" cy=\"16\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M16 3v10m0 6v10M3 16h10m6 0h10M7 7l7 7m4 4 7 7M7 25l7-7m4-4 7-7\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\n<span>Cedar</span>\n</div>\n<span class=\"shop-label\">Independent bicycle shop</span>\n</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"overview-title\">\n<div>\n<p class=\"eyebrow\">Your shop, at a glance</p>\n<h1 id=\"overview-title\">Cedar overview</h1>\n<p class=\"description\">Sales, pickups and the next bikes out the door.</p>\n</div>\n<div class=\"period\">\n<label for=\"period\">Reporting period</label>\n<select id=\"period\" name=\"period\">\n<option selected>June 2025</option>\n<option>May 2025</option>\n<option>April 2025</option>\n</select>\n</div>\n</section>\n<dl class=\"metrics\" aria-label=\"Month-to-date shop performance\">\n<div class=\"metric\">\n<dt>Revenue</dt>\n<dd>$13,462</dd>\n<span class=\"metric-note\"><span class=\"trend\">↑ 12%</span> vs. prior period</span>\n</div>\n<div class=\"metric\">\n<dt>Orders</dt>\n<dd>94</dd>\n<span class=\"metric-note\">8 awaiting pickup</span>\n</div>\n<div class=\"metric\">\n<dt>Customers</dt>\n<dd>446</dd>\n<span class=\"metric-note\">27 new this month</span>\n</div>\n</dl>\n<section aria-labelledby=\"orders-title\">\n<div class=\"section-heading\">\n<div>\n<h2 id=\"orders-title\">Recent orders</h2>\n<p class=\"summary\"><strong>4 latest orders</strong> · 3 open</p>\n</div>\n<button class=\"button\" type=\"button\">View all</button>\n</div>\n<table>\n<caption>Recent online orders, with status, next steps and totals in US dollars</caption>\n<thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Customer</th><th scope=\"col\">Status &amp; next step</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr>\n<td class=\"order\"><span class=\"order-id\"><strong>#1048</strong> · Jun 18</span><span class=\"product\">Workshop tune-up</span></td>\n<td class=\"customer\"><span class=\"customer-name\">Sam Rivera</span><span class=\"secondary\">Shop pickup</span></td>\n<td class=\"fulfillment\"><span class=\"status\"><span class=\"status-icon\" aria-hidden=\"true\">✓</span>Ready for pickup</span><span class=\"secondary\">Next: notify customer</span></td>\n<td class=\"total\"><span class=\"amount\">$95.00</span></td>\n</tr>\n<tr>\n<td class=\"order\"><span class=\"order-id\"><strong>#1047</strong> · Jun 18</span><span class=\"product\">Helmet &amp; rear light</span></td>\n<td class=\"customer\"><span class=\"customer-name\">Lena Brooks</span><span class=\"secondary\">Local delivery</span></td>\n<td class=\"fulfillment\"><span class=\"status\"><span class=\"status-icon\" aria-hidden=\"true\">◐</span>Packing · 1 of 2</span><span class=\"secondary\">Next: pack rear light</span></td>\n<td class=\"total\"><span class=\"amount\">$148.00</span></td>\n</tr>\n<tr>\n<td class=\"order\"><span class=\"order-id\"><strong>#1046</strong> · Jun 17</span><span class=\"product\">City commuter bike</span></td>\n<td class=\"customer\"><span class=\"customer-name\">Alex Chen</span><span class=\"secondary\">Shop pickup</span></td>\n<td class=\"fulfillment\"><span class=\"status complete\"><span class=\"status-icon\" aria-hidden=\"true\">✓</span>Collected</span><span class=\"secondary\">Complete · no action needed</span></td>\n<td class=\"total\"><span class=\"amount\">$849.00</span></td>\n</tr>\n<tr>\n<td class=\"order\"><span class=\"order-id\"><strong>#1045</strong> · Jun 17</span><span class=\"product\">Pannier bag</span></td>\n<td class=\"customer\"><span class=\"customer-name\">Maya Patel</span><span class=\"secondary\">Shop pickup</span></td>\n<td class=\"fulfillment\"><span class=\"status\"><span class=\"status-icon\" aria-hidden=\"true\">!</span>Payment pending</span><span class=\"secondary\">Next: send payment link</span></td>\n<td class=\"total\"><span class=\"amount\">$64.00</span></td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-footer\">\n<p>Online orders only · All amounts in USD</p>\n<p>Snapshot as of Jun 18, 9:24 am</p>\n</div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-03","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Dune. Show Revenue $14193, Orders 101, Customers 469, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Dune overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Dune overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Dune overview</title>\n<style>\n:root{--bg:#f7f6f3;--paper:#fff;--ink:#29262b;--muted:#746e76;--line:#e5e1e5;--plum:#56364f;--soft:#f2edf1;--green:#42654f}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\n.topbar{border-bottom:1px solid var(--line);background:var(--paper)}\n.topbar-inner{max-width:1120px;margin:auto;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:baseline;gap:14px}\n.wordmark{font-size:27px;font-weight:750;letter-spacing:-1.5px;color:var(--plum)}\n.brand-note{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}\n.store-note{font-size:12px;color:var(--muted)}\nmain{max-width:1120px;margin:0 auto;padding:42px 0 28px}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}\n.eyebrow{margin:0 0 8px;color:var(--plum);font-size:11px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:44px;line-height:1.15;letter-spacing:-1.2px}\n.description{margin:12px 0 0;color:var(--muted)}\n.period{text-align:right;flex-shrink:0}\n.period span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}\n.period strong{display:block;margin-top:4px;font-size:13px;font-weight:550}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:30px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}\n.metric{padding:23px 26px}\n.metric+.metric{border-left:1px solid var(--line)}\n.metric h2{margin:0 0 8px;font-size:13px;font-weight:550;color:var(--muted)}\n.metric-value{margin:0;font-size:34px;line-height:1.2;font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums}\n.metric:first-child .metric-value{color:var(--plum)}\n.comparison{margin:10px 0 0;font-size:12px;color:var(--muted)}\n.comparison b{color:var(--green);font-weight:550}\n.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:22px;align-items:start}\n.orders{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.section-head{padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px}\nh2{font-size:17px;line-height:1.3;margin:0;font-weight:650;letter-spacing:-.2px}\n.section-head p{margin:4px 0 0;color:var(--muted);font-size:12px}\nbutton{border:1px solid #d6cbd3;border-radius:5px;background:var(--paper);color:var(--plum);padding:7px 13px;font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer}\nbutton:hover{background:var(--soft)}\nbutton:focus-visible{outline:3px solid #a5819a;outline-offset:3px}\ntable{border-collapse:collapse;width:100%;table-layout:fixed}\ncol.order-col{width:49%}\ncol.status-col{width:27%}\ncol.amount-col{width:24%}\nth{background:#faf9fa;text-align:left;font-size:11px;font-weight:550;color:var(--muted);padding:10px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\ntd{padding:16px 22px;border-bottom:1px solid var(--line);vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\nth:last-child,td:last-child{text-align:right}\n.customer{display:block;font-weight:600;font-size:13px}\n.order-meta{display:block;margin-top:2px;color:var(--muted);font-size:11px}\n.item{display:block;margin-top:3px;font-size:12px;color:#575159}\n.status{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:550;white-space:nowrap}\n.status:before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.ready{background:var(--soft);color:var(--plum)}\n.shipped{background:#edf3ee;color:var(--green)}\n.packing{background:#f5f0e4;color:#826722}\n.collected{background:#f0f0f1;color:#65616a}\n.amount{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}\n.detail{padding:22px;background:#efebee;border:1px solid #e2dbe1;border-radius:8px}\n.detail h2{font-size:15px}\n.detail-summary{font-size:13px;margin:10px 0 18px;line-height:1.6;color:#5d525d}\n.detail-summary strong{color:var(--plum);font-weight:650}\n.mix{display:block;width:100%;height:24px;margin-bottom:15px}\n.detail dl{margin:0}\n.detail dl div{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:12px}\n.detail dt{font-size:12px;display:flex;align-items:center;gap:8px}\n.detail dt:before{content:\"\";width:8px;height:8px;border-radius:2px;background:var(--plum)}\n.detail dl div:last-child dt:before{background:#c8bcc5}\n.detail dd{margin:0;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}\n.detail-foot{font-size:11px;color:var(--muted);margin:20px 0 0;padding-top:16px;border-top:1px solid #dcd3da}\nfooter{display:flex;justify-content:space-between;gap:12px;margin-top:20px;color:var(--muted);font-size:11px}\n@media(max-width:1184px){.topbar-inner{margin:0 32px}main{margin:0 32px}}\n@media(max-width:700px){\n.topbar-inner{margin:0 18px;min-height:58px}\n.brand{gap:10px}.wordmark{font-size:24px}.brand-note{font-size:9px;letter-spacing:1px}.store-note{font-size:11px}\nmain{margin:0 18px;padding:24px 0 20px}\n.intro{display:block;margin-bottom:20px}\n.eyebrow{font-size:10px;margin-bottom:6px}\nh1{font-size:34px;letter-spacing:-.8px}\n.description{font-size:12px;margin-top:9px;max-width:330px}\n.period{margin-top:12px;text-align:left;display:flex;gap:8px;align-items:baseline}\n.period span{font-size:10px}.period strong{font-size:11px;margin:0}\n.metrics{margin-bottom:20px}\n.metric{padding:14px 11px}\n.metric h2{font-size:11px;margin-bottom:7px}\n.metric-value{font-size:24px;letter-spacing:-.8px}\n.comparison{font-size:10px;margin-top:7px}\n.comparison span{display:block}\n.content-grid{grid-template-columns:minmax(0,1fr);gap:16px}\n.section-head{padding:15px 12px}\n.section-head h2{font-size:16px}\n.section-head p{font-size:11px}\nbutton{padding:6px 10px}\ncol.order-col{width:45%}col.status-col{width:28%}col.amount-col{width:27%}\nth{padding:9px 11px;font-size:10px}\ntd{padding:12px 11px}\n.customer{font-size:12px}\n.order-meta{font-size:10px}\n.item{font-size:10px}\n.status{font-size:10px;padding:4px 6px;gap:4px}\n.amount{font-size:12px}\n.detail{padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px}\n.detail h2{font-size:14px}\n.detail-summary{margin:7px 0 0;font-size:12px;grid-column:1;grid-row:2 / 4}\n.mix{grid-column:2;grid-row:1;margin:0;height:18px;align-self:center}\n.detail dl{grid-column:2;grid-row:2 / 4}\n.detail dl div{margin-top:7px}\n.detail dt{font-size:11px;gap:6px}.detail dd{font-size:12px}\n.detail-foot{grid-column:1 / -1;margin-top:12px;padding-top:10px}\nfooter{font-size:10px;margin-top:15px;flex-wrap:wrap}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\"><span class=\"wordmark\">dune</span><span class=\"brand-note\">Independent bike shop</span></div>\n<span class=\"store-note\">Online store</span>\n</div>\n</header>\n<main>\n<header class=\"intro\">\n<div>\n<p class=\"eyebrow\">Shop dashboard</p>\n<h1>Dune overview</h1>\n<p class=\"description\">Bikes, parts and ride essentials sold through your online shop.</p>\n</div>\n<div class=\"period\"><span>Reporting period</span><strong>1–30 June 2025</strong></div>\n</header>\n\n<section class=\"metrics\" aria-label=\"Monthly shop performance\">\n<article class=\"metric\">\n<h2>Revenue</h2>\n<p class=\"metric-value\">$14193</p>\n<p class=\"comparison\"><b>↑ 8.2%</b> <span>vs. May</span></p>\n</article>\n<article class=\"metric\">\n<h2>Orders</h2>\n<p class=\"metric-value\">101</p>\n<p class=\"comparison\"><b>↑ 12 orders</b> <span>vs. May</span></p>\n</article>\n<article class=\"metric\">\n<h2>Customers</h2>\n<p class=\"metric-value\">469</p>\n<p class=\"comparison\">Total customers <span>across all time</span></p>\n</article>\n</section>\n\n<div class=\"content-grid\">\n<section class=\"orders\" aria-labelledby=\"recent-title\">\n<header class=\"section-head\">\n<div><h2 id=\"recent-title\">Recent orders</h2><p>The latest orders from your online store.</p></div>\n<button type=\"button\">View all</button>\n</header>\n<table aria-label=\"Four most recent orders\">\n<colgroup><col class=\"order-col\"><col class=\"status-col\"><col class=\"amount-col\"></colgroup>\n<thead><tr><th scope=\"col\">Order / customer</th><th scope=\"col\">Status</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"customer\">Maya Chen</span><span class=\"order-meta\">#1048 · Today, 10:42</span><span class=\"item\">City helmet · Pickup</span></td>\n<td><span class=\"status ready\">Ready</span></td><td class=\"amount\">$85.00</td>\n</tr>\n<tr>\n<td><span class=\"customer\">Owen Brooks</span><span class=\"order-meta\">#1047 · Today, 09:18</span><span class=\"item\">All-road bike · Shipping</span></td>\n<td><span class=\"status shipped\">Shipped</span></td><td class=\"amount\">$1,249.00</td>\n</tr>\n<tr>\n<td><span class=\"customer\">Isla Martin</span><span class=\"order-meta\">#1046 · Yesterday</span><span class=\"item\">Chain &amp; pads · Pickup</span></td>\n<td><span class=\"status packing\">Packing</span></td><td class=\"amount\">$64.00</td>\n</tr>\n<tr>\n<td><span class=\"customer\">Leo Davis</span><span class=\"order-meta\">#1045 · Yesterday</span><span class=\"item\">Rear rack · Pickup</span></td>\n<td><span class=\"status collected\">Collected</span></td><td class=\"amount\">$48.00</td>\n</tr>\n</tbody>\n</table>\n</section>\n\n<aside class=\"detail\" aria-labelledby=\"fulfillment-title\">\n<h2 id=\"fulfillment-title\">Fulfillment mix</h2>\n<p class=\"detail-summary\"><strong>71 of 101 orders</strong> chose shop pickup this month.</p>\n<svg class=\"mix\" viewBox=\"0 0 200 20\" role=\"img\" aria-labelledby=\"mix-title\">\n<title id=\"mix-title\">June orders: 70 percent shop pickup, 30 percent shipping</title>\n<rect x=\"0\" y=\"2\" width=\"140.6\" height=\"16\" rx=\"2\" fill=\"#56364f\"/>\n<rect x=\"144.6\" y=\"2\" width=\"55.4\" height=\"16\" rx=\"2\" fill=\"#c8bcc5\"/>\n</svg>\n<dl>\n<div><dt>Shop pickup</dt><dd>71</dd></div>\n<div><dt>Ship to rider</dt><dd>30</dd></div>\n</dl>\n<p class=\"detail-foot\">Ready orders are waiting at the service counter.</p>\n</aside>\n</div>\n<footer><span>All amounts in USD.</span><span>Updated 30 June 2025, 11:00</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-04","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Elm. Show Revenue $14924, Orders 108, Customers 492, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: calm and spacious; use forest green as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Elm overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Elm overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Elm overview</title>\n<style>\n:root{color-scheme:light;--ink:#24352c;--muted:#657169;--green:#255c40;--line:#dfe5dc;--paper:#fff;--bg:#f5f6f2}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\n.topbar{background:var(--paper);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1120px;margin:auto;min-height:76px;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-1px}\n.brand svg{width:28px;height:32px;color:var(--green)}\n.workspace{text-align:right;color:var(--muted);font-size:13px}\n.workspace strong{display:block;color:var(--ink);font-weight:600}\nmain{max-width:1120px;margin:auto;padding:42px 32px 32px}\n.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0 0 8px;font-weight:650}\np{margin:0}\n.intro{color:var(--muted);font-size:15px}\n.period{color:var(--muted);white-space:nowrap;font-size:13px;padding-bottom:3px}\n.period strong{display:block;color:var(--ink);font-weight:600}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 38px}\n.metric{padding:24px 28px}\n.metric+ .metric{border-left:1px solid var(--line)}\ndt{font-weight:500;color:var(--muted);margin-bottom:5px}\ndd{margin:0;font-size:38px;line-height:1.2;font-weight:650;letter-spacing:-1.3px;font-variant-numeric:tabular-nums}\n.metric p{font-size:12px;color:var(--muted);margin-top:10px}\n.growth{color:var(--green);font-weight:600}\n.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}\nh2{font-size:21px;letter-spacing:-.4px;line-height:1.3;margin:0 0 4px;font-weight:650}\n.section-heading p{color:var(--muted);font-size:13px}\nbutton{min-height:44px;padding:10px 18px;border:1px solid #b9cbbd;border-radius:6px;color:var(--green);background:var(--paper);font-weight:600;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#edf3ec}\nbutton:focus-visible{outline:3px solid #7eac8c;outline-offset:3px}\n.table-wrap{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\ncaption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\ncol.member-col{width:49%}\ncol.pickup-col{width:26%}\ncol.amount-col{width:25%}\nthead{background:#f9faf7}\nth{font-size:12px;font-weight:600;color:var(--muted);text-align:left;padding:13px 24px;border-bottom:1px solid var(--line)}\ntd{padding:19px 24px;vertical-align:top}\ntbody tr+tr td{border-top:1px solid var(--line)}\n.order-meta{font-size:11px;letter-spacing:.3px;color:var(--muted);margin-bottom:3px}\n.member-name{display:block;font-weight:600;font-size:15px}\n.basket{max-width:265px;font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px;overflow-wrap:anywhere}\n.pickup-date{font-weight:500;font-size:14px;display:block}\n.pickup-place{color:var(--muted);font-size:12px;display:block;margin-top:4px}\n.amount-cell,th:last-child{text-align:right}\n.amount{display:block;font-size:19px;font-weight:650;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.3}\n.status{display:inline-block;margin-top:9px;padding:3px 9px;font-size:11px;font-weight:600;line-height:1.5;border-radius:4px}\n.ready{background:#e9f2e9;color:#2e6241}\n.packing{background:#f4eedc;color:#796121}\n.collected{background:#edf0ec;color:#58655a}\n.due{background:#f7eae4;color:#8b4b32}\n.mobile-pickup{display:none}\n.table-note{border-top:1px solid var(--line);padding:13px 24px;font-size:12px;color:var(--muted)}\nfooter{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;margin-top:18px}\nfooter svg{width:15px;height:15px;flex:none;color:var(--green)}\n@media(max-width:600px){\n.topbar-inner{min-height:66px;padding:12px 20px;gap:16px}\n.brand{font-size:23px}\n.workspace{font-size:11px;max-width:165px}\nmain{padding:26px 20px}\n.page-heading{display:block;margin-bottom:21px}\nh1{font-size:28px}\n.intro{font-size:13px}\n.period{margin-top:12px;font-size:12px}\n.period strong{display:inline;margin-right:6px}\n.metrics{margin-bottom:26px}\n.metric{padding:16px 12px}\ndt{font-size:12px}\ndd{font-size:24px;letter-spacing:-.8px}\n.metric p{font-size:11px;line-height:1.4;margin-top:8px}\n.section-heading{margin-bottom:14px;gap:12px}\nh2{font-size:19px}\n.section-heading p{font-size:12px;max-width:205px}\nbutton{padding:10px 14px;font-size:13px}\ncol.member-col{width:65%}\ncol.amount-col{width:35%}\ncol.pickup-col,.pickup{display:none}\nth{font-size:11px;padding:11px 14px}\ntd{padding:14px}\n.member-name{font-size:14px}\n.basket{font-size:12px}\n.amount{font-size:18px}\n.status{font-size:10px;padding:3px 6px;max-width:100%}\n.mobile-pickup{display:block;color:var(--muted);font-size:11px;margin-top:7px}\n.table-note{padding:11px 14px;font-size:11px}\nfooter{align-items:flex-start;font-size:11px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M24 3C10 2 3 9 5 18c2 7 10 8 15 2 4-5 4-12 4-17Z\" fill=\"currentColor\"/><path d=\"M5 29 18 10\" stroke=\"#f5f6f2\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\n<span>elm</span>\n</div>\n<div class=\"workspace\"><strong>Maple Street Food Co-op</strong>Community shop</div>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div><h1>Elm overview</h1><p class=\"intro\">A little snapshot of your co-op’s month.</p></div>\n<p class=\"period\"><strong>Month to date</strong>June 1–18, 2025</p>\n</div>\n<dl class=\"metrics\" aria-label=\"Month-to-date shop activity\">\n<div class=\"metric\"><dt>Revenue</dt><dd>$14,924</dd><p><span class=\"growth\">↑ 8.2%</span> vs. May</p></div>\n<div class=\"metric\"><dt>Orders</dt><dd>108</dd><p>Across 6 pickup days</p></div>\n<div class=\"metric\"><dt>Customers</dt><dd>492</dd><p>Member households</p></div>\n</dl>\n<section aria-labelledby=\"orders-heading\">\n<div class=\"section-heading\">\n<div><h2 id=\"orders-heading\">Recent orders</h2><p>The latest baskets from your community.</p></div>\n<button type=\"button\">View all</button>\n</div>\n<div class=\"table-wrap\">\n<table>\n<caption>Four most recent co-op orders, with pickup details, amounts and status</caption>\n<colgroup><col class=\"member-col\"><col class=\"pickup-col\"><col class=\"amount-col\"></colgroup>\n<thead><tr><th scope=\"col\">Order &amp; member</th><th scope=\"col\" class=\"pickup\">Pickup</th><th scope=\"col\">Amount &amp; status</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"order-meta\">#ELM-1048 · Jun 18</div><strong class=\"member-name\">Maya Thompson</strong><p class=\"basket\">Weekly vegetable share + locally baked sourdough</p><span class=\"mobile-pickup\">Pickup · Sat, Jun 21</span></td>\n<td class=\"pickup\"><span class=\"pickup-date\">Sat, Jun 21</span><span class=\"pickup-place\">Co-op front porch</span></td>\n<td class=\"amount-cell\"><span class=\"amount\">$68.00</span><span class=\"status ready\">Ready for pickup</span></td>\n</tr>\n<tr>\n<td><div class=\"order-meta\">#ELM-1047 · Jun 18</div><strong class=\"member-name\">Jonah Rivera</strong><p class=\"basket\">Pasture-raised eggs + seasonal fruit basket</p><span class=\"mobile-pickup\">Pickup · Sat, Jun 21</span></td>\n<td class=\"pickup\"><span class=\"pickup-date\">Sat, Jun 21</span><span class=\"pickup-place\">Co-op front porch</span></td>\n<td class=\"amount-cell\"><span class=\"amount\">$42.50</span><span class=\"status packing\">Packing</span></td>\n</tr>\n<tr>\n<td><div class=\"order-meta\">#ELM-1046 · Jun 17</div><strong class=\"member-name\">Aisha Patel</strong><p class=\"basket\">Family harvest box + neighborhood solidarity pantry contribution</p><span class=\"mobile-pickup\">Pickup · Wed, Jun 18</span></td>\n<td class=\"pickup\"><span class=\"pickup-date\">Wed, Jun 18</span><span class=\"pickup-place\">Co-op front porch</span></td>\n<td class=\"amount-cell\"><span class=\"amount\">$95.00</span><span class=\"status collected\">Collected</span></td>\n</tr>\n<tr>\n<td><div class=\"order-meta\">#ELM-1045 · Jun 17</div><strong class=\"member-name\">Elliot Brooks</strong><p class=\"basket\">Bulk oats + local wildflower honey</p><span class=\"mobile-pickup\">Pickup · Sat, Jun 21</span></td>\n<td class=\"pickup\"><span class=\"pickup-date\">Sat, Jun 21</span><span class=\"pickup-place\">Co-op front porch</span></td>\n<td class=\"amount-cell\"><span class=\"amount\">$24.00</span><span class=\"status due\">Payment due</span></td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-note\">Amounts in USD · Member discounts included.</p>\n</div>\n</section>\n<footer>\n<svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 2v12M2 8h12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n<p>Every basket supports local growers and a well-stocked community pantry.</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-05","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Fjord. Show Revenue $15655, Orders 115, Customers 515, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: compact but readable; use slate blue as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Fjord overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Fjord overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Fjord overview</title>\n<style>\n:root{color-scheme:light;--bg:#f6f5f0;--ink:#233345;--muted:#657079;--line:#dedfd9;--accent:#526b86}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\n.topbar{height:68px;border-bottom:1px solid var(--line);background:#fbfaf7}\n.topbar-inner{max-width:1080px;margin:auto;height:100%;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:750;letter-spacing:-.6px}\n.brand svg{width:28px;height:28px;color:var(--accent)}\n.coop{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}\n.avatar{display:grid;place-items:center;width:32px;height:32px;background:#e6e9eb;border-radius:50%;color:var(--ink);font-size:11px;font-weight:700}\nmain{max-width:1080px;margin:auto;padding:32px 28px 24px}\n.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:26px}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0 0 8px;font-weight:650}\n.subtitle{margin:0;color:var(--muted)}\n.period{text-align:right;padding-top:4px;white-space:nowrap}\n.period strong{display:block;font-size:13px;font-weight:600}\n.update{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:11px;color:var(--muted);margin-top:5px}\n.dot{width:6px;height:6px;border-radius:50%;background:#698270}\n.metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0 0 26px;border-bottom:1px solid var(--line)}\n.metric{padding:0 28px;border-left:1px solid var(--line)}\n.metric:first-child{padding-left:0;border-left:0}\n.metric dt{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}\n.metric dd{margin:0;font-size:34px;font-weight:650;letter-spacing:-1px;line-height:1.2;font-variant-numeric:tabular-nums}\n.metric p{font-size:12px;color:var(--muted);margin:8px 0 0}\n.growth{color:#476954;font-weight:600}\n.orders{padding-top:28px}\n.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}\nh2{font-size:19px;letter-spacing:-.4px;margin:0 0 3px;font-weight:650}\n.section-heading p{margin:0;font-size:12px;color:var(--muted)}\n.action{display:flex;align-items:center;gap:14px}\n.action .hint{max-width:155px;text-align:right;font-size:11px;line-height:1.4}\nbutton{font:inherit;cursor:pointer}\n.view-all{display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:5px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:11px 16px;white-space:nowrap;min-height:42px}\n.view-all svg{width:14px;height:14px}\n.view-all:hover{background:#3d536a}\n.view-all:focus-visible{outline:3px solid #819cb7;outline-offset:3px}\ntable{border-collapse:collapse;width:100%;table-layout:fixed}\nth{font-size:11px;letter-spacing:.3px;font-weight:600;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:#eeeee8}\nth:first-child,td:first-child{padding-left:16px}\nth:last-child,td:last-child{text-align:right;padding-right:16px}\ntd{padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px;background:#fbfaf7}\n.member{width:29%}.basket{width:24%}.pickup{width:19%}.status{width:16%}.amount{width:12%}\n.member-name{display:block;font-size:13px;font-weight:600}\n.order-detail{display:block;font-size:11px;color:var(--muted);margin-top:3px}\n.basket-copy{display:block}\n.secondary{display:block;font-size:11px;color:var(--muted);margin-top:3px}\n.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap}\n.badge::before{content:\"\";height:5px;width:5px;border-radius:50%;background:currentColor}\n.ready{background:#e8eee7;color:#49624a}\n.packed{background:#e6ecf2;color:#526b86}\n.collected{background:#eeefeb;color:#656b61}\n.pending{background:#f3ecdE;color:#806936}\n.total{font-weight:650;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}\n.table-note{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:11px;margin:13px 0 0}\n@media(max-width:600px){\n.topbar{height:58px}\n.topbar-inner{padding:0 20px}\n.brand{font-size:20px}\n.coop{font-size:11px;gap:8px}\n.avatar{display:none}\nmain{padding:23px 20px 20px}\n.page-heading{display:block;margin-bottom:22px}\nh1{font-size:28px;margin-bottom:6px}\n.subtitle{font-size:12px}\n.period{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;margin-top:12px;padding:0}\n.period strong{font-size:11px}\n.update{font-size:10px;margin:0;gap:4px}\n.metrics{padding-bottom:21px}\n.metric{padding:0 12px}\n.metric:last-child{padding-right:0}\n.metric dt{font-size:11px;margin-bottom:6px}\n.metric dd{font-size:26px;letter-spacing:-.8px}\n.metric p{font-size:10px;line-height:1.4;margin-top:7px}\n.orders{padding-top:22px}\n.section-heading{align-items:flex-start;gap:10px;margin-bottom:14px}\nh2{font-size:18px}\n.section-heading p{font-size:11px}\n.action{display:flex;flex-direction:column-reverse;align-items:flex-end;gap:6px}\n.action .hint{max-width:116px;font-size:10px;line-height:1.3}\n.view-all{padding:9px 12px;gap:9px;font-size:12px;min-height:38px}\n.basket,.pickup{display:none}\n.member{width:47%}.status{width:30%}.amount{width:23%}\nth{font-size:10px;padding:9px 7px}\ntd{padding:14px 7px}\nth:first-child,td:first-child{padding-left:10px}\nth:last-child,td:last-child{padding-right:10px}\n.member-name{font-size:12px}\n.order-detail{font-size:10px}\n.badge{padding:4px 6px;font-size:10px;gap:4px}\n.total{font-size:13px}\n.table-note{font-size:10px;gap:12px}\n.table-note span:last-child{text-align:right}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 7h22M3 14h15M3 21h9\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>\n<span>Fjord</span>\n</div>\n<div class=\"coop\"><span>Northside Food Co-op</span><span class=\"avatar\" aria-hidden=\"true\">NC</span></div>\n</div>\n</header>\n<main>\n<header class=\"page-heading\">\n<div>\n<h1>Fjord overview</h1>\n<p class=\"subtitle\">Good food, shared locally. Your shop at a glance.</p>\n</div>\n<div class=\"period\">\n<strong>June 1–24, 2025</strong>\n<span class=\"update\"><span class=\"dot\" aria-hidden=\"true\"></span>Updated today at 9:42 AM</span>\n</div>\n</header>\n<dl class=\"metrics\" aria-label=\"Shop totals for June 1–24\">\n<div class=\"metric\">\n<dt>Revenue</dt>\n<dd>$15655</dd>\n<p><span class=\"growth\">↑ 8.2%</span> vs. last period</p>\n</div>\n<div class=\"metric\">\n<dt>Orders</dt>\n<dd>115</dd>\n<p>23 awaiting pickup</p>\n</div>\n<div class=\"metric\">\n<dt>Customers</dt>\n<dd>515</dd>\n<p>42 new co-op shoppers</p>\n</div>\n</dl>\n<section class=\"orders\" aria-labelledby=\"orders-heading\">\n<div class=\"section-heading\">\n<div>\n<h2 id=\"orders-heading\">Recent orders</h2>\n<p>The latest baskets from your community.</p>\n</div>\n<div class=\"action\">\n<p class=\"hint\" id=\"view-hint\">Find past orders and pickup details.</p>\n<button class=\"view-all\" type=\"button\" aria-describedby=\"view-hint\">View all <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n</div>\n</div>\n<table aria-label=\"Four most recent co-op orders\">\n<thead>\n<tr>\n<th class=\"member\" scope=\"col\">Customer / order</th>\n<th class=\"basket\" scope=\"col\">Basket</th>\n<th class=\"pickup\" scope=\"col\">Pickup</th>\n<th class=\"status\" scope=\"col\">Status</th>\n<th class=\"amount\" scope=\"col\">Amount</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><span class=\"member-name\">Maya Thompson</span><span class=\"order-detail\">#FJ-1048 · Jun 24</span></td>\n<td class=\"basket\"><span class=\"basket-copy\">Seasonal veg &amp; eggs</span><span class=\"secondary\">6 items</span></td>\n<td class=\"pickup\">Thu, Jun 26<span class=\"secondary\">3–6 PM · Co-op store</span></td>\n<td><span class=\"badge ready\">Ready</span></td>\n<td class=\"total\">$48.50</td>\n</tr>\n<tr>\n<td><span class=\"member-name\">Daniel Brooks</span><span class=\"order-detail\">#FJ-1047 · Jun 24</span></td>\n<td class=\"basket\"><span class=\"basket-copy\">Pantry staples</span><span class=\"secondary\">9 items</span></td>\n<td class=\"pickup\">Thu, Jun 26<span class=\"secondary\">3–6 PM · Co-op store</span></td>\n<td><span class=\"badge packed\">Packed</span></td>\n<td class=\"total\">$72.00</td>\n</tr>\n<tr>\n<td><span class=\"member-name\">Elena Rivera</span><span class=\"order-detail\">#FJ-1046 · Jun 23</span></td>\n<td class=\"basket\"><span class=\"basket-copy\">Bread &amp; local produce</span><span class=\"secondary\">4 items</span></td>\n<td class=\"pickup\">Tue, Jun 24<span class=\"secondary\">9 AM–12 PM · Co-op store</span></td>\n<td><span class=\"badge collected\">Collected</span></td>\n<td class=\"total\">$31.25</td>\n</tr>\n<tr>\n<td><span class=\"member-name\">Oliver Chen</span><span class=\"order-detail\">#FJ-1045 · Jun 23</span></td>\n<td class=\"basket\"><span class=\"basket-copy\">Family harvest box</span><span class=\"secondary\">8 items</span></td>\n<td class=\"pickup\">Thu, Jun 26<span class=\"secondary\">3–6 PM · Co-op store</span></td>\n<td><span class=\"badge pending\">Pending</span></td>\n<td class=\"total\">$64.80</td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-note\"><span>Showing the 4 latest orders</span><span>All amounts in USD · Pickup only</span></p>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-06","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Grove. Show Revenue $16386, Orders 122, Customers 538, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Grove overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Grove overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Grove overview</title>\n<style>\n:root{--ink:#263236;--muted:#657176;--line:#dfe5e5;--surface:#fff;--accent:#a44731;--tint:#f7ece7}\n*{box-sizing:border-box}\nbody{margin:0;background:#f3f5f5;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,select{font:inherit}\nbutton{cursor:pointer}\n.topbar{background:var(--surface);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1176px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:27px;font-weight:bold;letter-spacing:-1px}\n.brand svg{color:var(--accent);width:30px;height:30px}\n.workspace{font-size:12px;color:var(--muted)}\nmain{max-width:1176px;margin:auto;padding:38px 28px 28px}\n.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}\n.eyebrow{margin:0 0 7px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:44px;line-height:1.15;letter-spacing:-1.3px;margin:0 0 12px;font-weight:normal}\n.intro{margin:0;color:var(--muted);max-width:540px}\n.period{flex-shrink:0}\n.period label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px}\nselect{background:white;color:var(--ink);border:1px solid #cbd4d5;border-radius:5px;padding:9px 34px 9px 12px;min-height:40px}\nselect:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:25px 0;margin-bottom:28px}\n.metric{padding:0 28px;min-width:0}\n.metric+.metric{border-left:1px solid var(--line)}\n.metric h2{margin:0 0 8px;font-size:13px;font-weight:500;color:var(--muted)}\n.value{margin:0;font-size:38px;font-weight:600;letter-spacing:-1.4px;line-height:1.2;font-variant-numeric:tabular-nums}\n.metric p:last-child{margin:10px 0 0;font-size:12px;color:var(--muted)}\n.content-grid{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(260px,1fr);gap:24px;align-items:start}\n.panel{background:var(--surface);border:1px solid var(--line);border-radius:7px;overflow:hidden}\n.panel-heading{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}\nh2{font-family:Georgia,\"Times New Roman\",serif;font-size:23px;font-weight:normal;line-height:1.25;margin:0}\n.panel-heading p{margin:5px 0 0;color:var(--muted);font-size:12px}\n.view-all{border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:white;padding:9px 16px;white-space:nowrap;font-size:12px;font-weight:600;min-height:38px}\n.view-all:hover{background:#883a29}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\nth{background:#f7f9f9;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 24px;font-size:11px;font-weight:600;color:var(--muted);text-align:left}\nth:first-child{width:51%}\nth:nth-child(2){width:27%}\nth:last-child{width:22%;text-align:right}\ntd{padding:17px 24px;border-bottom:1px solid var(--line);vertical-align:middle}\n.customer{display:block;font-size:14px;font-weight:600;margin-bottom:3px}\n.order-detail{display:block;font-size:11px;color:var(--muted)}\n.status{display:inline-block;border-radius:4px;padding:4px 8px;background:#edf1f1;color:#536168;font-size:11px;font-weight:600;white-space:nowrap}\n.status.ready{background:var(--tint);color:#8d3e2b}\n.amount{text-align:right;font-weight:650;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}\n.table-foot{padding:13px 24px;margin:0;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}\n.dot{width:5px;height:5px;background:#7e8c90;border-radius:50%;display:inline-block;flex-shrink:0}\n.secondary-heading{padding:23px 22px 16px;border-bottom:1px solid var(--line)}\n.secondary-heading h2{font-size:21px}\n.pending{display:block;margin-top:8px;color:var(--muted);font-size:12px}\n.empty{padding:28px 22px 30px}\n.empty-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#f1f4f4;border:1px solid var(--line);border-radius:50%;color:#78878c;margin-bottom:17px}\n.empty h3{font-size:14px;margin:0 0 8px;font-weight:600}\n.empty p{font-size:13px;color:var(--muted);margin:0;line-height:1.65}\n.secondary-foot{padding:15px 22px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\n.secondary-foot strong{color:var(--ink);font-weight:600}\nfooter{display:flex;justify-content:space-between;gap:15px;margin-top:24px;font-size:11px;color:var(--muted)}\n@media(max-width:700px){\n.topbar-inner{padding:15px 18px;gap:12px}\n.brand{font-size:25px}\n.workspace{font-size:10px;text-align:right;max-width:125px}\nmain{padding:25px 18px 22px}\n.page-heading{display:block;margin-bottom:20px}\nh1{font-size:34px;letter-spacing:-.8px;margin-bottom:9px}\n.intro{font-size:13px}\n.period{display:flex;align-items:center;gap:12px;margin-top:17px}\n.period label{margin:0;font-size:11px}\nselect{min-height:36px;padding-top:6px;padding-bottom:6px;font-size:12px}\n.metrics{padding:18px 0;margin-bottom:20px}\n.metric{padding:0 12px}\n.metric h2{font-size:11px;margin-bottom:6px}\n.value{font-size:26px;letter-spacing:-1px}\n.metric p:last-child{font-size:10px;margin-top:7px;line-height:1.4}\n.content-grid{grid-template-columns:minmax(0,1fr);gap:20px}\n.panel-heading{padding:18px 14px;gap:10px}\nh2{font-size:21px}\n.panel-heading p{font-size:10px}\n.view-all{padding:8px 11px;font-size:11px}\nth{padding:10px 12px;font-size:10px}\nth:first-child{width:46%}\nth:nth-child(2){width:28%}\nth:last-child{width:26%}\ntd{padding:15px 12px}\n.customer{font-size:12px}\n.order-detail{font-size:10px}\n.status{font-size:10px;padding:4px 6px}\n.amount{font-size:13px}\n.table-foot{padding:12px 14px;font-size:10px}\n.secondary-heading{padding:18px}\n.empty{padding:20px 18px}\n.empty-icon{margin-bottom:12px}\n.secondary-foot{padding:13px 18px}\nfooter{font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M16 28V14M16 21C7 21 4 15 5 7c8 0 12 4 11 14ZM16 15C16 7 21 3 28 4c0 8-5 12-12 11Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\nGrove\n</div>\n<span class=\"workspace\">Northside Food Co-op<br>Member-owned · Locally rooted</span>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<p class=\"eyebrow\">Your co-op, at a glance</p>\n<h1>Grove overview</h1>\n<p class=\"intro\">Track member orders and the local food moving through your co-op.</p>\n</div>\n<div class=\"period\">\n<label for=\"period\">Reporting period</label>\n<select id=\"period\" name=\"period\">\n<option selected>June 2025</option>\n<option>May 2025</option>\n<option>April 2025</option>\n</select>\n</div>\n</div>\n\n<section class=\"metrics\" aria-label=\"Monthly shop summary\">\n<div class=\"metric\">\n<h2>Revenue</h2>\n<p class=\"value\">$16,386</p>\n<p>Sales this month</p>\n</div>\n<div class=\"metric\">\n<h2>Orders</h2>\n<p class=\"value\">122</p>\n<p>86 collected</p>\n</div>\n<div class=\"metric\">\n<h2>Customers</h2>\n<p class=\"value\">538</p>\n<p>Co-op households</p>\n</div>\n</section>\n\n<div class=\"content-grid\">\n<section class=\"panel\" aria-labelledby=\"orders-title\">\n<div class=\"panel-heading\">\n<div>\n<h2 id=\"orders-title\">Recent orders</h2>\n<p>4 latest orders · 122 this month</p>\n</div>\n<button class=\"view-all\" type=\"button\">View all</button>\n</div>\n<table aria-label=\"Four most recent co-op orders\">\n<thead>\n<tr><th scope=\"col\">Order / member</th><th scope=\"col\">Pickup status</th><th scope=\"col\">Amount</th></tr>\n</thead>\n<tbody>\n<tr>\n<td><span class=\"customer\">Maya Thompson</span><span class=\"order-detail\">#1048 · Jun 18 · Produce box</span></td>\n<td><span class=\"status ready\">Ready</span></td>\n<td class=\"amount\">$86.50</td>\n</tr>\n<tr>\n<td><span class=\"customer\">Daniel Reyes</span><span class=\"order-detail\">#1047 · Jun 18 · Pantry staples</span></td>\n<td><span class=\"status\">Packing</span></td>\n<td class=\"amount\">$42.00</td>\n</tr>\n<tr>\n<td><span class=\"customer\">Aisha Patel</span><span class=\"order-detail\">#1046 · Jun 17 · Weekly groceries</span></td>\n<td><span class=\"status\">Collected</span></td>\n<td class=\"amount\">$118.25</td>\n</tr>\n<tr>\n<td><span class=\"customer\">Oliver Chen</span><span class=\"order-detail\">#1045 · Jun 17 · Bread &amp; eggs</span></td>\n<td><span class=\"status\">Collected</span></td>\n<td class=\"amount\">$31.75</td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-foot\"><span class=\"dot\" aria-hidden=\"true\"></span>Last updated June 18 at 9:15 am</p>\n</section>\n\n<section class=\"panel\" aria-labelledby=\"supplier-title\">\n<div class=\"secondary-heading\">\n<h2 id=\"supplier-title\">Supplier requests</h2>\n<span class=\"pending\">0 pending · All caught up</span>\n</div>\n<div class=\"empty\">\n<div class=\"empty-icon\">\n<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m4 7 8 6 8-6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/></svg>\n</div>\n<h3>No requests waiting</h3>\n<p>There are no supplier applications to review. New requests from local growers will appear here for your team.</p>\n</div>\n<div class=\"secondary-foot\"><strong>18 local partners</strong> already in your co-op network</div>\n</section>\n</div>\n<footer>\n<span>Good food. Stronger community.</span>\n<span>All amounts in USD</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-07","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Harbor. Show Revenue $17117, Orders 129, Customers 561, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: practical and understated; use deep plum as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Harbor overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Harbor overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Harbor overview</title>\n<style>\n:root{color-scheme:light;--ink:#352c34;--plum:#59364f;--muted:#776b74;--line:#e4dce2;--wash:#f2eaf0;--paper:#fffdfd}\n*{box-sizing:border-box}\nbody{margin:0;background:#f8f5f7;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{background:var(--paper);border-bottom:1px solid var(--line)}\n.header-inner{max-width:1120px;margin:auto;padding:19px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}\n.brand{font-size:23px;font-weight:750;letter-spacing:-1px;color:var(--plum)}\n.brand small{font-size:12px;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:16px}\n.workspace{font-size:12px;color:var(--muted)}\nmain{max-width:1120px;margin:0 auto;padding:38px 0}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}\nh1{margin:0 0 6px;font-size:30px;line-height:1.2;letter-spacing:-1px;font-weight:650}\np{margin:0;color:var(--muted)}\n.period{text-align:right;font-size:12px;flex-shrink:0}\n.period strong{display:block;font-weight:600;color:var(--ink);font-size:13px}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 32px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.metric{padding:0 28px;border-left:1px solid var(--line)}\n.metric:first-child{padding-left:0;border:0}\ndt{font-size:13px;font-weight:550}\ndd{margin:6px 0 0}\n.value{display:block;font-size:37px;line-height:1.2;letter-spacing:-1.3px;font-weight:650;color:var(--plum);font-variant-numeric:tabular-nums}\n.detail{display:block;margin-top:9px;color:var(--muted);font-size:12px;max-width:190px}\n.handoff{display:block;width:150px;height:6px;margin-top:10px}\n.orders{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.section-heading{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}\nh2{font-size:18px;letter-spacing:-.3px;line-height:1.3;margin:0 0 4px;font-weight:650}\n.section-heading p{font-size:13px}\nbutton{font:inherit;font-size:13px;font-weight:600;color:var(--plum);background:var(--paper);border:1px solid #bcabb7;border-radius:5px;padding:8px 15px;white-space:nowrap;cursor:pointer}\nbutton:hover{background:var(--wash)}\nbutton:focus-visible{outline:3px solid var(--plum);outline-offset:3px}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\ncaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\nth{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;color:var(--muted);background:#f8f5f7;padding:11px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\nth:first-child{width:36%}\nth:nth-child(2){width:28%}\nth:nth-child(3){width:23%}\nth:last-child{width:13%;text-align:right}\ntd{padding:19px 24px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}\ntbody tr:last-child td{border-bottom:0}\n.order-meta{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}\n.order-name{font-weight:550;display:block;max-width:255px;line-height:1.45}\n.shopper{display:block;font-size:13px;font-weight:500;max-width:205px}\n.fulfillment{display:block;color:var(--muted);font-size:12px;margin-top:4px}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;line-height:1.4;padding:5px 8px;border:1px solid transparent;border-radius:4px;max-width:100%}\n.ready{background:var(--wash);color:var(--plum)}\n.packing{border-color:var(--line);color:var(--plum)}\n.completed{color:var(--muted);padding-left:0}\n.pending{border:1px dashed #b9a7b3;color:var(--plum)}\n.dot{width:5px;height:5px;background:currentColor;border-radius:50%;flex-shrink:0}\n.amount{text-align:right;font-size:16px;font-weight:650;color:var(--plum);font-variant-numeric:tabular-nums;white-space:nowrap}\n.amount-label{display:none}\n.table-note{padding:13px 24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:16px;margin-top:18px;font-size:11px;color:var(--muted)}\n@media(max-width:1199px){.header-inner,main{margin-left:32px;margin-right:32px}}\n@media(max-width:600px){\n.header-inner{margin:0;padding:14px 20px}\n.brand{font-size:21px}\n.brand small{display:none}\n.workspace{font-size:11px}\nmain{margin:0;padding:25px 20px}\n.intro{display:block;margin-bottom:20px}\nh1{font-size:27px}\n.intro p{font-size:13px;max-width:280px}\n.period{text-align:left;margin-top:13px;font-size:11px}\n.period strong{display:inline;font-size:11px;margin-right:5px}\n.metrics{padding:19px 0;margin-bottom:24px;grid-template-columns:1.12fr .85fr 1fr}\n.metric{padding:0 11px}\n.metric:last-child{padding-right:0}\ndt{font-size:11px}\n.value{font-size:26px;letter-spacing:-1px}\n.detail{font-size:10px;line-height:1.5;margin-top:8px}\n.handoff{width:100%;max-width:100px}\n.section-heading{padding:17px 15px;gap:10px}\nh2{font-size:17px}\n.section-heading p{font-size:11px;max-width:185px}\nbutton{padding:7px 11px;font-size:12px}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntable,tbody{display:block}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:10px 12px;padding:16px 15px;border-top:1px solid var(--line)}\ntd{padding:0;border:0;min-width:0}\ntd:first-child{grid-column:1;grid-row:1}\ntd:nth-child(2){grid-column:1;grid-row:2}\ntd:nth-child(3){grid-column:2;grid-row:2;text-align:right}\ntd:last-child{grid-column:2;grid-row:1}\n.order-meta{font-size:10px;margin-bottom:3px}\n.order-name{font-size:13px}\n.shopper{font-size:12px}\n.fulfillment{font-size:10px;margin-top:2px}\n.status{font-size:10px;padding:4px 6px;text-align:left}\n.completed{padding-right:0}\n.amount{font-size:16px}\n.amount-label{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-bottom:3px}\n.table-note{padding:12px 15px;font-size:11px}\nfooter{display:block;font-size:10px}\nfooter span{display:block;margin-top:3px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\">Harbor <small>Community food co-op</small></div>\n<span class=\"workspace\">Shop dashboard</span>\n</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<h1 id=\"page-title\">Harbor overview</h1>\n<p>Your co-op’s online shop, at a glance.</p>\n</div>\n<div class=\"period\"><strong>Month to date</strong>June 1–24, 2026</div>\n</section>\n\n<dl class=\"metrics\" aria-label=\"Month-to-date shop totals\">\n<div class=\"metric\">\n<dt>Revenue</dt>\n<dd><span class=\"value\">$17,117</span><span class=\"detail\">After refunds, before processing fees.</span></dd>\n</div>\n<div class=\"metric\">\n<dt>Orders</dt>\n<dd>\n<span class=\"value\">129</span>\n<svg class=\"handoff\" viewBox=\"0 0 129 6\" role=\"img\" aria-label=\"Order handoff: 92 co-op pickups and 37 local deliveries\">\n<rect width=\"129\" height=\"6\" rx=\"3\" fill=\"#ddd0d9\"/>\n<path d=\"M3 0H92V6H3A3 3 0 0 1 3 0Z\" fill=\"#59364f\"/>\n</svg>\n<span class=\"detail\">92 co-op pickup<br>37 local delivery</span>\n</dd>\n</div>\n<div class=\"metric\">\n<dt>Customers</dt>\n<dd><span class=\"value\">561</span><span class=\"detail\">Shoppers registered with our community shop.</span></dd>\n</div>\n</dl>\n\n<section class=\"orders\" aria-labelledby=\"orders-title\">\n<div class=\"section-heading\">\n<div>\n<h2 id=\"orders-title\">Recent orders</h2>\n<p>Fresh food for familiar faces.</p>\n</div>\n<button type=\"button\">View all</button>\n</div>\n<table>\n<caption>The four most recent community shop orders</caption>\n<thead>\n<tr><th scope=\"col\">Order</th><th scope=\"col\">Customer &amp; handoff</th><th scope=\"col\">Status</th><th scope=\"col\">Amount</th></tr>\n</thead>\n<tbody>\n<tr>\n<td><span class=\"order-meta\">#HB-1048 · Today, 9:42 am</span><span class=\"order-name\">Weekly harvest box &amp; sourdough loaf</span></td>\n<td><span class=\"shopper\">Mara &amp; Christopher Ellison</span><span class=\"fulfillment\">Co-op pickup · Thu, Jun 25</span></td>\n<td><span class=\"status ready\"><span class=\"dot\"></span>Ready for pickup</span></td>\n<td class=\"amount\"><span class=\"amount-label\">Amount</span>$48.50</td>\n</tr>\n<tr>\n<td><span class=\"order-meta\">#HB-1047 · Today, 9:18 am</span><span class=\"order-name\">Bulk pantry refill: oats, lentils &amp; brown rice</span></td>\n<td><span class=\"shopper\">Eastbank Community Kitchen</span><span class=\"fulfillment\">Local delivery · Thu, Jun 25</span></td>\n<td><span class=\"status packing\"><span class=\"dot\"></span>Packing</span></td>\n<td class=\"amount\"><span class=\"amount-label\">Amount</span>$126.80</td>\n</tr>\n<tr>\n<td><span class=\"order-meta\">#HB-1046 · Yesterday, 4:06 pm</span><span class=\"order-name\">Seasonal fruit bag</span></td>\n<td><span class=\"shopper\">Leila Patel</span><span class=\"fulfillment\">Collected · Wed, Jun 24</span></td>\n<td><span class=\"status completed\">✓ Completed</span></td>\n<td class=\"amount\"><span class=\"amount-label\">Amount</span>$32.00</td>\n</tr>\n<tr>\n<td><span class=\"order-meta\">#HB-1045 · Yesterday, 3:35 pm</span><span class=\"order-name\">Family veg box &amp; free-range eggs</span></td>\n<td><span class=\"shopper\">Owen McAllister</span><span class=\"fulfillment\">Co-op pickup · Thu, Jun 25</span></td>\n<td><span class=\"status pending\">Awaiting payment</span></td>\n<td class=\"amount\"><span class=\"amount-label\">Amount</span>$67.25</td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-note\">Thursday pickup: 4–7 pm at the co-op counter. Bring a reusable bag.</p>\n</section>\n<footer>\n<span>All amounts in USD.</span>\n<span>Snapshot · June 24, 2026 at 10:30 am</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-08","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Isle. Show Revenue $17848, Orders 136, Customers 584, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: calm and spacious; use forest green as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Isle overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Isle overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Isle overview — Studio shop</title>\n<style>\n:root{--paper:#f8f9f5;--ink:#24342c;--muted:#667069;--line:#dce1d8;--green:#28533d;--tint:#eaf0e7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nbutton,a{-webkit-tap-highlight-color:transparent}\na{color:inherit;text-decoration:none}\nbutton{font:inherit;cursor:pointer}\nbutton:focus-visible,a:focus-visible{outline:3px solid #9bb59e;outline-offset:4px}\n.shell{max-width:1120px;margin:auto;padding:0 40px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:24px}\n.brand{display:flex;align-items:center;gap:20px}\n.wordmark{font-family:Georgia,serif;font-size:30px;letter-spacing:3px;color:var(--green)}\n.brand-caption{padding-left:20px;border-left:1px solid var(--line);font-size:12px;color:var(--muted)}\nnav{display:flex;gap:28px;font-size:13px}\nnav a{padding:8px 0}\nnav a[aria-current]{color:var(--green);border-bottom:2px solid var(--green)}\nmain{padding-top:32px!important;padding-bottom:32px!important}\n.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}\nh1,h2,h3,p{margin:0}\nh1{font-family:Georgia,serif;font-size:38px;font-weight:400;letter-spacing:-1px;line-height:1.2}\n.subtitle{margin-top:8px;color:var(--muted);font-size:13px}\n.period{text-align:right;font-size:13px;color:var(--muted)}\n.period strong{display:block;color:var(--ink);font-weight:500}\n.action{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;padding:24px 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin-bottom:9px}\n.action h2{font-family:Georgia,serif;font-size:26px;font-weight:400;line-height:1.25}\n.action-copy{margin:9px 0 17px;color:var(--muted);max-width:430px;font-size:13px}\n.primary{display:inline-flex;align-items:center;gap:24px;border:1px solid var(--green);border-radius:3px;background:var(--green);color:white;padding:10px 15px;font-size:13px}\n.primary:hover{background:#1f4330}\n.detail{align-self:center;padding:17px 20px;background:var(--tint);border-left:2px solid #a9b9a6}\n.detail h3{font-size:13px;font-weight:600;line-height:1.5;max-width:300px;overflow-wrap:break-word}\n.detail p{font-size:12px;color:var(--muted);margin-top:6px}\n.metrics{display:grid;grid-template-columns:repeat(3,1fr);padding:26px 0 27px;border-bottom:1px solid var(--line);margin:0}\n.metric{padding-left:28px;border-left:1px solid var(--line)}\n.metric:first-child{padding-left:0;border:0}\ndt{font-size:12px;color:var(--muted);margin-bottom:4px}\ndd{margin:0;font-size:32px;line-height:1.3;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}\n.metric small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:27px 0 18px}\n.section-heading h2{font-family:Georgia,serif;font-weight:400;font-size:25px;line-height:1.25}\n.section-heading p{color:var(--muted);font-size:12px;margin-top:4px}\n.secondary{background:transparent;border:1px solid #bbc7ba;border-radius:3px;color:var(--green);padding:8px 15px;white-space:nowrap;font-size:12px}\n.secondary:hover{background:var(--tint)}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}\ncol.order{width:60%}col.status{width:24%}col.amount{width:16%}\nth{padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}\ntd{padding:17px 0;border-bottom:1px solid var(--line);vertical-align:middle}\nth:last-child,td:last-child{text-align:right}\ntd:first-child{padding-right:20px}\n.customer{display:block;font-weight:600;font-size:14px}\n.order-meta{display:block;font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:break-word}\n.order-id{color:#48594d}\n.badge{display:inline-block;border-radius:3px;padding:4px 8px;font-size:11px;font-weight:600;line-height:1.35}\n.ready{background:#e3eddf;color:#31583d}\n.pending{background:#f2ead6;color:#7e622b}\n.sent{background:#e9ece8;color:#5b675e}\n.amount-value{font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}\n.currency{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:2px}\n.footer-note{display:flex;justify-content:space-between;gap:20px;margin-top:16px;color:var(--muted);font-size:11px}\n@media(max-width:600px){\n.shell{padding:0 20px}\n.header-inner{min-height:65px;gap:12px}\n.brand{gap:0}.wordmark{font-size:25px}.brand-caption{display:none}\nnav{gap:20px;font-size:12px}\nmain{padding-top:24px!important;padding-bottom:24px!important}\n.page-heading{display:block;margin-bottom:22px}\nh1{font-size:32px}\n.period{text-align:left;margin-top:12px;font-size:11px}\n.period strong{display:inline;margin-right:8px}\n.action{grid-template-columns:1fr;gap:18px;padding:20px 0}\n.action h2{font-size:23px}\n.action-copy{margin:7px 0 13px}\n.detail{padding:12px 15px}.detail h3{max-width:none;font-size:12px}.detail .eyebrow{margin-bottom:5px}\n.metrics{padding:21px 0}\n.metric{padding-left:14px}\ndt{font-size:11px}\ndd{font-size:26px;letter-spacing:-.7px}\n.metric small{font-size:10px;line-height:1.4}\n.section-heading{padding:23px 0 15px}\n.section-heading h2{font-size:23px}\n.section-heading p{font-size:11px}\n.secondary{padding:7px 12px}\ncol.order{width:55%}col.status{width:25%}col.amount{width:20%}\ntd{padding:15px 0}td:first-child{padding-right:12px}\n.customer{font-size:13px}\n.order-meta{font-size:11px;line-height:1.5}\n.badge{font-size:10px;padding:4px 6px;max-width:100%}\n.amount-value{font-size:14px}\nth{font-size:9px;letter-spacing:.6px}\n.footer-note{font-size:10px;gap:15px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"shell header-inner\">\n<a class=\"brand\" href=\"#overview\" aria-label=\"Isle studio shop\">\n<span class=\"wordmark\">ISLE</span><span class=\"brand-caption\">Architecture practice<br>Studio shop</span>\n</a>\n<nav aria-label=\"Dashboard navigation\">\n<a href=\"#overview\" aria-current=\"page\">Overview</a>\n<a href=\"#recent-orders\">Orders</a>\n</nav>\n</div>\n</header>\n<main class=\"shell\" id=\"overview\">\n<header class=\"page-heading\">\n<div><h1>Isle overview</h1><p class=\"subtitle\">Publications, objects and materials from the studio.</p></div>\n<p class=\"period\"><strong>1–30 May 2025</strong>Monthly shop snapshot</p>\n</header>\n\n<section class=\"action\" aria-labelledby=\"next-action\">\n<div>\n<p class=\"eyebrow\">Next action · 2 orders ready</p>\n<h2 id=\"next-action\">Prepare the next studio dispatch</h2>\n<p class=\"action-copy\">A monograph and a material sample set are ready to pack for Monday’s collection.</p>\n<button class=\"primary\" type=\"button\">Review dispatch <span aria-hidden=\"true\">→</span></button>\n</div>\n<aside class=\"detail\" aria-labelledby=\"handling-title\">\n<p class=\"eyebrow\">From the studio desk</p>\n<h3 id=\"handling-title\">Packaging and handling notes for oversized architectural drawing sets</h3>\n<p>Use flat, rigid mailers. Keep printed sheets separate from material samples.</p>\n</aside>\n</section>\n\n<dl class=\"metrics\" aria-label=\"Monthly shop summary\">\n<div class=\"metric\"><dt>Revenue</dt><dd>$17848</dd><small>Net sales · USD</small></div>\n<div class=\"metric\"><dt>Orders</dt><dd>136</dd><small>Placed this month</small></div>\n<div class=\"metric\"><dt>Customers</dt><dd>584</dd><small>Total shop customers</small></div>\n</dl>\n\n<section id=\"recent-orders\" aria-labelledby=\"orders-title\">\n<header class=\"section-heading\">\n<div><h2 id=\"orders-title\">Recent orders</h2><p>The latest purchases from the practice.</p></div>\n<button class=\"secondary\" type=\"button\">View all</button>\n</header>\n<table aria-labelledby=\"orders-title\">\n<colgroup><col class=\"order\"><col class=\"status\"><col class=\"amount\"></colgroup>\n<thead><tr><th scope=\"col\">Order / customer</th><th scope=\"col\">Status</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"customer\">Northline Architects</span><span class=\"order-meta\"><span class=\"order-id\">#IS-1048</span> · 30 May<br>Material library sample set × 2</span></td>\n<td><span class=\"badge ready\">Ready to ship</span></td>\n<td><span class=\"amount-value\">$420.00</span><span class=\"currency\">USD</span></td>\n</tr>\n<tr>\n<td><span class=\"customer\">Clara Bennett</span><span class=\"order-meta\"><span class=\"order-id\">#IS-1047</span> · 30 May<br>Isle: Selected Works monograph</span></td>\n<td><span class=\"badge ready\">Ready to ship</span></td>\n<td><span class=\"amount-value\">$85.00</span><span class=\"currency\">USD</span></td>\n</tr>\n<tr>\n<td><span class=\"customer\">Fieldwork Studio</span><span class=\"order-meta\"><span class=\"order-id\">#IS-1046</span> · 29 May<br>Courtyard study, archival print</span></td>\n<td><span class=\"badge pending\">Payment pending</span></td>\n<td><span class=\"amount-value\">$160.00</span><span class=\"currency\">USD</span></td>\n</tr>\n<tr>\n<td><span class=\"customer\">Elliot Park</span><span class=\"order-meta\"><span class=\"order-id\">#IS-1045</span> · 29 May<br>Studio sketchbook × 2</span></td>\n<td><span class=\"badge sent\">Dispatched</span></td>\n<td><span class=\"amount-value\">$48.00</span><span class=\"currency\">USD</span></td>\n</tr>\n</tbody>\n</table>\n<div class=\"footer-note\"><p>Amounts include shipping.</p><p>Snapshot · 30 May 2025, 16:00</p></div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-09","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Juniper. Show Revenue $18579, Orders 143, Customers 607, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: compact but readable; use slate blue as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Juniper overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Juniper overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Juniper overview</title>\n<style>\n:root{--ink:#263443;--muted:#677583;--accent:#536b88;--line:#e2e7ec;--bg:#f5f7f9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,select{font:inherit}\nbutton,a,select{-webkit-tap-highlight-color:transparent}\na:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #a4b8d0;outline-offset:3px}\n.topbar{background:#fff;border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1120px;margin:auto;padding:0 32px;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:12px}\n.brand-mark{width:35px;height:35px;color:var(--accent);flex-shrink:0}\n.brand-name{font-size:18px;font-weight:700;letter-spacing:-.5px;line-height:1.2}\n.brand-note{font-size:11px;color:var(--muted);margin-top:3px}\nnav{display:flex;gap:24px;align-self:stretch}\nnav a{display:flex;align-items:center;min-height:48px;text-decoration:none;color:var(--muted);font-size:13px;border-bottom:2px solid transparent}\nnav a[aria-current]{color:var(--accent);border-color:var(--accent);font-weight:650}\nmain{max-width:1120px;margin:0 auto;padding:36px 32px 48px}\n.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}\nh1{font-size:28px;line-height:1.2;letter-spacing:-.8px;margin:0 0 9px;font-weight:650}\n.intro p{margin:0;color:var(--muted);font-size:13px}\n.period{display:flex;align-items:center;gap:10px;flex-shrink:0}\n.period label{font-size:12px;color:var(--muted)}\nselect{background:#fff;color:var(--ink);border:1px solid #ced6df;border-radius:6px;padding:10px 32px 10px 12px;min-height:44px;max-width:100%}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}\n.metric{background:#fff;border:1px solid var(--line);border-radius:8px;padding:19px 22px}\n.metric h2{font-size:13px;font-weight:550;color:var(--muted);margin:0 0 8px}\n.value{font-size:34px;font-weight:650;letter-spacing:-1px;line-height:1.2;font-variant-numeric:tabular-nums}\n.comparison{margin:12px 0 0;font-size:12px;color:var(--muted)}\n.positive{color:#456d59;font-weight:600}\n.panel{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.panel-heading{padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px}\nh2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.25px}\n.section-note{font-size:12px;color:var(--muted);margin:3px 0 0}\n.action{display:flex;align-items:center;gap:14px}\n.hint{color:var(--muted);font-size:11px}\nbutton{border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;min-height:44px;padding:10px 16px;font-weight:600;font-size:13px;display:inline-flex;gap:14px;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#445c78}\nbutton svg{width:15px;height:15px}\ntable{border-collapse:collapse;width:100%;text-align:left;table-layout:fixed}\nthead{background:#f8fafb;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\nth{font-size:11px;font-weight:600;color:var(--muted);padding:12px 22px}\nth:nth-child(1){width:29%}\nth:nth-child(2){width:34%}\nth:nth-child(3){width:23%}\nth:nth-child(4){width:14%}\ntd{padding:18px 22px;border-bottom:1px solid var(--line);vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\n.order-id{font-weight:650;font-size:13px;color:var(--accent)}\n.customer{margin-top:3px;font-size:12px}\n.item{font-size:13px;font-weight:500}\n.secondary{font-size:11px;color:var(--muted);margin-top:4px}\n.status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:550;white-space:nowrap}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}\n.fulfilled{color:#476957;background:#edf4ef}\n.packing{color:#536b88;background:#edf1f6}\n.pending{color:#896c36;background:#f8f3e8}\n.shipped{color:#476957;background:#edf4ef}\n.amount{text-align:right;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}\nth:last-child{text-align:right}\n.update{display:flex;align-items:center;gap:9px;padding:14px 22px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);background:#fafbfc}\n.update svg{width:14px;height:14px;flex-shrink:0}\n.update strong{font-weight:550;color:#536170}\n.data-note{margin:13px 0 0;font-size:11px;color:var(--muted);text-align:right}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media(max-width:650px){\n.topbar-inner{padding:0 16px;min-height:64px;gap:12px}\n.brand{gap:8px}.brand-mark{width:29px;height:29px}.brand-name{font-size:16px}\nnav{gap:18px}nav a{font-size:12px}\nmain{padding:24px 16px 28px}\n.intro{align-items:flex-start;gap:14px;flex-direction:column;margin-bottom:16px}\nh1{font-size:25px;margin-bottom:7px}\n.intro p{font-size:12px;max-width:340px}\n.period{width:100%;justify-content:space-between}\n.period label{font-size:11px}\nselect{font-size:12px;min-height:44px;padding-top:9px;padding-bottom:9px}\n.metrics{gap:8px;margin-bottom:20px}\n.metric{padding:13px 11px}\n.metric h2{font-size:11px;margin-bottom:8px}\n.value{font-size:26px;letter-spacing:-1px}\n.comparison{font-size:10px;margin-top:9px;line-height:1.5}\n.comparison .context{display:block}\n.panel-heading{padding:16px;flex-wrap:wrap;gap:12px}\nh2{font-size:16px}\n.section-note{font-size:11px}\n.action{width:100%;justify-content:space-between;gap:8px}\n.hint{font-size:10px}\nbutton{padding:10px 13px}\ntable,tbody{display:block;width:100%}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:9px;padding:14px 16px;border-top:1px solid var(--line)}\ntd{display:block;padding:0;border:0;min-width:0}\ntd:nth-child(1){grid-column:1;grid-row:1}\ntd:nth-child(2){grid-column:1;grid-row:2}\ntd:nth-child(3){grid-column:2;grid-row:2;align-self:center;text-align:right}\ntd:nth-child(4){grid-column:2;grid-row:1;align-self:center}\n.order-id{font-size:12px}\n.customer{font-size:11px;margin-top:2px}\n.item{font-size:11px}\n.secondary{font-size:10px;margin-top:2px}\n.status{font-size:10px;padding:4px 6px;gap:5px}\n.amount{font-size:14px}\n.update{padding:12px 16px;font-size:10px;align-items:flex-start;gap:7px}\n.data-note{text-align:left;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg class=\"brand-mark\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 30V6h24v24H6Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M12 30V12h12v18M6 24h24M18 6v6\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<div><div class=\"brand-name\">Juniper</div><div class=\"brand-note\">Practice shop</div></div>\n</div>\n<nav aria-label=\"Dashboard navigation\">\n<a href=\"#overview\" aria-current=\"page\">Overview</a>\n<a href=\"#orders\">Orders</a>\n</nav>\n</div>\n</header>\n<main id=\"overview\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<h1 id=\"page-title\">Juniper overview</h1>\n<p>Your drawing resources, material kits, and studio essentials at a glance.</p>\n</div>\n<div class=\"period\">\n<label for=\"period\">Reporting period</label>\n<select id=\"period\" name=\"period\">\n<option>Last 30 days</option>\n<option>This month</option>\n<option>Last 90 days</option>\n</select>\n</div>\n</section>\n\n<section class=\"metrics\" aria-label=\"Shop performance\">\n<article class=\"metric\">\n<h2>Revenue</h2>\n<div class=\"value\">$18579</div>\n<p class=\"comparison\"><span class=\"positive\">↑ 8.2%</span> <span class=\"context\">vs. previous period</span></p>\n</article>\n<article class=\"metric\">\n<h2>Orders</h2>\n<div class=\"value\">143</div>\n<p class=\"comparison\"><span class=\"positive\">↑ 12 orders</span> <span class=\"context\">vs. previous period</span></p>\n</article>\n<article class=\"metric\">\n<h2>Customers</h2>\n<div class=\"value\">607</div>\n<p class=\"comparison\"><span class=\"positive\">46 new</span> <span class=\"context\">in the last 30 days</span></p>\n</article>\n</section>\n\n<section class=\"panel\" id=\"orders\" aria-labelledby=\"orders-title\">\n<div class=\"panel-heading\">\n<div>\n<h2 id=\"orders-title\">Recent orders</h2>\n<p class=\"section-note\">The latest purchases from your practice shop.</p>\n</div>\n<div class=\"action\">\n<span class=\"hint\">Includes archived orders</span>\n<button type=\"button\">View all <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n</div>\n</div>\n<table>\n<caption class=\"sr-only\">Four latest orders, with customer, item, fulfillment status, and total in USD.</caption>\n<thead><tr><th scope=\"col\">Order / Customer</th><th scope=\"col\">Item / Placed</th><th scope=\"col\">Status</th><th scope=\"col\">Total</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"order-id\">#JP-1043</div><div class=\"customer\">Fieldwork Architects</div></td>\n<td><div class=\"item\">Residential detail handbook</div><div class=\"secondary\">1 item · 18 Jun, 10:32</div></td>\n<td><span class=\"status fulfilled\">Fulfilled</span></td>\n<td class=\"amount\">$129.00</td>\n</tr>\n<tr>\n<td><div class=\"order-id\">#JP-1042</div><div class=\"customer\">Northline Studio</div></td>\n<td><div class=\"item\">Facade material sample kit</div><div class=\"secondary\">2 items · 18 Jun, 09:48</div></td>\n<td><span class=\"status packing\">Packing</span></td>\n<td class=\"amount\">$248.00</td>\n</tr>\n<tr>\n<td><div class=\"order-id\">#JP-1041</div><div class=\"customer\">Ellis &amp; Rowe</div></td>\n<td><div class=\"item\">Site survey field kit</div><div class=\"secondary\">1 item · 17 Jun, 16:15</div></td>\n<td><span class=\"status pending\">Awaiting payment</span></td>\n<td class=\"amount\">$64.00</td>\n</tr>\n<tr>\n<td><div class=\"order-id\">#JP-1040</div><div class=\"customer\">Atelier Moss</div></td>\n<td><div class=\"item\">A3 tracing paper bundle</div><div class=\"secondary\">3 items · 17 Jun, 14:06</div></td>\n<td><span class=\"status shipped\">Shipped</span></td>\n<td class=\"amount\">$96.00</td>\n</tr>\n</tbody>\n</table>\n<div class=\"update\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M10 6v4l3 2\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"/></svg>\n<span><strong>Latest update</strong> · Order #JP-1042 moved to packing at 10:24.</span>\n</div>\n</section>\n<p class=\"data-note\">Snapshot: 18 June 2025, 10:36 · All amounts in USD</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Kite. Show Revenue $19310, Orders 150, Customers 630, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Kite overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Kite overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Kite overview — Studio shop</title>\n<style>\n:root{--paper:#f6f3ed;--surface:#fdfbf7;--ink:#282822;--muted:#6d6b62;--line:#ded9cf;--clay:#a14e37}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1120px;margin:auto;padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:16px}\n.wordmark{font: bold 30px Georgia,serif;letter-spacing:-1.5px}\n.brand-note{border-left:1px solid var(--line);padding-left:16px;color:var(--muted);font-size:12px}\n.period{font-size:12px;color:var(--muted)}\nmain{max-width:1120px;margin:auto;padding:42px 30px 32px}\n.eyebrow{margin:0 0 8px;color:var(--clay);font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}\nh1{font:normal 46px/1.1 Georgia,serif;letter-spacing:-1.5px;margin:0 0 14px}\n.intro{margin:0;max-width:490px;color:var(--muted);font-size:15px}\n.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px 0 34px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:24px 0}\n.stat{padding:0 28px;border-right:1px solid var(--line)}\n.stat:first-child{padding-left:0}\n.stat:last-child{border:0}\n.stat h2{font-size:13px;font-weight:500;margin:0 0 9px}\n.value{font:normal 43px/1.1 Georgia,serif;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:0 0 10px}\n.stat-note{font-size:12px;color:var(--muted);margin:0}\n.stat-note strong{font-weight:500;color:var(--clay)}\n.stat label{display:block;font-size:12px;color:var(--muted)}\nprogress{display:block;width:145px;max-width:100%;height:4px;margin-top:8px;border:0;border-radius:0;background:var(--line);color:var(--ink)}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--ink)}\nprogress::-moz-progress-bar{background:var(--ink)}\n.orders{background:var(--surface);border:1px solid var(--line)}\n.section-heading{padding:23px 26px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}\nh2{margin:0;font:normal 25px/1.2 Georgia,serif;letter-spacing:-.4px}\n.summary{margin:7px 0 0;font-size:12px;color:var(--muted)}\n.summary span{color:var(--ink)}\nbutton{background:transparent;border:1px solid var(--ink);border-radius:2px;color:var(--ink);font:600 12px Arial,sans-serif;padding:10px 16px;white-space:nowrap;min-height:40px}\nbutton:hover{background:var(--paper)}\nbutton:focus-visible{outline:2px solid var(--clay);outline-offset:3px}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\ncaption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}\nthead{background:#f1eee7}\nth{text-align:left;color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:600;padding:11px 26px}\nth:first-child{width:55%}\nth:nth-child(2){width:27%}\nth:last-child{width:18%;text-align:right}\ntd{padding:18px 26px;vertical-align:middle;border-bottom:1px solid var(--line)}\ntbody tr:last-child td{border-bottom:0}\n.item{font-size:15px;font-weight:600;line-height:1.35;display:block;max-width:29ch}\n.detail{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.5}\n.status{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;line-height:1.4}\n.status-icon{font-size:13px;flex:none}\n.dispatched{color:var(--muted)}\n.packing{font-weight:600}\n.pending{color:var(--clay)}\n.amount{text-align:right;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}\n.next{display:flex;gap:24px;border-top:1px solid var(--line);background:#f4f0e8;padding:17px 26px}\n.next h3{font-size:11px;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;margin:2px 0;color:var(--clay)}\n.next p{font-size:12px;margin:0;color:var(--muted)}\n.next strong{font-weight:600;color:var(--ink)}\nfooter{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:11px;color:var(--muted)}\n@media(max-width:600px){\n.header-inner{padding:15px 20px}\n.wordmark{font-size:27px}\n.brand{gap:12px}\n.brand-note{padding-left:12px;font-size:11px}\n.period{font-size:11px}\nmain{padding:26px 20px 22px}\nh1{font-size:36px;margin-bottom:10px}\n.intro{font-size:13px;max-width:310px}\n.eyebrow{font-size:10px}\n.stats{margin:23px 0 24px;padding:18px 0;gap:0}\n.stat{padding:0 12px}\n.stat:last-child{padding-right:0}\n.stat h2{font-size:12px;margin-bottom:8px}\n.value{font-size:28px;letter-spacing:-.7px;margin-bottom:9px}\n.stat-note,.stat label{font-size:10px;line-height:1.4}\nprogress{margin-top:6px}\n.section-heading{padding:18px 14px}\nh2{font-size:23px}\n.summary{font-size:11px}\nbutton{padding:8px 12px}\nth{padding:10px 10px;font-size:9px;letter-spacing:.5px}\nth:first-child{width:49%;padding-left:14px}\nth:nth-child(2){width:29%}\nth:last-child{width:22%;padding-right:14px}\ntd{padding:15px 10px}\ntd:first-child{padding-left:14px}\ntd:last-child{padding-right:14px}\n.item{font-size:13px;line-height:1.35}\n.detail{font-size:10px}\n.status{font-size:10px;gap:4px}\n.status-icon{font-size:11px}\n.amount{font-size:13px}\n.next{padding:15px 14px;gap:10px;flex-direction:column}\n.next h3{margin:0}\n.next p{font-size:11px}\nfooter{font-size:10px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\"><span class=\"wordmark\">Kite.</span><span class=\"brand-note\">Architecture practice<br>Studio shop</span></div>\n<span class=\"period\">May 2025 snapshot</span>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">Commerce / Month to date</p>\n<h1>Kite overview</h1>\n<p class=\"intro\">A small shop for the work behind the buildings.<br>Publications, drawing editions and studio objects.</p>\n\n<section class=\"stats\" aria-label=\"Shop performance through 21 May 2025\">\n<div class=\"stat\">\n<h2>Revenue</h2>\n<p class=\"value\">$19310</p>\n<p class=\"stat-note\"><strong>↑ 8.2%</strong> vs April</p>\n</div>\n<div class=\"stat\">\n<h2>Orders</h2>\n<p class=\"value\">150</p>\n<label for=\"dispatch-progress\">126 of 150 dispatched</label>\n<progress id=\"dispatch-progress\" value=\"126\" max=\"150\">84%</progress>\n</div>\n<div class=\"stat\">\n<h2>Customers</h2>\n<p class=\"value\">630</p>\n<p class=\"stat-note\">32 new this month</p>\n</div>\n</section>\n\n<section class=\"orders\" aria-labelledby=\"recent-title\">\n<div class=\"section-heading\">\n<div>\n<h2 id=\"recent-title\">Recent orders</h2>\n<p class=\"summary\">4 orders shown · <span>2 need attention</span></p>\n</div>\n<button type=\"button\">View all</button>\n</div>\n<table>\n<caption>Four recent studio shop orders, placed 20–21 May 2025</caption>\n<thead><tr><th scope=\"col\">Order &amp; edition</th><th scope=\"col\">Status</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"item\">Courtyard House drawing folio</span><span class=\"detail\">KT-1048 · Forma Studio</span></td>\n<td><span class=\"status dispatched\"><span class=\"status-icon\" aria-hidden=\"true\">✓</span>Dispatched</span></td>\n<td class=\"amount\">$128.00</td>\n</tr>\n<tr>\n<td><span class=\"item\">Material Studies, volume 02</span><span class=\"detail\">KT-1047 · Ada Bennett</span></td>\n<td><span class=\"status packing\"><span class=\"status-icon\" aria-hidden=\"true\">◐</span>Packing</span></td>\n<td class=\"amount\">$74.00</td>\n</tr>\n<tr>\n<td><span class=\"item\">Courtyard series scale model</span><span class=\"detail\">KT-1046 · North / South Architects</span></td>\n<td><span class=\"status pending\"><span class=\"status-icon\" aria-hidden=\"true\">○</span>Awaiting payment</span></td>\n<td class=\"amount\">$240.00</td>\n</tr>\n<tr>\n<td><span class=\"item\">Field Notes grid notebook</span><span class=\"detail\">KT-1045 · Elliot Park</span></td>\n<td><span class=\"status dispatched\"><span class=\"status-icon\" aria-hidden=\"true\">✓</span>Dispatched</span></td>\n<td class=\"amount\">$38.00</td>\n</tr>\n</tbody>\n</table>\n<aside class=\"next\" aria-labelledby=\"next-title\">\n<h3 id=\"next-title\">Next steps</h3>\n<p><strong>Pack KT-1047</strong> for dispatch by 22 May. <strong>Hold KT-1046</strong> until payment is confirmed.</p>\n</aside>\n</section>\n<footer><span>Figures in USD · Shipping excluded</span><span>As of 21 May 2025</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Maple. Show Revenue $20772, Orders 164, Customers 676, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Maple overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Maple overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maple overview</title>\n<style>\n:root{--ink:#203c2e;--muted:#607368;--line:#dce5de;--accent:#28543d;--paper:#fbfcf9;--wash:#eef3ed}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\n.topbar{border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1120px;margin:auto;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:650;letter-spacing:-.6px}\n.brand svg{width:25px;height:25px;color:var(--accent)}\n.workspace{color:var(--muted);font-size:13px}\nmain{max-width:1120px;margin:auto;padding:46px 40px}\n.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}\nh1{margin:0 0 8px;font-size:34px;line-height:1.2;font-weight:600;letter-spacing:-1.2px}\n.intro{margin:0;color:var(--muted);font-size:15px;max-width:460px}\n.period{margin:0 0 2px;color:var(--muted);font-size:13px;white-space:nowrap}\n.period strong{display:block;color:var(--ink);font-weight:500}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;margin:0 0 42px}\n.metric{padding:0 30px;border-left:1px solid var(--line)}\n.metric:first-child{padding-left:0;border-left:0}\n.metric:last-child{padding-right:0}\ndt{font-size:14px;font-weight:500;color:var(--muted)}\ndd{margin:7px 0 0;font-size:38px;font-weight:600;line-height:1.15;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}\n.metric small{display:block;margin-top:9px;color:var(--muted);font-size:12px}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}\nh2{margin:0;font-size:20px;letter-spacing:-.4px;font-weight:600}\nbutton{border:1px solid var(--line);background:transparent;color:var(--accent);border-radius:6px;padding:8px 14px;font-weight:600;cursor:pointer;white-space:nowrap}\nbutton:hover{background:var(--wash);border-color:var(--accent)}\nbutton:focus-visible{outline:2px solid var(--accent);outline-offset:3px}\nbutton span{margin-left:10px}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}\ncol.order{width:18%}col.team{width:46%}col.status-col{width:22%}col.amount-col{width:14%}\nthead th{padding:10px 0;background:var(--wash);color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase}\nthead th:first-child{padding-left:14px}\nthead th:last-child{padding-right:14px;text-align:right}\ntbody tr{border-bottom:1px solid var(--line)}\ntbody th,tbody td{padding:20px 14px 20px 0;vertical-align:middle}\ntbody th{padding-left:14px;font-weight:550;text-align:left;font-size:13px}\n.date{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:400}\n.team-name{font-size:14px;font-weight:500}\n.supply{display:block;max-width:370px;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}\n.status{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:4px;font-size:11px;font-weight:550;white-space:nowrap}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}\n.complete{background:#e7efe7;color:var(--accent)}\n.active{background:var(--wash);color:var(--accent)}\n.pending{border:1px solid var(--line);color:var(--muted)}\n.pending::before{background:transparent;border:1px solid currentColor;width:6px;height:6px}\n.amount{text-align:right;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}\n.table-note{display:flex;justify-content:space-between;gap:16px;margin-top:14px;color:var(--muted);font-size:12px}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media(max-width:600px){\n.topbar-inner{padding:15px 20px;gap:12px}\n.brand{font-size:19px}\n.workspace{font-size:11px}\nmain{padding:26px 20px}\n.heading{display:block;margin-bottom:22px}\nh1{font-size:29px;margin-bottom:8px}\n.intro{font-size:13px;max-width:310px}\n.period{margin-top:14px;font-size:11px}\n.period strong{display:inline;margin-left:6px}\n.metrics{padding:19px 0;margin-bottom:25px}\n.metric{padding:0 12px}\ndt{font-size:12px}\ndd{font-size:27px;letter-spacing:-.8px}\n.metric small{font-size:10px;margin-top:7px}\nh2{font-size:18px}\n.section-heading{margin-bottom:10px}\nbutton{padding:7px 11px;font-size:12px}\ntable,tbody{display:block;width:100%}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}\ntbody{border-top:1px solid var(--line)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:5px;padding:14px 0}\ntbody th,tbody td{padding:0;min-width:0}\ntbody th{grid-column:1;grid-row:1;align-self:center;font-size:12px}\n.date{display:inline;margin-left:8px;font-size:10px}\n.team-cell{grid-column:1;grid-row:2}\n.status-cell{grid-column:2;grid-row:1;justify-self:end}\n.amount{grid-column:2;grid-row:2;align-self:start;font-size:16px}\n.team-name{font-size:12px}\n.supply{font-size:11px;margin-top:2px;line-height:1.4}\n.status{font-size:10px;padding:3px 6px;gap:5px}\n.table-note{font-size:10px;margin-top:12px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M23 4C12 3 5 8 5 15c0 5 4 8 8 8 7 0 11-8 10-19Z\" fill=\"currentColor\"/><path d=\"M5 25 19 10M10 19l1-7M14 15l6-1\" stroke=\"#fbfcf9\" stroke-width=\"1.4\" stroke-linecap=\"round\"/></svg>\nMaple\n</div>\n<span class=\"workspace\">Field research supplies</span>\n</div>\n</header>\n<main>\n<div class=\"heading\">\n<div>\n<h1>Maple overview</h1>\n<p class=\"intro\">Keep track of the supply orders supporting your teams in the field.</p>\n</div>\n<p class=\"period\">Reporting period<strong>June 2025</strong></p>\n</div>\n\n<dl class=\"metrics\" aria-label=\"Monthly shop totals\">\n<div class=\"metric\">\n<dt>Revenue</dt>\n<dd>$20772</dd>\n<small>Sales in USD</small>\n</div>\n<div class=\"metric\">\n<dt>Orders</dt>\n<dd>164</dd>\n<small>Supply orders</small>\n</div>\n<div class=\"metric\">\n<dt>Customers</dt>\n<dd>676</dd>\n<small>Registered researchers</small>\n</div>\n</dl>\n\n<section aria-labelledby=\"orders-heading\">\n<div class=\"section-heading\">\n<h2 id=\"orders-heading\">Recent orders</h2>\n<button type=\"button\">View all <span aria-hidden=\"true\">→</span></button>\n</div>\n<table>\n<caption class=\"sr-only\">The four latest field supply orders, newest first. Amounts are in US dollars.</caption>\n<colgroup><col class=\"order\"><col class=\"team\"><col class=\"status-col\"><col class=\"amount-col\"></colgroup>\n<thead>\n<tr><th scope=\"col\">Order</th><th scope=\"col\">Field team / supplies</th><th scope=\"col\">Status</th><th scope=\"col\">Amount</th></tr>\n</thead>\n<tbody>\n<tr>\n<th scope=\"row\">#MP-1084<span class=\"date\">Jun 24</span></th>\n<td class=\"team-cell\"><span class=\"team-name\">Cedar Creek field team</span><span class=\"supply\">Soil sampling kits · 6 items</span></td>\n<td class=\"status-cell\"><span class=\"status active\">Packing</span></td>\n<td class=\"amount\">$248.00</td>\n</tr>\n<tr>\n<th scope=\"row\">#MP-1083<span class=\"date\">Jun 24</span></th>\n<td class=\"team-cell\"><span class=\"team-name\">Alpine survey unit</span><span class=\"supply\">Weatherproof specimen envelopes for long-term alpine biodiversity monitoring · 12 packs</span></td>\n<td class=\"status-cell\"><span class=\"status active\">Shipped</span></td>\n<td class=\"amount\">$186.00</td>\n</tr>\n<tr>\n<th scope=\"row\">#MP-1082<span class=\"date\">Jun 23</span></th>\n<td class=\"team-cell\"><span class=\"team-name\">Coastal wetlands project</span><span class=\"supply\">Water testing refill sets · 4 items</span></td>\n<td class=\"status-cell\"><span class=\"status pending\">Awaiting payment</span></td>\n<td class=\"amount\">$392.00</td>\n</tr>\n<tr>\n<th scope=\"row\">#MP-1081<span class=\"date\">Jun 23</span></th>\n<td class=\"team-cell\"><span class=\"team-name\">North Ridge station</span><span class=\"supply\">Field notebooks &amp; pencils · 8 items</span></td>\n<td class=\"status-cell\"><span class=\"status complete\">Delivered</span></td>\n<td class=\"amount\">$96.00</td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-note\"><span>Showing the 4 latest orders</span><span>All amounts in USD</span></div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for North. Show Revenue $21503, Orders 171, Customers 699, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"North overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"North overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>North overview</title>\n<style>\n:root{color-scheme:light;--ink:#252e39;--muted:#65707d;--line:#dfe4e9;--accent:#506783;--paper:#fff}\n*{box-sizing:border-box}\nbody{margin:0;background:#f5f6f7;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{background:var(--paper);border-bottom:1px solid var(--line)}\n.masthead{max-width:1080px;margin:auto;padding:19px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{font-size:23px;font-weight:750;letter-spacing:-1px}\n.brand span{color:var(--accent)}\n.store-label{color:var(--muted);font-size:12px}\nmain{max-width:1080px;margin:auto;padding:36px 28px 28px}\n.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}\n.eyebrow{margin:0 0 5px;color:var(--accent);font-size:11px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:36px;line-height:1.2;font-weight:400;letter-spacing:-.8px;margin:0 0 8px}\n.subtitle{margin:0;color:var(--muted)}\n.period{margin:0 0 3px;text-align:right;font-size:12px;color:var(--muted);white-space:nowrap}\n.period strong{display:block;color:var(--ink);font-weight:600}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--paper);border:1px solid var(--line);border-radius:5px;margin-bottom:26px}\n.metric{padding:21px 24px}\n.metric+.metric{border-left:1px solid var(--line)}\n.metric h2{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:500}\n.value{margin:0;font-size:34px;line-height:1.15;letter-spacing:-1px;font-weight:650;font-variant-numeric:tabular-nums}\n.metric p:last-child{margin:9px 0 0;color:var(--muted);font-size:12px}\n.orders{background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px}\nh2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.3px}\n.section-heading p{margin:3px 0 0;color:var(--muted);font-size:12px}\n.action{display:flex;align-items:center;gap:12px;flex-shrink:0}\n.hint{font-size:12px;color:var(--muted)}\nbutton{font:inherit;font-size:13px;font-weight:600;background:var(--accent);color:white;border:1px solid var(--accent);border-radius:4px;padding:8px 14px;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#405873}\nbutton:focus-visible{outline:3px solid #a0b3cd;outline-offset:3px}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}\ncol.order{width:62%}col.status{width:23%}col.amount{width:15%}\nthead{background:#f8f9fa}\nth{padding:10px 24px;color:var(--muted);font-size:11px;font-weight:600;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\ntd{padding:17px 24px;vertical-align:middle;border-bottom:1px solid #e9edf0}\ntbody tr:last-child td{border-bottom:0}\nth:last-child,td:last-child{text-align:right}\n.order-content{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}\n.order-meta{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12px}\n.order-id{color:var(--accent);font-weight:650}\n.customer{font-weight:550}\n.order-date{display:block;color:var(--muted);font-size:11px;margin-top:3px}\n.description{margin:0;max-width:210px;font-size:12px;color:var(--muted);line-height:1.5}\n.status-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:550;line-height:1.35}\n.status-label::before{content:\"\";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}\n.shipped{color:#496b5b}.packed{color:var(--accent)}.pending{color:#8b6c35}\n.total{font-size:15px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}\n.details{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;border-left:3px solid #8497af;background:#edf0f3;padding:15px 20px;gap:28px}\n.details h3{margin:0 0 4px;font-size:10px;font-weight:650;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}\n.details p{margin:0;font-size:12px}\n.details .secondary{color:var(--muted);margin-top:2px}\n.details time{font-variant-numeric:tabular-nums}\nfooter{display:flex;justify-content:space-between;gap:12px;margin-top:18px;color:var(--muted);font-size:11px}\n@media(max-width:600px){\n.masthead{padding:12px 20px}.brand{font-size:21px}.store-label{font-size:11px}\nmain{padding:22px 20px 20px}\n.intro{display:block;margin-bottom:18px}h1{font-size:30px;margin-bottom:6px}.subtitle{font-size:12px}\n.period{margin:10px 0 0;text-align:left;font-size:11px}.period strong{display:inline;margin-right:6px}\n.metrics{margin-bottom:18px}.metric{padding:14px 11px}.metric h2{font-size:12px;margin-bottom:7px}\n.value{font-size:25px;letter-spacing:-.8px}.metric p:last-child{font-size:10px;line-height:1.4;margin-top:7px}\n.section-heading{padding:15px 12px;gap:10px;align-items:flex-start}h2{font-size:16px}\n.section-heading p{font-size:10px}.action{gap:6px;flex-direction:column-reverse;align-items:flex-end}\n.hint{font-size:10px}button{padding:6px 12px;font-size:12px}\ncol.order{width:51%}col.status{width:25%}col.amount{width:24%}\nth{padding:8px 10px;font-size:10px}td{padding:12px 10px}\n.order-content{display:block}.order-meta{gap:3px 6px;font-size:11px}.order-date{display:none}\n.description{font-size:11px;margin-top:4px;line-height:1.4}\n.status-label{font-size:11px;gap:5px}.total{font-size:13px}\n.details{padding:12px 13px;gap:14px;grid-template-columns:1fr 1fr;margin-top:12px}\n.details p{font-size:11px}.details h3{font-size:9px;letter-spacing:.8px}\nfooter{font-size:10px;margin-top:12px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"masthead\">\n<div class=\"brand\">North<span>.</span></div>\n<div class=\"store-label\">Field equipment store</div>\n</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Store report</p>\n<h1 id=\"page-title\">North overview</h1>\n<p class=\"subtitle\">Equipment and essentials for teams in the field.</p>\n</div>\n<p class=\"period\"><strong>Month to date</strong>1–24 June 2025</p>\n</section>\n\n<section class=\"metrics\" aria-label=\"Month-to-date store totals\">\n<div class=\"metric\">\n<h2>Revenue</h2>\n<p class=\"value\">$21503</p>\n<p>Field equipment sales</p>\n</div>\n<div class=\"metric\">\n<h2>Orders</h2>\n<p class=\"value\">171</p>\n<p>24 awaiting dispatch</p>\n</div>\n<div class=\"metric\">\n<h2>Customers</h2>\n<p class=\"value\">699</p>\n<p>Across 38 research teams</p>\n</div>\n</section>\n\n<section class=\"orders\" aria-labelledby=\"orders-title\">\n<div class=\"section-heading\">\n<div>\n<h2 id=\"orders-title\">Recent orders</h2>\n<p>Latest purchases from field teams</p>\n</div>\n<div class=\"action\">\n<span class=\"hint\">All 171 orders</span>\n<button type=\"button\" aria-label=\"View all orders\">View all</button>\n</div>\n</div>\n<table aria-label=\"Four recent field equipment orders\">\n<colgroup><col class=\"order\"><col class=\"status\"><col class=\"amount\"></colgroup>\n<thead>\n<tr><th scope=\"col\">Order / field team</th><th scope=\"col\">Status</th><th scope=\"col\">Amount</th></tr>\n</thead>\n<tbody>\n<tr>\n<td><div class=\"order-content\"><div><div class=\"order-meta\"><span class=\"order-id\">NR-1048</span><span class=\"customer\">Maya Chen</span></div><time class=\"order-date\" datetime=\"2025-06-24\">24 Jun 2025</time></div><p class=\"description\">Coastal survey kit &amp; waterproof field notebooks</p></div></td>\n<td><span class=\"status-label shipped\">Dispatched</span></td>\n<td class=\"total\">$284.00</td>\n</tr>\n<tr>\n<td><div class=\"order-content\"><div><div class=\"order-meta\"><span class=\"order-id\">NR-1047</span><span class=\"customer\">Eli Brooks</span></div><time class=\"order-date\" datetime=\"2025-06-24\">24 Jun 2025</time></div><p class=\"description\">Sample bags &amp; weatherproof specimen labels</p></div></td>\n<td><span class=\"status-label packed\">Packed</span></td>\n<td class=\"total\">$96.00</td>\n</tr>\n<tr>\n<td><div class=\"order-content\"><div><div class=\"order-meta\"><span class=\"order-id\">NR-1046</span><span class=\"customer\">Ava Patel</span></div><time class=\"order-date\" datetime=\"2025-06-23\">23 Jun 2025</time></div><p class=\"description\">Remote station solar charging kit</p></div></td>\n<td><span class=\"status-label pending\">Awaiting payment</span></td>\n<td class=\"total\">$412.00</td>\n</tr>\n<tr>\n<td><div class=\"order-content\"><div><div class=\"order-meta\"><span class=\"order-id\">NR-1045</span><span class=\"customer\">Noah Reed</span></div><time class=\"order-date\" datetime=\"2025-06-23\">23 Jun 2025</time></div><p class=\"description\">Trail compass &amp; all-weather map cases</p></div></td>\n<td><span class=\"status-label shipped\">Dispatched</span></td>\n<td class=\"total\">$168.00</td>\n</tr>\n</tbody>\n</table>\n</section>\n\n<aside class=\"details\" aria-label=\"Dispatch and inventory notes\">\n<div>\n<h3>Dispatch note</h3>\n<p>Next collection at 16:00.</p>\n<p class=\"secondary\">3 survey kits still need packing.</p>\n</div>\n<div>\n<h3>Recent update · <time datetime=\"2025-06-24T09:10\">09:10</time></h3>\n<p>Waterproof notebooks restocked.</p>\n<p class=\"secondary\">Ready for the next expedition.</p>\n</div>\n</aside>\n<footer><span>North · Field store operations</span><span>Amounts in USD</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Orbit. Show Revenue $22234, Orders 178, Customers 722, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Orbit overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Orbit overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Orbit overview</title>\n<style>\n:root{--paper:#f8f6f1;--ink:#292d28;--muted:#686d64;--line:#deded4;--accent:#a34f38;--green:#4e624c}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nbutton,a{-webkit-tap-highlight-color:transparent}\na{color:inherit;text-decoration:none}\na:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}\n.masthead{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1184px;margin:auto;min-height:80px;padding:0 32px;display:flex;align-items:center;gap:48px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:700;letter-spacing:-1px}\n.brand svg{color:var(--accent);flex-shrink:0}\nnav{display:flex;gap:28px;align-self:stretch}\nnav a{display:flex;align-items:center;min-height:48px;color:var(--muted);border-bottom:2px solid transparent}\nnav a[aria-current]{color:var(--ink);border-color:var(--accent);font-weight:700}\n.shop-label{margin-left:auto;color:var(--muted);font-size:12px}\nmain{max-width:1184px;margin:auto;padding:38px 32px 24px}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}\n.eyebrow{margin:0 0 9px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:700}\nh1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:44px;letter-spacing:-1.3px;line-height:1.15;margin:0 0 10px}\n.description{margin:0;color:var(--muted)}\n.period{text-align:right;flex-shrink:0}\n.period p{margin:0 0 6px;font-weight:600}\n.subdued{font-size:12px;color:var(--muted)}\n.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7d8877;margin-right:7px;vertical-align:middle}\n.metrics{display:grid;grid-template-columns:repeat(3,1fr);padding:25px 0;margin:28px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}\n.metric{padding:0 30px;border-left:1px solid var(--line)}\n.metric:first-child{padding-left:0;border-left:0}\n.metric:last-child{padding-right:0}\n.metric h2{margin:0 0 7px;font-size:13px;font-weight:500;color:var(--muted)}\n.value{margin:0;font-size:38px;line-height:1.2;letter-spacing:-1px;font-weight:600;font-variant-numeric:tabular-nums}\n.metric p:last-child{margin:9px 0 0;font-size:12px;color:var(--muted)}\n.increase{color:var(--green);font-weight:600}\n.orders{padding-top:28px}\n.section-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}\nh2.section-title{font-family:Georgia,'Times New Roman',serif;font-size:26px;letter-spacing:-.5px;font-weight:400;line-height:1.2;margin:0 0 5px}\n.section-header p{margin:0;color:var(--muted);font-size:12px}\nbutton{font:600 13px Arial,Helvetica,sans-serif;border:1px solid #c3c5bb;background:transparent;color:var(--ink);min-height:44px;padding:0 17px;border-radius:3px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:15px;flex-shrink:0}\nbutton:hover{background:#eeece5;border-color:var(--ink)}\ntable{width:100%;border-collapse:collapse;text-align:left;font-size:13px}\nth{padding:10px 16px 10px 0;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:500}\ntd{padding:17px 16px 17px 0;border-bottom:1px solid var(--line);vertical-align:middle}\nth:last-child,td:last-child{padding-right:0}\n.order{width:21%}\n.team{width:43%}\n.status{width:22%}\n.total{width:14%;text-align:right;font-variant-numeric:tabular-nums}\n.order strong{font-weight:600;letter-spacing:.2px}\n.detail{display:block;color:var(--muted);font-size:12px;margin-top:3px}\n.team strong{font-weight:600}\n.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:3px;background:#e8ede3;color:var(--green);font-size:11px;font-weight:600;white-space:nowrap}\n.badge:before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.badge.packing{background:#f1e8dc;color:#806039}\n.badge.pending{background:#ecece6;color:#62675d}\n.total strong{font-size:16px;font-weight:600}\n.requests{display:grid;grid-template-columns:1fr 1.8fr;gap:40px;padding:27px 0;border-bottom:1px solid var(--line)}\n.requests h2{font-size:22px}\n.requests .count{margin:7px 0 0;color:var(--muted);font-size:12px}\n.empty{display:flex;align-items:flex-start;gap:14px;padding-top:2px}\n.empty-icon{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#858a7e;flex-shrink:0}\n.empty h3{margin:0 0 5px;font-size:14px;font-weight:600}\n.empty p{margin:0;color:var(--muted);font-size:13px;max-width:480px}\nfooter{display:flex;justify-content:space-between;gap:20px;padding-top:18px;color:var(--muted);font-size:11px}\n@media(max-width:650px){\n.header-inner{padding:0 20px;min-height:66px;gap:24px;flex-wrap:wrap}\n.brand{font-size:23px}\nnav{margin-left:auto;gap:18px;font-size:12px}\nnav a{min-height:66px}\nnav a:last-child,.shop-label{display:none}\nmain{padding:25px 20px 20px}\n.intro{display:block}\nh1{font-size:35px;margin-bottom:8px}\n.description{font-size:13px;max-width:310px}\n.period{text-align:left;margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}\n.period p{font-size:12px;margin:0}\n.period .subdued{font-size:11px}\n.metrics{margin-top:20px;padding:19px 0}\n.metric{padding:0 12px}\n.metric h2{font-size:12px}\n.value{font-size:27px;letter-spacing:-.8px}\n.metric p:last-child{font-size:10px;line-height:1.5;margin-top:6px}\n.metric p:last-child span{display:block}\n.orders{padding-top:23px}\nh2.section-title{font-size:24px}\n.section-header{margin-bottom:10px}\n.section-header p{font-size:11px}\nbutton{padding:0 12px;gap:10px}\ntable,tbody{display:block;width:100%}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"order status\" \"team total\";gap:9px 12px;padding:14px 0;border-bottom:1px solid var(--line)}\ntbody tr:first-child{border-top:1px solid var(--line)}\ntd{border:0;padding:0;display:block;width:auto!important}\n.order{grid-area:order;display:flex;align-items:center;gap:8px;font-size:11px}\n.order .detail{margin:0;font-size:10px}\n.team{grid-area:team;font-size:12px}\n.team .detail{font-size:11px;margin-top:2px}\n.status{grid-area:status;text-align:right;align-self:start}\n.status>.detail{display:none}\n.badge{font-size:10px;padding:2px 7px}\n.total{grid-area:total;align-self:center}\n.total strong{font-size:15px}\n.requests{grid-template-columns:1fr;gap:16px;padding:23px 0}\n.requests h2{font-size:22px;margin:0}\n.requests .count{margin-top:4px}\n.empty{gap:12px}\n.empty p{font-size:12px}\nfooter{font-size:10px;flex-wrap:wrap;gap:5px;padding-top:14px}\n}\n</style>\n</head>\n<body>\n<header class=\"masthead\">\n<div class=\"header-inner\">\n<a class=\"brand\" href=\"#overview\" aria-label=\"Orbit home\">\n<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"15\" cy=\"15\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\"/><ellipse cx=\"15\" cy=\"15\" rx=\"15\" ry=\"5\" transform=\"rotate(-35 15 15)\" stroke=\"currentColor\" stroke-width=\"1.6\"/><circle cx=\"22\" cy=\"7\" r=\"2.5\" fill=\"currentColor\"/></svg>\nOrbit\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#overview\" aria-current=\"page\">Overview</a>\n<a href=\"#recent-orders\">Orders</a>\n<a href=\"#field-requests\">Field requests</a>\n</nav>\n<span class=\"shop-label\">Research supply shop</span>\n</div>\n</header>\n<main id=\"overview\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Field operations / Shop dashboard</p>\n<h1 id=\"page-title\">Orbit overview</h1>\n<p class=\"description\">Essential supplies, ready for the next expedition.</p>\n</div>\n<div class=\"period\">\n<p>1–30 April 2025</p>\n<span class=\"subdued\"><span class=\"dot\"></span>Fulfillment on track</span>\n</div>\n</section>\n<section class=\"metrics\" aria-label=\"Monthly shop performance\">\n<div class=\"metric\">\n<h2>Revenue</h2>\n<p class=\"value\">$22,234</p>\n<p><span class=\"increase\">↑ 8.4%</span> <span>vs. last month</span></p>\n</div>\n<div class=\"metric\">\n<h2>Orders</h2>\n<p class=\"value\">178</p>\n<p>14 awaiting dispatch</p>\n</div>\n<div class=\"metric\">\n<h2>Customers</h2>\n<p class=\"value\">722</p>\n<p>38 new this month</p>\n</div>\n</section>\n<section class=\"orders\" id=\"recent-orders\" aria-labelledby=\"orders-title\">\n<div class=\"section-header\">\n<div>\n<h2 class=\"section-title\" id=\"orders-title\">Recent orders</h2>\n<p>4 latest of 178 orders this month</p>\n</div>\n<button type=\"button\">View all <span aria-hidden=\"true\">↗</span></button>\n</div>\n<table aria-label=\"Recent field supply orders\">\n<thead><tr><th scope=\"col\" class=\"order\">Order / date</th><th scope=\"col\" class=\"team\">Research team / supplies</th><th scope=\"col\" class=\"status\">Status</th><th scope=\"col\" class=\"total\">Amount</th></tr></thead>\n<tbody>\n<tr>\n<td class=\"order\"><strong>#ORB-1048</strong><span class=\"detail\">30 Apr 2025</span></td>\n<td class=\"team\"><strong>Mesa Basin Survey</strong><span class=\"detail\">Field notebooks × 12 · Sample bags × 50</span></td>\n<td class=\"status\"><span class=\"badge packing\">Packing</span><span class=\"detail\">Payment received</span></td>\n<td class=\"total\"><strong>$286.00</strong></td>\n</tr>\n<tr>\n<td class=\"order\"><strong>#ORB-1047</strong><span class=\"detail\">30 Apr 2025</span></td>\n<td class=\"team\"><strong>North Coast Ecology</strong><span class=\"detail\">Water testing kits × 4</span></td>\n<td class=\"status\"><span class=\"badge\">Shipped</span><span class=\"detail\">Dispatched 30 Apr</span></td>\n<td class=\"total\"><strong>$412.00</strong></td>\n</tr>\n<tr>\n<td class=\"order\"><strong>#ORB-1046</strong><span class=\"detail\">29 Apr 2025</span></td>\n<td class=\"team\"><strong>Alpine Habitat Lab</strong><span class=\"detail\">GPS carrying cases × 6 · Flagging tape × 10</span></td>\n<td class=\"status\"><span class=\"badge pending\">Awaiting payment</span><span class=\"detail\">Invoice sent</span></td>\n<td class=\"total\"><strong>$174.50</strong></td>\n</tr>\n<tr>\n<td class=\"order\"><strong>#ORB-1045</strong><span class=\"detail\">29 Apr 2025</span></td>\n<td class=\"team\"><strong>Riverlands Research</strong><span class=\"detail\">Soil sampling kits × 3</span></td>\n<td class=\"status\"><span class=\"badge\">Delivered</span><span class=\"detail\">Received by field lead</span></td>\n<td class=\"total\"><strong>$327.00</strong></td>\n</tr>\n</tbody>\n</table>\n</section>\n<section class=\"requests\" id=\"field-requests\" aria-labelledby=\"requests-title\">\n<div>\n<h2 class=\"section-title\" id=\"requests-title\">Field requests</h2>\n<p class=\"count\">0 open requests · Queue clear</p>\n</div>\n<div class=\"empty\">\n<span class=\"empty-icon\" aria-hidden=\"true\">\n<svg width=\"19\" height=\"19\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M8 5H5v16h14V5h-3M8 3h8v4H8z\"/><path d=\"m8 14 3 3 5-6\"/></svg>\n</span>\n<div>\n<h3>No equipment requests waiting</h3>\n<p>Requests for supplies not listed in the shop will appear here when a field team submits one.</p>\n</div>\n</div>\n</section>\n<footer>\n<span>Orbit · Equipping research in the field</span>\n<span>All amounts in USD · Monthly overview</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-dashboard-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a small online shop dashboard for Pine. Show Revenue $22965, Orders 185, Customers 745, a recent-orders table with four realistic rows, and a View all button. Give status and amounts clear visual hierarchy. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Pine overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Pine overview\", \"Revenue\", \"Orders\", \"Customers\", \"Recent orders\", \"View all\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Pine overview</title>\n<style>\n:root{--bg:#f5f3ee;--surface:#fffefa;--ink:#29252a;--muted:#706970;--line:#e3ded8;--plum:#482b44}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line);background:var(--surface)}\n.topbar{max-width:1080px;margin:auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{font-family:Georgia,serif;font-size:30px;line-height:1;color:var(--plum);font-weight:bold;letter-spacing:-1px}\n.shop-label{font-size:12px;color:var(--muted)}\nmain{max-width:1080px;margin:0 auto;padding:38px 28px 30px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-.8px;margin:0 0 9px;font-weight:650}\n.intro{margin:0;color:var(--muted);max-width:560px}\n.summary{margin:28px 0 30px}\n.period{margin:0 0 10px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}\n.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px 0}\n.metric{padding:0 24px}\n.metric+.metric{border-left:1px solid var(--line)}\ndt{font-size:13px;color:var(--muted);margin-bottom:6px}\ndd{margin:0;font-size:32px;font-weight:650;line-height:1.2;letter-spacing:-1px;font-variant-numeric:tabular-nums}\n.metric:first-child dd{color:var(--plum)}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}\nh2{font-size:19px;letter-spacing:-.3px;line-height:1.3;margin:0;font-weight:650}\nbutton{font:inherit;background:var(--surface);color:var(--plum);border:1px solid #c9bdc5;border-radius:5px;padding:8px 16px;font-weight:600;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#eee7ed}\nbutton:focus-visible{outline:3px solid var(--plum);outline-offset:3px}\n.table-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}\ntable{width:100%;border-collapse:collapse;text-align:left}\nth{padding:12px 20px;font-size:11px;color:var(--muted);letter-spacing:.04em;font-weight:600;background:#f9f7f3;border-bottom:1px solid var(--line)}\ntd{padding:18px 20px;vertical-align:middle;border-bottom:1px solid var(--line)}\ntbody tr:last-child td{border-bottom:0}\n.order{width:18%;white-space:nowrap}\n.order-number{font-weight:600;font-size:13px}\n.detail{display:block;color:var(--muted);font-size:12px;margin-top:3px}\n.team{width:43%}\n.team-name{display:block;font-weight:500;line-height:1.4;overflow-wrap:anywhere}\n.status{white-space:nowrap}\n.badge{display:inline-block;font-size:11px;line-height:1.5;font-weight:600;padding:4px 9px;border-radius:4px}\n.delivered{background:#eaf0e8;color:#435a41}\n.transit{background:#f4ecd9;color:#786027}\n.packed{background:#eee6ee;color:var(--plum)}\n.pending{background:#f0eeea;color:#6c6257}\n.amount{text-align:right;white-space:nowrap;font-weight:650;font-size:15px;font-variant-numeric:tabular-nums}\n.dispatch{margin-top:18px;display:flex;align-items:center;gap:22px;padding:15px 18px;border-left:2px solid #b4a0af;background:#eeebe6}\n.dispatch svg{width:150px;height:43px;flex:none}\n.dispatch strong{display:block;font-size:12px;font-weight:600}\n.dispatch p{margin:2px 0 0;color:var(--muted);font-size:12px}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media(max-width:600px){\n.topbar{padding:15px 20px}\n.brand{font-size:27px}\nmain{padding:25px 20px 24px}\nh1{font-size:27px}\n.intro{font-size:13px;line-height:1.5}\n.summary{margin:22px 0 24px}\n.period{font-size:10px}\n.metrics{padding:16px 0}\n.metric{padding:0 12px}\ndt{font-size:12px;margin-bottom:7px}\ndd{font-size:24px;letter-spacing:-.7px}\n.section-heading{margin-bottom:12px}\nh2{font-size:18px}\nbutton{padding:7px 13px;font-size:12px}\ntable,tbody{display:block}\nthead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"order amount\" \"team status\";column-gap:12px;row-gap:6px;padding:13px 14px;border-bottom:1px solid var(--line)}\ntbody tr:last-child{border-bottom:0}\ntd{display:block;padding:0;border:0!important;width:auto!important}\n.order{grid-area:order;white-space:normal;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}\n.order .detail{font-size:10px;margin:0}\n.order-number{font-size:11px}\n.team{grid-area:team}\n.team-name{font-size:12px}\n.team .detail{font-size:11px;margin-top:2px}\n.status{grid-area:status;align-self:start;text-align:right}\n.badge{font-size:10px;padding:3px 6px}\n.amount{grid-area:amount;font-size:14px}\n.dispatch{padding:12px 10px;gap:12px;margin-top:14px}\n.dispatch svg{width:110px;height:40px}\n.dispatch p{font-size:11px;line-height:1.5}\n}\n@media(max-width:350px){\nmain{padding-left:14px;padding-right:14px}\n.metric{padding:0 9px}\ndd{font-size:22px}\n.order .detail{display:none}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"topbar\">\n<div class=\"brand\" aria-label=\"Pine\">pine</div>\n<span class=\"shop-label\">Field supply shop</span>\n</div>\n</header>\n<main>\n<section aria-labelledby=\"overview-title\">\n<h1 id=\"overview-title\">Pine overview</h1>\n<p class=\"intro\">Keep track of the equipment and supplies heading to your field research teams.</p>\n<div class=\"summary\">\n<h2 class=\"sr-only\">Shop performance</h2>\n<p class=\"period\">Month to date · October 2024</p>\n<dl class=\"metrics\">\n<div class=\"metric\"><dt>Revenue</dt><dd>$22,965</dd></div>\n<div class=\"metric\"><dt>Orders</dt><dd>185</dd></div>\n<div class=\"metric\"><dt>Customers</dt><dd>745</dd></div>\n</dl>\n</div>\n</section>\n\n<section aria-labelledby=\"orders-title\">\n<div class=\"section-heading\">\n<h2 id=\"orders-title\">Recent orders</h2>\n<button type=\"button\">View all</button>\n</div>\n<div class=\"table-wrap\">\n<table>\n<caption class=\"sr-only\">Four recent field supply orders, with fulfillment status and order totals.</caption>\n<thead>\n<tr><th scope=\"col\">Order</th><th scope=\"col\">Field team / supplies</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"amount\">Total</th></tr>\n</thead>\n<tbody>\n<tr>\n<td class=\"order\"><span class=\"order-number\">#PN-1085</span><time class=\"detail\" datetime=\"2024-10-24\">24 Oct</time></td>\n<td class=\"team\"><span class=\"team-name\">North Cascades Watershed Research Station</span><span class=\"detail\">12 waterproof field notebooks</span></td>\n<td class=\"status\"><span class=\"badge packed\">Packed</span></td>\n<td class=\"amount\">$216.00</td>\n</tr>\n<tr>\n<td class=\"order\"><span class=\"order-number\">#PN-1084</span><time class=\"detail\" datetime=\"2024-10-23\">23 Oct</time></td>\n<td class=\"team\"><span class=\"team-name\">Rift Valley Ecology Team</span><span class=\"detail\">4 specimen collection kits</span></td>\n<td class=\"status\"><span class=\"badge transit\">In transit</span></td>\n<td class=\"amount\">$348.00</td>\n</tr>\n<tr>\n<td class=\"order\"><span class=\"order-number\">#PN-1083</span><time class=\"detail\" datetime=\"2024-10-23\">23 Oct</time></td>\n<td class=\"team\"><span class=\"team-name\">Coastal Habitat Survey</span><span class=\"detail\">2 weatherproof gear bags</span></td>\n<td class=\"status\"><span class=\"badge delivered\">Delivered</span></td>\n<td class=\"amount\">$158.00</td>\n</tr>\n<tr>\n<td class=\"order\"><span class=\"order-number\">#PN-1082</span><time class=\"detail\" datetime=\"2024-10-22\">22 Oct</time></td>\n<td class=\"team\"><span class=\"team-name\">Upper Klamath River Monitoring Partnership</span><span class=\"detail\">6 water sampling kits</span></td>\n<td class=\"status\"><span class=\"badge pending\">Awaiting payment</span></td>\n<td class=\"amount\">$492.00</td>\n</tr>\n</tbody>\n</table>\n</div>\n<aside class=\"dispatch\" aria-label=\"Field dispatch schedule\">\n<svg viewBox=\"0 0 150 43\" role=\"img\" aria-labelledby=\"route-title\">\n<title id=\"route-title\">Supply route: shop to base camp, then field site</title>\n<path d=\"M16 12H75\" fill=\"none\" stroke=\"#482b44\" stroke-width=\"2\"/>\n<path d=\"M75 12H134\" fill=\"none\" stroke=\"#a69aa2\" stroke-width=\"2\" stroke-dasharray=\"4 4\"/>\n<circle cx=\"16\" cy=\"12\" r=\"4\" fill=\"#482b44\"/>\n<circle cx=\"75\" cy=\"12\" r=\"4\" fill=\"#fffefa\" stroke=\"#482b44\" stroke-width=\"2\"/>\n<circle cx=\"134\" cy=\"12\" r=\"4\" fill=\"#fffefa\" stroke=\"#a69aa2\" stroke-width=\"2\"/>\n<g fill=\"#706970\" font-family=\"system-ui,sans-serif\" font-size=\"9\" text-anchor=\"middle\">\n<text x=\"16\" y=\"34\">Shop</text><text x=\"75\" y=\"34\">Base</text><text x=\"134\" y=\"34\">Field</text>\n</g>\n</svg>\n<div><strong>Next field dispatch · 25 Oct</strong><p>Packed orders join the next base-camp supply run.</p></div>\n</aside>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-products-00","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Alder: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Alder essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Alder essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Alder essentials — Bike shop goods</title>\n<style>\n:root{color-scheme:light;--paper:#f6f4ed;--card:#fffdf8;--ink:#25372d;--muted:#62695f;--line:#dedfd4;--green:#244b38}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-decoration:none}\nbutton{font:inherit}\na:focus-visible,button:focus-visible{outline:3px solid #a57938;outline-offset:4px}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1120px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:12px}\n.brand-mark{width:30px;height:34px;color:var(--green)}\n.brand-name{display:block;font-size:24px;font-weight:750;letter-spacing:-1px;line-height:1}\n.brand-note{display:block;font-size:11px;color:var(--muted);margin-top:5px}\nnav{display:flex;gap:26px;font-size:13px}\nnav a{padding:7px 0}\nnav a[aria-current]{color:var(--green);border-bottom:2px solid var(--green);font-weight:650}\nmain{max-width:1120px;margin:auto;padding:46px 32px 32px}\n.intro{margin-bottom:30px}\nh1{font-size:44px;font-weight:600;letter-spacing:-1.7px;line-height:1.1;margin:0 0 13px}\n.intro p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:560px}\n.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}\n.product{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.visual{margin:0;height:206px;display:flex;align-items:center;justify-content:center;background:#eeeee5;border-bottom:1px solid var(--line)}\n.visual svg{width:180px;height:170px;max-width:100%}\n.details{padding:22px}\n.product-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px}\nh2{margin:0;font-size:19px;font-weight:650;letter-spacing:-.4px;line-height:1.3}\n.price{font-size:16px;font-weight:600;white-space:nowrap}\n.description{margin:10px 0 20px;min-height:44px;color:var(--muted);font-size:13px;line-height:1.6}\n.add{display:block;width:100%;border:1px solid var(--green);background:var(--green);color:#fffdf8;border-radius:4px;padding:11px 14px;font-size:13px;font-weight:600;cursor:pointer}\n.add:hover{background:#173727}\n.shop-note{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;padding:20px 0;border-top:1px solid var(--line)}\n.shop-note h2{font-size:13px;line-height:1.5;font-weight:550;letter-spacing:0;max-width:430px}\n.shop-note p{margin:0;color:var(--muted);font-size:12px;line-height:1.6;text-align:right}\n@media(max-width:650px){\n.header-inner{padding:16px 20px;gap:12px}\n.brand{gap:8px}\n.brand-mark{width:23px;height:28px}\n.brand-name{font-size:22px}\n.brand-note{font-size:10px}\nnav{gap:16px;font-size:12px}\nmain{padding:26px 20px 18px}\nh1{font-size:32px;letter-spacing:-1px;margin-bottom:9px}\n.intro{margin-bottom:20px}\n.intro p{font-size:13px;line-height:1.5}\n.products{grid-template-columns:1fr;gap:12px}\n.product{display:grid;grid-template-columns:96px minmax(0,1fr)}\n.visual{height:auto;min-height:140px;border-bottom:0;border-right:1px solid var(--line)}\n.visual svg{width:91px;height:115px}\n.details{padding:14px}\nh2{font-size:16px;letter-spacing:-.3px}\n.price{font-size:14px}\n.product-title{gap:6px}\n.description{font-size:12px;line-height:1.45;min-height:0;margin:7px 0 11px}\n.add{padding:8px 10px;font-size:12px}\n.shop-note{margin-top:20px;padding:15px 0 0;display:block}\n.shop-note h2{font-size:12px}\n.shop-note p{font-size:11px;text-align:left;margin-top:7px}\n}\n@media(prefers-reduced-motion:no-preference){.add{transition:background .15s ease}}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<a class=\"brand\" href=\"#essentials\" aria-label=\"Alder — essentials\">\n<svg class=\"brand-mark\" viewBox=\"0 0 30 34\" aria-hidden=\"true\" fill=\"none\">\n<path d=\"M4 29 15 5l11 24M9 19h12\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15 5V1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n</svg>\n<span><span class=\"brand-name\">alder</span><span class=\"brand-note\">Independent bike shop</span></span>\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#shop-note\">Our approach</a>\n</nav>\n</div>\n</header>\n<main id=\"essentials\">\n<section aria-labelledby=\"catalog-title\">\n<div class=\"intro\">\n<h1 id=\"catalog-title\">Alder essentials</h1>\n<p>A few dependable extras for coffee stops, shop visits and the ride home.</p>\n</div>\n<div class=\"products\">\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 180 170\" role=\"img\" aria-labelledby=\"bottle-art\">\n<title id=\"bottle-art\">Forest green bottle with a loop cap</title>\n<ellipse cx=\"90\" cy=\"151\" rx=\"31\" ry=\"4\" fill=\"#d6d9cc\"/>\n<path d=\"M81 25v-6a9 9 0 0 1 18 0v6\" fill=\"none\" stroke=\"#293f32\" stroke-width=\"5\"/>\n<rect x=\"77\" y=\"24\" width=\"26\" height=\"16\" rx=\"4\" fill=\"#293f32\"/>\n<path d=\"M78 39h24v9c0 6 13 10 13 22v68a11 11 0 0 1-11 11H76a11 11 0 0 1-11-11V70c0-12 13-16 13-22z\" fill=\"#50725a\" stroke=\"#35513e\" stroke-width=\"2\"/>\n<path d=\"M72 75v58\" stroke=\"#75927a\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n<path d=\"m81 104 9-20 9 20m-14-8h10\" fill=\"none\" stroke=\"#e8ebde\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n</svg>\n</figure>\n<div class=\"details\">\n<div class=\"product-title\"><h2 id=\"bottle-title\">Trail bottle</h2><span class=\"price\">$28</span></div>\n<p class=\"description\">A 600 ml steel bottle for water breaks and miles ahead.</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 180 170\" role=\"img\" aria-labelledby=\"notebook-art\">\n<title id=\"notebook-art\">Pocket notebook with a warm kraft cover</title>\n<ellipse cx=\"90\" cy=\"148\" rx=\"44\" ry=\"4\" fill=\"#d6d9cc\"/>\n<g transform=\"rotate(-7 90 85)\">\n<rect x=\"52\" y=\"29\" width=\"81\" height=\"116\" rx=\"4\" fill=\"#ddd9c9\" stroke=\"#aaa894\"/>\n<path d=\"M57 140h71M57 136h71\" stroke=\"#bbb8a7\"/>\n<rect x=\"49\" y=\"24\" width=\"80\" height=\"116\" rx=\"4\" fill=\"#bd9e70\" stroke=\"#9a7e55\"/>\n<path d=\"M57 25v114\" stroke=\"#997c51\" stroke-width=\"2\"/>\n<rect x=\"71\" y=\"50\" width=\"39\" height=\"31\" rx=\"1\" fill=\"#eadfc7\"/>\n<path d=\"M79 61h23M79 68h16\" stroke=\"#67664e\" stroke-width=\"2\"/>\n<path d=\"M116 25v114\" stroke=\"#465a43\" stroke-width=\"3\"/>\n</g>\n</svg>\n</figure>\n<div class=\"details\">\n<div class=\"product-title\"><h2 id=\"notebook-title\">Field notebook</h2><span class=\"price\">$16</span></div>\n<p class=\"description\">Pocket-sized, ruled pages for route notes and repair lists.</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 180 170\" role=\"img\" aria-labelledby=\"tote-art\">\n<title id=\"tote-art\">Natural canvas tote with an Alder mark</title>\n<ellipse cx=\"90\" cy=\"149\" rx=\"48\" ry=\"4\" fill=\"#d6d9cc\"/>\n<path d=\"M68 66V39a22 22 0 0 1 44 0v27\" fill=\"none\" stroke=\"#b7a889\" stroke-width=\"8\"/>\n<path d=\"M70 66V39a20 20 0 0 1 40 0v27\" fill=\"none\" stroke=\"#e4d9bf\" stroke-width=\"4\"/>\n<path d=\"M46 59h88l-5 80a8 8 0 0 1-8 8H59a8 8 0 0 1-8-8z\" fill=\"#dbceb0\" stroke=\"#b7a889\" stroke-width=\"2\"/>\n<path d=\"M52 66h76M57 72l4 65M123 72l-4 65\" fill=\"none\" stroke=\"#bfb192\" stroke-dasharray=\"2 3\"/>\n<path d=\"m77 113 13-29 13 29m-21-11h16\" fill=\"none\" stroke=\"#3c5942\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n</figure>\n<div class=\"details\">\n<div class=\"product-title\"><h2 id=\"tote-title\">Canvas tote</h2><span class=\"price\">$32</span></div>\n<p class=\"description\">Sturdy cotton canvas for your lock, layers and market finds.</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button>\n</div>\n</article>\n</div>\n</section>\n<aside class=\"shop-note\" id=\"shop-note\" aria-labelledby=\"approach-title\">\n<h2 id=\"approach-title\">Everyday essentials for the commute, the coffee stop and the long way home.</h2>\n<p>Three shop favorites · $16–$32<br>Chosen by an independent bike shop.</p>\n</aside>\n</main>\n</body>\n</html>"}]}
{"id":"sft-products-01","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Birch: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Birch essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Birch essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Birch essentials — Everyday ride gear</title>\n<style>\n:root{color-scheme:light;--bg:#f2f4f5;--paper:#fff;--ink:#26333e;--muted:#5c6974;--accent:#45627d;--line:#dbe1e5}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\na{color:inherit;text-decoration:none}\nbutton{font:inherit}\na:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}\n.shell{width:min(1080px,calc(100% - 64px));margin:auto}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:750;letter-spacing:-1px}\n.brand svg{width:27px;height:27px;color:var(--accent)}\nnav{display:flex;gap:27px;font-size:13px}\nnav a{padding:8px 0;color:var(--muted)}\nnav a[aria-current]{color:var(--accent);box-shadow:0 2px var(--accent)}\nmain{padding-top:35px}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:25px}\n.eyebrow{margin:0 0 6px;color:var(--accent);font-size:10px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase}\nh1{margin:0;font-size:36px;line-height:1.2;letter-spacing:-1.3px}\n.intro-copy{margin:10px 0 0;color:var(--muted);max-width:490px}\n.update{margin:0 0 2px;font-size:11px;color:var(--muted);white-space:nowrap}\n.update::before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--accent)}\n.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}\n.product{min-width:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--paper)}\n.visual{height:172px;display:grid;place-items:center;background:#e9eef1;border-bottom:1px solid var(--line)}\n.visual svg{width:150px;height:145px}\n.product-body{padding:18px}\n.product-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}\nh2{margin:0;font-size:18px;line-height:1.3;letter-spacing:-.4px}\n.price{font-size:16px;font-weight:650;white-space:nowrap}\n.description{min-height:42px;margin:8px 0 18px;color:var(--muted);font-size:13px;line-height:1.6}\n.buy-row{display:flex;align-items:center;gap:12px}\n.buy-row button{border:1px solid var(--accent);border-radius:5px;background:var(--accent);color:white;padding:9px 15px;font-size:12px;font-weight:650;cursor:pointer;white-space:nowrap}\n.buy-row button:hover{background:#344f68}\n.pickup{font-size:11px;color:var(--muted);line-height:1.4}\n.details{display:grid;grid-template-columns:1fr 2fr;gap:54px;margin-top:38px;padding-top:25px;border-top:1px solid var(--line)}\n.details h2{font-size:20px;margin-bottom:9px}\n.details-intro p{margin:0;max-width:270px;color:var(--muted);font-size:13px}\n.shop-note{margin-top:20px!important;font-size:12px!important}\n.shop-note strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:12px}\ncaption{text-align:left;margin-bottom:10px;color:var(--muted);font-size:11px}\nth{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 12px 9px}\ntd{padding:12px;border-top:1px solid var(--line);vertical-align:top}\nth:first-child,td:first-child{padding-left:0;width:27%}\nth:nth-child(2){width:42%}\ntd:first-child{font-weight:600}\ntd:not(:first-child){color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:16px;margin-top:32px;padding:19px 0 25px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\n@media(max-width:700px){\n.shell{width:calc(100% - 32px)}\n.header-inner{min-height:63px;gap:16px}\n.brand{font-size:22px}\n.brand svg{width:24px;height:24px}\nnav{gap:18px;font-size:12px}\nmain{padding-top:23px}\n.intro{display:block;margin-bottom:18px}\nh1{font-size:30px}\n.intro-copy{font-size:13px;margin-top:7px;max-width:330px}\n.update{margin-top:12px;font-size:10px}\n.products{grid-template-columns:1fr;gap:10px}\n.product{display:grid;grid-template-columns:82px minmax(0,1fr)}\n.visual{height:auto;border-bottom:0;border-right:1px solid var(--line)}\n.visual svg{width:74px;height:108px}\n.product-body{padding:13px}\nh2{font-size:16px}\n.price{font-size:14px}\n.description{font-size:12px;line-height:1.5;min-height:0;margin:6px 0 11px}\n.buy-row{gap:10px}\n.buy-row button{padding:7px 11px;font-size:11px}\n.pickup{font-size:10px}\n.details{grid-template-columns:1fr;gap:20px;margin-top:25px;padding-top:21px}\n.details-intro p{max-width:none}\n.shop-note{margin-top:12px!important}\nth,td{padding-right:7px;padding-left:7px}\ntd{font-size:11px;padding-top:10px;padding-bottom:10px}\nfooter{margin-top:23px;flex-wrap:wrap;gap:4px}\n}\n@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"shell header-inner\">\n<a class=\"brand\" href=\"#\" aria-label=\"Birch home\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"14\" cy=\"14\" r=\"11\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M14 3v22M3 14h22M6.2 6.2l15.6 15.6M6.2 21.8 21.8 6.2\" stroke=\"currentColor\" stroke-width=\"1.2\"/><circle cx=\"14\" cy=\"14\" r=\"3\" fill=\"currentColor\"/></svg>\nBirch\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#shop-notes\">Shop notes</a>\n</nav>\n</div>\n</header>\n<main class=\"shell\" id=\"essentials\">\n<section aria-labelledby=\"catalog-title\">\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Your local bike shop · Everyday gear</p>\n<h1 id=\"catalog-title\">Birch essentials</h1>\n<p class=\"intro-copy\">For the commute, the coffee stop, and the long way home.</p>\n</div>\n<p class=\"update\">Updated 12 June · Canvas totes restocked</p>\n</div>\n<div class=\"products\">\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 150 145\" fill=\"none\" role=\"img\" aria-labelledby=\"bottle-art\">\n<title id=\"bottle-art\">Slate blue bottle with a loop cap</title>\n<ellipse cx=\"75\" cy=\"132\" rx=\"27\" ry=\"4\" fill=\"#d5dfe6\"/>\n<path d=\"M64 25v-8a11 11 0 0 1 22 0v8\" stroke=\"#45627d\" stroke-width=\"4\"/>\n<rect x=\"62\" y=\"23\" width=\"26\" height=\"13\" rx=\"3\" fill=\"#314b62\"/>\n<path d=\"M62 36h26v9c0 5 10 9 10 19v58c0 6-5 10-11 10H63c-6 0-11-4-11-10V64c0-10 10-14 10-19v-9Z\" fill=\"#54718b\" stroke=\"#45627d\" stroke-width=\"2\"/>\n<path d=\"M59 68v46\" stroke=\"#8098ac\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n<path d=\"M68 89h14m-14 5h14\" stroke=\"#e4ebef\" stroke-width=\"2\"/>\n</svg>\n</div>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h2 id=\"bottle-title\">Trail bottle</h2><span class=\"price\">$28</span></div>\n<p class=\"description\">A sturdy steel bottle for water breaks and all-day wandering.</p>\n<div class=\"buy-row\"><button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button><span class=\"pickup\">Free shop pickup</span></div>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 150 145\" fill=\"none\" role=\"img\" aria-labelledby=\"notebook-art\">\n<title id=\"notebook-art\">Pocket notebook with a slate blue cloth spine</title>\n<ellipse cx=\"76\" cy=\"131\" rx=\"36\" ry=\"4\" fill=\"#d5dfe6\"/>\n<g transform=\"rotate(-7 75 75)\">\n<rect x=\"38\" y=\"23\" width=\"76\" height=\"108\" rx=\"4\" fill=\"#d3dce2\" stroke=\"#6b7f90\" stroke-width=\"1.5\"/>\n<path d=\"M43 24h63a4 4 0 0 1 4 4v96H43\" fill=\"#fafbf9\"/>\n<rect x=\"36\" y=\"19\" width=\"74\" height=\"106\" rx=\"4\" fill=\"#e2e6e6\" stroke=\"#718595\" stroke-width=\"1.5\"/>\n<path d=\"M39 20h7v104h-7a3 3 0 0 1-3-3V23a3 3 0 0 1 3-3Z\" fill=\"#45627d\"/>\n<path d=\"M59 49h35M59 57h24\" stroke=\"#7c8f9d\" stroke-width=\"2\"/>\n<path d=\"M95 20v104\" stroke=\"#45627d\" stroke-width=\"3\"/>\n<path d=\"m59 96 7-7 7 7 7-11 7 11\" stroke=\"#718595\" stroke-width=\"1.5\"/>\n</g>\n</svg>\n</div>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h2 id=\"notebook-title\">Field notebook</h2><span class=\"price\">$16</span></div>\n<p class=\"description\">Pocket-sized pages for route notes, repair lists, and good ideas.</p>\n<div class=\"buy-row\"><button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button><span class=\"pickup\">Free shop pickup</span></div>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 150 145\" fill=\"none\" role=\"img\" aria-labelledby=\"tote-art\">\n<title id=\"tote-art\">Natural canvas tote with long handles</title>\n<ellipse cx=\"75\" cy=\"132\" rx=\"42\" ry=\"4\" fill=\"#d5dfe6\"/>\n<path d=\"M54 56V34a21 21 0 0 1 42 0v22\" stroke=\"#7f8c92\" stroke-width=\"8\"/>\n<path d=\"M54 56V34a21 21 0 0 1 42 0v22\" stroke=\"#e0e3e0\" stroke-width=\"5\"/>\n<path d=\"M34 49h82l6 75c0 4-3 7-7 7H35c-4 0-7-3-7-7l6-75Z\" fill=\"#dedfda\" stroke=\"#829098\" stroke-width=\"1.5\"/>\n<path d=\"m41 55-5 69h78l-5-69\" stroke=\"#bec5c5\" stroke-width=\"1.5\"/>\n<path d=\"M54 48v13m42-13v13\" stroke=\"#7f8c92\" stroke-width=\"5\"/>\n<circle cx=\"75\" cy=\"91\" r=\"15\" stroke=\"#45627d\" stroke-width=\"1.5\"/>\n<path d=\"M70 82v18h6a5 5 0 0 0 0-10h-6m0-8h5a4 4 0 0 1 0 8\" stroke=\"#45627d\" stroke-width=\"2\"/>\n</svg>\n</div>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h2 id=\"tote-title\">Canvas tote</h2><span class=\"price\">$32</span></div>\n<p class=\"description\">Hard-wearing canvas for groceries, spare layers, and shop runs.</p>\n<div class=\"buy-row\"><button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button><span class=\"pickup\">Free shop pickup</span></div>\n</div>\n</article>\n</div>\n</section>\n<section class=\"details\" id=\"shop-notes\" aria-labelledby=\"details-title\">\n<div class=\"details-intro\">\n<h2 id=\"details-title\">The useful details</h2>\n<p>Simple kit, chosen by the people who keep your bike rolling.</p>\n<p class=\"shop-note\"><strong>Pick up on your next visit</strong>Collect your essentials at the shop. A good excuse to check your tyre pressure, too.</p>\n</div>\n<table>\n<caption>A quick guide to your everyday kit</caption>\n<thead><tr><th scope=\"col\">Essential</th><th scope=\"col\">At a glance</th><th scope=\"col\">Good for</th></tr></thead>\n<tbody>\n<tr><td>Trail bottle</td><td>650 ml · Stainless steel</td><td>Water stops &amp; commutes</td></tr>\n<tr><td>Field notebook</td><td>A6 · 48 dotted pages</td><td>Routes &amp; repair notes</td></tr>\n<tr><td>Canvas tote</td><td>12 L · Cotton canvas</td><td>Carrying off the bike</td></tr>\n</tbody>\n</table>\n</section>\n</main>\n<footer class=\"shell\"><span>Birch · Your independent neighbourhood bike shop</span><span>Good rides start here.</span></footer>\n</body>\n</html>"}]}
{"id":"sft-products-02","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Cedar: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Cedar essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Cedar essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Cedar essentials — Goods for the everyday ride</title>\n<style>\n:root{--paper:#f7f4ed;--ink:#302d28;--accent:#a44730;--line:#d9d2c6;--muted:#736c62}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-decoration:none}\na:hover{text-decoration:underline;text-underline-offset:5px}\na:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n.shell{max-width:1200px;margin:auto;padding:0 48px}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:16px}\n.wordmark{font-size:29px;letter-spacing:3px;font-weight:800}\n.brand-note{padding-left:16px;border-left:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted)}\nnav{display:flex;gap:28px;font-size:13px}\nnav a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:7px}\n.intro{padding:48px 0 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:36px}\n.eyebrow{margin:0 0 12px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;color:var(--accent)}\nh1{font-family:Georgia,'Times New Roman',serif;font-size:60px;font-weight:400;letter-spacing:-2px;line-height:1.06;margin:0}\n.intro-copy{max-width:335px;margin:0 0 4px;font-size:15px;line-height:1.65;color:var(--muted)}\n.catalog-meta{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}\n.count{font-weight:700}\n.status{color:var(--muted)}\n.status span{margin-right:6px}\n.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}\n.product{min-width:0;padding:26px 28px 30px}\n.product:first-child{padding-left:0}\n.product:last-child{padding-right:0}\n.product+.product{border-left:1px solid var(--line)}\n.visual{height:222px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}\n.visual svg{display:block;width:100%;height:100%;max-width:270px;color:var(--ink)}\n.product-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}\nh2{font-family:Georgia,'Times New Roman',serif;font-size:27px;font-weight:400;letter-spacing:-.6px;margin:0}\n.price{font-size:16px;white-space:nowrap}\n.description{font-size:14px;line-height:1.55;margin:12px 0 9px;min-height:44px}\n.spec{margin:0 0 22px;color:var(--muted);font-size:11px;letter-spacing:.25px}\nbutton{width:100%;border:1px solid var(--accent);border-radius:0;padding:12px 16px;background:var(--accent);color:var(--paper);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}\nbutton:hover{background:var(--ink);border-color:var(--ink)}\nbutton span{font-size:18px;line-height:1;font-weight:400}\nfooter{border-top:1px solid var(--ink);padding:22px 0 30px;display:flex;justify-content:space-between;gap:24px;align-items:baseline}\nfooter p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}\nfooter .signoff{font-family:Georgia,'Times New Roman',serif;font-size:21px;color:var(--ink)}\n@media(max-width:700px){\n.shell{padding:0 20px}\n.header-inner{min-height:68px;gap:12px}\n.wordmark{font-size:23px;letter-spacing:2px}\n.brand-note{display:none}\nnav{gap:18px;font-size:12px}\n.intro{padding:26px 0 20px;display:block}\n.eyebrow{font-size:10px;margin-bottom:9px}\nh1{font-size:42px;letter-spacing:-1.5px}\n.intro-copy{font-size:13px;line-height:1.5;margin:12px 0 0;max-width:340px}\n.catalog-meta{padding:12px 0;font-size:11px}\n.products{display:block}\n.product,.product:first-child,.product:last-child{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;padding:20px 0}\n.product+.product{border-left:0;border-top:1px solid var(--line)}\n.visual{height:130px;margin:0;align-self:center}\n.visual svg{height:130px;width:100%}\nh2{font-size:22px;letter-spacing:-.5px}\n.price{font-size:14px}\n.product-heading{gap:6px}\n.description{font-size:12px;line-height:1.45;margin:7px 0;min-height:0}\n.spec{font-size:10px;margin:0 0 12px;letter-spacing:0}\nbutton{padding:9px 12px;font-size:12px}\nfooter{padding:18px 0 24px;display:block}\nfooter .signoff{font-size:19px;margin-bottom:5px}\nfooter p{font-size:11px}\n}\n@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}\n</style>\n</head>\n<body>\n<header>\n<div class=\"shell header-inner\">\n<a class=\"brand\" href=\"#essentials\" aria-label=\"Cedar home\">\n<span class=\"wordmark\">CEDAR</span>\n<span class=\"brand-note\">Independent bike shop<br>Goods for the everyday ride</span>\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#shop-notes\">The shop</a>\n</nav>\n</div>\n</header>\n<main class=\"shell\" id=\"essentials\">\n<section aria-labelledby=\"catalog-title\">\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Off the bike. Still essential.</p>\n<h1 id=\"catalog-title\">Cedar essentials</h1>\n</div>\n<p class=\"intro-copy\">A few good things for your daily loop. Pack light, take the back streets, make a stop along the way.</p>\n</div>\n<div class=\"catalog-meta\">\n<span class=\"count\">3 products</span>\n<span class=\"status\"><span aria-hidden=\"true\">✓</span> All items in stock</span>\n</div>\n<div class=\"products\">\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 240 240\" role=\"img\" aria-label=\"Terracotta steel bottle with a loop cap\">\n<g stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\">\n<path d=\"M105 39V28c0-8 30-8 30 0v11\" fill=\"none\"/>\n<rect x=\"99\" y=\"36\" width=\"42\" height=\"21\" rx=\"4\" fill=\"#302d28\"/>\n<path d=\"M101 57v15c0 10-17 16-17 32v103c0 10 7 16 17 16h38c10 0 17-6 17-16V104c0-16-17-22-17-32V57Z\" fill=\"#a44730\"/>\n<path d=\"M85 109h70M85 193h70\" fill=\"none\" stroke=\"#f7f4ed\" opacity=\".55\"/>\n<path d=\"M98 86c-5 5-7 10-7 19v74\" fill=\"none\" stroke=\"#f7f4ed\" opacity=\".55\"/>\n</g>\n<text x=\"120\" y=\"154\" text-anchor=\"middle\" fill=\"#f7f4ed\" font-family=\"Arial, sans-serif\" font-size=\"12\" font-weight=\"700\" letter-spacing=\"2\">CEDAR</text>\n</svg>\n</div>\n<div class=\"product-info\">\n<div class=\"product-heading\"><h2 id=\"bottle-title\">Trail bottle</h2><span class=\"price\">$28</span></div>\n<p class=\"description\">A sturdy refill for the commute, café stop, and ride home.</p>\n<p class=\"spec\">600 ml · Stainless steel</p>\n<button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 240 240\" role=\"img\" aria-label=\"Pocket notebook with a terracotta cover and stitched spine\">\n<g transform=\"rotate(-8 120 120)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\">\n<path d=\"M62 31h114v181H62Z\" fill=\"#f7f4ed\"/>\n<path d=\"M57 27h114v181H57Z\" fill=\"#a44730\"/>\n<path d=\"M69 28v179\" fill=\"none\"/>\n<path d=\"M74 194h89M74 199h89\" fill=\"none\" stroke=\"#f7f4ed\" opacity=\".5\"/>\n<path d=\"M69 53h5m-5 53h5m-5 53h5\" stroke=\"#f7f4ed\"/>\n</g>\n<g transform=\"rotate(-8 120 120)\" fill=\"#f7f4ed\" text-anchor=\"middle\" font-family=\"Arial, sans-serif\">\n<text x=\"120\" y=\"97\" font-size=\"10\" letter-spacing=\"2\">FIELD NOTES</text>\n<path d=\"M95 112h50\" stroke=\"#f7f4ed\"/>\n<text x=\"120\" y=\"133\" font-size=\"8\" letter-spacing=\"1.5\">CEDAR</text>\n</g>\n</svg>\n</div>\n<div class=\"product-info\">\n<div class=\"product-heading\"><h2 id=\"notebook-title\">Field notebook</h2><span class=\"price\">$16</span></div>\n<p class=\"description\">For new routes, roadside ideas, and that next bike build.</p>\n<p class=\"spec\">A6 pocket size · 48 dotted pages</p>\n<button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 240 240\" role=\"img\" aria-label=\"Natural canvas tote with Cedar lettering\">\n<g stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\">\n<path d=\"M89 83V53c0-43 62-43 62 0v30\" fill=\"none\" stroke-width=\"9\"/>\n<path d=\"M89 83V53c0-43 62-43 62 0v30\" fill=\"none\" stroke=\"#f7f4ed\" stroke-width=\"5\"/>\n<path d=\"M57 76h126l10 138c-45 10-101 10-146 0Z\" fill=\"#f7f4ed\"/>\n<path d=\"m64 87-8 120c41 8 86 8 128 0l-8-120M86 77v20m68-20v20\" fill=\"none\" stroke=\"#302d28\" opacity=\".35\"/>\n</g>\n<g fill=\"#a44730\" text-anchor=\"middle\" font-family=\"Arial, sans-serif\">\n<text x=\"120\" y=\"145\" font-size=\"23\" font-weight=\"700\" letter-spacing=\"2\">CEDAR</text>\n<text x=\"120\" y=\"162\" font-size=\"7\" letter-spacing=\"2\">TAKE THE LONG WAY</text>\n</g>\n</svg>\n</div>\n<div class=\"product-info\">\n<div class=\"product-heading\"><h2 id=\"tote-title\">Canvas tote</h2><span class=\"price\">$32</span></div>\n<p class=\"description\">Room for market finds, a spare layer, and your bike lock.</p>\n<p class=\"spec\">Heavy cotton canvas · 14 L</p>\n<button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n</div>\n</section>\n<footer id=\"shop-notes\">\n<p class=\"signoff\">For the long way home.</p>\n<p>Selected by Cedar, your independent bike shop.<br>Useful goods. Fewer things. More miles.</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-products-03","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Dune: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Dune essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Dune essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Dune essentials — Everyday cycling goods</title>\n<style>\n:root{--ink:#292c28;--muted:#676960;--plum:#512d43;--paper:#f8f7f2;--line:#dcdcd2;--panel:#eeeee6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\na{color:inherit;text-decoration:none}\na:hover{text-decoration:underline;text-underline-offset:5px}\nbutton{font:inherit}\n.wrap{width:min(1104px,calc(100% - 64px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:14px}\n.wordmark{font-size:29px;font-weight:800;letter-spacing:-1.5px;color:var(--plum)}\n.brand-note{border-left:1px solid var(--line);padding-left:14px;font-size:11px;line-height:1.45;letter-spacing:.06em;text-transform:uppercase}\nnav{display:flex;gap:28px;font-size:13px}\nnav a[aria-current]{color:var(--plum);font-weight:700}\n.intro{padding:49px 0 34px}\n.eyebrow{margin:0 0 12px;color:var(--plum);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}\nh1{margin:0 0 14px;font:normal 58px/1.08 Georgia,'Times New Roman',serif;letter-spacing:-2px}\n.intro>p:last-child{margin:0;color:var(--muted);font-size:17px}\n.collection-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}\n.collection-heading h2{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0}\n.collection-heading span{font-size:12px;color:var(--muted)}\n.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}\n.product{border:1px solid var(--line);background:#fdfcf8;min-width:0}\n.visual{margin:0;background:var(--panel);height:210px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}\n.visual svg{display:block;width:100%;height:190px}\n.product-body{padding:20px;display:flex;flex-direction:column}\n.product-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}\nh3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.4px}\n.price{font-size:18px;color:var(--plum);white-space:nowrap}\n.spec{margin:7px 0 10px;font-size:11px;letter-spacing:.035em;color:var(--muted)}\n.description{margin:0 0 20px;font-size:14px;line-height:1.55;min-height:44px}\n.add{width:100%;min-height:43px;border:1px solid var(--plum);border-radius:2px;background:var(--plum);color:white;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:13px;font-weight:600;cursor:pointer}\n.add:hover{background:#3d2132}\n.add:focus-visible,a:focus-visible{outline:3px solid #ae8b9c;outline-offset:4px}\n.add span{font-size:21px;font-weight:400;line-height:1}\n.shop-notes{margin:32px 0 42px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:30px}\n.shop-notes h2{margin:0 0 5px;font:normal 23px/1.2 Georgia,'Times New Roman',serif}\n.shop-notes h3{font-size:12px;font-weight:700;letter-spacing:0;margin-bottom:5px}\n.shop-notes p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}\n.fit-note{display:flex;gap:14px;align-items:center}\n.fit-note svg{width:38px;height:56px;flex:none;color:var(--plum)}\nfooter{display:flex;justify-content:space-between;gap:20px;padding-bottom:26px;color:var(--muted);font-size:11px}\n@media(max-width:750px){\n.wrap{width:calc(100% - 36px)}\n.header-inner{min-height:72px;gap:16px}\n.brand{gap:0}.brand-note{display:none}\n.wordmark{font-size:27px}\nnav{gap:20px;font-size:12px}\n.intro{padding:30px 0 25px}\n.eyebrow{font-size:10px;margin-bottom:10px}\nh1{font-size:40px;letter-spacing:-1.3px;margin-bottom:12px}\n.intro>p:last-child{font-size:15px;max-width:340px}\n.collection-heading{padding:12px 0}\n.collection-heading h2{font-size:10px}\n.collection-heading span{font-size:11px}\n.products{grid-template-columns:1fr;gap:12px}\n.product{display:grid;grid-template-columns:96px minmax(0,1fr)}\n.visual{height:100%;border-bottom:0;border-right:1px solid var(--line)}\n.visual svg{height:151px;width:100%}\n.product-body{padding:14px}\nh3{font-size:18px}\n.price{font-size:16px}\n.product-heading{gap:8px}\n.spec{font-size:10px;margin:5px 0 7px;letter-spacing:0}\n.description{font-size:12px;line-height:1.5;margin-bottom:12px;min-height:0}\n.add{min-height:38px;padding:7px 10px;font-size:12px}\n.shop-notes{margin:24px 0;grid-template-columns:1fr;gap:18px;padding:20px 0}\n.shop-notes>div:first-child{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}\n.shop-notes h2{font-size:21px;margin:0}\n.fit-note{padding-bottom:18px;border-bottom:1px solid var(--line)}\nfooter{font-size:10px;gap:12px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wrap header-inner\">\n<a class=\"brand\" href=\"#\" aria-label=\"Dune home\">\n<span class=\"wordmark\">DUNE</span>\n<span class=\"brand-note\">Independent bike shop<br>Goods for everyday miles</span>\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#shop-notes\">Shop notes</a>\n</nav>\n</div>\n</header>\n<main class=\"wrap\" id=\"essentials\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<p class=\"eyebrow\">From the shop / Everyday carry</p>\n<h1 id=\"page-title\">Dune essentials</h1>\n<p>Useful kit for the commute, the café stop and the ride home.</p>\n</section>\n<section aria-labelledby=\"collection-title\">\n<div class=\"collection-heading\">\n<h2 id=\"collection-title\">Good things to take along</h2>\n<span>3 products · Prices in USD</span>\n</div>\n<div class=\"products\">\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 220 210\" role=\"img\" aria-label=\"Sage steel Trail bottle with a screw cap and a narrow, easy-to-carry shape\">\n<path d=\"M90 33h40v13H90z\" fill=\"#512d43\"/>\n<path d=\"M94 30h32v6H94z\" fill=\"#664557\"/>\n<path d=\"M91 46v12c0 8-15 11-15 25v95c0 7 5 11 12 11h44c7 0 12-4 12-11V83c0-14-15-17-15-25V46z\" fill=\"#a3ada1\" stroke=\"#707d70\" stroke-width=\"1.5\"/>\n<path d=\"M83 86v87\" stroke=\"#c7cec1\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n<path d=\"M78 164h64\" stroke=\"#8b9889\"/>\n<text x=\"110\" y=\"121\" text-anchor=\"middle\" font-family=\"Arial,sans-serif\" font-size=\"12\" font-weight=\"700\" letter-spacing=\"2\" fill=\"#344236\">DUNE</text>\n<text x=\"110\" y=\"138\" text-anchor=\"middle\" font-family=\"Arial,sans-serif\" font-size=\"7\" letter-spacing=\"1\" fill=\"#344236\">650 ML</text>\n</svg>\n</figure>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h3 id=\"bottle-title\">Trail bottle</h3><span class=\"price\">$28</span></div>\n<p class=\"spec\">650 ml · Single-wall stainless steel</p>\n<p class=\"description\">A sturdy refill companion for daily miles and workshop stops.</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 220 210\" role=\"img\" aria-label=\"Pocket-sized tan Field notebook with a stitched spine and dotted pages\">\n<path d=\"M64 43h95v133H64z\" fill=\"#faf7ed\" stroke=\"#a7977c\"/>\n<path d=\"M59 38h95v134H59z\" fill=\"#c3af8d\" stroke=\"#9a886a\" stroke-width=\"1.5\"/>\n<path d=\"M69 39v132\" stroke=\"#9a886a\"/>\n<path d=\"M65 59v9m0 28v9m0 28v9\" stroke=\"#f0e7d7\" stroke-width=\"1.5\"/>\n<path d=\"M143 39v133\" stroke=\"#512d43\" stroke-width=\"4\"/>\n<text x=\"82\" y=\"83\" font-family=\"Arial,sans-serif\" font-size=\"13\" font-weight=\"700\" letter-spacing=\"1\" fill=\"#512d43\">FIELD</text>\n<text x=\"82\" y=\"100\" font-family=\"Arial,sans-serif\" font-size=\"13\" font-weight=\"700\" letter-spacing=\"1\" fill=\"#512d43\">NOTES</text>\n<path d=\"M83 113h43\" stroke=\"#9a886a\"/>\n<text x=\"83\" y=\"153\" font-family=\"Arial,sans-serif\" font-size=\"8\" letter-spacing=\"1\" fill=\"#584c3b\">DUNE / A6</text>\n</svg>\n</figure>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h3 id=\"notebook-title\">Field notebook</h3><span class=\"price\">$16</span></div>\n<p class=\"spec\">A6 pocket size · 64 dotted pages</p>\n<p class=\"description\">For route ideas, workshop notes and the next parts list.</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 220 210\" role=\"img\" aria-label=\"Natural canvas tote with long shoulder straps and a roomy rectangular body\">\n<path d=\"M85 85V57c0-40 50-40 50 0v28\" fill=\"none\" stroke=\"#b4a68b\" stroke-width=\"10\"/>\n<path d=\"M85 85V57c0-40 50-40 50 0v28\" fill=\"none\" stroke=\"#e1d5bd\" stroke-width=\"6\"/>\n<path d=\"M55 77h110l9 107H46z\" fill=\"#ddd1b7\" stroke=\"#b4a68b\" stroke-width=\"1.5\"/>\n<path d=\"M61 83h98l8 95H53z\" fill=\"none\" stroke=\"#bfb194\" stroke-dasharray=\"2 3\"/>\n<path d=\"M84 77v17m52-17v17\" stroke=\"#b4a68b\" stroke-width=\"7\"/>\n<text x=\"110\" y=\"131\" text-anchor=\"middle\" font-family=\"Arial,sans-serif\" font-size=\"19\" font-weight=\"700\" letter-spacing=\"2\" fill=\"#512d43\">DUNE</text>\n<text x=\"110\" y=\"147\" text-anchor=\"middle\" font-family=\"Arial,sans-serif\" font-size=\"7\" letter-spacing=\"1.5\" fill=\"#512d43\">CYCLE SUPPLY</text>\n</svg>\n</figure>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h3 id=\"tote-title\">Canvas tote</h3><span class=\"price\">$32</span></div>\n<p class=\"spec\">18 L · Heavy cotton canvas</p>\n<p class=\"description\">Room for a lock, a spare layer and groceries on the way home.</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n</div>\n</section>\n<aside class=\"shop-notes\" id=\"shop-notes\" aria-labelledby=\"notes-title\">\n<div>\n<h2 id=\"notes-title\">At the workshop</h2>\n<p>A little help before you head out.</p>\n</div>\n<div class=\"fit-note\">\n<svg viewBox=\"0 0 38 56\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M13 5h12v5H13zm0 5v6l-4 6v25h20V22l-4-6v-6\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<path d=\"M5 24v25c0 2 2 3 4 3h22V28M4 35h12\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n</svg>\n<div><h3>Check your cage fit</h3><p>Frames and cages vary. Bring your bike in and we’ll help check bottle clearance.</p></div>\n</div>\n<div>\n<h3>Make it part of your next visit</h3>\n<p>Browse the essentials in the shop while your bike is in for a tune-up.</p>\n</div>\n</aside>\n</main>\n<footer class=\"wrap\">\n<span>DUNE · Independent bike shop</span>\n<span>For the miles in between.</span>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-products-04","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Elm: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: calm and spacious; use forest green as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Elm essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Elm essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Elm essentials · Community food co-op</title>\n<style>\n:root{color-scheme:light;--paper:#faf9f5;--ink:#28342c;--green:#28533e;--muted:#646c62;--line:#dedfd5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\na{color:inherit;text-decoration:none}\nbutton,a{-webkit-tap-highlight-color:transparent}\na:focus-visible,button:focus-visible{outline:3px solid #a58a43;outline-offset:4px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1104px;margin:auto;padding:18px 32px;display:flex;align-items:center;gap:32px}\n.brand{display:flex;align-items:center;gap:8px;color:var(--green);font-size:29px;font-weight:650;letter-spacing:-1.5px;line-height:1}\n.brand svg{width:25px;height:30px}\n.brand-note{font-size:13px;color:var(--muted)}\nnav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:14px}\nnav a{min-height:44px;display:flex;align-items:center}\nnav a[aria-current]{color:var(--green);font-weight:650;text-decoration:underline;text-underline-offset:7px}\nmain{max-width:1040px;margin:0 auto;padding:47px 32px 30px}\n.intro{margin-bottom:30px}\n.eyebrow{margin:0 0 8px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh1{margin:0 0 8px;font-size:42px;line-height:1.15;letter-spacing:-1.5px;font-weight:550}\n.intro p:last-child{margin:0;color:var(--muted);font-size:16px}\n.collection-heading{display:flex;justify-content:space-between;gap:16px;padding:0 0 11px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}\n.collection-heading h2{margin:0;font-size:12px;font-weight:500}\n.product{display:grid;grid-template-columns:88px minmax(0,1fr) 65px 140px;gap:24px;align-items:center;padding:25px 0;border-bottom:1px solid var(--line)}\n.visual{width:88px;height:92px;display:flex;align-items:center;justify-content:center;background:#eeeee5;border-radius:6px}\n.visual svg{width:76px;height:80px}\n.product h3{margin:0 0 5px;font-size:19px;font-weight:600;letter-spacing:-.3px;line-height:1.3}\n.description{margin:0;max-width:345px;font-size:14px;color:var(--muted);line-height:1.5}\n.price{margin:0;font-size:17px;font-weight:550;font-variant-numeric:tabular-nums}\n.add{min-height:44px;width:140px;padding:10px 14px;border:1px solid var(--green);border-radius:4px;background:var(--green);color:#fff;font:600 14px/1.4 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\n.add:hover{background:#1d4130}\n.pickup{display:flex;align-items:flex-start;gap:13px;max-width:680px;margin-top:25px}\n.pickup svg{width:19px;height:22px;flex:none;margin-top:2px;color:var(--green)}\n.pickup h2{margin:0 0 3px;font-size:13px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}\n.pickup p{margin:0;font-size:12px;color:var(--muted)}\nfooter{max-width:1040px;margin:0 auto;padding:0 32px 24px;color:var(--muted);font-size:12px}\n@media(max-width:600px){\n.header-inner{padding:8px 16px;gap:16px}\n.brand{font-size:27px}\n.brand-note{display:none}\nnav{gap:20px;font-size:13px}\nmain{padding:26px 16px 23px}\n.intro{margin-bottom:22px}\n.eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:6px}\nh1{font-size:32px;letter-spacing:-1px;margin-bottom:7px}\n.intro p:last-child{font-size:14px;max-width:310px}\n.collection-heading{padding-bottom:9px}\n.product{grid-template-columns:52px minmax(0,1fr) auto;gap:10px 12px;padding:16px 0;align-items:start}\n.visual{grid-column:1;grid-row:1;width:52px;height:62px;border-radius:4px}\n.visual svg{width:48px;height:56px}\n.product-info{grid-column:2;grid-row:1;min-width:0}\n.product h3{font-size:17px;margin-bottom:4px}\n.description{font-size:13px;line-height:1.45}\n.price{grid-column:3;grid-row:1;font-size:16px;line-height:1.4}\n.add{grid-column:2 / 4;grid-row:2;width:140px}\n.pickup{margin-top:20px;gap:10px}\n.pickup h2{font-size:12px}\nfooter{padding:0 16px 20px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<a class=\"brand\" href=\"#essentials\" aria-label=\"Elm home\">\n<svg viewBox=\"0 0 30 36\" aria-hidden=\"true\"><path d=\"M15 32V15M15 24C3 24 3 12 4 7c10 0 13 7 11 17ZM15 19C14 8 20 3 27 3c1 9-2 15-12 16Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\nelm\n</a>\n<span class=\"brand-note\">Your community food co-op</span>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#community\">Our co-op</a>\n</nav>\n</div>\n</header>\n<main id=\"essentials\">\n<header class=\"intro\">\n<p class=\"eyebrow\">Good things for everyday living</p>\n<h1>Elm essentials</h1>\n<p>A few useful companions for market days and everything between.</p>\n</header>\n<section aria-labelledby=\"collection-title\">\n<div class=\"collection-heading\">\n<h2 id=\"collection-title\">The everyday collection</h2>\n<span>3 essentials</span>\n</div>\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 80 90\" role=\"img\" aria-label=\"Forest green reusable bottle\">\n<rect x=\"32\" y=\"8\" width=\"16\" height=\"9\" rx=\"2\" fill=\"#a6aa95\"/>\n<path d=\"M31 18h18v10c0 6 9 9 9 18v31c0 4-3 6-6 6H28c-3 0-6-2-6-6V46c0-9 9-12 9-18Z\" fill=\"#3b604b\"/>\n<path d=\"M29 46v26\" stroke=\"#688370\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n<path d=\"M35 60c0-7 6-10 11-10 0 7-3 11-11 10Zm0 0v7\" fill=\"#c8d1b4\" stroke=\"#c8d1b4\" stroke-width=\"1.5\"/>\n<path d=\"M32 20h16\" stroke=\"#234b36\" stroke-width=\"2\"/>\n</svg>\n</div>\n<div class=\"product-info\">\n<h3 id=\"bottle-title\">Trail bottle</h3>\n<p class=\"description\">A sturdy stainless steel bottle for refill stops and the long way home.</p>\n</div>\n<p class=\"price\">$28</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button>\n</article>\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 80 90\" role=\"img\" aria-label=\"Clay-colored pocket notebook\">\n<path d=\"M19 17h42v61H19Z\" fill=\"#ded4bb\"/>\n<rect x=\"16\" y=\"13\" width=\"45\" height=\"63\" rx=\"3\" fill=\"#b77a59\"/>\n<path d=\"M23 14v61\" stroke=\"#8c5b43\" stroke-width=\"2\"/>\n<path d=\"M60 17v55\" stroke=\"#e9dfc7\" stroke-width=\"2\"/>\n<path d=\"M32 35h20M32 40h14\" stroke=\"#eddbc1\" stroke-width=\"1.5\"/>\n<path d=\"M43 76v8l4-3 4 3v-8\" fill=\"#385640\"/>\n</svg>\n</div>\n<div class=\"product-info\">\n<h3 id=\"notebook-title\">Field notebook</h3>\n<p class=\"description\">A pocket-sized place for shopping lists, shared recipes, and things to grow.</p>\n</div>\n<p class=\"price\">$16</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button>\n</article>\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 80 90\" role=\"img\" aria-label=\"Natural canvas market tote\">\n<path d=\"M29 33V22c0-16 22-16 22 0v11\" fill=\"none\" stroke=\"#b2a788\" stroke-width=\"5\"/>\n<path d=\"M18 29h44l5 49H13Z\" fill=\"#d4c5a2\" stroke=\"#b7a988\" stroke-width=\"1\"/>\n<path d=\"m21 34-3 38M59 34l3 38\" stroke=\"#e9dec5\" stroke-width=\"2\"/>\n<path d=\"M38 61V47m0 7c-8 0-9-6-9-9 7 0 10 4 9 9Zm0-4c0-7 5-9 10-9 0 6-3 10-10 9Z\" fill=\"none\" stroke=\"#46634c\" stroke-width=\"1.7\" stroke-linejoin=\"round\"/>\n</svg>\n</div>\n<div class=\"product-info\">\n<h3 id=\"tote-title\">Canvas tote</h3>\n<p class=\"description\">Room for fresh greens, pantry staples, and one more apple. Use it on repeat.</p>\n</div>\n<p class=\"price\">$32</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button>\n</article>\n</section>\n<aside class=\"pickup\" id=\"community\" aria-labelledby=\"pickup-title\">\n<svg viewBox=\"0 0 24 28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M20 10c0 7-8 15-8 15S4 17 4 10a8 8 0 1 1 16 0Z\"/><circle cx=\"12\" cy=\"10\" r=\"2.5\"/></svg>\n<div>\n<h2 id=\"pickup-title\">Local pickup at the community food co-op’s neighborhood market &amp; member welcome desk</h2>\n<p>One less delivery trip. Bring your own bag and say hello.</p>\n</div>\n</aside>\n</main>\n<footer>Community-owned. Rooted in everyday good.</footer>\n</body>\n</html>"}]}
{"id":"sft-products-05","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Fjord: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: compact but readable; use slate blue as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Fjord essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Fjord essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Fjord essentials — Community co-op goods</title>\n<style>\n:root{color-scheme:light;--paper:#f7f5ef;--ink:#25343e;--muted:#626a6d;--accent:#405b70;--line:#d9dbd4;--wash:#eeeee6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\na{color:inherit;text-decoration:none}\na:hover{text-decoration:underline;text-underline-offset:5px}\na:focus-visible,button:focus-visible{outline:3px solid #8cabc1;outline-offset:4px}\n.wrap{width:min(1060px,calc(100% - 64px));margin-inline:auto}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;justify-content:space-between;align-items:center;gap:20px}\n.brand{display:flex;align-items:center;gap:18px}\n.wordmark{font-size:28px;font-weight:800;letter-spacing:-1.5px}\n.brand-note{max-width:130px;padding-left:18px;border-left:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--muted)}\nnav{display:flex;gap:26px;font-size:14px}\nnav a[aria-current]{font-weight:650;color:var(--accent)}\nmain{padding-top:44px}\n.intro{max-width:620px}\n.eyebrow{margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--accent)}\nh1{margin:0;font-size:44px;line-height:1.15;letter-spacing:-1.6px;font-weight:650}\n.lead{margin:14px 0 0;color:var(--muted);font-size:17px;max-width:530px}\n.catalog{margin-top:32px}\n.catalog-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--ink)}\n.catalog-top h2{margin:0;font-size:13px;font-weight:600}\n.update{margin:0;color:var(--muted);font-size:12px}\n.product{display:grid;grid-template-columns:112px minmax(0,1fr) 76px 154px;align-items:center;gap:28px;padding:24px 0;border-bottom:1px solid var(--line)}\n.visual{width:112px;height:120px;display:grid;place-items:center;background:var(--wash);border-radius:3px}\n.visual svg{width:94px;height:108px}\nh3{margin:0 0 5px;font-size:22px;font-weight:600;letter-spacing:-.4px}\n.description{margin:0;color:var(--muted)}\n.detail{margin:8px 0 0;font-size:12px;color:var(--muted)}\n.price{margin:0;font-size:22px;font-weight:550;letter-spacing:-.4px}\n.buy{text-align:center}\nbutton{display:block;width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fff;font:600 14px/1.4 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\nbutton:hover{background:#30495c;border-color:#30495c}\n.hint{display:block;margin-top:7px;font-size:11px;color:var(--muted)}\n.pickup{display:flex;justify-content:space-between;gap:24px;padding:22px 0 30px;font-size:13px;color:var(--muted)}\n.pickup p{margin:0}\n.pickup strong{font-weight:600;color:var(--ink)}\n.footer-note{font-size:12px;text-align:right}\n@media(max-width:650px){\n.wrap{width:calc(100% - 36px)}\n.header-inner{min-height:68px;gap:12px}\n.wordmark{font-size:25px}\n.brand-note{display:none}\nnav{gap:20px;font-size:13px}\nmain{padding-top:23px}\n.eyebrow{font-size:10px;margin-bottom:6px}\nh1{font-size:32px;letter-spacing:-1px}\n.lead{font-size:14px;margin-top:9px;max-width:340px}\n.catalog{margin-top:22px}\n.catalog-top{align-items:center;gap:8px;padding-bottom:10px}\n.catalog-top h2{font-size:12px}\n.update{font-size:10px;max-width:155px;text-align:right}\n.product{grid-template-columns:68px minmax(0,1fr) auto;column-gap:14px;row-gap:10px;padding:17px 0}\n.visual{grid-column:1;grid-row:1 / 3;width:68px;height:100px;align-self:start}\n.visual svg{width:64px;height:90px}\n.product-info{grid-column:2 / 4}\nh3{font-size:18px;line-height:1.25;margin-bottom:4px}\n.description{font-size:13px;line-height:1.4}\n.detail{font-size:10px;margin-top:5px}\n.price{grid-column:2;font-size:19px;align-self:start;padding-top:8px}\n.buy{grid-column:3;min-width:126px}\nbutton{min-height:38px;padding:8px 12px;font-size:12px}\n.hint{font-size:10px;margin-top:4px}\n.pickup{display:block;padding-top:17px;font-size:12px}\n.footer-note{text-align:left;margin-top:9px!important;font-size:11px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n  <div class=\"wrap header-inner\">\n    <a class=\"brand\" href=\"#essentials\" aria-label=\"Fjord home\">\n      <span class=\"wordmark\">fjord</span>\n      <span class=\"brand-note\">Your community<br>food co-op</span>\n    </a>\n    <nav aria-label=\"Main navigation\">\n      <a href=\"#essentials\" aria-current=\"page\">Goods</a>\n      <a href=\"#pickup\">Pickup info</a>\n    </nav>\n  </div>\n</header>\n\n<main class=\"wrap\" id=\"essentials\">\n  <div class=\"intro\">\n    <p class=\"eyebrow\">From your neighborhood co-op</p>\n    <h1>Fjord essentials</h1>\n    <p class=\"lead\">Simple companions for market days, shared meals and everything in between.</p>\n  </div>\n\n  <section class=\"catalog\" aria-labelledby=\"collection-title\">\n    <div class=\"catalog-top\">\n      <h2 id=\"collection-title\">The everyday collection</h2>\n      <p class=\"update\">May 12 update · Totes back in stock</p>\n    </div>\n\n    <article class=\"product\" aria-labelledby=\"bottle-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 100 120\" role=\"img\" aria-label=\"Slate blue reusable bottle with a screw cap\">\n          <path d=\"M39 21V13q0-4 4-4h14q4 0 4 4v8\" fill=\"none\" stroke=\"#354957\" stroke-width=\"3\"/>\n          <rect x=\"36\" y=\"18\" width=\"28\" height=\"12\" rx=\"3\" fill=\"#354957\"/>\n          <path d=\"M37 30h26v8c0 5 10 9 10 18v44q0 10-10 10H37q-10 0-10-10V56c0-9 10-13 10-18Z\" fill=\"#607a8a\" stroke=\"#405b70\" stroke-width=\"2\"/>\n          <path d=\"M34 58v40\" stroke=\"#96aab4\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n          <text x=\"50\" y=\"81\" text-anchor=\"middle\" fill=\"#f7f5ef\" font-family=\"system-ui,sans-serif\" font-size=\"12\" font-weight=\"650\">fjord</text>\n        </svg>\n      </div>\n      <div class=\"product-info\">\n        <h3 id=\"bottle-title\">Trail bottle</h3>\n        <p class=\"description\">For water refills and market-day wanders.</p>\n        <p class=\"detail\">600 ml · Stainless steel</p>\n      </div>\n      <p class=\"price\">$28</p>\n      <div class=\"buy\">\n        <button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button>\n        <span class=\"hint\">Pick up at the co-op</span>\n      </div>\n    </article>\n\n    <article class=\"product\" aria-labelledby=\"notebook-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 100 120\" role=\"img\" aria-label=\"Sage green pocket notebook with a cloth spine\">\n          <path d=\"M23 17h54v88H23q-5 0-5-5V23q0-6 5-6Z\" fill=\"#f8f5e8\" stroke=\"#777f6e\" stroke-width=\"2\"/>\n          <path d=\"M24 13h53v87H24q-6 0-6 5V19q0-6 6-6Z\" fill=\"#a2aa93\" stroke=\"#777f6e\" stroke-width=\"2\"/>\n          <path d=\"M27 14v85\" stroke=\"#77816d\" stroke-width=\"5\"/>\n          <path d=\"M65 100v12l-5-4-5 4v-12\" fill=\"#405b70\"/>\n          <rect x=\"36\" y=\"31\" width=\"30\" height=\"22\" rx=\"1\" fill=\"#ececdf\"/>\n          <path d=\"M42 39h18m-18 6h13\" stroke=\"#7a826f\" stroke-width=\"1.5\"/>\n          <text x=\"51\" y=\"80\" text-anchor=\"middle\" fill=\"#364132\" font-family=\"system-ui,sans-serif\" font-size=\"9\" font-weight=\"600\">fjord</text>\n        </svg>\n      </div>\n      <div class=\"product-info\">\n        <h3 id=\"notebook-title\">Field notebook</h3>\n        <p class=\"description\">For grocery lists, recipes and good ideas.</p>\n        <p class=\"detail\">A5 · 80 lined pages</p>\n      </div>\n      <p class=\"price\">$16</p>\n      <div class=\"buy\">\n        <button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button>\n        <span class=\"hint\">Pick up at the co-op</span>\n      </div>\n    </article>\n\n    <article class=\"product\" aria-labelledby=\"tote-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 100 120\" role=\"img\" aria-label=\"Natural canvas shopping tote with long handles\">\n          <path d=\"M32 46V29q0-18 18-18t18 18v17\" fill=\"none\" stroke=\"#a5977e\" stroke-width=\"7\"/>\n          <path d=\"M33 46V29q0-17 17-17t17 17v17\" fill=\"none\" stroke=\"#d8cdb8\" stroke-width=\"4\"/>\n          <path d=\"M18 42h64l5 65H13Z\" fill=\"#ded3bd\" stroke=\"#aa9b80\" stroke-width=\"2\" stroke-linejoin=\"round\"/>\n          <path d=\"M22 47l-4 55h64l-4-55\" fill=\"none\" stroke=\"#c1b297\" stroke-width=\"1\"/>\n          <path d=\"M34 42v11m32-11v11\" stroke=\"#a5977e\" stroke-width=\"4\"/>\n          <text x=\"50\" y=\"79\" text-anchor=\"middle\" fill=\"#405b70\" font-family=\"system-ui,sans-serif\" font-size=\"17\" font-weight=\"750\" letter-spacing=\"-1\">fjord</text>\n          <text x=\"50\" y=\"91\" text-anchor=\"middle\" fill=\"#405b70\" font-family=\"system-ui,sans-serif\" font-size=\"5\" letter-spacing=\"1\">COMMUNITY CO-OP</text>\n        </svg>\n      </div>\n      <div class=\"product-info\">\n        <h3 id=\"tote-title\">Canvas tote</h3>\n        <p class=\"description\">From your weekly shop to the walk home.</p>\n        <p class=\"detail\">Cotton canvas · Long handles</p>\n      </div>\n      <p class=\"price\">$32</p>\n      <div class=\"buy\">\n        <button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button>\n        <span class=\"hint\">Pick up at the co-op</span>\n      </div>\n    </article>\n  </section>\n\n  <footer class=\"pickup\" id=\"pickup\">\n    <p><strong>Local pickup, less packaging.</strong><br>Collect at the co-op service desk on your next grocery run.</p>\n    <p class=\"footer-note\">A few good things for everyday co-op life.</p>\n  </footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-products-07","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Harbor: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: practical and understated; use deep plum as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Harbor essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Harbor essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Harbor essentials — Community food co-op</title>\n<style>\n:root{--ink:#493344;--paper:#f8f6f0;--muted:#796b75;--line:rgba(73,51,68,.18);--wash:rgba(73,51,68,.055)}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-underline-offset:5px}\nbutton{font:inherit}\n.wrap{width:min(100% - 64px,1040px);margin-inline:auto}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{text-decoration:none;display:flex;align-items:center;gap:17px}\n.wordmark{font-size:29px;font-weight:750;letter-spacing:-1.3px}\n.brand-note{border-left:1px solid var(--line);padding-left:17px;font-size:12px;line-height:1.5;max-width:130px}\nnav{display:flex;gap:28px;font-size:14px}\nnav a{text-decoration:none;padding:8px 0}\nnav a[aria-current]{border-bottom:2px solid var(--ink);font-weight:650}\na:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}\n.intro{padding:49px 0 36px}\n.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:700;text-transform:uppercase;margin:0 0 12px}\nh1{font-size:46px;line-height:1.1;letter-spacing:-1.8px;font-weight:600;margin:0 0 14px}\n.intro p:last-child{font-size:16px;line-height:1.65;max-width:510px;margin:0;color:var(--muted)}\n.catalog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 0 12px;border-bottom:1px solid var(--ink)}\n.catalog-heading h2,.catalog-heading p{margin:0;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase}\n.catalog-heading p{color:var(--muted)}\n.product{display:grid;grid-template-columns:112px minmax(0,1fr) 142px;gap:28px;align-items:center;padding:27px 0;border-bottom:1px solid var(--line)}\n.visual{width:112px;height:112px;border-radius:3px;background:var(--wash);display:grid;place-items:center}\n.visual svg{width:88px;height:94px;display:block;color:var(--ink)}\n.product h3{font-size:23px;font-weight:600;letter-spacing:-.5px;line-height:1.2;margin:0 0 8px}\n.description{font-size:14px;line-height:1.65;max-width:430px;margin:0 0 10px}\n.details{font-size:11px;line-height:1.5;letter-spacing:.25px;color:var(--muted);margin:0}\n.purchase{display:flex;flex-direction:column;align-items:stretch;gap:13px}\n.price{font-size:21px;line-height:1.2;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}\nbutton{border:1px solid var(--ink);background:var(--ink);color:var(--paper);min-height:40px;padding:9px 15px;border-radius:3px;cursor:pointer;font-size:13px;font-weight:550;white-space:nowrap}\nbutton:hover{background:var(--paper);color:var(--ink)}\n.coop-note{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding:26px 0 30px}\n.coop-note h2{font-size:13px;font-weight:650;margin:0 0 6px}\n.coop-note p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}\n.coop-note .ownership{text-align:right;max-width:160px}\n@media(max-width:600px){\n.wrap{width:calc(100% - 36px)}\n.header-inner{min-height:76px;gap:12px}\n.brand{display:block}\n.wordmark{font-size:25px}\n.brand-note{display:block;border:0;padding:0;max-width:none;font-size:10px;line-height:1.3}\nnav{gap:16px;font-size:12px}\n.intro{padding:30px 0 27px}\n.eyebrow{font-size:10px;margin-bottom:10px}\nh1{font-size:35px;letter-spacing:-1.2px;margin-bottom:12px}\n.intro p:last-child{font-size:14px;line-height:1.55;max-width:330px}\n.catalog-heading h2,.catalog-heading p{font-size:10px;letter-spacing:.7px}\n.product{grid-template-columns:66px minmax(0,1fr);column-gap:16px;row-gap:13px;align-items:start;padding:21px 0}\n.visual{width:66px;height:82px;grid-row:1 / 3}\n.visual svg{width:59px;height:73px}\n.product h3{font-size:20px;margin-bottom:6px;letter-spacing:-.4px}\n.description{font-size:13px;line-height:1.5;margin-bottom:7px}\n.details{font-size:10px}\n.purchase{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center;gap:12px}\n.price{font-size:19px;text-align:left}\nbutton{font-size:12px;min-height:38px;padding:8px 14px}\n.coop-note{display:block;padding:23px 0}\n.coop-note .ownership{text-align:left;max-width:none;margin-top:12px;font-size:11px}\n}\n@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n  <div class=\"wrap header-inner\">\n    <a class=\"brand\" href=\"#\" aria-label=\"Harbor home\">\n      <span class=\"wordmark\">Harbor</span>\n      <span class=\"brand-note\">Community food co-op</span>\n    </a>\n    <nav aria-label=\"Main navigation\">\n      <a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n      <a href=\"#at-the-coop\">At the co-op</a>\n    </nav>\n  </div>\n</header>\n<main class=\"wrap\" id=\"essentials\">\n  <section class=\"intro\" aria-labelledby=\"page-title\">\n    <p class=\"eyebrow\">For the everyday</p>\n    <h1 id=\"page-title\">Harbor essentials</h1>\n    <p>A few useful things for market mornings, shared meals, and the walk home.</p>\n  </section>\n  <section aria-labelledby=\"catalog-title\">\n    <div class=\"catalog-heading\">\n      <h2 id=\"catalog-title\">The co-op collection</h2>\n      <p>3 items · USD</p>\n    </div>\n    <article class=\"product\" aria-labelledby=\"bottle-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 88 100\" role=\"img\" aria-label=\"Refillable bottle with a carry loop in the cap\">\n          <g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\">\n            <path d=\"M37 18v-5a7 7 0 0 1 14 0v5\"/>\n            <rect x=\"33\" y=\"18\" width=\"22\" height=\"9\" rx=\"2\"/>\n            <path d=\"M35 27v7c-1 5-9 7-9 15v36a6 6 0 0 0 6 6h24a6 6 0 0 0 6-6V49c0-8-8-10-9-15v-7Z\" fill=\"currentColor\" fill-opacity=\".07\"/>\n            <path d=\"M30 79v6a2 2 0 0 0 2 2M38 57h12M38 61h12\"/>\n          </g>\n          <text x=\"44\" y=\"73\" fill=\"currentColor\" text-anchor=\"middle\" font-family=\"system-ui,sans-serif\" font-size=\"6\" letter-spacing=\"1\">HARBOR</text>\n        </svg>\n      </div>\n      <div class=\"product-copy\">\n        <h3 id=\"bottle-title\">Trail bottle</h3>\n        <p class=\"description\">Refill before a morning walk or your next trip to the co-op.</p>\n        <p class=\"details\">600 ml · Stainless steel · Loop cap</p>\n      </div>\n      <div class=\"purchase\">\n        <span class=\"price\">$28</span>\n        <button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button>\n      </div>\n    </article>\n    <article class=\"product\" aria-labelledby=\"notebook-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 88 100\" role=\"img\" aria-label=\"Pocket-sized notebook with a stitched spine and plain pages\">\n          <g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n            <path d=\"m21 17 45-3 3 68-45 4Z\" fill=\"currentColor\" fill-opacity=\".07\"/>\n            <path d=\"m24 86 2 4 46-4-3-68M29 17l3 68\"/>\n            <path d=\"m27 28 5-.4M28 45l5-.4M29 62l5-.4M30 77l5-.4\" stroke-width=\"1\"/>\n            <path d=\"m40 34 18-1M40 39l13-.8\"/>\n          </g>\n          <text x=\"49\" y=\"62\" fill=\"currentColor\" text-anchor=\"middle\" font-family=\"system-ui,sans-serif\" font-size=\"6\" letter-spacing=\".8\" transform=\"rotate(-4 49 62)\">HARBOR</text>\n        </svg>\n      </div>\n      <div class=\"product-copy\">\n        <h3 id=\"notebook-title\">Field notebook</h3>\n        <p class=\"description\">A place for shopping lists and recipes passed across the table.</p>\n        <p class=\"details\">A5 · Plain pages · Stitched binding</p>\n      </div>\n      <div class=\"purchase\">\n        <span class=\"price\">$16</span>\n        <button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button>\n      </div>\n    </article>\n    <article class=\"product\" aria-labelledby=\"tote-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 88 100\" role=\"img\" aria-label=\"Canvas tote with long shoulder handles and a reinforced base\">\n          <g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\">\n            <path d=\"M30 42V24c0-20 28-20 28 0v18M34 42V24c0-14 20-14 20 0v18\"/>\n            <path d=\"m17 37 3 51c0 3 3 5 6 5h36c3 0 6-2 6-5l3-51Z\" fill=\"currentColor\" fill-opacity=\".07\"/>\n            <path d=\"M21 83h46M27 37v9M61 37v9\"/>\n          </g>\n          <text x=\"44\" y=\"64\" fill=\"currentColor\" text-anchor=\"middle\" font-family=\"system-ui,sans-serif\" font-size=\"7\" letter-spacing=\"1\">HARBOR</text>\n          <path d=\"M37 70h14\" stroke=\"currentColor\" stroke-width=\"1\"/>\n        </svg>\n      </div>\n      <div class=\"product-copy\">\n        <h3 id=\"tote-title\">Canvas tote</h3>\n        <p class=\"description\">Room for weekly vegetables, pantry staples, and that extra loaf you weren’t planning on.</p>\n        <p class=\"details\">Cotton canvas · Long shoulder handles</p>\n      </div>\n      <div class=\"purchase\">\n        <span class=\"price\">$32</span>\n        <button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button>\n      </div>\n    </article>\n  </section>\n</main>\n<footer class=\"wrap coop-note\" id=\"at-the-coop\">\n  <div>\n    <h2>Already stopping by?</h2>\n    <p>Find these essentials by the checkout on your next co-op shop.</p>\n  </div>\n  <p class=\"ownership\">Member-owned.<br>Everyone welcome.</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-products-08","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Isle: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: calm and spacious; use forest green as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Isle essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Isle essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Isle essentials — Objects for practice</title>\n<style>\n:root{--paper:#f8f7f3;--ink:#252b26;--muted:#666c64;--green:#294e3c;--line:#d9dcd2;--wash:#eeeee6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-underline-offset:5px}\nbutton,a{touch-action:manipulation}\na:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:5px}\n.shell{width:min(1120px,calc(100% - 80px));margin:auto}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{font:36px Georgia,serif;letter-spacing:-2px;text-decoration:none}\nnav{display:flex;gap:28px;font-size:13px}\nnav a{text-decoration:none;padding:8px 0}\nnav a[aria-current]{color:var(--green);border-bottom:1px solid var(--green)}\n.intro{padding:51px 0 34px}\n.eyebrow{margin:0 0 13px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}\nh1{font:normal 52px/1.08 Georgia,serif;letter-spacing:-1.8px;margin:0 0 15px}\n.intro p:last-child{margin:0;color:var(--muted);font-size:15px;line-height:1.6}\n.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:48px;align-items:start}\n.catalog-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:0 0 14px}\n.catalog-heading h2{font-size:12px;font-weight:400;margin:0;color:var(--muted)}\n.catalog-heading span{font-size:11px;color:var(--muted);letter-spacing:.5px}\n.products{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--line)}\n.product{display:grid;grid-template-columns:96px minmax(0,1fr) 120px;gap:24px;align-items:center;padding:24px 0;border-top:1px solid var(--line)}\n.visual{width:96px;height:106px;background:var(--wash);display:grid;place-items:center}\n.visual svg{display:block;width:80px;height:94px}\n.product h3{margin:0 0 9px;font:normal 25px/1.12 Georgia,serif;letter-spacing:-.5px}\n.description{margin:0;max-width:280px;font-size:14px;line-height:1.55;color:var(--muted)}\n.buy{text-align:right}\n.price{display:block;margin-bottom:12px;font-size:17px;font-variant-numeric:tabular-nums}\nbutton{font:13px Arial,Helvetica,sans-serif;white-space:nowrap;border:1px solid var(--green);border-radius:2px;background:var(--green);color:#fff;padding:11px 15px;cursor:pointer}\nbutton:hover{background:#1d3d2d}\n.collection-notes{margin-top:28px;padding:20px;background:var(--wash);border-top:2px solid var(--green)}\n.collection-notes h2{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;margin:0 0 19px;color:var(--green)}\ndl{margin:0}\n.summary-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding-bottom:12px}\ndt{color:var(--muted)}\ndd{margin:0;font-variant-numeric:tabular-nums}\n.note{border-top:1px solid #d3d7cb;padding-top:17px;margin-top:3px}\n.note h3{font-size:13px;line-height:1.55;font-weight:400;margin:0 0 10px;overflow-wrap:anywhere}\n.note p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}\nfooter{margin-top:48px;border-top:1px solid var(--line);padding:21px 0 28px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;line-height:1.5}\nfooter p{margin:0}\n@media(max-width:800px){\n.shell{width:calc(100% - 40px)}\n.catalog-layout{grid-template-columns:minmax(0,1fr);gap:24px}\n.collection-notes{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}\n.collection-notes h2{grid-column:1/-1}\n.note{border-top:0;border-left:1px solid #d3d7cb;padding:0 0 0 20px;margin:0}\n}\n@media(max-width:480px){\n.header-inner{min-height:70px;gap:16px}\n.brand{font-size:32px}\nnav{gap:18px;font-size:12px}\n.intro{padding:31px 0 26px}\n.eyebrow{font-size:10px;margin-bottom:10px}\nh1{font-size:39px;letter-spacing:-1.2px;margin-bottom:11px}\n.intro p:last-child{font-size:14px;max-width:310px;line-height:1.5}\n.catalog-heading{padding-bottom:11px}\n.product{grid-template-columns:66px minmax(0,1fr);gap:10px 17px;padding:20px 0}\n.visual{width:66px;height:88px;grid-row:1/3;align-self:start}\n.visual svg{width:62px;height:82px}\n.product h3{font-size:23px;margin-bottom:6px}\n.description{font-size:13px;line-height:1.5}\n.buy{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}\n.price{margin:0;font-size:15px}\nbutton{font-size:12px;padding:9px 13px}\n.collection-notes{padding:18px;gap:0 18px}\n.collection-notes h2{margin-bottom:16px}\n.summary-row{font-size:12px;flex-wrap:wrap;gap:5px}\n.note{padding-left:16px}\n.note h3{font-size:12px;line-height:1.5}\n.note p{font-size:11px}\nfooter{margin-top:28px;font-size:10px;gap:16px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"shell header-inner\">\n<a class=\"brand\" href=\"#essentials\" aria-label=\"Isle home\">Isle</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#practice-notes\">Practice notes</a>\n</nav>\n</div>\n</header>\n\n<main class=\"shell\" id=\"essentials\">\n<div class=\"intro\">\n<p class=\"eyebrow\">Objects for practice / No. 01</p>\n<h1>Isle essentials</h1>\n<p>For the site visit, the sketch, and the walk back to the studio.</p>\n</div>\n\n<div class=\"catalog-layout\">\n<section aria-labelledby=\"catalog-title\">\n<div class=\"catalog-heading\">\n<h2 id=\"catalog-title\">The everyday collection</h2>\n<span>03 objects</span>\n</div>\n<ul class=\"products\">\n<li>\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 80 100\" fill=\"none\" aria-hidden=\"true\">\n<ellipse cx=\"40\" cy=\"90\" rx=\"18\" ry=\"3\" fill=\"#D9DDD2\"/>\n<path d=\"M31 22h18v9c0 5 8 7 8 15v35c0 5-4 8-8 8H31c-4 0-8-3-8-8V46c0-8 8-10 8-15v-9Z\" fill=\"#496551\" stroke=\"#294735\" stroke-width=\"1.3\"/>\n<rect x=\"30\" y=\"13\" width=\"20\" height=\"13\" rx=\"3\" fill=\"#CDD0C3\" stroke=\"#59644F\" stroke-width=\"1.3\"/>\n<path d=\"M34 16v7m4-7v7m4-7v7m4-7v7\" stroke=\"#9BA391\"/>\n<path d=\"M28 47v31\" stroke=\"#78907A\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n<path d=\"M34 63h12\" stroke=\"#CBD3C5\"/>\n<text x=\"40\" y=\"73\" text-anchor=\"middle\" fill=\"#E5E9DF\" font-size=\"6\" font-family=\"Georgia,serif\">Isle</text>\n</svg>\n</div>\n<div>\n<h3 id=\"bottle-title\">Trail bottle</h3>\n<p class=\"description\">500 ml of insulated stainless steel for long days on site.</p>\n</div>\n<div class=\"buy\">\n<span class=\"price\">$28</span>\n<button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button>\n</div>\n</article>\n</li>\n<li>\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 80 100\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"m15 23 48-5 5 65-48 5-5-65Z\" fill=\"#D3D0BF\"/>\n<path d=\"m13 20 48-5 5 65-48 5-5-65Z\" fill=\"#D4C5A6\" stroke=\"#8C836F\" stroke-width=\"1.2\"/>\n<path d=\"m18 20 6 64\" stroke=\"#A5987C\"/>\n<path d=\"m58 16 6 64\" stroke=\"#405840\" stroke-width=\"3\"/>\n<path d=\"m28 39 22-2m-21 6 16-1\" stroke=\"#7E7969\" stroke-width=\".8\"/>\n<text x=\"39\" y=\"60\" text-anchor=\"middle\" fill=\"#615F50\" font-size=\"7\" font-family=\"Georgia,serif\" transform=\"rotate(-6 39 60)\">Isle</text>\n<path d=\"m22 87 41-4\" stroke=\"#A7A697\"/>\n</svg>\n</div>\n<div>\n<h3 id=\"notebook-title\">Field notebook</h3>\n<p class=\"description\">A5 dot-grid pages for quick sketches, dimensions, and site notes.</p>\n</div>\n<div class=\"buy\">\n<span class=\"price\">$16</span>\n<button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button>\n</div>\n</article>\n</li>\n<li>\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 80 100\" fill=\"none\" aria-hidden=\"true\">\n<ellipse cx=\"40\" cy=\"88\" rx=\"25\" ry=\"3\" fill=\"#D9DDD2\"/>\n<path d=\"M28 38V24c0-16 24-16 24 0v14\" stroke=\"#AA9F86\" stroke-width=\"5\"/>\n<path d=\"M28 38V24c0-16 24-16 24 0v14\" stroke=\"#E6DCC5\" stroke-width=\"3\"/>\n<path d=\"M15 35h50l3 46c0 5-3 7-7 7H19c-4 0-7-2-7-7l3-46Z\" fill=\"#DDD2B8\" stroke=\"#A59B83\" stroke-width=\"1.2\"/>\n<path d=\"m19 40-2 41m44-41 2 41M16 82h48\" stroke=\"#BEB296\" stroke-width=\".8\"/>\n<path d=\"M28 36v8m24-8v8\" stroke=\"#A59B83\"/>\n<text x=\"40\" y=\"65\" text-anchor=\"middle\" fill=\"#3D5943\" font-size=\"12\" font-family=\"Georgia,serif\">Isle</text>\n</svg>\n</div>\n<div>\n<h3 id=\"tote-title\">Canvas tote</h3>\n<p class=\"description\">Heavy cotton canvas for samples, rolled drawings, and daily tools.</p>\n</div>\n<div class=\"buy\">\n<span class=\"price\">$32</span>\n<button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button>\n</div>\n</article>\n</li>\n</ul>\n</section>\n\n<aside class=\"collection-notes\" id=\"practice-notes\" aria-labelledby=\"notes-title\">\n<h2 id=\"notes-title\">Collection notes</h2>\n<dl>\n<div class=\"summary-row\"><dt>Objects</dt><dd>03</dd></div>\n<div class=\"summary-row\"><dt>Price range</dt><dd>$16–$32</dd></div>\n<div class=\"summary-row\"><dt>Palette</dt><dd>Earth &amp; forest</dd></div>\n</dl>\n<div class=\"note\">\n<h3>For site visits, material-library runs, and everyday life in the architecture studio</h3>\n<p>A small collection of useful things. Quiet materials, practical proportions, nothing more than you need.</p>\n</div>\n</aside>\n</div>\n</main>\n\n<footer class=\"shell\">\n<p>Isle — Objects for a considered practice.</p>\n<p>Collection 01 / Studio essentials</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-products-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Kite: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Kite essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Kite essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Kite essentials — Objects for practice</title>\n<style>\n:root{--paper:#f6f3ec;--ink:#292b26;--muted:#68685f;--line:#d5d0c5;--terra:#9d4c36;--surface:#ece7dc}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-decoration:none}\nbutton{font:inherit}\n.wrap{width:min(1120px,calc(100% - 96px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:inline-flex;gap:10px;align-items:center;font-size:30px;letter-spacing:-1.5px;font-weight:700}\n.brand svg{width:24px;height:32px;color:var(--terra)}\nnav{display:flex;gap:30px;font-size:13px}\nnav a{padding:8px 0}\nnav a[aria-current]{border-bottom:2px solid var(--terra)}\na:focus-visible,button:focus-visible{outline:3px solid var(--terra);outline-offset:5px}\n.hero{padding:49px 0 34px;display:grid;grid-template-columns:1fr 260px;align-items:end;gap:32px}\n.eyebrow{font-size:10px;letter-spacing:1.7px;text-transform:uppercase;font-weight:700;color:var(--terra);margin:0 0 14px}\nh1{font-family:Georgia,'Times New Roman',serif;font-size:64px;line-height:1.07;font-weight:400;letter-spacing:-2.7px;margin:0 0 18px}\n.intro{font-size:15px;line-height:1.65;max-width:470px;margin:0;color:var(--muted)}\n.steps{list-style:none;margin:0 0 3px;padding:0;display:flex;flex-direction:column;gap:13px;font-size:12px;color:var(--muted)}\n.steps li{display:flex;align-items:center;gap:10px}\n.steps span{font-size:10px;border:1px solid var(--line);width:24px;height:24px;border-radius:50%;display:grid;place-items:center}\n.steps [aria-current]{font-weight:700;color:var(--ink)}\n.steps [aria-current] span{background:var(--ink);border-color:var(--ink);color:var(--paper)}\n.catalog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid var(--line);font-size:12px}\n.count{font-weight:700}\n.status{color:var(--muted);display:flex;align-items:center;gap:7px}\n.status svg{width:14px;height:14px;flex-shrink:0}\n.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}\n.product{min-width:0}\n.visual{height:205px;background:var(--surface);margin:0 0 21px;display:grid;place-items:center}\n.visual svg{width:190px;height:180px;max-width:100%}\n.product:nth-child(2) .visual{background:#e9e4d9}\n.product:nth-child(3) .visual{background:#eee7de}\n.product-index{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--terra);margin:0 0 10px}\n.product-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}\nh2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:27px;letter-spacing:-.6px;margin:0}\n.price{font-size:15px;white-space:nowrap}\n.description{font-size:14px;color:var(--muted);line-height:1.55;margin:12px 0 9px;min-height:44px}\n.spec{font-size:11px;color:var(--muted);margin:0 0 21px}\n.add{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:13px;text-align:left;cursor:pointer}\n.add:hover{background:#414238}\n.add span{font-size:19px;line-height:1;font-weight:400}\nfooter{margin-top:43px;border-top:1px solid var(--line);padding:23px 0 29px;display:flex;justify-content:space-between;gap:25px;color:var(--muted);font-size:12px;line-height:1.6}\nfooter p{margin:0;max-width:460px}\nfooter strong{display:block;color:var(--ink);font-weight:400;font-family:Georgia,'Times New Roman',serif;font-size:19px;margin-bottom:4px}\n.edition{text-align:right;font-size:10px;letter-spacing:1px;text-transform:uppercase}\n@media(max-width:700px){\n.wrap{width:calc(100% - 36px)}\n.header-inner{min-height:68px;gap:16px}\n.brand{font-size:26px}\n.brand svg{width:20px;height:27px}\nnav{gap:18px;font-size:11px}\n.hero{padding:29px 0 22px;grid-template-columns:1fr;gap:21px}\n.eyebrow{font-size:9px;letter-spacing:1.3px;margin-bottom:10px}\nh1{font-size:43px;letter-spacing:-1.8px;margin-bottom:12px}\n.intro{font-size:13px;line-height:1.55}\n.steps{flex-direction:row;gap:20px;font-size:10px;margin:0}\n.steps li{gap:7px}\n.steps span{width:21px;height:21px;font-size:9px}\n.catalog-bar{padding:14px 0;font-size:11px}\n.products{grid-template-columns:1fr;gap:0}\n.product{display:grid;grid-template-columns:100px minmax(0,1fr);gap:15px;padding:18px 0;border-top:1px solid var(--line)}\n.product:first-child{border-top:0;padding-top:3px}\n.visual{height:132px;margin:0}\n.visual svg{width:100px;height:120px}\n.product-index{font-size:8px;letter-spacing:1.1px;margin-bottom:6px}\nh2{font-size:22px;letter-spacing:-.5px}\n.price{font-size:13px}\n.product-heading{gap:6px}\n.description{font-size:12px;line-height:1.5;margin:8px 0 6px;min-height:0}\n.spec{font-size:9px;margin-bottom:12px}\n.add{padding:10px 12px;font-size:12px}\nfooter{margin-top:10px;padding:21px 0 25px;display:block;font-size:11px}\nfooter strong{font-size:18px}\n.edition{text-align:left;margin-top:17px;font-size:9px}\n}\n@media(prefers-reduced-motion:no-preference){.add{transition:background .15s}}\n</style>\n</head>\n<body id=\"top\">\n<header>\n<div class=\"wrap header-inner\">\n<a class=\"brand\" href=\"#top\" aria-label=\"Kite home\">\n<svg viewBox=\"0 0 24 32\" aria-hidden=\"true\"><path d=\"M12 1 23 12 12 25 1 12Z\" fill=\"currentColor\"/><path d=\"M12 25v6M1 12h22M12 1v24\" fill=\"none\" stroke=\"#f6f3ec\" stroke-width=\"1\"/></svg>\nKite\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#approach\">Our approach</a>\n</nav>\n</div>\n</header>\n<main class=\"wrap\" id=\"essentials\">\n<section class=\"hero\" aria-labelledby=\"catalog-title\">\n<div>\n<p class=\"eyebrow\">Objects for architectural practice</p>\n<h1 id=\"catalog-title\">Kite essentials</h1>\n<p class=\"intro\">For the studio, the site and the space between. A small collection of useful objects for a working day.</p>\n</div>\n<ol class=\"steps\" aria-label=\"Shopping steps\">\n<li aria-current=\"step\"><span>01</span>Choose essentials</li>\n<li><span>02</span>Review your bag</li>\n</ol>\n</section>\n<div class=\"catalog-bar\">\n<span class=\"count\">3 products</span>\n<span class=\"status\">\n<svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\"/><path d=\"m5 8 2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\nAll essentials in stock\n</span>\n</div>\n<section class=\"products\" aria-label=\"Essential products\">\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<figure class=\"visual\" aria-label=\"A warm white bottle with a terracotta cap\">\n<svg viewBox=\"0 0 200 180\" role=\"img\" aria-label=\"Trail bottle\">\n<ellipse cx=\"100\" cy=\"161\" rx=\"35\" ry=\"5\" fill=\"#d8d1c5\"/>\n<rect x=\"81\" y=\"17\" width=\"38\" height=\"20\" rx=\"5\" fill=\"#9d4c36\"/>\n<path d=\"M83 36v8c0 8-12 10-12 23v78c0 10 7 15 16 15h26c9 0 16-5 16-15V67c0-13-12-15-12-23v-8Z\" fill=\"#f7f4ec\" stroke=\"#b5ad9e\" stroke-width=\"1.3\"/>\n<path d=\"M80 71v67\" stroke=\"#fffdf7\" stroke-width=\"3\"/>\n<path d=\"m100 95 8 8-8 10-8-10Z\" fill=\"#9d4c36\"/>\n<path d=\"M86 24h28\" stroke=\"#bc7963\" stroke-width=\"1.5\"/>\n</svg>\n</figure>\n<div class=\"product-info\">\n<p class=\"product-index\">01 / On site</p>\n<div class=\"product-heading\"><h2 id=\"bottle-title\">Trail bottle</h2><span class=\"price\">$28</span></div>\n<p class=\"description\">Cold water for site walks and long studio days.</p>\n<p class=\"spec\">600 ml · Stainless steel</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<figure class=\"visual\" aria-label=\"A terracotta notebook with cream page edges\">\n<svg viewBox=\"0 0 200 180\" role=\"img\" aria-label=\"Field notebook\">\n<ellipse cx=\"101\" cy=\"157\" rx=\"56\" ry=\"6\" fill=\"#d3ccbe\"/>\n<g transform=\"rotate(-9 100 90)\">\n<path d=\"M53 28h88v126H53Z\" fill=\"#d6ccbb\" stroke=\"#786b5d\"/>\n<path d=\"M57 31h87v121H57Z\" fill=\"#f6f0e2\"/>\n<path d=\"M60 143h80m-80 4h80\" stroke=\"#d7cebc\"/>\n<rect x=\"50\" y=\"25\" width=\"91\" height=\"122\" rx=\"2\" fill=\"#a65a43\"/>\n<path d=\"M58 25v122\" stroke=\"#7e412f\"/>\n<path d=\"M128 25v122\" stroke=\"#754334\" stroke-width=\"3\"/>\n<path d=\"m96 62 8 8-8 10-8-10Z\" fill=\"#ecd8bf\"/>\n<path d=\"M80 99h32m-25 7h18\" stroke=\"#d8ac94\" stroke-width=\"1.3\"/>\n<path d=\"M118 147v13l-4-3-4 3v-13\" fill=\"#393c32\"/>\n</g>\n</svg>\n</figure>\n<div class=\"product-info\">\n<p class=\"product-index\">02 / At the desk</p>\n<div class=\"product-heading\"><h2 id=\"notebook-title\">Field notebook</h2><span class=\"price\">$16</span></div>\n<p class=\"description\">Space for measured sketches and unmeasured ideas.</p>\n<p class=\"spec\">A5 · 96 dotted pages</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<figure class=\"visual\" aria-label=\"A natural canvas tote with a small Kite mark\">\n<svg viewBox=\"0 0 200 180\" role=\"img\" aria-label=\"Canvas tote\">\n<ellipse cx=\"100\" cy=\"160\" rx=\"58\" ry=\"5\" fill=\"#d8d0c3\"/>\n<path d=\"M73 68V42c0-33 46-33 46 0v26\" fill=\"none\" stroke=\"#aa9b80\" stroke-width=\"9\"/>\n<path d=\"M82 68V42c0-33 46-33 46 0v26\" fill=\"none\" stroke=\"#c7b797\" stroke-width=\"9\"/>\n<path d=\"m48 59 104 0-5 91q0 10-12 10H64q-12 0-12-10Z\" fill=\"#d8c9aa\" stroke=\"#a99a7d\"/>\n<path d=\"m55 65 4 84q0 5 8 5h66q8 0 8-5l5-84\" fill=\"none\" stroke=\"#e9dfc9\" stroke-dasharray=\"2 3\"/>\n<path d=\"M77 58v16m47-16v16\" stroke=\"#a99a7d\" stroke-width=\"2\"/>\n<path d=\"m100 94 11 11-11 14-11-14Z\" fill=\"#393c32\"/>\n<path d=\"M90 130h20\" stroke=\"#7e715d\"/>\n</svg>\n</figure>\n<div class=\"product-info\">\n<p class=\"product-index\">03 / In between</p>\n<div class=\"product-heading\"><h2 id=\"tote-title\">Canvas tote</h2><span class=\"price\">$32</span></div>\n<p class=\"description\">Carry drawings, samples and the day’s loose ends.</p>\n<p class=\"spec\">12 oz · Organic cotton</p>\n<button class=\"add\" type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart <span aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n</section>\n</main>\n<footer class=\"wrap\" id=\"approach\">\n<p><strong>For work in progress.</strong>Chosen by Kite, an architecture practice. Simple objects that earn their place alongside the tools you use every day.</p>\n<p class=\"edition\">Kite / Collection 01<br>Studio essentials</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-products-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Larch: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: practical and understated; use deep plum as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Larch essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Larch essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Larch essentials — Studio supply</title>\n<style>\n:root{--paper:#f3f4f2;--ink:#242b29;--muted:#626b66;--line:#cdd3ce;--plum:#542d48;--surface:#e8ece8}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\na{color:inherit;text-underline-offset:5px}\nbutton,a{-webkit-tap-highlight-color:transparent}\na:focus-visible,button:focus-visible{outline:3px solid var(--plum);outline-offset:5px}\n.wrap{width:min(1120px,calc(100% - 80px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:27px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:25px;height:29px;color:var(--plum)}\nnav{display:flex;gap:28px;font-size:13px}\nnav a{text-decoration:none}\nnav a:first-child{color:var(--plum);text-decoration:underline}\n.intro{padding:56px 0 38px;display:flex;align-items:flex-end;justify-content:space-between;gap:36px}\n.eyebrow{margin:0 0 14px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:650;color:var(--plum)}\nh1{font:normal 58px/1.06 Georgia,\"Times New Roman\",serif;letter-spacing:-2px;margin:0 0 20px}\n.lede{max-width:550px;margin:0;font-size:16px;line-height:1.65;color:var(--muted)}\n.edition{border-left:1px solid var(--line);padding-left:22px;min-width:190px;font-size:12px;color:var(--muted)}\n.edition strong{display:block;color:var(--ink);font-weight:500;margin-bottom:5px}\n.catalog-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ink);padding:15px 0}\n.catalog-heading h2{font-size:12px;font-weight:600;margin:0}\n.catalog-heading span{font-size:12px;color:var(--muted)}\n.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--ink)}\n.product{padding:0 25px 29px;display:flex;flex-direction:column;border-left:1px solid var(--line)}\n.product:first-child{padding-left:0;border-left:0}\n.product:last-child{padding-right:0}\n.figure{height:180px;background:var(--surface);margin:0 0 23px;display:flex;align-items:center;justify-content:center}\n.figure svg{width:100%;height:160px;color:#535f58}\n.product-info{display:flex;flex-direction:column;flex:1}\n.category{font-size:10px;letter-spacing:1.2px;color:var(--muted);margin:0 0 8px}\n.title-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}\nh3{font-size:20px;font-weight:550;letter-spacing:-.5px;margin:0}\n.price{font-size:16px;font-variant-numeric:tabular-nums}\n.description{color:var(--muted);font-size:14px;line-height:1.6;min-height:67px;margin:12px 0 15px}\n.spec{font-size:12px;margin:0 0 21px;color:var(--ink)}\n.spec span{color:var(--muted)}\nbutton{width:100%;min-height:43px;border:1px solid var(--plum);border-radius:2px;background:var(--plum);color:white;font:500 13px -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer;margin-top:auto}\nbutton:hover{background:#412238}\n.materials{padding:27px 0 31px;display:grid;grid-template-columns:1fr 2fr;gap:30px}\n.materials h2{font:normal 23px/1.2 Georgia,\"Times New Roman\",serif;margin:0 0 6px}\n.materials p{font-size:12px;color:var(--muted);margin:0}\n.care{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}\n.care strong{display:block;color:var(--ink);font-size:12px;font-weight:550;margin-bottom:5px}\nfooter{border-top:1px solid var(--line);padding:18px 0 24px;font-size:11px;color:var(--muted)}\n.footer-inner{display:flex;justify-content:space-between;gap:15px}\n@media(max-width:700px){\n.wrap{width:calc(100% - 36px)}\n.header-inner{min-height:68px;gap:14px}\n.brand{font-size:24px;gap:7px}\n.brand svg{width:20px}\nnav{font-size:11px;gap:16px}\n.intro{padding:30px 0 25px;display:block}\n.eyebrow{font-size:10px;margin-bottom:10px}\nh1{font-size:39px;letter-spacing:-1.2px;margin-bottom:13px}\n.lede{font-size:14px;line-height:1.55}\n.edition{display:none}\n.catalog-heading{padding:12px 0}\n.products{display:block}\n.product,.product:first-child,.product:last-child{display:grid;grid-template-columns:91px minmax(0,1fr);gap:17px;padding:21px 0;border-left:0;border-top:1px solid var(--line)}\n.product:first-child{border-top:0}\n.figure{height:119px;margin:0}\n.figure svg{height:110px}\n.category{font-size:9px;margin-bottom:5px}\nh3{font-size:18px}\n.price{font-size:14px}\n.description{font-size:12px;line-height:1.5;min-height:0;margin:8px 0}\n.spec{font-size:10px;margin-bottom:12px}\nbutton{min-height:38px;font-size:12px}\n.materials{padding:24px 0;display:block}\n.materials h2{font-size:22px}\n.care{margin-top:20px;gap:16px;grid-template-columns:1fr}\n.care p{font-size:12px}\n.care strong{display:inline;margin-right:6px}\n.footer-inner{display:block}\n.footer-inner span{display:block;margin-top:4px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wrap header-inner\">\n<a class=\"brand\" href=\"#essentials\" aria-label=\"Larch home\">\n<svg viewBox=\"0 0 26 30\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 2v25h21M10 2v18h14\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\nLarch\n</a>\n<nav aria-label=\"Main navigation\"><a href=\"#essentials\" aria-current=\"page\">Essentials</a><a href=\"#materials\">Materials &amp; care</a></nav>\n</div>\n</header>\n<main class=\"wrap\" id=\"essentials\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Larch / Studio supply</p>\n<h1 id=\"page-title\">Larch essentials</h1>\n<p class=\"lede\">For the studio, the site and the journey between. Three practical companions for everyday architectural practice.</p>\n</div>\n<aside class=\"edition\"><strong>A small, useful collection.</strong>Three objects. No excess.<br>All prices in USD.</aside>\n</section>\n<section aria-labelledby=\"collection-title\">\n<div class=\"catalog-heading\"><h2 id=\"collection-title\">The everyday collection</h2><span>01—03 / Objects for practice</span></div>\n<div class=\"products\">\n<article class=\"product\">\n<figure class=\"figure\" aria-label=\"Drawing of a refillable bottle with a screw cap\">\n<svg viewBox=\"0 0 240 160\" fill=\"none\" role=\"img\" aria-label=\"Trail bottle, 600 milliliters\">\n<path d=\"M101 29v-9h38v9M103 29v12c0 7-14 11-14 23v70c0 6 4 9 10 9h42c6 0 10-3 10-9V64c0-12-14-16-14-23V29Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<path d=\"M100 29h40M90 69h60M101 130h38\" stroke=\"currentColor\"/>\n<path d=\"M169 42v101m-4-101h8m-8 101h8\" stroke=\"currentColor\" stroke-width=\".7\"/>\n<text x=\"179\" y=\"91\" fill=\"currentColor\" stroke=\"none\" font-size=\"9\" font-family=\"sans-serif\">600 ml</text>\n<path d=\"M112 87v19h17\" stroke=\"#542d48\" stroke-width=\"2\"/>\n</svg>\n</figure>\n<div class=\"product-info\">\n<p class=\"category\">01 / On site</p>\n<div class=\"title-row\"><h3>Trail bottle</h3><span class=\"price\">$28</span></div>\n<p class=\"description\">A refillable companion for long site walks and desk-side hydration. A simple screw cap keeps things secure.</p>\n<p class=\"spec\">600 ml <span>· Stainless steel · Slate</span></p>\n<button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button>\n</div>\n</article>\n<article class=\"product\">\n<figure class=\"figure\" aria-label=\"Drawing of an open dot-grid notebook\">\n<svg viewBox=\"0 0 240 160\" fill=\"none\" role=\"img\" aria-label=\"Field notebook with a dot grid for notes and sketches\">\n<path d=\"m42 39 72 9 81-17v94l-81 16-72-9V39Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<path d=\"M114 48v93M46 44l62 8v81l-62-7M120 52l69-14v81l-69 14\" stroke=\"currentColor\" stroke-width=\".7\"/>\n<path d=\"m55 64 42 5m-42 9 42 5m-42 9 42 5m-42 9 42 5m35-50 45-9m-45 23 45-9m-45 23 45-9m-45 23 45-9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\".1 7\"/>\n<path d=\"m158 130 5 17 5-4 5 2-6-17\" fill=\"#542d48\"/>\n</svg>\n</figure>\n<div class=\"product-info\">\n<p class=\"category\">02 / In the field</p>\n<div class=\"title-row\"><h3>Field notebook</h3><span class=\"price\">$16</span></div>\n<p class=\"description\">Room for measured sketches, meeting notes and ideas in progress. A quiet dot grid gives every page a little structure.</p>\n<p class=\"spec\">A5 <span>· 160 pages · Dot grid</span></p>\n<button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button>\n</div>\n</article>\n<article class=\"product\">\n<figure class=\"figure\" aria-label=\"Drawing of a canvas tote sized for A3 documents\">\n<svg viewBox=\"0 0 240 160\" fill=\"none\" role=\"img\" aria-label=\"Canvas tote with long handles and space for A3 drawings\">\n<path d=\"M78 54h88l9 88H69l9-88Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<path d=\"M101 64V36c0-28 39-28 39 0v28M107 64V36c0-19 27-19 27 0v28\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n<path d=\"M79 60h86M75 136h94M82 69l-6 62M162 69l6 62\" stroke=\"currentColor\" stroke-width=\".7\" stroke-dasharray=\"2 3\"/>\n<path d=\"M111 88v28h22\" stroke=\"#542d48\" stroke-width=\"2\"/>\n<path d=\"M184 65h12v59h-15\" stroke=\"currentColor\" stroke-width=\".7\"/>\n<text x=\"204\" y=\"99\" fill=\"currentColor\" stroke=\"none\" font-size=\"9\" font-family=\"sans-serif\">A3</text>\n</svg>\n</figure>\n<div class=\"product-info\">\n<p class=\"category\">03 / Between places</p>\n<div class=\"title-row\"><h3>Canvas tote</h3><span class=\"price\">$32</span></div>\n<p class=\"description\">Carry drawing sets, material samples and the daily essentials. Long handles leave your hands free on the move.</p>\n<p class=\"spec\">Fits A3 <span>· Cotton canvas · Natural</span></p>\n<button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button>\n</div>\n</article>\n</div>\n</section>\n<section class=\"materials\" id=\"materials\" aria-labelledby=\"care-title\">\n<div><h2 id=\"care-title\">Made for the everyday.</h2><p>A little care keeps useful things in use.</p></div>\n<div class=\"care\">\n<p><strong>Trail bottle</strong>Hand wash and leave open to dry. Rinse before first use.</p>\n<p><strong>Field notebook</strong>Keep dry. Use both sides; leave room for the next idea.</p>\n<p><strong>Canvas tote</strong>Spot clean with cool water. Air dry to preserve its shape.</p>\n</div>\n</section>\n</main>\n<footer><div class=\"wrap footer-inner\"><span>Larch — Objects for architectural practice.</span><span>Studio supply / Collection 01</span></div></footer>\n</body>\n</html>"}]}
{"id":"sft-products-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Maple: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Maple essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Maple essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"theme-color\" content=\"#f7f8f3\">\n<title>Maple essentials — Field team equipment</title>\n<style>\n:root{--paper:#f7f8f3;--green:#244b39;--muted:#5d7163;--line:rgba(36,75,57,.2)}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{margin:0;background:var(--paper);color:var(--green);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-decoration:none}\nbutton{font:inherit}\n.shell{width:min(1040px,calc(100% - 80px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:inline-flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:26px;height:30px}\nnav{display:flex;gap:30px;font-size:13px}\nnav a{padding:9px 0;color:var(--muted)}\nnav a[aria-current]{color:var(--green);border-bottom:1px solid var(--green)}\na:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:5px}\n.intro{padding:48px 0 36px}\n.eyebrow{margin:0 0 12px;font-size:11px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase}\nh1{margin:0;font-size:46px;line-height:1.12;font-weight:500;letter-spacing:-1.8px}\n.lead{max-width:540px;margin:17px 0 0;color:var(--muted);font-size:16px;line-height:1.6}\n.collection-heading{display:flex;justify-content:space-between;gap:16px;padding:0 0 13px;border-bottom:1px solid var(--green);font-size:11px;letter-spacing:1.1px;text-transform:uppercase}\n.collection-heading span:last-child{color:var(--muted)}\n.product{display:grid;grid-template-columns:134px minmax(0,1fr) 142px;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}\n.visual{display:flex;align-items:center;justify-content:center}\n.visual svg{display:block;width:112px;height:112px;color:var(--green)}\nh2{margin:0;font-size:22px;font-weight:550;letter-spacing:-.45px;line-height:1.25}\n.description{margin:8px 0 0;font-size:15px;line-height:1.5}\n.secondary{max-width:530px;margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}\n.purchase{text-align:right}\n.price{margin:0 0 15px;font-size:21px;font-weight:500;letter-spacing:-.4px;font-variant-numeric:tabular-nums}\nbutton{min-height:39px;padding:9px 18px;border:1px solid var(--green);border-radius:3px;background:var(--green);color:var(--paper);font-size:13px;font-weight:550;cursor:pointer}\nbutton:hover{background:var(--paper);color:var(--green)}\nfooter{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:25px 0 35px;color:var(--muted);font-size:12px;line-height:1.6}\nfooter p{margin:0}\nfooter strong{color:var(--green);font-weight:550}\n.footer-signoff{white-space:nowrap}\n@media(max-width:600px){\n.shell{width:calc(100% - 40px)}\n.header-inner{min-height:66px;gap:16px}\n.brand{font-size:23px;gap:7px}\n.brand svg{width:23px;height:26px}\nnav{gap:17px;font-size:12px}\n.intro{padding:27px 0 25px}\n.eyebrow{font-size:10px;margin-bottom:9px}\nh1{font-size:34px;letter-spacing:-1.2px}\n.lead{font-size:14px;line-height:1.5;margin-top:11px}\n.collection-heading{font-size:10px;letter-spacing:.7px;padding-bottom:11px}\n.product{grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:11px;padding:19px 0;align-items:start}\n.visual{grid-column:1;grid-row:1 / 3;padding-top:1px}\n.visual svg{width:56px;height:76px}\n.details{grid-column:2;min-width:0}\nh2{font-size:18px;letter-spacing:-.3px}\n.description{font-size:13px;line-height:1.45;margin-top:5px}\n.secondary{font-size:11px;line-height:1.45;margin-top:6px}\n.purchase{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}\n.price{font-size:18px;margin:0}\nbutton{min-height:33px;padding:6px 13px;font-size:12px}\nfooter{padding:20px 0 26px;display:block;font-size:11px}\n.footer-signoff{margin-top:8px}\n}\n@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"shell header-inner\">\n    <a class=\"brand\" href=\"#essentials\" aria-label=\"Maple home\">\n      <svg viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M14 2 17 10 23 7 21 14 27 15 19 23 15 22 15 30 13 30 13 22 9 23 1 15 7 14 5 7 11 10Z\" fill=\"currentColor\"/>\n      </svg>\n      Maple\n    </a>\n    <nav aria-label=\"Main navigation\">\n      <a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n      <a href=\"#kit-notes\">Kit notes</a>\n    </nav>\n  </div>\n</header>\n\n<main class=\"shell\" id=\"essentials\">\n  <section class=\"intro\" aria-labelledby=\"page-title\">\n    <p class=\"eyebrow\">For life in the field</p>\n    <h1 id=\"page-title\">Maple essentials</h1>\n    <p class=\"lead\">Dependable everyday gear for the research team, from the first site visit to the last sample logged.</p>\n  </section>\n\n  <section aria-label=\"Field team essentials\">\n    <div class=\"collection-heading\">\n      <span>The everyday field kit</span>\n      <span>3 essentials</span>\n    </div>\n\n    <article class=\"product\" aria-labelledby=\"bottle-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 112 112\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M45 20V13a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4v7\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <path d=\"M44 19h24v10l7 10v56a7 7 0 0 1-7 7H44a7 7 0 0 1-7-7V39l7-10Z\" fill=\"currentColor\" fill-opacity=\".09\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <path d=\"M44 26h24M38 44h36M38 91h36M45 49v30\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n          <path d=\"m56 57 5 8-5 8-5-8Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <div class=\"details\">\n        <h2 id=\"bottle-title\">Trail bottle</h2>\n        <p class=\"description\">A leak-resistant companion for long transects.</p>\n        <p class=\"secondary\">750 ml · Stainless steel</p>\n      </div>\n      <div class=\"purchase\">\n        <p class=\"price\">$28</p>\n        <button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button>\n      </div>\n    </article>\n\n    <article class=\"product\" aria-labelledby=\"notebook-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 112 112\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M30 14h52a4 4 0 0 1 4 4v78a4 4 0 0 1-4 4H30a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4Z\" fill=\"currentColor\" fill-opacity=\".09\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <path d=\"M35 15v84M79 15v84M29 96h48\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n          <path d=\"M44 35h24v25H44Z\" fill=\"#f7f8f3\" stroke=\"currentColor\"/>\n          <path d=\"M49 43h14M49 48h14M49 53h8\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n          <path d=\"M22 27h8M22 42h8M22 57h8M22 72h8M22 87h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n      </div>\n      <div class=\"details\">\n        <h2 id=\"notebook-title\">Field notebook</h2>\n        <p class=\"description\">Keep routes, readings, and questions together.</p>\n        <p class=\"secondary\">Field log format for observations, sample references, and the details that never fit in a spreadsheet</p>\n      </div>\n      <div class=\"purchase\">\n        <p class=\"price\">$16</p>\n        <button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button>\n      </div>\n    </article>\n\n    <article class=\"product\" aria-labelledby=\"tote-title\">\n      <div class=\"visual\">\n        <svg viewBox=\"0 0 112 112\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M42 41V28c0-22 28-22 28 0v13\" stroke=\"currentColor\" stroke-width=\"5\"/>\n          <path d=\"M42 41V28c0-22 28-22 28 0v13\" stroke=\"#f7f8f3\" stroke-width=\"2\"/>\n          <path d=\"M25 36h62l6 62H19Z\" fill=\"currentColor\" fill-opacity=\".09\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"/>\n          <path d=\"M31 37 27 91h58l-4-54M42 36v12M70 36v12\" stroke=\"currentColor\" stroke-opacity=\".65\"/>\n          <path d=\"m56 59 8 12-8 12-8-12Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n        </svg>\n      </div>\n      <div class=\"details\">\n        <h2 id=\"tote-title\">Canvas tote</h2>\n        <p class=\"description\">Carry field guides and spare layers between sites.</p>\n        <p class=\"secondary\">Heavyweight cotton · Reinforced handles</p>\n      </div>\n      <div class=\"purchase\">\n        <p class=\"price\">$32</p>\n        <button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button>\n      </div>\n    </article>\n  </section>\n</main>\n\n<footer class=\"shell\" id=\"kit-notes\">\n  <p><strong>Kit note</strong> — Label your gear before heading out. It makes packing up at a shared site easier.</p>\n  <p class=\"footer-signoff\">Fewer things. Well chosen.</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-products-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for North: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"North essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"North essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>North essentials — Field team supplies</title>\n<style>\n:root{color-scheme:light;--ink:#26343d;--muted:#627078;--accent:#4c637b;--line:#dce1df;--paper:#f7f8f5;--white:#fff}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\na{color:inherit;text-decoration:none}\nbutton,a{touch-action:manipulation}\na:focus-visible,button:focus-visible{outline:3px solid #91acc1;outline-offset:4px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1080px;margin:auto;min-height:80px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:650;letter-spacing:-.8px}\n.brand svg{width:23px;height:29px;color:var(--accent)}\nnav{display:flex;gap:28px;font-size:13px}\nnav a{padding:28px 0;color:var(--muted)}\nnav a[aria-current]{color:var(--accent);box-shadow:inset 0 -2px var(--accent)}\nmain{max-width:1080px;padding:44px 32px 24px;margin:auto}\n.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}\n.eyebrow{margin:0 0 8px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase}\nh1{font-size:40px;line-height:1.15;letter-spacing:-1.4px;font-weight:550;margin:0 0 12px}\n.intro p:last-child{margin:0;max-width:510px;color:var(--muted);font-size:15px}\n.collection-count{font-size:11px;color:var(--muted);white-space:nowrap;padding-bottom:3px}\n.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}\n.product{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden}\n.product-art{height:164px;background:#edf0ed;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line)}\n.product-art svg{width:150px;height:144px}\n.product:nth-child(2) .product-art{background:#f1eee7}\n.product:nth-child(3) .product-art{background:#efefea}\n.product-body{padding:20px}\n.product-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}\nh2{font-size:19px;font-weight:600;letter-spacing:-.4px;line-height:1.3;margin:0}\n.price{font-size:16px;font-variant-numeric:tabular-nums}\n.description{font-size:13px;line-height:1.55;margin:10px 0 12px;min-height:41px;color:#52616b}\n.spec{margin:0 0 20px;font-size:11px;color:var(--muted)}\n.action-row{display:flex;align-items:center;gap:12px}\nbutton{border:1px solid var(--accent);border-radius:3px;background:var(--accent);color:white;font:600 12px/1.3 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;padding:10px 15px;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#3b5269}\n.action-hint{font-size:10px;line-height:1.4;color:var(--muted)}\n.kit-notes{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center;margin-top:26px;padding:20px 22px;background:#eaf0f2;border:1px solid #dbe3e6;border-radius:3px}\n.kit-notes h2{font-size:14px;letter-spacing:0;margin-bottom:5px}\n.kit-notes p{font-size:12px;color:#566774;margin:0;max-width:430px}\ndl{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0}\ndt{font-size:10px;font-weight:650;letter-spacing:.7px;text-transform:uppercase;color:var(--accent);margin-bottom:5px}\ndd{margin:0;font-size:12px}\n.update{margin:18px 0 0;display:flex;gap:7px;align-items:center;color:var(--muted);font-size:10px}\n.update::before{content:\"\";height:5px;width:5px;border-radius:50%;background:#7a8e7c;flex:none}\n@media(max-width:680px){\n.header-inner{min-height:62px;padding:0 18px}\n.brand{font-size:21px}\nnav{gap:20px;font-size:12px}\nnav a{padding:21px 0}\nmain{padding:25px 16px 20px}\n.intro{margin-bottom:20px}\nh1{font-size:32px;letter-spacing:-1px;margin-bottom:9px}\n.eyebrow{font-size:9px;margin-bottom:7px}\n.intro p:last-child{font-size:13px;max-width:330px}\n.collection-count{display:none}\n.products{grid-template-columns:1fr;gap:11px}\n.product{display:grid;grid-template-columns:86px minmax(0,1fr)}\n.product-art{height:auto;min-height:158px;border-bottom:0;border-right:1px solid var(--line)}\n.product-art svg{width:82px;height:120px}\n.product-body{padding:13px 12px}\nh2{font-size:17px}\n.price{font-size:14px}\n.product-heading{gap:8px}\n.description{font-size:12px;line-height:1.45;margin:6px 0;min-height:0}\n.spec{font-size:10px;margin:0 0 11px}\nbutton{padding:8px 11px;font-size:11px}\n.action-row{gap:10px}\n.action-hint{font-size:9px}\n.kit-notes{margin-top:18px;padding:15px;grid-template-columns:1fr;gap:13px}\n.kit-notes p{font-size:11px}\ndl{gap:18px}\ndd{font-size:11px}\n.update{font-size:9px;margin-top:14px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<a class=\"brand\" href=\"#essentials\" aria-label=\"North home\">\n<svg viewBox=\"0 0 24 30\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 3 21 26 12 20 3 26Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M12 3V20L21 26\" fill=\"currentColor\" opacity=\".18\"/></svg>\nNorth\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#kit-notes\">Kit notes</a>\n</nav>\n</div>\n</header>\n<main id=\"essentials\">\n<section class=\"intro\" aria-labelledby=\"catalog-title\">\n<div>\n<p class=\"eyebrow\">Supplies for the field</p>\n<h1 id=\"catalog-title\">North essentials</h1>\n<p>Everyday tools for taking observations, covering ground and carrying what matters.</p>\n</div>\n<span class=\"collection-count\">THE CORE KIT / 3 ITEMS</span>\n</section>\n\n<section class=\"products\" aria-label=\"Essential products\">\n<article class=\"product\">\n<div class=\"product-art\">\n<svg viewBox=\"0 0 150 150\" fill=\"none\" role=\"img\" aria-label=\"Slate blue bottle with a screw cap\">\n<ellipse cx=\"75\" cy=\"137\" rx=\"29\" ry=\"3\" fill=\"#dce2dd\"/>\n<path d=\"M61 29V20Q61 16 65 16H85Q89 16 89 20V29\" fill=\"#344754\" stroke=\"#344754\" stroke-width=\"1.5\"/>\n<path d=\"M65 16V12Q65 8 70 8H80Q85 8 85 12V16\" stroke=\"#344754\" stroke-width=\"3\"/>\n<path d=\"M61 29H89V37C89 42 99 46 99 55V125Q99 133 91 133H59Q51 133 51 125V55C51 46 61 42 61 37Z\" fill=\"#71889a\" stroke=\"#536a7b\" stroke-width=\"1.5\"/>\n<path d=\"M59 57V121\" stroke=\"#a7b8c0\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n<path d=\"M52 104H98\" stroke=\"#536a7b\" opacity=\".5\"/>\n<path d=\"M70 77 75 64 80 77 75 74Z\" stroke=\"#edf1ee\" stroke-width=\"1.2\"/>\n<path d=\"M62 29H88\" stroke=\"#b4c1c8\"/>\n</svg>\n</div>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h2>Trail bottle</h2><span class=\"price\">$28</span></div>\n<p class=\"description\">Keep water close on long transects and early starts.</p>\n<p class=\"spec\">600 ml · Stainless steel</p>\n<div class=\"action-row\"><button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button><span class=\"action-hint\">One per researcher</span></div>\n</div>\n</article>\n\n<article class=\"product\">\n<div class=\"product-art\">\n<svg viewBox=\"0 0 150 150\" fill=\"none\" role=\"img\" aria-label=\"Sand-colored field notebook with an elastic closure\">\n<ellipse cx=\"76\" cy=\"137\" rx=\"40\" ry=\"3\" fill=\"#e1ddd4\"/>\n<path d=\"M39 25 104 17Q111 16 112 23L119 123Q119 128 114 129L49 137Z\" fill=\"#ddd6c7\" stroke=\"#9b9689\" stroke-width=\"1.3\"/>\n<path d=\"M36 21 101 13Q108 12 109 19L116 119Q116 124 111 125L44 133Z\" fill=\"#b7ad94\" stroke=\"#8d8573\" stroke-width=\"1.5\"/>\n<path d=\"M45 21 52 131\" stroke=\"#928975\" stroke-width=\"1.5\"/>\n<path d=\"M98 15 106 125\" stroke=\"#586774\" stroke-width=\"4\"/>\n<path d=\"M58 49 87 45M59 54 78 51\" stroke=\"#6f695b\" stroke-width=\"1.5\"/>\n<path d=\"m63 83 6-14 7 12-7-3Z\" stroke=\"#eee9dc\" stroke-width=\"1.2\"/>\n<path d=\"M113 128 55 135\" stroke=\"#faf7ef\" stroke-width=\"2\"/>\n</svg>\n</div>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h2>Field notebook</h2><span class=\"price\">$16</span></div>\n<p class=\"description\">Room for site sketches, measurements and daily observations.</p>\n<p class=\"spec\">80 dot-grid pages · Recycled paper</p>\n<div class=\"action-row\"><button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button><span class=\"action-hint\">Pack a spare</span></div>\n</div>\n</article>\n\n<article class=\"product\">\n<div class=\"product-art\">\n<svg viewBox=\"0 0 150 150\" fill=\"none\" role=\"img\" aria-label=\"Natural canvas tote with long handles\">\n<ellipse cx=\"75\" cy=\"138\" rx=\"44\" ry=\"3\" fill=\"#dedfd7\"/>\n<path d=\"M51 52V32Q51 13 64 13Q77 13 77 32V52M75 52V32Q75 13 88 13Q101 13 101 32V52\" stroke=\"#9e9989\" stroke-width=\"6\"/>\n<path d=\"M51 52V32Q51 13 64 13Q77 13 77 32V52M75 52V32Q75 13 88 13Q101 13 101 32V52\" stroke=\"#d8d0bd\" stroke-width=\"3\"/>\n<path d=\"M32 48H117L111 129Q111 135 105 135H45Q39 135 39 129Z\" fill=\"#dfd8c6\" stroke=\"#aaa38f\" stroke-width=\"1.5\"/>\n<path d=\"M37 53H112M45 54 50 129M105 54 100 129M44 130H106\" stroke=\"#c0b8a4\" stroke-dasharray=\"2 2\"/>\n<path d=\"m68 94 7-19 7 19-7-5Z\" stroke=\"#62768a\" stroke-width=\"1.6\"/>\n<path d=\"M67 103H83\" stroke=\"#62768a\" stroke-width=\"1.2\"/>\n</svg>\n</div>\n<div class=\"product-body\">\n<div class=\"product-heading\"><h2>Canvas tote</h2><span class=\"price\">$32</span></div>\n<p class=\"description\">Carry maps, sample kits and the day's loose ends back to base.</p>\n<p class=\"spec\">12 L · Heavyweight cotton canvas</p>\n<div class=\"action-row\"><button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button><span class=\"action-hint\">For shared gear</span></div>\n</div>\n</article>\n</section>\n\n<aside class=\"kit-notes\" id=\"kit-notes\" aria-labelledby=\"notes-title\">\n<div>\n<h2 id=\"notes-title\">Before you head out</h2>\n<p>Start with the basics. Check your project packing list for specialist equipment and safety gear.</p>\n</div>\n<dl>\n<div><dt>Personal kit</dt><dd>1 bottle + 1 notebook per person</dd></div>\n<div><dt>Crew kit</dt><dd>1 tote for shared supplies</dd></div>\n</dl>\n</aside>\n<p class=\"update\">Kit notes updated <time datetime=\"2025-06-12\">12 Jun 2025</time> · Personal and crew quantities added.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-products-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Orbit: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Orbit essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Orbit essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Orbit essentials — Field team supplies</title>\n<style>\n:root{--paper:#f7f5ef;--ink:#292d28;--muted:#676b61;--line:#d9d9ce;--accent:#a44932;--wash:#eeede4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\na{color:inherit;text-decoration:none}\nbutton,a{ -webkit-tap-highlight-color:transparent}\na:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}\n.wrap{max-width:1160px;margin:auto;padding:0 32px}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:750;letter-spacing:-1px}\n.brand svg{width:29px;height:29px;color:var(--accent)}\nnav{display:flex;align-items:center;gap:26px;font-size:13px}\nnav a{min-height:44px;display:flex;align-items:center;gap:8px}\nnav a[aria-current]{color:var(--accent);text-decoration:underline;text-underline-offset:7px}\n.count{background:var(--wash);padding:1px 7px;border-radius:20px;font-size:11px}\n.intro{padding:38px 0 30px;max-width:700px}\n.eyebrow{margin:0 0 10px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:48px;font-weight:400;line-height:1.12;letter-spacing:-1.7px;margin:0 0 14px}\n.intro>p:last-child{max-width:510px;margin:0;color:var(--muted);font-size:15px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:40px;align-items:start}\n.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}\nh2{font-size:13px;font-weight:650;margin:0}\n.section-head span{font-size:11px;color:var(--muted)}\n.product{display:grid;grid-template-columns:96px minmax(0,1fr) 120px;gap:20px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line)}\n.visual{height:112px;display:flex;align-items:center;justify-content:center;background:var(--wash)}\n.visual svg{width:80px;height:100px}\nh3{font-family:Georgia,\"Times New Roman\",serif;font-size:25px;font-weight:400;line-height:1.2;margin:0 0 8px;letter-spacing:-.4px}\n.description{margin:0 0 9px;max-width:330px;font-size:13px;color:var(--muted)}\n.detail{margin:0;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}\n.purchase{display:flex;flex-direction:column;align-items:flex-end;gap:14px}\n.price{font-size:21px;line-height:1;font-variant-numeric:tabular-nums}\nbutton{border:0;border-radius:2px;background:var(--accent);color:#fff;font:600 12px/1.2 system-ui,sans-serif;padding:0 15px;min-height:44px;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#873c2a}\n.kit{border-top:2px solid var(--ink)}\n.kit-heading{padding:13px 0;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line)}\n.kit-heading span{font-size:11px;color:var(--muted)}\n.status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;margin:16px 0 0}\n.status::before{content:\"\";width:6px;height:6px;background:#909584;border-radius:50%}\n.empty{padding:29px 0 26px}\n.empty svg{width:34px;height:40px;display:block;color:#96998a;margin-bottom:16px}\n.empty h3{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;margin-bottom:9px}\n.empty p{font-size:13px;color:var(--muted);margin:0;line-height:1.65}\n.kit-note{border-top:1px solid var(--line);padding-top:15px;font-size:11px;color:var(--muted)}\n.kit-note strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}\nfooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0;margin-top:40px;font-size:11px;color:var(--muted)}\n@media(max-width:800px){\n.layout{grid-template-columns:minmax(0,1fr);gap:28px}\n.kit{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}\n.kit-heading{grid-column:1/-1}\n.status{grid-column:1/-1}\n.empty{padding:18px 0 22px}\n.empty svg{display:none}\n.kit-note{align-self:center;border-top:0;border-left:1px solid var(--line);padding:0 0 0 20px}\n}\n@media(max-width:480px){\n.wrap{padding:0 20px}\n.header-inner{min-height:66px;gap:12px}\n.brand{font-size:23px;gap:7px}\n.brand svg{width:24px}\nnav{gap:16px;font-size:12px}\n.intro{padding:26px 0 24px}\n.eyebrow{font-size:10px;margin-bottom:8px}\nh1{font-size:38px;letter-spacing:-1.2px;margin-bottom:10px}\n.intro>p:last-child{font-size:13px;line-height:1.6}\n.product{grid-template-columns:66px minmax(0,1fr);gap:10px 16px;padding:18px 0}\n.visual{grid-row:1/3;align-self:start;height:92px}\n.visual svg{width:62px;height:82px}\nh3{font-size:23px;margin-bottom:5px}\n.description{font-size:12px;margin-bottom:6px;line-height:1.5}\n.detail{font-size:9px;letter-spacing:.5px}\n.purchase{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}\n.price{font-size:19px}\nbutton{padding:0 13px}\n.kit{grid-template-columns:1fr}\n.kit-note{border-left:0;border-top:1px solid var(--line);padding:13px 0 0}\n.empty{padding-bottom:18px}\nfooter{margin-top:28px;flex-direction:column;gap:4px;padding:17px 0}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wrap header-inner\">\n<a class=\"brand\" href=\"#catalog\" aria-label=\"Orbit home\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"16\" cy=\"16\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\"/><ellipse cx=\"16\" cy=\"16\" rx=\"16\" ry=\"6\" transform=\"rotate(-40 16 16)\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\nOrbit\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#catalog\" aria-current=\"page\">Essentials</a>\n<a href=\"#team-kit\">Team kit <span class=\"count\">0</span></a>\n</nav>\n</div>\n</header>\n<main class=\"wrap\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<p class=\"eyebrow\">Supplies for field research</p>\n<h1 id=\"page-title\">Orbit essentials</h1>\n<p>Simple tools for long days of observation, careful notes, and the walk back to base.</p>\n</section>\n<div class=\"layout\">\n<section id=\"catalog\" aria-labelledby=\"catalog-title\">\n<div class=\"section-head\">\n<h2 id=\"catalog-title\">The field collection</h2>\n<span>3 products · USD</span>\n</div>\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 90 116\" fill=\"none\" role=\"img\" aria-label=\"Sage green bottle with a screw cap\">\n<ellipse cx=\"45\" cy=\"107\" rx=\"22\" ry=\"3\" fill=\"#d9dbce\"/>\n<path d=\"M34 24h22v9c0 7 10 8 10 20v45c0 5-4 8-9 8H33c-5 0-9-3-9-8V53c0-12 10-13 10-20v-9Z\" fill=\"#7e8b76\" stroke=\"#586750\" stroke-width=\"1.5\"/>\n<rect x=\"31\" y=\"12\" width=\"28\" height=\"16\" rx=\"3\" fill=\"#3f4b3d\"/>\n<path d=\"M36 16v8m5-8v8m5-8v8m5-8v8m5-8v8\" stroke=\"#73816c\"/>\n<path d=\"M31 55v36\" stroke=\"#a6b29a\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n<circle cx=\"46\" cy=\"71\" r=\"10\" stroke=\"#e2e6d7\"/>\n<ellipse cx=\"46\" cy=\"71\" rx=\"15\" ry=\"4\" transform=\"rotate(-35 46 71)\" stroke=\"#e2e6d7\"/>\n</svg>\n</div>\n<div>\n<h3 id=\"bottle-title\">Trail bottle</h3>\n<p class=\"description\">Keep water close through transect walks and long observation sessions.</p>\n<p class=\"detail\">750 ml · Stainless steel · Sage</p>\n</div>\n<div class=\"purchase\"><span class=\"price\">$28</span><button type=\"button\" aria-label=\"Add Trail bottle to cart\">Add to cart</button></div>\n</article>\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 90 116\" fill=\"none\" role=\"img\" aria-label=\"Terracotta field notebook with an elastic closure\">\n<path d=\"m19 22 48-5 7 84-48 5Z\" fill=\"#d6cebc\"/>\n<path d=\"m15 17 48-5 7 85-48 5Z\" fill=\"#b5674b\" stroke=\"#8f4d37\" stroke-width=\"1.5\"/>\n<path d=\"m21 17 7 84\" stroke=\"#d99877\"/>\n<path d=\"m55 13 7 85\" stroke=\"#673f31\" stroke-width=\"3\"/>\n<path d=\"m29 37 21-2m-20 8 21-2\" stroke=\"#edcfad\" stroke-width=\"1.5\"/>\n<path d=\"m38 101 1 10 4-3 4 2-1-10\" fill=\"#5f6d58\"/>\n</svg>\n</div>\n<div>\n<h3 id=\"notebook-title\">Field notebook</h3>\n<p class=\"description\">A place for site sketches, sample references, and details worth keeping.</p>\n<p class=\"detail\">A5 · 160 dot-grid pages · Clay</p>\n</div>\n<div class=\"purchase\"><span class=\"price\">$16</span><button type=\"button\" aria-label=\"Add Field notebook to cart\">Add to cart</button></div>\n</article>\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<div class=\"visual\">\n<svg viewBox=\"0 0 90 116\" fill=\"none\" role=\"img\" aria-label=\"Natural canvas tote with long handles\">\n<path d=\"M29 45V27c0-20 30-20 30 0v18\" stroke=\"#ad9c7d\" stroke-width=\"7\"/>\n<path d=\"M31 43V27c0-17 26-17 26 0v16\" stroke=\"#e3d7bd\" stroke-width=\"3\"/>\n<path d=\"M16 40h57l5 63H11l5-63Z\" fill=\"#ded1b6\" stroke=\"#b3a17d\" stroke-width=\"1.5\"/>\n<path d=\"m21 44-4 53h55l-4-53M29 41v9m30-9v9\" stroke=\"#b8a786\"/>\n<path d=\"M35 70h20M35 75h14\" stroke=\"#786c54\" stroke-width=\"1.5\"/>\n<circle cx=\"45\" cy=\"61\" r=\"4\" stroke=\"#786c54\"/>\n</svg>\n</div>\n<div>\n<h3 id=\"tote-title\">Canvas tote</h3>\n<p class=\"description\">Carry notebooks, spare layers, and the day’s small research essentials.</p>\n<p class=\"detail\">18 L · Cotton canvas · Natural</p>\n</div>\n<div class=\"purchase\"><span class=\"price\">$32</span><button type=\"button\" aria-label=\"Add Canvas tote to cart\">Add to cart</button></div>\n</article>\n</section>\n<aside class=\"kit\" id=\"team-kit\" aria-labelledby=\"kit-title\">\n<div class=\"kit-heading\"><h2 id=\"kit-title\">Team kit</h2><span>0 items</span></div>\n<p class=\"status\">Planning · Not started</p>\n<div class=\"empty\">\n<svg viewBox=\"0 0 36 44\" fill=\"none\" aria-hidden=\"true\"><path d=\"M11 7H5v33h26V7h-6\" stroke=\"currentColor\" stroke-width=\"1.5\"/><rect x=\"11\" y=\"3\" width=\"14\" height=\"8\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M12 21h12m-12 6h8\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<h3>No supplies selected</h3>\n<p>Your kit is empty. Choose essentials from the collection to plan what the team will take on its next field visit.</p>\n</div>\n<p class=\"kit-note\"><strong>A little planning goes a long way.</strong>Check shared supplies before choosing new gear for each researcher.</p>\n</aside>\n</div>\n<footer><span>Orbit / Equipment for curious people.</span><span>All prices in USD, per item.</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-products-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a three-product catalog for Pine: Trail bottle $28, Field notebook $16, Canvas tote $32. Each product needs a small inline visual, price, short description and Add to cart button. Include a simple brand/navigation header. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Pine essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Pine essentials\", \"Trail bottle\", \"Field notebook\", \"Canvas tote\", \"Add to cart\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Pine essentials — Field supply</title>\n<style>\n:root{--paper:#f7f4ee;--ink:#29262a;--muted:#69636a;--plum:#492c40;--line:#dcd5cf;--wash:#eee9e1}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-decoration:none}\nbutton{font:inherit}\na:focus-visible,button:focus-visible{outline:3px solid #996d8b;outline-offset:5px}\n.shell{width:min(1104px,calc(100% - 80px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:84px;display:flex;align-items:center;gap:48px}\n.brand{font-size:29px;font-weight:750;letter-spacing:-1.5px;color:var(--plum)}\n.brand span{font-weight:400;color:#9b8792}\nnav{display:flex;align-items:center;gap:28px;font-size:13px}\nnav a{padding:10px 0}\nnav a[aria-current]{color:var(--plum);box-shadow:0 1px var(--plum)}\n.header-note{margin-left:auto;font-size:10px;font-weight:650;letter-spacing:1.7px;color:var(--muted)}\nmain{padding-top:49px}\n.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:35px}\n.eyebrow{margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--plum)}\nh1{margin:0;font-size:44px;line-height:1.12;font-weight:600;letter-spacing:-1.8px}\n.intro p:last-child{max-width:440px;margin:15px 0 0;color:var(--muted);font-size:15px;line-height:1.6}\n.count{flex-shrink:0;font-size:12px;color:var(--muted);padding-bottom:4px}\n.catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}\n.product{min-width:0;border-top:1px solid var(--line);padding-top:15px}\n.visual{margin:0 0 21px;background:var(--wash);height:185px;position:relative;display:flex;align-items:center;justify-content:center}\n.visual svg{width:180px;height:150px;display:block}\n.visual figcaption{position:absolute;bottom:11px;left:14px;font-size:10px;color:var(--muted);letter-spacing:.3px}\n.product-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}\nh2{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.4px;margin:0}\n.price{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--plum)}\n.description{margin:10px 0 12px;font-size:14px;line-height:1.6;color:var(--muted)}\n.spec{margin:0 0 19px;font-size:11px;line-height:1.5;color:#595258}\nbutton{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:40px;padding:10px 15px;border:1px solid var(--plum);border-radius:3px;background:var(--plum);color:#fff;font-size:12px;font-weight:550;cursor:pointer}\nbutton:hover{background:#382031}\n.plus{font-size:19px;font-weight:300;line-height:12px}\n.kit-note{display:grid;grid-template-columns:1fr 2fr;gap:32px;margin-top:49px;padding:23px 0;border-top:1px solid var(--line)}\n.kit-note h2{font-size:13px;letter-spacing:0;color:var(--plum)}\n.kit-note p{margin:0;max-width:580px;font-size:13px;line-height:1.7;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:18px 0 25px;font-size:10px;color:var(--muted)}\n@media(max-width:650px){\n.shell{width:calc(100% - 36px)}\n.header-inner{min-height:65px;gap:24px;justify-content:space-between}\n.brand{font-size:26px}\nnav{gap:21px;font-size:12px}\n.header-note{display:none}\nmain{padding-top:27px}\n.intro{margin-bottom:23px;align-items:flex-start;gap:8px}\n.eyebrow{font-size:9px;margin-bottom:8px}\nh1{font-size:32px;letter-spacing:-1.2px}\n.intro p:last-child{font-size:13px;line-height:1.55;margin-top:10px;max-width:285px}\n.count{font-size:10px;margin-top:28px;white-space:nowrap}\n.catalog{display:block}\n.product{display:grid;grid-template-columns:91px minmax(0,1fr);gap:17px;padding:17px 0}\n.visual{height:116px;margin:0}\n.visual svg{width:88px;height:100px;margin-top:-8px}\n.visual figcaption{font-size:8px;left:0;bottom:7px;width:100%;text-align:center;letter-spacing:0}\nh2{font-size:17px;letter-spacing:-.3px}\n.price{font-size:15px}\n.product-heading{gap:7px}\n.description{font-size:12px;line-height:1.5;margin:6px 0 7px}\n.spec{font-size:10px;margin-bottom:10px}\nbutton{min-height:33px;padding:7px 11px;font-size:11px;gap:21px}\n.kit-note{grid-template-columns:1fr;gap:8px;margin-top:8px;padding:18px 0}\n.kit-note p{font-size:12px;line-height:1.6}\nfooter{font-size:9px;padding-top:15px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<header>\n<div class=\"shell header-inner\">\n<a class=\"brand\" href=\"#essentials\" aria-label=\"Pine home\">Pine<span>.</span></a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#essentials\" aria-current=\"page\">Essentials</a>\n<a href=\"#kit-notes\">Kit notes</a>\n</nav>\n<span class=\"header-note\">EQUIPMENT FOR FIELDWORK</span>\n</div>\n</header>\n<main class=\"shell\" id=\"essentials\">\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">The everyday field kit</p>\n<h1 id=\"page-title\">Pine essentials</h1>\n<p>Carry water, record observations, and keep your team's daily gear together.</p>\n</div>\n<span class=\"count\">03 items</span>\n</section>\n\n<section class=\"catalog\" aria-label=\"Essential field supplies\">\n<article class=\"product\" aria-labelledby=\"bottle-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 180 150\" role=\"img\" aria-labelledby=\"bottle-art\">\n<title id=\"bottle-art\">Steel trail bottle with an easy-to-grab carry loop</title>\n<g stroke=\"#493440\" stroke-width=\"1.8\" stroke-linejoin=\"round\">\n<path d=\"M80 26V19c0-13 20-13 20 0v7\" fill=\"none\"/>\n<rect x=\"75\" y=\"23\" width=\"30\" height=\"15\" rx=\"3\" fill=\"#493440\"/>\n<path d=\"M76 38v9c0 5-13 8-13 22v58c0 7 5 10 12 10h30c7 0 12-3 12-10V69c0-14-13-17-13-22v-9Z\" fill=\"#c4b5bb\"/>\n<path d=\"M68 71v51c0 5 2 8 6 8\" fill=\"none\" stroke=\"#e8dde0\"/>\n<path d=\"M64 78h52M64 116h52\" stroke=\"#ad9ba4\" stroke-width=\"1\"/>\n</g>\n<text x=\"90\" y=\"101\" text-anchor=\"middle\" fill=\"#493440\" font-family=\"system-ui,sans-serif\" font-size=\"11\" font-weight=\"600\">Pine.</text>\n</svg>\n<figcaption>Easy-grab carry loop</figcaption>\n</figure>\n<div class=\"product-content\">\n<div class=\"product-heading\"><h2 id=\"bottle-title\">Trail bottle</h2><span class=\"price\">$28</span></div>\n<p class=\"description\">A sturdy steel bottle for long transects and quick water breaks.</p>\n<p class=\"spec\">750 mL · Screw-top lid</p>\n<button type=\"button\" aria-label=\"Add to cart: Trail bottle\">Add to cart <span class=\"plus\" aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n\n<article class=\"product\" aria-labelledby=\"notebook-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 180 150\" role=\"img\" aria-labelledby=\"notebook-art\">\n<title id=\"notebook-art\">Open field notebook showing a dot-grid page for notes and sketches</title>\n<g stroke=\"#6b615c\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n<path d=\"m34 29 54-5 58 9v97l-58-8-54 5Z\" fill=\"#c6b49c\"/>\n<path d=\"m37 25 51-4 54 8v96l-54-8-51 5Z\" fill=\"#fcf9f1\"/>\n<path d=\"M88 21v96\" stroke=\"#b7aa99\"/>\n<path d=\"m43 42 35-3m-35 14 35-3m-35 14 27-2\" stroke=\"#b7aa99\" stroke-width=\"1\"/>\n<path d=\"M85 25v109l6-5 5 6V27\" fill=\"#493440\" stroke=\"none\"/>\n</g>\n<g fill=\"#b6aaa0\">\n<circle cx=\"105\" cy=\"45\" r=\"1\"/><circle cx=\"117\" cy=\"47\" r=\"1\"/><circle cx=\"129\" cy=\"49\" r=\"1\"/>\n<circle cx=\"105\" cy=\"58\" r=\"1\"/><circle cx=\"117\" cy=\"60\" r=\"1\"/><circle cx=\"129\" cy=\"62\" r=\"1\"/>\n<circle cx=\"105\" cy=\"71\" r=\"1\"/><circle cx=\"117\" cy=\"73\" r=\"1\"/><circle cx=\"129\" cy=\"75\" r=\"1\"/>\n<circle cx=\"105\" cy=\"84\" r=\"1\"/><circle cx=\"117\" cy=\"86\" r=\"1\"/><circle cx=\"129\" cy=\"88\" r=\"1\"/>\n<circle cx=\"105\" cy=\"97\" r=\"1\"/><circle cx=\"117\" cy=\"99\" r=\"1\"/><circle cx=\"129\" cy=\"101\" r=\"1\"/>\n</g>\n</svg>\n<figcaption>Dot grid for notes &amp; sketches</figcaption>\n</figure>\n<div class=\"product-content\">\n<div class=\"product-heading\"><h2 id=\"notebook-title\">Field notebook</h2><span class=\"price\">$16</span></div>\n<p class=\"description\">Room for site sketches, sample IDs, and the observations that don't fit a form.</p>\n<p class=\"spec\">96 pages · A6 dot grid</p>\n<button type=\"button\" aria-label=\"Add to cart: Field notebook\">Add to cart <span class=\"plus\" aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n\n<article class=\"product\" aria-labelledby=\"tote-title\">\n<figure class=\"visual\">\n<svg viewBox=\"0 0 180 150\" role=\"img\" aria-labelledby=\"tote-art\">\n<title id=\"tote-art\">Canvas tote with reinforced cross-stitched handle attachments</title>\n<g stroke=\"#746354\" stroke-width=\"1.6\" stroke-linejoin=\"round\">\n<path d=\"M65 64V32c0-26 49-26 49 0v32\" fill=\"none\" stroke=\"#b2a08a\" stroke-width=\"9\"/>\n<path d=\"M65 64V32c0-26 49-26 49 0v32\" fill=\"none\" stroke=\"#746354\" stroke-width=\"1\"/>\n<path d=\"m43 51 5 78q42 13 84 0l5-78Z\" fill=\"#d6c7b2\"/>\n<path d=\"m49 55 5 69q36 10 72 0l5-69\" fill=\"none\" stroke=\"#b8a68e\" stroke-dasharray=\"3 3\" stroke-width=\"1\"/>\n<path d=\"M61 51h9v20h-9Zm49 0h9v20h-9Z\" fill=\"#c5b398\"/>\n<path d=\"m62 56 7 12m0-12-7 12m49-12 7 12m0-12-7 12\" stroke-width=\"1\"/>\n</g>\n<text x=\"90\" y=\"106\" text-anchor=\"middle\" fill=\"#493440\" font-family=\"system-ui,sans-serif\" font-size=\"13\" font-weight=\"600\">Pine.</text>\n</svg>\n<figcaption>Reinforced handle stitching</figcaption>\n</figure>\n<div class=\"product-content\">\n<div class=\"product-heading\"><h2 id=\"tote-title\">Canvas tote</h2><span class=\"price\">$32</span></div>\n<p class=\"description\">A dependable carryall for maps, spare layers, and shared field supplies.</p>\n<p class=\"spec\">12 oz cotton · Reinforced handles</p>\n<button type=\"button\" aria-label=\"Add to cart: Canvas tote\">Add to cart <span class=\"plus\" aria-hidden=\"true\">+</span></button>\n</div>\n</article>\n</section>\n\n<section class=\"kit-note\" id=\"kit-notes\" aria-labelledby=\"kit-title\">\n<h2 id=\"kit-title\">A note for the team</h2>\n<p>Start with a bottle and notebook for each researcher. Use a shared tote to keep the day's maps and loose equipment in one place.</p>\n</section>\n<footer>\n<span>Pine · Ready for the everyday field day.</span>\n<span>Prices in USD · Sold individually</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-profiles-00","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Alder. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Alder team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Alder team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Alder team</title>\n<style>\n:root{color-scheme:light;--paper:#f6f4ee;--surface:#fffdf8;--ink:#23332b;--muted:#657067;--green:#194b37;--line:#dedfd5;--sage:#e8eee4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\nbutton{font:inherit}\n.masthead{border-bottom:1px solid var(--line)}\n.masthead-inner{max-width:1040px;margin:auto;min-height:82px;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:650;letter-spacing:-.4px}\n.brand svg{color:var(--green);flex:none}\n.masthead p{margin:0;color:var(--muted);font-size:13px}\nmain{max-width:1040px;margin:0 auto;padding:48px 32px 36px}\n.profile-top{display:flex;align-items:center;gap:24px}\n.avatar{width:104px;height:104px;flex:none}\n.identity{flex:1;min-width:0}\n.eyebrow{margin:0 0 6px;text-transform:uppercase;letter-spacing:1.7px;font-size:10px;font-weight:700;color:var(--muted)}\nh1{font-size:40px;line-height:1.12;letter-spacing:-1.5px;margin:0 0 9px;font-weight:650}\n.role{margin:0;font-size:16px;color:var(--muted)}\n.role span{color:var(--ink)}\n.follow{border:1px solid var(--green);background:var(--green);color:white;padding:12px 25px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;font-weight:600;cursor:pointer}\n.follow:hover{background:#103b29}\n.follow:focus-visible{outline:3px solid #8da68c;outline-offset:4px}\n.summary{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:64px;margin-top:27px}\n.bio{max-width:510px;margin:0;font-size:16px;line-height:1.7}\n.location{display:block;margin-top:10px;font-size:12px;color:var(--muted)}\n.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:4px 0}\n.stats div{padding:0 16px;border-left:1px solid var(--line)}\n.stats div:first-child{padding-left:0;border:0}\n.stats dt{color:var(--muted);font-size:12px;margin-top:3px}\n.stats dd{font-size:25px;font-weight:600;line-height:1.2;letter-spacing:-.6px;margin:0}\n.work{margin-top:44px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:17px}\nh2{font-size:22px;line-height:1.3;letter-spacing:-.5px;margin:0;font-weight:650}\n.section-heading p{color:var(--muted);font-size:12px;margin:0}\n.projects{padding:0;margin:0;list-style:none;border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden}\n.projects>li+li{border-top:1px solid var(--line)}\n.project{padding:23px 25px;display:grid;grid-template-columns:42px minmax(0,1fr) 104px;gap:20px;align-items:start}\n.project-number{width:38px;height:38px;background:var(--sage);color:var(--green);display:grid;place-items:center;border-radius:7px;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}\nh3{font-size:17px;line-height:1.4;letter-spacing:-.2px;margin:0 0 6px;font-weight:650}\n.description{margin:0;max-width:610px;font-size:14px;color:#505e54}\n.category{margin:10px 0 0;font-size:11px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}\n.category span{font-weight:600}\n.project-meta{text-align:right;padding-top:2px}\n.status{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:4px;background:var(--sage);color:var(--green);font-size:11px;font-weight:600;white-space:nowrap}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.status.pilot{background:#f1ecdf;color:#715d35}\n.status.progress{background:#eceeea;color:#566257}\ntime{display:block;color:var(--muted);font-size:11px;margin-top:9px}\nfooter{max-width:1040px;margin:0 auto;padding:0 32px 28px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:16px}\n@media(max-width:650px){\n.masthead-inner{min-height:65px;padding:17px 22px}\n.masthead p{max-width:133px;text-align:right;font-size:11px;line-height:1.4}\n.brand{font-size:16px;gap:8px}\nmain{padding:28px 22px}\n.profile-top{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px}\n.avatar{width:72px;height:72px}\nh1{font-size:30px;letter-spacing:-1px;margin-bottom:5px}\n.eyebrow{font-size:9px;margin-bottom:5px}\n.role{font-size:14px}\n.follow{grid-column:1/-1;width:100%;padding:10px 20px;min-height:44px;margin-top:3px}\n.summary{grid-template-columns:1fr;gap:22px;margin-top:22px}\n.bio{font-size:14px;line-height:1.65}\n.location{margin-top:8px}\n.stats{padding:0}\n.stats div{padding:0 17px}\n.stats dd{font-size:23px}\n.stats dt{font-size:11px}\n.work{margin-top:30px}\nh2{font-size:21px}\n.section-heading{margin-bottom:13px}\n.project{padding:19px 16px;grid-template-columns:28px minmax(0,1fr);gap:10px 12px}\n.project-number{width:28px;height:28px;font-size:10px;border-radius:5px}\nh3{font-size:16px;line-height:1.35;margin-bottom:6px}\n.description{font-size:13px;line-height:1.55}\n.category{font-size:10px;margin-top:8px}\n.project-meta{grid-column:2;text-align:left;padding:0;display:flex;align-items:center;justify-content:space-between;gap:8px}\ntime{margin:0;font-size:10px}\n.status{font-size:10px;padding:2px 7px}\nfooter{padding:0 22px 24px;font-size:10px;flex-wrap:wrap;gap:4px 16px}\n}\n</style>\n</head>\n<body>\n<header class=\"masthead\">\n  <div class=\"masthead-inner\">\n    <div class=\"brand\">\n      <svg width=\"27\" height=\"28\" viewBox=\"0 0 27 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 24 13.5 4 23 24M8 17h11\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M13.5 4v20\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>\n      <span>Alder team</span>\n    </div>\n    <p>Built for independent bike shops.</p>\n  </div>\n</header>\n<main>\n  <article aria-labelledby=\"profile-name\">\n    <header class=\"profile-top\">\n      <svg class=\"avatar\" viewBox=\"0 0 104 104\" role=\"img\" aria-label=\"Hand-drawn MC initials avatar\">\n        <path d=\"M52 3C79 1 101 25 100 52c2 27-20 49-48 49C24 103 3 80 3 53 1 24 24 3 52 3Z\" fill=\"#e1e8da\"/>\n        <path d=\"M24 24C37 12 57 10 73 18M84 72C76 87 53 94 35 85\" fill=\"none\" stroke=\"#9dad96\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <path d=\"m23 65 2-29 12 20 12-20 2 29M80 40c-5-6-17-4-20 5-4 12 1 23 11 22 4 0 7-2 10-5\" fill=\"none\" stroke=\"#194b37\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <div class=\"identity\">\n        <p class=\"eyebrow\">Meet the team</p>\n        <h1 id=\"profile-name\">Maya Chen</h1>\n        <p class=\"role\">Product designer <span>at Alder</span></p>\n      </div>\n      <button class=\"follow\" type=\"button\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n        Follow\n      </button>\n    </header>\n    <div class=\"summary\">\n      <p class=\"bio\">I design practical tools that give independent bike shops less admin and more time with riders.\n        <span class=\"location\">Portland, Oregon · Usually commuting by bike</span>\n      </p>\n      <dl class=\"stats\" aria-label=\"Maya's profile statistics\">\n        <div><dd>12</dd><dt>Projects</dt></div>\n        <div><dd>8</dd><dt>Shop partners</dt></div>\n        <div><dd>246</dd><dt>Followers</dt></div>\n      </dl>\n    </div>\n    <section class=\"work\" aria-labelledby=\"work-heading\">\n      <div class=\"section-heading\">\n        <h2 id=\"work-heading\">Recent work</h2>\n        <p>3 projects</p>\n      </div>\n      <ol class=\"projects\">\n        <li>\n          <article class=\"project\">\n            <span class=\"project-number\" aria-hidden=\"true\">01</span>\n            <div>\n              <h3>A calmer repair queue</h3>\n              <p class=\"description\">One shared view of promised dates, waiting parts and the next bike on the stand.</p>\n              <p class=\"category\"><span>Focus:</span> Service intake and repair-status communication for independent bicycle workshops</p>\n            </div>\n            <div class=\"project-meta\"><span class=\"status\">In use</span><time datetime=\"2025-05\">May 2025</time></div>\n          </article>\n        </li>\n        <li>\n          <article class=\"project\">\n            <span class=\"project-number\" aria-hidden=\"true\">02</span>\n            <div>\n              <h3>Booking without the back-and-forth</h3>\n              <p class=\"description\">A shorter booking flow that helps riders choose a service and arrive prepared.</p>\n              <p class=\"category\"><span>Focus:</span> Online service booking</p>\n            </div>\n            <div class=\"project-meta\"><span class=\"status pilot\">In pilot</span><time datetime=\"2025-04\">Apr 2025</time></div>\n          </article>\n        </li>\n        <li>\n          <article class=\"project\">\n            <span class=\"project-number\" aria-hidden=\"true\">03</span>\n            <div>\n              <h3>Clearer updates for riders</h3>\n              <p class=\"description\">Plain-language repair messages, from the first estimate to “your bike is ready.”</p>\n              <p class=\"category\"><span>Focus:</span> Rider communications</p>\n            </div>\n            <div class=\"project-meta\"><span class=\"status progress\">In progress</span><time datetime=\"2025-03\">Mar 2025</time></div>\n          </article>\n        </li>\n      </ol>\n    </section>\n  </article>\n</main>\n<footer><span>Alder · Made with shop teams, for shop teams.</span><span>Good days start at the bike shop.</span></footer>\n</body>\n</html>"}]}
{"id":"sft-profiles-01","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Birch. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Birch team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Birch team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Birch team</title>\n<style>\n:root{color-scheme:light;--ink:#26313d;--muted:#64707e;--accent:#4e6287;--line:#dde3e9;--paper:#fff;--surface:#f3f5f7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--surface);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\n.site-header{border-bottom:1px solid var(--line);background:#fafbfc}\n.header-inner{max-width:944px;margin:auto;padding:21px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:650;letter-spacing:-.3px}\n.brand svg{color:var(--accent);flex-shrink:0}\n.shop-note{font-size:12px;color:var(--muted)}\nmain{max-width:944px;margin:32px auto 40px;padding:0 24px}\n.profile{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.profile-body{padding:30px;display:grid;grid-template-columns:80px minmax(0,1fr) 145px;gap:22px}\n.avatar{display:block;width:80px;height:80px;border-radius:22px}\nh1{font-size:30px;line-height:1.15;letter-spacing:-1px;margin:0 0 6px;font-weight:650}\n.role{margin:0;color:var(--muted);font-size:15px}\n.role strong{font-weight:550;color:var(--ink)}\n.bio{margin:16px 0 0;max-width:460px;line-height:1.65}\n.location{display:flex;align-items:center;gap:5px;margin:12px 0 0;color:var(--muted);font-size:12px}\n.location svg{flex-shrink:0}\n.action{padding-top:3px}\nbutton{width:100%;border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:white;padding:10px 18px;font:600 14px/1.4 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\nbutton:hover{background:#405475}\nbutton:focus-visible{outline:3px solid #a4b3cd;outline-offset:3px}\n.hint{font-size:12px;color:var(--muted);line-height:1.5;margin:9px 0 0}\n.stats{margin:0;padding:18px 30px;background:#fafbfc;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}\n.stats div{padding-left:25px;border-left:1px solid var(--line)}\n.stats div:first-child{padding-left:0;border-left:0}\n.stats dt{color:var(--muted);font-size:12px}\n.stats dd{margin:0 0 2px;font-size:21px;font-weight:650;line-height:1.3;letter-spacing:-.5px}\n.work{margin-top:29px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}\nh2{font-size:19px;letter-spacing:-.4px;margin:0;font-weight:650}\n.update{color:var(--muted);font-size:12px;margin:0}\n.project-list{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}\n.project{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:22px 24px}\n.project+.project{border-top:1px solid var(--line)}\n.thumbnail{width:64px;height:64px;border:1px solid #e0e5ed;border-radius:9px;background:#f0f3f8;color:var(--accent);display:grid;place-items:center}\n.thumbnail svg{width:40px;height:40px}\n.project-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px}\nh3{font-size:16px;line-height:1.4;letter-spacing:-.2px;margin:0;font-weight:650}\n.status{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:11px;font-weight:550;color:var(--accent)}\n.status:before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.status.progress{color:var(--muted)}\n.status.progress:before{background:transparent;border:1px solid currentColor;width:6px;height:6px}\n.summary{margin:6px 0 9px;max-width:540px;color:#596574;font-size:14px;line-height:1.55}\n.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--muted);font-size:11px}\n.category{font-weight:550;color:var(--accent)}\n.meta time{border-left:1px solid var(--line);padding-left:10px}\n@media(max-width:600px){\n.header-inner{padding:17px 20px}\n.shop-note{max-width:104px;text-align:right;line-height:1.35;font-size:11px}\nmain{padding:0 16px;margin:20px auto 28px}\n.profile-body{padding:22px 20px;grid-template-columns:64px minmax(0,1fr);gap:16px}\n.avatar{width:64px;height:64px;border-radius:18px}\nh1{font-size:26px;margin-top:2px}\n.role{font-size:14px}\n.identity{display:contents}\n.identity-heading{align-self:center}\n.bio{grid-column:1/-1;margin:0;font-size:14px;line-height:1.6}\n.location{grid-column:1/-1;margin:-7px 0 0}\n.action{grid-column:1/-1;padding:0;display:flex;align-items:center;gap:15px}\nbutton{width:auto;min-width:108px;flex-shrink:0}\n.hint{margin:0;max-width:170px}\n.stats{padding:16px 20px}\n.stats div{padding-left:15px}\n.stats dd{font-size:20px}\n.stats dt{font-size:11px}\n.work{margin-top:25px}\n.section-heading{align-items:center;gap:8px}\nh2{font-size:18px}\n.update{font-size:10px}\n.project{padding:19px 17px;grid-template-columns:38px minmax(0,1fr);gap:12px}\n.thumbnail{width:38px;height:42px;border-radius:6px}\n.thumbnail svg{width:28px;height:28px}\n.project-heading{display:block}\nh3{font-size:15px}\n.status{margin-top:4px}\n.summary{font-size:13px;margin:5px 0 9px;line-height:1.55}\n.meta{font-size:10px;gap:5px 8px}\n.meta time{padding-left:8px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg width=\"27\" height=\"27\" viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"14\" cy=\"14\" r=\"11\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"M14 3v22M3 14h22M6 6l16 16M6 22 22 6\" stroke=\"currentColor\" stroke-width=\"1.2\"/><circle cx=\"14\" cy=\"14\" r=\"3\" fill=\"currentColor\"/></svg>\n<span>Birch team</span>\n</div>\n<span class=\"shop-note\">Your independent bike shop</span>\n</div>\n</header>\n<main>\n<section class=\"profile\" aria-labelledby=\"profile-name\">\n<div class=\"profile-body\">\n<svg class=\"avatar\" viewBox=\"0 0 80 80\" role=\"img\" aria-label=\"Maya Chen's drawn MC initials\">\n<rect width=\"80\" height=\"80\" rx=\"22\" fill=\"#e7ecf3\"/>\n<path d=\"M17 53 20 28l10 17 10-17 2 25M64 31c-12-10-22 1-19 13 2 11 12 12 19 5\" fill=\"none\" stroke=\"#4e6287\" stroke-width=\"3.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<div class=\"identity\">\n<div class=\"identity-heading\">\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\"><strong>Product designer</strong> at Birch</p>\n</div>\n<p class=\"bio\">Making the everyday side of cycling simpler. I design tools that help riders find their next bike and give our shop team more time at the workbench.</p>\n<p class=\"location\">\n<svg width=\"13\" height=\"15\" viewBox=\"0 0 16 18\" fill=\"none\" aria-hidden=\"true\"><path d=\"M13 7c0 4-5 9-5 9S3 11 3 7a5 5 0 1 1 10 0Z\" stroke=\"currentColor\" stroke-width=\"1.3\"/><circle cx=\"8\" cy=\"7\" r=\"1.7\" stroke=\"currentColor\"/></svg>\nPortland, OR · Usually riding the long way home\n</p>\n</div>\n<div class=\"action\">\n<button type=\"button\" aria-describedby=\"follow-hint\">Follow</button>\n<p class=\"hint\" id=\"follow-hint\">Keep up with Maya’s new projects and shop updates.</p>\n</div>\n</div>\n<dl class=\"stats\">\n<div><dd>12</dd><dt>Projects</dt></div>\n<div><dd>4</dd><dt>Years at Birch</dt></div>\n<div><dd>86</dd><dt>Followers</dt></div>\n</dl>\n</section>\n<section class=\"work\" aria-labelledby=\"work-heading\">\n<div class=\"section-heading\">\n<h2 id=\"work-heading\">Recent work</h2>\n<p class=\"update\">Last updated 2 days ago</p>\n</div>\n<div class=\"project-list\">\n<article class=\"project\">\n<div class=\"thumbnail\" aria-hidden=\"true\">\n<svg viewBox=\"0 0 40 40\" fill=\"none\"><rect x=\"7\" y=\"8\" width=\"26\" height=\"26\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M7 16h26M14 5v6M26 5v6M13 22h5M23 22h4M13 28h5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"m23 28 2 2 4-5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</div>\n<div>\n<div class=\"project-heading\"><h3>Tune-ups, made simple</h3><span class=\"status\">Live</span></div>\n<p class=\"summary\">Clear service packages and easy drop-off booking, so riders know what to expect before they roll in.</p>\n<div class=\"meta\"><span class=\"category\">Service booking</span><time datetime=\"2025-06\">Jun 2025</time><span>· 4 min read</span></div>\n</div>\n</article>\n<article class=\"project\">\n<div class=\"thumbnail\" aria-hidden=\"true\">\n<svg viewBox=\"0 0 40 40\" fill=\"none\"><rect x=\"5\" y=\"7\" width=\"13\" height=\"26\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"/><rect x=\"22\" y=\"7\" width=\"13\" height=\"26\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"11.5\" cy=\"15\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.3\"/><circle cx=\"28.5\" cy=\"15\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M9 23h5M9 27h3M26 23h5M26 27h3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n</div>\n<div>\n<div class=\"project-heading\"><h3>Find your everyday bike</h3><span class=\"status\">Live</span></div>\n<p class=\"summary\">A side-by-side bike guide that swaps technical jargon for the things that matter on your daily ride.</p>\n<div class=\"meta\"><span class=\"category\">Bike discovery</span><time datetime=\"2025-05\">May 2025</time><span>· 3 min read</span></div>\n</div>\n</article>\n<article class=\"project\">\n<div class=\"thumbnail\" aria-hidden=\"true\">\n<svg viewBox=\"0 0 40 40\" fill=\"none\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"25\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M5 15h30M15 15v18M25 15v18\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M9 20h2M9 24h2M19 20h2M19 24h2M29 20h2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\n</div>\n<div>\n<div class=\"project-heading\"><h3>A clearer repair queue</h3><span class=\"status progress\">In progress</span></div>\n<p class=\"summary\">One shared view of every repair, keeping mechanics and the front desk in sync from check-in to pickup.</p>\n<div class=\"meta\"><span class=\"category\">Workshop tools</span><time datetime=\"2025-06\">Jun 2025</time><span>· Field notes</span></div>\n</div>\n</article>\n</div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-profiles-02","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Cedar. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Cedar team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Cedar team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen — Cedar team</title>\n<style>\n:root{--paper:#f8f5ef;--ink:#302b27;--muted:#71685f;--line:#ddd5cb;--accent:#a34e37}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\n.wrap{width:min(100% - 64px,1000px);margin:auto}\n.site-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 0;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:-.3px}\n.brand svg{width:24px;height:28px;color:var(--accent)}\n.site-note{font-size:12px;color:var(--muted)}\nmain{padding:43px 0 35px}\n.eyebrow{margin:0 0 24px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase}\n.profile{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px 28px;align-items:start}\n.avatar{grid-row:1/3;width:120px;height:120px;color:var(--accent)}\nh1,h2{font-family:Georgia,\"Times New Roman\",serif;font-weight:400}\nh1{font-size:62px;line-height:1.08;letter-spacing:-2px;margin:-5px 0 7px}\n.role{margin:0;font-size:17px}\n.follow{grid-column:3;grid-row:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:43px;margin-top:8px;padding:10px 23px;border:1px solid var(--accent);border-radius:3px;background:var(--accent);color:var(--paper);font:600 14px/1.4 inherit;font-family:inherit;cursor:pointer}\n.follow svg{width:14px;height:14px}\n.follow:hover{background:var(--ink);border-color:var(--ink)}\n.follow:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n.about{grid-column:2/-1;max-width:590px}\n.bio{margin:0;font-size:16px;line-height:1.65}\n.availability{display:flex;align-items:center;gap:8px;margin:14px 0 0;color:var(--muted);font-size:12px}\n.availability span{width:7px;height:7px;flex:none;border:1px solid currentColor;border-radius:50%}\n.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:31px 0 0;padding:21px 0 23px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.stats div{padding:0 25px;border-left:1px solid var(--line)}\n.stats div:first-child{padding-left:0;border:0}\n.stats dt{font-size:12px;color:var(--muted)}\n.stats dd{margin:0 0 2px;font:32px/1.15 Georgia,\"Times New Roman\",serif}\n.work{margin-top:34px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:8px}\nh2{font-size:31px;line-height:1.2;letter-spacing:-.6px;margin:0}\n.count{margin:0;color:var(--muted);font-size:12px}\n.work-list{list-style:none;margin:0;padding:0}\n.work-list li{border-bottom:1px solid var(--line)}\n.project{display:grid;grid-template-columns:30px minmax(0,1fr) 240px;gap:20px;padding:24px 0}\n.number{padding-top:3px;color:var(--accent);font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}\nh3{font-size:18px;line-height:1.3;letter-spacing:-.3px;margin:0 0 7px;font-weight:600}\n.summary{max-width:460px;margin:0;color:var(--muted);font-size:14px;line-height:1.6}\n.project-meta{font-size:12px;line-height:1.55}\n.status{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-weight:600}\n.status svg{width:13px;height:13px;flex:none}\n.progress,.next{margin:3px 0 0;color:var(--muted)}\n.next strong{font-weight:600;color:var(--ink)}\nfooter{padding-top:19px;font-size:11px;color:var(--muted)}\n@media(max-width:600px){\n.wrap{width:calc(100% - 40px)}\n.site-header{padding:19px 0;gap:15px}\n.site-note{font-size:10px;max-width:110px;text-align:right;line-height:1.4}\nmain{padding-top:27px}\n.eyebrow{margin-bottom:20px;font-size:10px}\n.profile{grid-template-columns:72px minmax(0,1fr);gap:18px}\n.avatar{width:72px;height:72px;grid-row:1}\nh1{font-size:39px;letter-spacing:-1.5px;margin:0 0 5px}\n.role{font-size:14px}\n.about{grid-column:1/-1;grid-row:2}\n.bio{font-size:15px;line-height:1.6}\n.availability{margin-top:12px;font-size:11px}\n.follow{grid-column:1/-1;grid-row:3;margin:0;justify-self:start;min-width:116px}\n.stats{margin-top:25px;padding:19px 0}\n.stats div{padding:0 12px}\n.stats dd{font-size:29px}\n.stats dt{font-size:11px;line-height:1.4}\n.work{margin-top:28px}\nh2{font-size:28px}\n.section-heading{align-items:center}\n.count{font-size:11px}\n.project{grid-template-columns:20px minmax(0,1fr);gap:10px 12px;padding:21px 0}\nh3{font-size:17px;margin-bottom:6px}\n.summary{font-size:13px}\n.project-meta{grid-column:2;font-size:11px}\n.status{margin-bottom:4px}\n.progress,.next{margin-top:2px}\nfooter{font-size:10px}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header class=\"site-header\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 24 28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M12 2 4 13h5l-6 8h18l-6-8h5L12 2Z\" stroke-linejoin=\"round\"/><path d=\"M12 21v6\"/></svg>\n<span>Cedar team</span>\n</div>\n<span class=\"site-note\">Built for independent bike shops</span>\n</header>\n<main>\n<p class=\"eyebrow\">The people behind Cedar</p>\n<section aria-labelledby=\"profile-name\">\n<div class=\"profile\">\n<svg class=\"avatar\" viewBox=\"0 0 120 120\" role=\"img\" aria-label=\"Hand-drawn MC initials avatar\">\n<path d=\"M61 5C91 4 114 27 114 58c2 31-22 56-52 57C31 117 6 94 5 63 3 31 28 6 61 5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<path d=\"m25 77 2-35 14 24 13-25 2 35M91 47c-6-8-20-8-24 4-4 10-1 24 9 26 6 1 11-2 15-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M36 91c14 4 33 5 48-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\"/>\n</svg>\n<div class=\"identity\">\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\">Product designer <span style=\"color:var(--muted)\">at Cedar</span></p>\n</div>\n<button class=\"follow\" type=\"button\">\n<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M8 2v12M2 8h12\"/></svg>\nFollow\n</button>\n<div class=\"about\">\n<p class=\"bio\">I design practical tools that give independent bike shops more time for bikes and the people who ride them. Usually found turning workshop conversations into simpler everyday workflows.</p>\n<p class=\"availability\"><span aria-hidden=\"true\"></span>Open to feedback from shop teams</p>\n</div>\n</div>\n<dl class=\"stats\" aria-label=\"Maya at a glance\">\n<div><dd>12</dd><dt>Projects shipped</dt></div>\n<div><dd>8</dd><dt>Shop collaborators</dt></div>\n<div><dd>4</dd><dt>Years at Cedar</dt></div>\n</dl>\n</section>\n<section class=\"work\" aria-labelledby=\"work-title\">\n<div class=\"section-heading\">\n<h2 id=\"work-title\">Recent work</h2>\n<p class=\"count\">3 projects · selected work</p>\n</div>\n<ol class=\"work-list\">\n<li>\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div>\n<h3>Workshop booking, without the back-and-forth</h3>\n<p class=\"summary\">A simpler way for riders to book a repair, with the right details ready before the bike reaches the stand.</p>\n</div>\n<div class=\"project-meta\">\n<p class=\"status\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M8 4v4l3 2\"/></svg>In testing</p>\n<p class=\"progress\">Progress: 4 of 5 shop sessions complete</p>\n<p class=\"next\"><strong>Next:</strong> Refine service selection</p>\n</div>\n</article>\n</li>\n<li>\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div>\n<h3>Repair updates riders can trust</h3>\n<p class=\"summary\">Clear estimates and timely pickup messages that keep riders informed and the shop phone quieter.</p>\n</div>\n<div class=\"project-meta\">\n<p class=\"status\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"m5 8 2 2 4-4\"/></svg>Live in 8 shops</p>\n<p class=\"progress\">Progress: Rollout complete</p>\n<p class=\"next\"><strong>Next:</strong> Review rider feedback</p>\n</div>\n</article>\n</li>\n<li>\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div>\n<h3>The right part, right at hand</h3>\n<p class=\"summary\">A quick stock check for busy mechanics, connecting parts on the shelf to repairs in the queue.</p>\n</div>\n<div class=\"project-meta\">\n<p class=\"status\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><path d=\"m3 10 7-7 3 3-7 7H3v-3Z\"/><path d=\"m8 5 3 3\"/></svg>In design</p>\n<p class=\"progress\">Progress: First prototype ready</p>\n<p class=\"next\"><strong>Next:</strong> Test at the workbench</p>\n</div>\n</article>\n</li>\n</ol>\n</section>\n<footer>Designed alongside the shops that use it.</footer>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-profiles-03","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Dune. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Dune team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Dune team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Dune team</title>\n<style>\n:root{--ink:#29262a;--muted:#6e686e;--plum:#542e49;--line:#e3dedf;--paper:#fbfaf8;--tint:#f1ebef}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\na{color:inherit;text-underline-offset:5px}\nbutton{font:inherit}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner,main,footer{max-width:1064px;margin:auto;padding-left:40px;padding-right:40px}\n.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{font-size:25px;font-weight:750;letter-spacing:-1.2px;color:var(--plum)}\n.brand small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:22px;vertical-align:middle}\n.team-link{font-size:13px;color:var(--plum);font-weight:600;text-decoration:none;border-bottom:1px solid var(--plum);padding-bottom:3px}\nmain{padding-top:46px;padding-bottom:40px}\n.profile{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}\n.person{display:flex;gap:20px;align-items:center}\n.avatar{width:78px;height:78px;flex:none}\nh1,h2,h3,p{margin:0}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:52px;line-height:1.12;letter-spacing:-1.8px}\n.role{margin-top:7px;font-size:16px;color:var(--muted)}\n.role strong{font-weight:500;color:var(--ink)}\n.bio{max-width:540px;margin-top:24px;font-size:17px;line-height:1.65}\n.actions{display:flex;align-items:center;gap:18px;margin-top:22px;flex-wrap:wrap}\n.follow{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--plum);border-radius:5px;background:var(--plum);color:white;min-height:42px;padding:8px 21px;font-weight:600;cursor:pointer}\n.follow:hover{background:#43223a}\n.follow:focus-visible,a:focus-visible{outline:3px solid #a5879c;outline-offset:4px}\n.location{font-size:12px;color:var(--muted)}\n.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line)}\n.stats div+div{border-left:1px solid var(--line);padding-left:22px}\n.stats dt{font-size:12px;color:var(--muted)}\n.stats dd{margin:0 0 2px;font-size:25px;line-height:1.3;font-weight:500;font-variant-numeric:tabular-nums}\n.stats div{display:flex;flex-direction:column-reverse}\n.focus{background:var(--tint);padding:23px 22px;border:1px solid #e5dce2;border-radius:5px}\n.eyebrow{color:var(--plum);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}\n.focus h2{font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:26px;line-height:1.2;margin-top:12px;letter-spacing:-.4px}\n.focus p{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.65}\n.focus figure{margin:20px 0 0;padding-top:17px;border-top:1px solid #dcd0d8}\n.flow{display:block;width:100%;height:auto}\nfigcaption{font-size:11px;color:var(--muted);line-height:1.5;margin-top:8px}\n.work{margin-top:48px}\n.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:17px;border-bottom:1px solid var(--ink)}\n.section-heading h2{font-family:Georgia,\"Times New Roman\",serif;font-size:31px;font-weight:400;letter-spacing:-.6px}\n.section-heading p{font-size:12px;color:var(--muted)}\n.project{display:grid;grid-template-columns:36px minmax(0,1fr) 108px;gap:18px;padding:23px 0;border-bottom:1px solid var(--line)}\n.number{font-size:12px;color:#8a7f87;padding-top:4px;font-variant-numeric:tabular-nums}\n.project h3{font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.2px}\n.summary{font-size:14px;color:var(--muted);margin-top:5px;max-width:640px}\n.discipline{font-size:11px;color:var(--muted);margin-top:9px}\n.project-meta{text-align:right;font-size:11px;padding-top:2px}\n.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--plum)}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.status.pilot{color:#7a643b}\n.project-meta time{display:block;color:var(--muted);margin-top:7px}\nfooter{padding-top:18px;padding-bottom:26px;display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}\nfooter span:first-child{color:var(--plum);font-weight:600}\n@media(max-width:760px){\n.header-inner,main,footer{padding-left:24px;padding-right:24px}\n.header-inner{height:64px}\n.brand small{display:none}\nmain{padding-top:30px;padding-bottom:28px}\n.profile{grid-template-columns:1fr;gap:26px}\n.person{gap:15px}\n.avatar{width:60px;height:60px}\nh1{font-size:39px;letter-spacing:-1.3px}\n.role{font-size:14px;margin-top:5px}\n.bio{font-size:15px;line-height:1.65;margin-top:20px}\n.actions{gap:14px;margin-top:18px}\n.location{font-size:11px}\n.stats{margin-top:24px;padding-top:16px}\n.stats div+div{padding-left:16px}\n.stats dd{font-size:23px}\n.stats dt{font-size:11px}\n.focus{padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 124px;column-gap:16px}\n.focus .eyebrow{grid-column:1/-1}\n.focus h2{font-size:21px;margin-top:9px}\n.focus p{font-size:12px;margin-top:8px}\n.focus figure{grid-column:2;grid-row:2/4;align-self:center;margin:8px 0 0;padding:0;border:0}\n.focus figcaption{font-size:10px}\n.work{margin-top:32px}\n.section-heading{gap:10px;padding-bottom:13px}\n.section-heading h2{font-size:28px}\n.section-heading p{font-size:10px}\n.project{grid-template-columns:22px minmax(0,1fr);gap:10px;padding:20px 0}\n.project h3{font-size:16px}\n.summary{font-size:13px;line-height:1.6}\n.project-meta{grid-column:2;text-align:left;display:flex;align-items:center;gap:12px;padding:0}\n.project-meta time{margin:0}\n.discipline{margin-top:7px}\nfooter{font-size:10px;align-items:baseline}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n  <div class=\"header-inner\">\n    <div class=\"brand\">Dune <small>For independent bike shops</small></div>\n    <a class=\"team-link\" href=\"#profile\">Dune team</a>\n  </div>\n</header>\n<main>\n  <section class=\"profile\" id=\"profile\" aria-labelledby=\"name\">\n    <div>\n      <div class=\"person\">\n        <svg class=\"avatar\" viewBox=\"0 0 80 80\" role=\"img\" aria-label=\"Hand-drawn initials MC\">\n          <rect x=\"1\" y=\"1\" width=\"78\" height=\"78\" rx=\"39\" fill=\"#eae1e7\"/>\n          <g fill=\"none\" stroke=\"#542e49\" stroke-width=\"2.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M17 53 20 27 30 44 39 27 41 53\"/>\n            <path d=\"M63 30C49 20 43 36 47 47 50 55 58 56 65 50\"/>\n          </g>\n        </svg>\n        <div>\n          <h1 id=\"name\">Maya Chen</h1>\n          <p class=\"role\"><strong>Product designer</strong> at Dune</p>\n        </div>\n      </div>\n      <p class=\"bio\">I design practical tools for the people who keep bikes rolling. At Dune, I help independent shops spend less time on admin and more time with riders.</p>\n      <div class=\"actions\">\n        <button class=\"follow\" type=\"button\"><span aria-hidden=\"true\">+</span> Follow</button>\n        <span class=\"location\">Oakland, California · she/her</span>\n      </div>\n      <dl class=\"stats\" aria-label=\"Profile statistics\">\n        <div><dt>Projects shared</dt><dd>12</dd></div>\n        <div><dt>Followers</dt><dd>248</dd></div>\n        <div><dt>Years in design</dt><dd>6</dd></div>\n      </dl>\n    </div>\n    <aside class=\"focus\" aria-labelledby=\"focus-heading\">\n      <div class=\"eyebrow\">Current focus</div>\n      <h2 id=\"focus-heading\">A calmer<br>service desk.</h2>\n      <p>Clear handoffs, fewer missed notes and a repair queue the whole shop can trust.</p>\n      <figure>\n        <svg class=\"flow\" viewBox=\"0 0 236 58\" role=\"img\" aria-label=\"Repair handoff: intake, on the stand, then ready\">\n          <path d=\"M22 15H214\" stroke=\"#c6b5c0\" stroke-width=\"1.5\"/>\n          <g fill=\"#542e49\">\n            <circle cx=\"22\" cy=\"15\" r=\"5\"/>\n            <circle cx=\"118\" cy=\"15\" r=\"5\"/>\n            <circle cx=\"214\" cy=\"15\" r=\"5\"/>\n          </g>\n          <g fill=\"#542e49\" font-family=\"system-ui, sans-serif\" font-size=\"10\" text-anchor=\"middle\">\n            <text x=\"22\" y=\"43\">Intake</text>\n            <text x=\"118\" y=\"43\">On the stand</text>\n            <text x=\"214\" y=\"43\">Ready</text>\n          </g>\n        </svg>\n        <figcaption>One clear status, from drop-off to pickup.</figcaption>\n      </figure>\n    </aside>\n  </section>\n\n  <section class=\"work\" aria-labelledby=\"work-heading\">\n    <div class=\"section-heading\">\n      <h2 id=\"work-heading\">Recent work</h2>\n      <p>3 selected projects</p>\n    </div>\n    <article class=\"project\">\n      <span class=\"number\" aria-hidden=\"true\">01</span>\n      <div>\n        <h3>Repair queue, at a glance</h3>\n        <p class=\"summary\">A shared view of jobs, parts on order and promised pickup times, built for a busy service bench.</p>\n        <p class=\"discipline\">Workflow design · Service operations</p>\n      </div>\n      <div class=\"project-meta\">\n        <span class=\"status\">Shipped</span>\n        <time datetime=\"2025-05\">May 2025</time>\n      </div>\n    </article>\n    <article class=\"project\">\n      <span class=\"number\" aria-hidden=\"true\">02</span>\n      <div>\n        <h3>Parts lookup at the counter</h3>\n        <p class=\"summary\">Faster stock checks by size and compatibility, so staff can find the right part while talking to a rider.</p>\n        <p class=\"discipline\">Search &amp; inventory · Testing with 4 shops</p>\n      </div>\n      <div class=\"project-meta\">\n        <span class=\"status pilot\">In pilot</span>\n        <time datetime=\"2025-04\">Apr 2025</time>\n      </div>\n    </article>\n    <article class=\"project\">\n      <span class=\"number\" aria-hidden=\"true\">03</span>\n      <div>\n        <h3>A better handover at pickup</h3>\n        <p class=\"summary\">Plain-language repair notes that help any teammate explain the work done and what to watch for next.</p>\n        <p class=\"discipline\">Content design · Customer experience</p>\n      </div>\n      <div class=\"project-meta\">\n        <span class=\"status\">Shipped</span>\n        <time datetime=\"2025-03\">Mar 2025</time>\n      </div>\n    </article>\n  </section>\n</main>\n<footer>\n  <span>Dune</span>\n  <span>Thoughtful tools for the everyday bike shop.</span>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-profiles-04","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Elm. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: calm and spacious; use forest green as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Elm team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Elm team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Elm team</title>\n<style>\n:root{--bg:#f8f9f5;--ink:#24332b;--muted:#687269;--green:#28543d;--line:#dce2d8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton{font:inherit}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1040px;margin:auto;min-height:80px;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:650;letter-spacing:-.4px}\n.brand svg{width:30px;height:34px;color:var(--green)}\n.community{color:var(--muted);font-size:13px}\nmain{max-width:912px;margin:0 auto;padding:48px 32px 40px}\n.profile{display:grid;grid-template-columns:88px minmax(0,1fr) auto;column-gap:24px;align-items:center}\n.avatar{width:88px;height:88px;display:block}\nh1{font-size:40px;line-height:1.15;letter-spacing:-1.5px;font-weight:650;margin:0 0 7px}\n.role{margin:0;font-size:16px;color:var(--muted)}\n.role span{color:var(--ink)}\n.follow{min-height:44px;padding:10px 25px;border:1px solid var(--green);border-radius:6px;background:var(--green);color:white;font-weight:600;cursor:pointer}\n.follow:hover{background:#1e422f}\n.follow:focus-visible{outline:3px solid #8eaf99;outline-offset:4px}\n.bio{grid-column:2/4;max-width:640px;margin:20px 0 0;font-size:16px;line-height:1.65}\n.location{grid-column:2/4;color:var(--muted);font-size:13px;margin:12px 0 0}\n.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:32px 0 36px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.stat{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:0 16px}\n.stat:first-child{justify-content:flex-start;padding-left:0}\n.stat:last-child{border:0}\n.stat{border-right:1px solid var(--line)}\n.stat dt{font-size:13px;color:var(--muted);order:2}\n.stat dd{font-size:26px;font-weight:600;letter-spacing:-.7px;line-height:1.2;margin:0}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}\nh2{font-size:22px;letter-spacing:-.5px;font-weight:650;margin:0}\n.project-count{font-size:13px;color:var(--muted)}\n.work-list{list-style:none;padding:0;margin:0}\n.work-list>li{border-bottom:1px solid var(--line)}\n.project{display:grid;grid-template-columns:32px minmax(0,1fr);gap:18px;padding:24px 0}\n.project-number{font-size:12px;color:#839083;font-variant-numeric:tabular-nums;padding-top:5px}\n.project-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}\nh3{font-size:18px;font-weight:600;letter-spacing:-.3px;line-height:1.35;margin:0}\n.status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:3px 9px;border-radius:4px;font-size:11px;font-weight:600;line-height:1.5}\n.status:before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.live{color:#315f42;background:#e6eee4}\n.pilot{color:#77602c;background:#f0ecdd}\n.progress{color:#5b6860;background:#e9ede7}\n.summary{max-width:595px;margin:8px 0 9px;color:#4e5b51;line-height:1.6}\n.secondary{margin:0;max-width:610px;color:var(--muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere}\nfooter{padding-top:22px;font-size:12px;color:var(--muted)}\n@media(max-width:600px){\n.header-inner{min-height:68px;padding:16px 20px;gap:16px}\n.brand{font-size:17px;gap:8px;white-space:nowrap}\n.brand svg{width:26px;height:29px}\n.community{font-size:11px;max-width:115px;text-align:right}\nmain{padding:28px 20px 28px}\n.profile{grid-template-columns:60px minmax(0,1fr) auto;column-gap:12px}\n.avatar{width:60px;height:60px}\nh1{font-size:29px;letter-spacing:-1px;margin-bottom:5px}\n.role{font-size:13px}\n.role span{display:none}\n.follow{padding:10px 13px;font-size:13px}\n.bio{grid-column:1/-1;font-size:15px;line-height:1.6;margin-top:20px}\n.location{grid-column:1/-1;margin-top:10px;font-size:12px}\n.stats{margin:24px 0 28px;padding:18px 0}\n.stat,.stat:first-child{flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0 8px;text-align:center}\n.stat dd{font-size:24px}\n.stat dt{font-size:11px}\nh2{font-size:21px}\n.project-count{font-size:12px}\n.project{grid-template-columns:20px minmax(0,1fr);gap:10px;padding:21px 0}\n.project-heading{gap:8px}\nh3{font-size:17px}\n.status{font-size:10px;padding:3px 7px;gap:4px}\n.summary{font-size:14px;line-height:1.55;margin-top:9px}\n.secondary{font-size:11px}\nfooter{font-size:11px;padding-top:18px}\n}\n@media(max-width:350px){\n.profile{grid-template-columns:52px minmax(0,1fr)}\n.avatar{width:52px;height:52px}\n.follow{grid-column:2;justify-self:start;margin-top:14px}\nh1{font-size:27px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n  <div class=\"header-inner\">\n    <div class=\"brand\">\n      <svg viewBox=\"0 0 32 36\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M16 32V15M16 24C7 24 3 18 4 10c8 0 13 5 12 14ZM16 17C15 8 20 3 28 3c1 8-4 14-12 14Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <span>Elm team</span>\n    </div>\n    <span class=\"community\">A community food co-op</span>\n  </div>\n</header>\n<main id=\"profile\">\n  <section class=\"profile\" aria-labelledby=\"profile-name\">\n    <svg class=\"avatar\" viewBox=\"0 0 88 88\" role=\"img\" aria-label=\"Drawn MC initials avatar\">\n      <path d=\"M44 3C66 1 85 21 84 44c1 23-17 40-40 41C20 85 3 67 3 44 2 21 20 4 44 3Z\" fill=\"#e7eddf\" stroke=\"#a7b69b\" stroke-width=\"1.2\"/>\n      <path d=\"M12 49c-3-17 6-32 20-36M55 77c12-3 20-11 22-23\" fill=\"none\" stroke=\"#b5c2aa\" stroke-width=\"1.4\" stroke-linecap=\"round\"/>\n      <text x=\"44\" y=\"55\" text-anchor=\"middle\" fill=\"#35543b\" font-family=\"Georgia,serif\" font-size=\"31\" font-style=\"italic\" letter-spacing=\"-3\">MC</text>\n    </svg>\n    <div>\n      <h1 id=\"profile-name\">Maya Chen</h1>\n      <p class=\"role\">Product designer <span>at Elm</span></p>\n    </div>\n    <button class=\"follow\" type=\"button\">Follow</button>\n    <p class=\"bio\">I design thoughtful ways for neighbors to shop, share, and take part in the co-op. Good food and local connection are always at the heart.</p>\n    <p class=\"location\">Portland, Oregon · Member since 2022</p>\n  </section>\n\n  <dl class=\"stats\" aria-label=\"Maya’s community activity\">\n    <div class=\"stat\"><dt>Projects shared</dt><dd>12</dd></div>\n    <div class=\"stat\"><dt>Followers</dt><dd>248</dd></div>\n    <div class=\"stat\"><dt>Grower partners</dt><dd>8</dd></div>\n  </dl>\n\n  <section aria-labelledby=\"recent-work\">\n    <div class=\"section-heading\">\n      <h2 id=\"recent-work\">Recent work</h2>\n      <span class=\"project-count\">3 projects</span>\n    </div>\n    <ol class=\"work-list\">\n      <li>\n        <article class=\"project\">\n          <span class=\"project-number\" aria-hidden=\"true\">01</span>\n          <div>\n            <div class=\"project-heading\">\n              <h3>Your weekly harvest</h3>\n              <span class=\"status live\">Live</span>\n            </div>\n            <p class=\"summary\">A simpler way to choose a produce box, swap items, and plan around what’s in season.</p>\n            <p class=\"secondary\">Member experience · Community-supported seasonal produce subscriptions</p>\n          </div>\n        </article>\n      </li>\n      <li>\n        <article class=\"project\">\n          <span class=\"project-number\" aria-hidden=\"true\">02</span>\n          <div>\n            <div class=\"project-heading\">\n              <h3>Good shifts, shared</h3>\n              <span class=\"status pilot\">Pilot</span>\n            </div>\n            <p class=\"summary\">Helping members find volunteer shifts that fit their skills, schedules, and access needs.</p>\n            <p class=\"secondary\">Co-op participation · Volunteer scheduling</p>\n          </div>\n        </article>\n      </li>\n      <li>\n        <article class=\"project\">\n          <span class=\"project-number\" aria-hidden=\"true\">03</span>\n          <div>\n            <div class=\"project-heading\">\n              <h3>Know your growers</h3>\n              <span class=\"status progress\">In progress</span>\n            </div>\n            <p class=\"summary\">Bringing local farm stories and growing practices closer to the food on our shelves.</p>\n            <p class=\"secondary\">Food transparency · Producer profiles</p>\n          </div>\n        </article>\n      </li>\n    </ol>\n  </section>\n  <footer>Made with our members, for our members.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-profiles-05","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Fjord. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: compact but readable; use slate blue as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Fjord team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Fjord team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Fjord team</title>\n<style>\n:root{color-scheme:light;--paper:#f7f5f0;--ink:#253443;--muted:#657079;--line:#dcded8;--blue:#506784;--soft:#e8edf1}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1000px;margin:auto;min-height:76px;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-size:27px;font-weight:750;letter-spacing:-1.2px}\n.brand span{color:var(--blue)}\n.community{font-size:13px;color:var(--muted)}\nmain{max-width:1000px;margin:0 auto;padding:36px 32px 40px}\n.eyebrow{margin:0 0 24px;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}\n.profile{display:grid;grid-template-columns:104px minmax(0,1fr) 220px;gap:26px;align-items:start}\n.avatar{width:104px;height:104px;display:block}\nh1{margin:0;font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-1.2px}\n.role{margin:8px 0 0;font-size:16px}\n.role span{color:var(--muted)}\n.bio{max-width:470px;margin:15px 0 0;color:#4f5b64}\n.location{margin:12px 0 0;color:var(--muted);font-size:12px}\n.follow-area{padding-top:5px;display:flex;align-items:center;gap:13px}\nbutton{border:1px solid var(--ink);border-radius:5px;background:var(--ink);color:white;font:inherit;font-weight:650;padding:10px 21px;min-height:44px;cursor:pointer}\nbutton:hover{background:var(--blue);border-color:var(--blue)}\nbutton:focus-visible{outline:3px solid var(--blue);outline-offset:4px}\n.hint{margin:0;font-size:12px;line-height:1.5;color:var(--muted);max-width:100px}\n.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0 0;padding:21px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.stat{padding:0 25px;border-left:1px solid var(--line)}\n.stat:first-child{padding-left:0;border:0}\n.stat dt{font-size:12px;color:var(--muted)}\n.stat dd{margin:0 0 2px;font-size:26px;font-weight:650;line-height:1.2;letter-spacing:-.7px;font-variant-numeric:tabular-nums}\n.work{margin-top:30px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:6px}\nh2{font-size:21px;letter-spacing:-.4px;margin:0}\n.update{margin:0;color:var(--muted);font-size:12px;white-space:nowrap}\n.section-intro{margin:0 0 14px;color:var(--muted);font-size:13px}\n.project{display:grid;grid-template-columns:35px minmax(0,1fr) 108px;gap:16px;padding:23px 0;border-top:1px solid var(--line)}\n.number{font-size:12px;font-weight:600;color:var(--blue);padding-top:3px;font-variant-numeric:tabular-nums}\nh3{font-size:17px;font-weight:650;letter-spacing:-.2px;line-height:1.35;margin:0}\n.summary{margin:7px 0 0;color:#58646c;max-width:620px;font-size:14px}\n.meta{text-align:right}\n.status{display:inline-flex;align-items:center;gap:6px;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:650;white-space:nowrap;background:var(--soft);color:#415979}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.status.live{background:#e6ece3;color:#4e6547}\n.status.research{background:#ece8df;color:#716347}\n.category{display:block;font-size:11px;color:var(--muted);margin-top:7px}\nfooter{margin-top:3px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}\n@media(max-width:650px){\n.header-inner{min-height:61px;padding:12px 22px}\n.brand{font-size:24px}\n.community{font-size:11px;max-width:140px;text-align:right}\nmain{padding:24px 22px 25px}\n.eyebrow{margin-bottom:18px;font-size:11px}\n.profile{grid-template-columns:72px minmax(0,1fr);gap:0 16px}\n.avatar{width:72px;height:72px}\nh1{font-size:29px;letter-spacing:-.9px}\n.role{font-size:14px;margin-top:5px}\n.identity{display:contents}\n.name-role{align-self:center}\n.bio{grid-column:1/-1;font-size:14px;margin-top:17px}\n.location{grid-column:1/-1;margin-top:8px}\n.follow-area{grid-column:1/-1;padding-top:17px;gap:14px}\n.hint{max-width:190px;font-size:12px}\nbutton{padding:9px 25px}\n.stats{margin-top:22px;padding:16px 0}\n.stat{padding:0 15px}\n.stat dd{font-size:23px}\n.stat dt{font-size:11px}\n.work{margin-top:23px}\nh2{font-size:20px}\n.update{font-size:10px}\n.section-heading{gap:8px}\n.section-intro{font-size:12px;margin:5px 0 13px}\n.project{grid-template-columns:22px minmax(0,1fr);gap:0 10px;padding:17px 0}\nh3{font-size:16px}\n.summary{font-size:13px;margin-top:5px;line-height:1.5}\n.meta{grid-column:2;text-align:left;margin-top:9px;display:flex;align-items:center;gap:10px}\n.category{margin:0;font-size:10px}\n.status{font-size:10px;padding:2px 6px}\nfooter{font-size:11px;padding-top:13px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">Fjord<span>.</span></div>\n<div class=\"community\">Your community food co-op</div>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">Fjord team</p>\n<section class=\"profile\" aria-labelledby=\"profile-name\">\n<svg class=\"avatar\" viewBox=\"0 0 104 104\" role=\"img\" aria-label=\"Hand-drawn MC initials for Maya Chen\">\n<rect x=\"1\" y=\"1\" width=\"102\" height=\"102\" rx=\"28\" fill=\"#e7e9e3\"/>\n<path d=\"M23 66 25 36 37 55 47 35 48 66 M79 39 C61 27 52 48 58 61 C62 69 73 70 81 61\" fill=\"none\" stroke=\"#506784\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M24 78 Q50 84 79 75\" fill=\"none\" stroke=\"#a4afa7\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>\n<div class=\"identity\">\n<div class=\"name-role\">\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\">Product designer <span>at Fjord</span></p>\n</div>\n<p class=\"bio\">Making everyday co-op life a little easier—from choosing a seasonal basket to finding a volunteer shift. Good design starts with listening to our neighbors.</p>\n<p class=\"location\">Portland, OR · Co-op member since 2021</p>\n</div>\n<div class=\"follow-area\">\n<button type=\"button\" aria-describedby=\"follow-hint\">Follow</button>\n<p class=\"hint\" id=\"follow-hint\">Keep up with Maya’s co-op projects.</p>\n</div>\n</section>\n\n<dl class=\"stats\" aria-label=\"Maya’s community contributions\">\n<div class=\"stat\"><dd>12</dd><dt>Co-op projects</dt></div>\n<div class=\"stat\"><dd>248</dd><dt>Followers</dt></div>\n<div class=\"stat\"><dd>42</dd><dt>Volunteer hours</dt></div>\n</dl>\n\n<section class=\"work\" aria-labelledby=\"work-title\">\n<div class=\"section-heading\">\n<h2 id=\"work-title\">Recent work</h2>\n<p class=\"update\">Updated 3 days ago</p>\n</div>\n<p class=\"section-intro\">Small improvements for a more connected co-op.</p>\n\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div>\n<h3>A clearer weekly basket</h3>\n<p class=\"summary\">Helping members see what’s in season, swap items and plan meals before their weekly pickup.</p>\n</div>\n<div class=\"meta\"><span class=\"status\">In pilot</span><span class=\"category\">Member shopping</span></div>\n</article>\n\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div>\n<h3>Volunteer shifts, simplified</h3>\n<p class=\"summary\">An easier way to find an open shift, understand the role and make time to lend a hand.</p>\n</div>\n<div class=\"meta\"><span class=\"status live\">Live</span><span class=\"category\">Volunteering</span></div>\n</article>\n\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div>\n<h3>Know your local growers</h3>\n<p class=\"summary\">Bringing farm stories and growing practices closer to the food on our shelves.</p>\n</div>\n<div class=\"meta\"><span class=\"status research\">Research</span><span class=\"category\">Grower connections</span></div>\n</article>\n</section>\n<footer>Better food. Stronger connections. Built together.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-profiles-06","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Grove. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Grove team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Grove team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Grove team</title>\n<style>\n:root{--paper:#f6f7f5;--surface:#ecefeb;--ink:#28342f;--muted:#65706a;--line:#d9ded8;--accent:#a34e38}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}\na{color:inherit;text-decoration:none}\nbutton{font:inherit}\nbutton:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner,main,footer{width:min(1080px,calc(100% - 80px));margin-inline:auto}\n.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:35px;letter-spacing:-1.5px}\n.brand svg{width:27px;height:32px;color:var(--accent)}\n.header-right{display:flex;align-items:center;gap:35px}\n.header-right p{font-size:12px;color:var(--muted);margin:0}\n.header-right a{font-size:14px;font-weight:600;border-bottom:2px solid var(--accent);padding-block:28px}\nmain{padding-top:35px}\n.eyebrow{margin:0 0 22px;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}\n.profile{display:grid;grid-template-columns:120px minmax(0,1fr) 150px;gap:15px 28px;padding-bottom:31px;border-bottom:1px solid var(--line)}\n.avatar{width:120px;height:120px;grid-row:1/3;border-radius:50%;background:#e9eae5}\n.avatar svg{display:block;width:100%;height:100%}\nh1,h2,h3,p{margin-top:0}\nh1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400}\nh1{font-size:54px;line-height:1.08;letter-spacing:-1.9px;margin-bottom:9px}\n.role{font-size:18px;margin-bottom:0}\n.role span{color:var(--muted)}\n.bio{grid-column:2;max-width:565px;margin:0;color:#4e5b54;font-size:15px;line-height:1.65}\n.actions{grid-column:3;grid-row:1/3;padding-top:8px;text-align:center}\n.follow{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:4px;min-height:43px;padding:9px 20px;font-weight:600;cursor:pointer}\n.follow:hover{background:#8d422f}\n.follow svg{width:16px;height:16px}\n.location{font-size:11px;line-height:1.5;color:var(--muted);margin:11px 0 0}\n.profile-bottom{grid-column:2/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:10px}\n.stats{display:flex;margin:0;gap:36px}\n.stats div{min-width:65px}\n.stats dt{font-size:11px;color:var(--muted);order:2}\n.stats dd{font-family:Georgia,serif;font-size:27px;line-height:1.2;margin:0 0 4px}\n.stats div{display:flex;flex-direction:column}\n.availability{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin:0 0 3px}\n.availability::before{content:\"\";width:6px;height:6px;border:1px solid var(--muted);border-radius:50%;flex-shrink:0}\n.content{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:58px;padding-top:30px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:5px}\nh2{font-size:29px;line-height:1.2;letter-spacing:-.6px;margin-bottom:0}\n.count{font-size:11px;color:var(--muted);white-space:nowrap}\n.projects{list-style:none;padding:0;margin:0}\n.project{display:grid;grid-template-columns:28px minmax(0,1fr);gap:13px;padding:22px 0;border-bottom:1px solid var(--line)}\n.number{font-family:Georgia,serif;color:var(--accent);font-size:16px;padding-top:1px}\nh3{font-size:17px;line-height:1.35;letter-spacing:-.2px;margin-bottom:7px;font-weight:600}\n.summary{font-size:13px;color:#59655e;line-height:1.65;margin-bottom:12px;max-width:530px}\n.project-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:10px;letter-spacing:.15px}\n.status{background:#e9ece7;padding:2px 7px;border-radius:3px;white-space:nowrap;color:#57635c}\n.notes h2{font-size:24px;padding-top:3px;margin-bottom:21px}\n.empty-state{background:var(--surface);padding:25px 23px 24px;border-radius:3px}\n.empty-state svg{width:33px;height:38px;color:#77817a;margin-bottom:18px;display:block}\n.empty-state h3{font-size:14px;margin-bottom:8px}\n.empty-state p{font-size:12px;line-height:1.75;color:var(--muted);margin-bottom:0}\n.note-caption{font-size:11px;color:var(--muted);padding:15px 1px;margin:0;line-height:1.65}\nfooter{display:flex;justify-content:space-between;gap:20px;padding-block:27px;color:var(--muted);font-size:10px;letter-spacing:.2px}\nfooter p{margin:0}\n@media(max-width:760px){\n.header-inner,main,footer{width:calc(100% - 40px)}\n.header-inner{min-height:68px}\n.brand{font-size:30px}\n.brand svg{width:23px}\n.header-right p{display:none}\n.header-right a{padding-block:22px;font-size:12px}\nmain{padding-top:27px}\n.eyebrow{margin-bottom:18px}\n.profile{grid-template-columns:76px minmax(0,1fr);gap:17px 17px;padding-bottom:25px}\n.avatar{width:76px;height:76px;grid-row:1}\nh1{font-size:37px;letter-spacing:-1.3px;margin:1px 0 7px}\n.role{font-size:14px}\n.bio{grid-column:1/-1;font-size:14px}\n.actions{grid-column:1/-1;grid-row:auto;display:flex;align-items:center;gap:19px;padding:0;text-align:left}\n.follow{width:125px;flex-shrink:0;min-height:42px;font-size:14px}\n.location{margin:0;font-size:11px}\n.profile-bottom{grid-column:1/-1;display:block;margin-top:4px}\n.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}\n.stats div{min-width:0}\n.stats dd{font-size:26px}\n.stats dt{font-size:11px}\n.availability{margin:20px 0 0;font-size:11px}\n.content{grid-template-columns:minmax(0,1fr);gap:27px;padding-top:25px}\nh2{font-size:27px}\n.project{gap:9px;grid-template-columns:23px minmax(0,1fr);padding:21px 0}\nh3{font-size:16px}\n.summary{font-size:13px}\n.project-meta{font-size:10px;gap:8px}\n.notes h2{font-size:24px;margin-bottom:14px}\n.empty-state{padding:20px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 16px}\n.empty-state svg{grid-row:1/3;width:29px;margin:2px 0 0}\n.empty-state h3{margin-bottom:5px}\n.empty-state p{grid-column:2}\n.note-caption{padding-top:11px}\nfooter{border-top:1px solid var(--line);margin-top:14px;flex-direction:column;gap:5px;padding-block:20px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<a class=\"brand\" href=\"#profile\" aria-label=\"Grove, Maya Chen's profile\">\n<svg viewBox=\"0 0 30 36\" fill=\"none\" aria-hidden=\"true\"><path d=\"M15 33V15M15 25C4 24 2 17 3 10c9 0 14 5 12 15ZM15 18C14 8 20 3 27 3c1 9-4 15-12 15Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\ngrove\n</a>\n<div class=\"header-right\">\n<p>A community food co-op</p>\n<nav aria-label=\"Main navigation\"><a href=\"#profile\" aria-current=\"page\">Grove team</a></nav>\n</div>\n</div>\n</header>\n<main id=\"profile\">\n<p class=\"eyebrow\">Meet the people behind the co-op</p>\n<section class=\"profile\" aria-labelledby=\"profile-name\">\n<div class=\"avatar\">\n<svg viewBox=\"0 0 120 120\" role=\"img\" aria-label=\"Hand-drawn MC initials avatar\">\n<path d=\"M98 27C85 11 56 9 36 19 14 30 9 57 20 79c9 22 32 31 54 23 23-7 35-27 31-48\" fill=\"none\" stroke=\"#c6ccc3\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n<path d=\"m28 78 5-38 13 25 14-26-2 39M91 44c-10-9-23-1-24 14-2 16 9 25 21 17\" fill=\"none\" stroke=\"#a34e38\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M44 92c12 2 24 1 34-4\" fill=\"none\" stroke=\"#a34e38\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n</svg>\n</div>\n<div class=\"intro\">\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\">Product designer <span>at Grove</span></p>\n</div>\n<p class=\"bio\">I design thoughtful tools for the people who grow, shop and volunteer at Grove. Right now, I’m making our weekly produce orders easier for every household.</p>\n<div class=\"actions\">\n<button type=\"button\" class=\"follow\"><svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M10 4v12M4 10h12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>Follow</button>\n<p class=\"location\">Oakland, California<br>Member since 2021</p>\n</div>\n<div class=\"profile-bottom\">\n<dl class=\"stats\">\n<div><dt>Projects</dt><dd>3</dd></div>\n<div><dt>Collaborators</dt><dd>12</dd></div>\n<div><dt>Years at Grove</dt><dd>4</dd></div>\n</dl>\n<p class=\"availability\">Open to co-op collaborations</p>\n</div>\n</section>\n\n<div class=\"content\">\n<section aria-labelledby=\"work-title\">\n<div class=\"section-heading\"><h2 id=\"work-title\">Recent work</h2><span class=\"count\">3 projects</span></div>\n<ol class=\"projects\">\n<li class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>A simpler weekly basket</h3>\n<p class=\"summary\">A flexible order flow that helps members choose local produce and skip a week when they need to.</p>\n<div class=\"project-meta\"><span>Member shopping · 2025</span><span class=\"status\">In pilot</span></div>\n</div>\n</li>\n<li class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Pickup, without the guesswork</h3>\n<p class=\"summary\">Clear pickup windows and friendly reminders for busy households and the volunteers packing their orders.</p>\n<div class=\"project-meta\"><span>Co-op operations · 2025</span><span class=\"status\">In use</span></div>\n</div>\n</li>\n<li class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>A voice for every member</h3>\n<p class=\"summary\">Listening sessions and a simpler feedback form to bring member ideas into our seasonal buying decisions.</p>\n<div class=\"project-meta\"><span>Member research · 2024</span><span class=\"status\">Research complete</span></div>\n</div>\n</li>\n</ol>\n</section>\n\n<aside class=\"notes\" aria-labelledby=\"notes-title\">\n<h2 id=\"notes-title\">Field notes</h2>\n<div class=\"empty-state\">\n<svg viewBox=\"0 0 34 40\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 4h21v32H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z\" stroke=\"currentColor\" stroke-width=\"1.2\"/><path d=\"M10 4v32M15 13h9M15 19h7M2 12h5M2 20h5M2 28h5\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg>\n<h3>No field notes yet</h3>\n<p>Maya hasn’t published any notes. This is a space for observations from member interviews and days on the shop floor.</p>\n</div>\n<p class=\"note-caption\">Small learnings from building a better co-op, together.</p>\n</aside>\n</div>\n</main>\n<footer>\n<p>Member-owned. Neighbor-led.</p>\n<p>Good food starts with community.</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-profiles-07","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Harbor. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: practical and understated; use deep plum as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Harbor team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Harbor team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Harbor team</title>\n<style>\n:root{color-scheme:light;--paper:#faf9f7;--ink:#30262e;--plum:#633d58;--muted:#786b73;--line:#e1dade;--wash:#f0ebee}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1040px;margin:auto;padding:21px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:650;letter-spacing:-.4px}\n.brand svg{width:29px;height:29px;color:var(--plum)}\n.community{font-size:13px;color:var(--muted)}\nmain{max-width:944px;margin:48px auto 0;padding:0 32px}\n.eyebrow{margin:0 0 24px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase}\n.profile-top{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:24px}\n.avatar{width:96px;height:96px;color:var(--plum)}\nh1{margin:0 0 5px;font-size:42px;line-height:1.1;font-weight:650;letter-spacing:-1.6px}\n.role{margin:0;font-size:17px;color:var(--muted)}\n.role strong{color:var(--ink);font-weight:500}\nbutton{border:1px solid var(--plum);border-radius:5px;padding:11px 20px;background:var(--plum);color:var(--paper);font:600 14px system-ui;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px}\nbutton:hover{background:var(--ink)}\nbutton:focus-visible,a:focus-visible{outline:3px solid var(--plum);outline-offset:4px}\nbutton span{font-size:19px;font-weight:400;line-height:1}\n.profile-copy{margin:23px 0 0 120px;max-width:570px}\n.bio{font-size:16px;line-height:1.65;margin:0 0 13px}\n.member-detail{margin:0;color:var(--muted);font-size:12px;line-height:1.5}\n.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0 0;padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.stats div{padding:0 26px;border-left:1px solid var(--line)}\n.stats div:first-child{padding-left:0;border-left:0}\n.stats dt{font-size:12px;color:var(--muted);margin-top:5px}\n.stats dd{font-size:25px;font-weight:550;letter-spacing:-.6px;margin:0;line-height:1.2}\n.work{margin-top:36px}\n.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:6px}\nh2{font-size:22px;letter-spacing:-.5px;font-weight:650;margin:0}\n.section-heading p{font-size:12px;color:var(--muted);margin:0}\n.project{display:grid;grid-template-columns:88px minmax(0,1fr);gap:24px;align-items:start;padding:25px 0;border-bottom:1px solid var(--line)}\n.miniature{width:88px;height:88px;display:block;color:var(--plum);background:var(--wash);border-radius:5px}\nh3{font-size:18px;line-height:1.4;letter-spacing:-.25px;margin:0 0 6px;font-weight:600}\n.summary{font-size:14px;line-height:1.6;max-width:580px;margin:0 0 11px;color:var(--muted)}\n.project-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;font-size:11px;color:var(--muted);line-height:1.4}\n.status{color:var(--plum);display:inline-flex;align-items:center;gap:6px;font-weight:600}\n.status:before{content:\"\";width:5px;height:5px;background:var(--plum);border-radius:50%}\n.status.pilot:before{background:transparent;border:1px solid var(--plum);width:6px;height:6px}\nfooter{max-width:944px;margin:0 auto;padding:23px 32px 32px;color:var(--muted);font-size:11px;line-height:1.6}\n@media(max-width:600px){\n.header-inner{padding:17px 24px;gap:18px}\n.brand{font-size:15px;gap:8px;white-space:nowrap}\n.brand svg{width:25px;height:25px}\n.community{font-size:10px;max-width:100px;text-align:right;line-height:1.4}\nmain{padding:0 24px;margin-top:30px}\n.eyebrow{margin-bottom:21px;font-size:10px}\n.profile-top{grid-template-columns:68px minmax(0,1fr);gap:13px 18px;align-items:start}\n.avatar{width:68px;height:68px;grid-row:1 / 3}\nh1{font-size:31px;letter-spacing:-1px;margin-bottom:6px}\n.role{font-size:14px;line-height:1.5}\nbutton{grid-column:2;justify-self:start;padding:9px 17px}\n.profile-copy{margin:23px 0 0}\n.bio{font-size:15px;line-height:1.65}\n.member-detail{font-size:11px}\n.stats{margin-top:24px;padding:20px 0}\n.stats div{padding:0 14px}\n.stats dd{font-size:23px}\n.stats dt{font-size:11px;line-height:1.5}\n.work{margin-top:29px}\nh2{font-size:21px}\n.section-heading p{font-size:10px}\n.project{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:23px 0}\n.miniature{width:56px;height:56px}\nh3{font-size:16px;line-height:1.4}\n.summary{font-size:13px;line-height:1.6;margin-bottom:10px}\n.project-meta{font-size:10px;gap:6px 11px}\nfooter{padding:20px 24px 28px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M5 14h22l-3 13H8L5 14Zm5 0 6-9 6 9M12 19v4m8-4v4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n<span>Harbor team</span>\n</div>\n<span class=\"community\">Community food co-op</span>\n</div>\n</header>\n<main>\n<section aria-labelledby=\"profile-name\">\n<p class=\"eyebrow\">People behind the co-op</p>\n<div class=\"profile-top\">\n<svg class=\"avatar\" viewBox=\"0 0 96 96\" role=\"img\" aria-label=\"Hand-drawn MC initials avatar\">\n<circle cx=\"48\" cy=\"48\" r=\"46\" fill=\"#f0ebee\"/>\n<path d=\"M23 63 25 34 36 51 47 33 48 63M73 37c-4-5-13-5-17 2-4 6-4 15 0 20 4 6 12 6 18 1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M29 74c11 3 26 3 38-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n</svg>\n<div>\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\"><strong>Product designer</strong> at Harbor</p>\n</div>\n<button type=\"button\"><span aria-hidden=\"true\">+</span> Follow</button>\n</div>\n<div class=\"profile-copy\">\n<p class=\"bio\">I design simple tools that make co-op life a little easier. Working with members and volunteers to connect good food with the people who share it.</p>\n<p class=\"member-detail\">Brooklyn, NY &nbsp;·&nbsp; Co-op member since 2021</p>\n</div>\n<dl class=\"stats\" aria-label=\"Community activity\">\n<div><dd>12</dd><dt>Projects shared</dt></div>\n<div><dd>8</dd><dt>Collaborators</dt></div>\n<div><dd>146</dd><dt>Followers</dt></div>\n</dl>\n</section>\n<section class=\"work\" aria-labelledby=\"recent-work\">\n<div class=\"section-heading\">\n<h2 id=\"recent-work\">Recent work</h2>\n<p>3 selected projects</p>\n</div>\n<article class=\"project\">\n<svg class=\"miniature\" viewBox=\"0 0 88 88\" role=\"img\" aria-label=\"Pickup calendar with Wednesday selected\">\n<rect x=\"18\" y=\"20\" width=\"52\" height=\"49\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n<path d=\"M18 33h52M30 17v7m28-7v7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n<g fill=\"currentColor\" font-family=\"system-ui,sans-serif\" font-size=\"8\" text-anchor=\"middle\"><text x=\"29\" y=\"47\">M</text><text x=\"44\" y=\"47\">T</text></g>\n<rect x=\"53\" y=\"38\" width=\"13\" height=\"14\" rx=\"3\" fill=\"currentColor\"/>\n<text x=\"59.5\" y=\"48\" fill=\"#faf9f7\" font-family=\"system-ui,sans-serif\" font-size=\"8\" text-anchor=\"middle\">W</text>\n<path d=\"M26 59h13m7 0h16\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n</svg>\n<div>\n<h3>Pickup windows that fit real life</h3>\n<p class=\"summary\">A clearer way to choose a collection time, with fewer missed pickups and a more manageable week for volunteer crews.</p>\n<div class=\"project-meta\"><span class=\"status\">In use</span><span>Member experience</span><time datetime=\"2025-05\">May 2025</time></div>\n</div>\n</article>\n<article class=\"project\">\n<svg class=\"miniature\" viewBox=\"0 0 88 88\" role=\"img\" aria-label=\"Seasonal produce share with six to eight items\">\n<path d=\"M24 43c-7-10 3-20 9-12m7 12c-3-15 3-23 9-22 6 1 4 15-1 22m7 0c-1-10 6-14 10-10 4 5 0 10-2 12M19 44h50l-5 20H24l-5-20Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linejoin=\"round\"/>\n<path d=\"M30 49v9m14-9v9m14-9v9\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n<text x=\"44\" y=\"77\" fill=\"currentColor\" font-family=\"system-ui,sans-serif\" font-size=\"8\" text-anchor=\"middle\">6–8 items</text>\n</svg>\n<div>\n<h3>Making the seasonal share easier to plan around</h3>\n<p class=\"summary\">An at-a-glance preview of what’s in the weekly produce box, plus practical swaps for different households.</p>\n<div class=\"project-meta\"><span class=\"status pilot\">Member pilot</span><span>Food &amp; planning</span><time datetime=\"2025-04\">Apr 2025</time></div>\n</div>\n</article>\n<article class=\"project\">\n<svg class=\"miniature\" viewBox=\"0 0 88 88\" role=\"img\" aria-label=\"Three-step new-member welcome guide\">\n<rect x=\"23\" y=\"16\" width=\"42\" height=\"57\" rx=\"2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n<path d=\"M31 27h26M31 32h17\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\"/>\n<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.1\"><circle cx=\"33\" cy=\"43\" r=\"2\"/><circle cx=\"33\" cy=\"53\" r=\"2\"/><circle cx=\"33\" cy=\"63\" r=\"2\"/><path d=\"M40 43h16M40 53h12M40 63h16\"/></g>\n</svg>\n<div>\n<h3>A warmer welcome</h3>\n<p class=\"summary\">A short guide to your first shop, your first volunteer shift, and finding your place in the co-op.</p>\n<div class=\"project-meta\"><span class=\"status\">Published</span><span>New-member guide</span><time datetime=\"2025-03\">Mar 2025</time></div>\n</div>\n</article>\n</section>\n</main>\n<footer>Built with our members, for our members.</footer>\n</body>\n</html>"}]}
{"id":"sft-profiles-08","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Isle. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: calm and spacious; use forest green as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Isle team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Isle team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Isle team</title>\n<style>\n:root{--paper:#fafaf6;--ink:#252e29;--muted:#667069;--green:#28563f;--line:#dce1d9;--wash:#f0f3ec}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.6}\nbutton,a{-webkit-tap-highlight-color:transparent}\na{color:inherit;text-underline-offset:4px}\nbutton:focus-visible,a:focus-visible{outline:3px solid #81a38b;outline-offset:5px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1080px;margin:auto;min-height:78px;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.3px}\n.brand svg{width:27px;height:29px;color:var(--green)}\n.header-note{color:var(--muted);font-size:12px}\nmain{max-width:1080px;margin:auto;padding:52px 28px 48px}\n.profile{display:grid;grid-template-columns:90px minmax(0,1fr) auto;column-gap:26px;align-items:start}\n.avatar{width:90px;height:90px;grid-row:1 / 3}\n.eyebrow{margin:0 0 8px;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:52px;font-weight:400;line-height:1.12;letter-spacing:-1.7px;margin:0 0 9px}\n.role{margin:0;font-size:16px}\n.role span{color:var(--muted)}\n.follow{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--green);border-radius:4px;background:var(--green);color:white;min-height:44px;padding:10px 23px;font:600 14px system-ui;cursor:pointer;margin-top:27px}\n.follow:hover{background:#204632}\n.follow svg{width:16px;height:16px}\n.bio{grid-column:2 / 4;max-width:590px;margin:22px 0 0;font-size:17px;line-height:1.7;color:#505d54}\n.stats{grid-column:2 / 4;display:flex;gap:49px;margin:27px 0 0;padding:0}\n.stats div{min-width:0}\n.stats dt{font-size:12px;color:var(--muted)}\n.stats dd{margin:0 0 1px;font-size:24px;font-weight:500;line-height:1.35;font-variant-numeric:tabular-nums}\n.content{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:64px;margin-top:43px;padding-top:31px;border-top:1px solid var(--line)}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:9px}\nh2{font-family:Georgia,\"Times New Roman\",serif;font-size:27px;font-weight:400;line-height:1.3;margin:0;letter-spacing:-.5px}\n.section-note{font-size:12px;color:var(--muted)}\n.projects{list-style:none;padding:0;margin:0}\n.project{padding:22px 0;border-bottom:1px solid var(--line)}\n.project:last-child{border-bottom:0;padding-bottom:0}\n.project-top{display:flex;align-items:center;gap:12px;margin-bottom:9px}\n.number{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:1px}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--green)}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.status.pilot{color:#7a6844}\n.status.progress{color:#667069}\n.status.progress::before{background:transparent;border:1px solid currentColor}\nh3{margin:0 0 7px;font-size:18px;font-weight:550;line-height:1.4;letter-spacing:-.25px}\n.project p{margin:0;color:var(--muted);font-size:14px;line-height:1.65;max-width:530px}\n.project .project-meta{margin-top:11px;font-size:11px;color:#747d76}\n.details{align-self:start;background:var(--wash);padding:22px 23px 24px;border-top:2px solid #98ad99}\n.details h2{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.3px;margin-bottom:21px}\n.details dl{margin:0}\n.details dl div+div{margin-top:19px}\n.details dt{color:var(--muted);font-size:11px;line-height:1.6;margin-bottom:4px;overflow-wrap:anywhere}\n.details dd{margin:0;font-size:13px;line-height:1.6}\n.profile-note{margin:23px 0 0;padding-top:17px;border-top:1px solid #d5ddcf;color:var(--muted);font-size:11px}\nfooter{max-width:1080px;margin:0 auto;padding:20px 28px 27px;color:var(--muted);font-size:11px}\nfooter span{display:block;border-top:1px solid var(--line);padding-top:17px}\n@media(max-width:700px){\n.header-inner{min-height:65px;padding:16px 22px}\n.header-note{font-size:11px}\nmain{padding:30px 22px 30px}\n.profile{grid-template-columns:64px minmax(0,1fr);column-gap:17px}\n.avatar{width:64px;height:64px;grid-row:1;margin-top:6px}\n.eyebrow{font-size:10px;margin-bottom:5px;letter-spacing:1.2px}\nh1{font-size:36px;letter-spacing:-1.1px;margin-bottom:5px}\n.role{font-size:14px}\n.follow{grid-column:1 / 3;margin-top:22px;width:100%;min-height:44px}\n.bio{grid-column:1 / 3;font-size:15px;line-height:1.7;margin-top:20px}\n.stats{grid-column:1 / 3;justify-content:space-between;gap:15px;margin-top:22px}\n.stats dd{font-size:23px}\n.stats dt{font-size:11px}\n.content{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:28px;padding-top:25px}\nh2{font-size:25px}\n.section-note{font-size:11px}\n.project{padding:19px 0}\nh3{font-size:17px}\n.project p{font-size:13px}\n.details{padding:20px}\n.details h2{margin-bottom:17px}\n.details dl{display:grid;grid-template-columns:1fr 1fr;gap:17px}\n.details dl div+div{margin:0}\n.details .focus{grid-column:1 / -1}\n.profile-note{margin-top:18px}\nfooter{padding:0 22px 22px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 30\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 26V10L14 3l11 7v16M3 14h22M10 26V14m8 12V14M1 27h26\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/></svg>\n<span>Isle team</span>\n</div>\n<span class=\"header-note\">People behind the practice</span>\n</div>\n</header>\n\n<main>\n<section class=\"profile\" aria-labelledby=\"profile-name\">\n<svg class=\"avatar\" viewBox=\"0 0 90 90\" role=\"img\" aria-label=\"Hand-drawn MC initials avatar\">\n<path d=\"M46 3C68 2 86 20 87 43c1 24-17 43-41 44C23 88 4 70 3 47 2 23 21 4 46 3Z\" fill=\"#e9eee4\" stroke=\"#b9c8b5\"/>\n<path d=\"M20 57 22 33l12 17 11-18 1 25M70 36c-12-9-20 1-20 10 0 11 10 16 20 8\" fill=\"none\" stroke=\"#28563f\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<div class=\"identity\">\n<p class=\"eyebrow\">Design &amp; practice tools</p>\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\">Product designer <span>at Isle</span></p>\n</div>\n<button class=\"follow\" type=\"button\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M10 4v12M4 10h12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\nFollow\n</button>\n<p class=\"bio\">I design clear, considered tools for architecture teams—from shaping the first brief to making the final detail easier to review.</p>\n<dl class=\"stats\" aria-label=\"Maya's work at Isle\">\n<div><dd>12</dd><dt>Projects</dt></div>\n<div><dd>8</dd><dt>Collaborators</dt></div>\n<div><dd>4</dd><dt>Years at Isle</dt></div>\n</dl>\n</section>\n\n<div class=\"content\">\n<section id=\"recent-work\" aria-labelledby=\"work-heading\">\n<div class=\"section-heading\">\n<h2 id=\"work-heading\">Recent work</h2>\n<span class=\"section-note\">Selected · 2025</span>\n</div>\n<ol class=\"projects\">\n<li class=\"project\">\n<article>\n<div class=\"project-top\"><span class=\"number\">01</span><span class=\"status\">In use</span></div>\n<h3>Project briefing workspace</h3>\n<p>A shared starting point for client ambitions, site constraints and design priorities—keeping the brief close as a project evolves.</p>\n<p class=\"project-meta\">Research &amp; product design · May 2025</p>\n</article>\n</li>\n<li class=\"project\">\n<article>\n<div class=\"project-top\"><span class=\"number\">02</span><span class=\"status pilot\">Practice pilot</span></div>\n<h3>Drawing review &amp; sign-off</h3>\n<p>A quieter review process that brings comments, revisions and approvals together, so teams know which drawing to trust.</p>\n<p class=\"project-meta\">Workflow &amp; interaction design · March 2025</p>\n</article>\n</li>\n<li class=\"project\">\n<article>\n<div class=\"project-top\"><span class=\"number\">03</span><span class=\"status progress\">In progress</span></div>\n<h3>Shared material library</h3>\n<p>Helping architects compare finishes, retain specification knowledge and carry considered material choices between projects.</p>\n<p class=\"project-meta\">Discovery &amp; prototyping · February 2025</p>\n</article>\n</li>\n</ol>\n</section>\n\n<aside class=\"details\" aria-labelledby=\"details-heading\">\n<h2 id=\"details-heading\">At a glance</h2>\n<dl>\n<div><dt>Based in</dt><dd>London, UK</dd></div>\n<div><dt>Working with</dt><dd>Architects, project leads<br>and the digital team</dd></div>\n<div class=\"focus\"><dt>Current focus across early-stage briefing and collaborative design review</dt><dd>Making project knowledge easier to share and act on.</dd></div>\n</dl>\n<p class=\"profile-note\">Part of Isle since 2021.</p>\n</aside>\n</div>\n</main>\n\n<footer><span>Isle · Thoughtful tools for architectural practice.</span></footer>\n</body>\n</html>"}]}
{"id":"sft-profiles-09","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Juniper. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: compact but readable; use slate blue as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Juniper team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Juniper team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Juniper team</title>\n<style>\n:root{color-scheme:light;--ink:#263341;--muted:#647180;--accent:#526789;--line:#e0e5eb;--paper:#fff;--wash:#f3f5f7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--wash);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\n.site-header{background:var(--paper);border-bottom:1px solid var(--line)}\n.header-inner{max-width:1040px;min-height:72px;padding:16px 24px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:650;letter-spacing:-.3px}\n.brand svg{width:28px;height:28px;color:var(--accent)}\n.workspace{font-size:12px;color:var(--muted)}\nmain{max-width:1040px;margin:32px auto;padding:0 24px}\n.profile{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.overview{padding:30px 32px 24px}\n.profile-top{display:flex;align-items:center;gap:20px}\n.avatar{width:80px;height:80px;flex:none;border-radius:20px}\n.identity{flex:1;min-width:0}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0 0 6px;font-weight:650}\n.role{margin:0;color:var(--muted);font-size:15px}\n.role strong{font-weight:500;color:var(--ink)}\n.action{display:flex;align-items:center;gap:12px}\nbutton{appearance:none;min-height:44px;padding:10px 23px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;font:600 14px system-ui;cursor:pointer}\nbutton:hover{background:#435777}\nbutton:focus-visible{outline:3px solid #a9badd;outline-offset:3px}\n.action-hint{max-width:122px;font-size:12px;line-height:1.5;color:var(--muted);margin:0}\n.bio{max-width:650px;font-size:15px;line-height:1.65;margin:22px 0 8px}\n.location{margin:0;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}\n.location svg{width:14px;height:14px;flex:none}\n.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}\n.stats div{padding-left:24px;border-left:1px solid var(--line)}\n.stats div:first-child{padding-left:0;border-left:0}\n.stats dt{color:var(--muted);font-size:12px}\n.stats dd{margin:0 0 2px;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.5px}\n.work{border-top:1px solid var(--line);padding:24px 32px 8px}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}\nh2{font-size:18px;letter-spacing:-.3px;line-height:1.4;margin:0;font-weight:650}\n.count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}\n.section-intro{margin:5px 0 4px;color:var(--muted);font-size:13px}\n.project-list{list-style:none;padding:0;margin:0}\n.project-list>li+li{border-top:1px solid var(--line)}\n.project{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:23px 0}\n.project-art{width:64px;height:72px;border:1px solid var(--line);border-radius:6px;background:#f7f8fa;color:#7889a1}\n.project-content{min-width:0}\n.project-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}\nh3{font-size:15px;line-height:1.4;font-weight:650;letter-spacing:-.15px;margin:0}\n.status{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;background:#eef3ef;color:#526a59}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.status.progress{background:#edf0f6;color:var(--accent)}\n.description{margin:7px 0 9px;color:#566270;font-size:13px;line-height:1.6;max-width:660px}\n.project-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;color:var(--muted);font-size:11px}\n.update{color:var(--accent)}\n@media(max-width:600px){\n.header-inner{min-height:60px;padding:14px 18px}\n.brand{font-size:15px;gap:9px}\n.workspace{font-size:11px}\nmain{margin:18px auto;padding:0 14px}\n.overview{padding:20px}\n.profile-top{gap:14px;flex-wrap:wrap}\n.avatar{width:62px;height:62px;border-radius:16px}\nh1{font-size:27px;letter-spacing:-.7px}\n.role{font-size:13px}\n.action{width:100%;gap:14px;margin-top:3px}\n.action-hint{max-width:180px}\nbutton{min-width:108px}\n.bio{font-size:14px;line-height:1.6;margin-top:18px}\n.stats{margin-top:20px;padding-top:16px}\n.stats div{padding-left:12px}\n.stats dd{font-size:22px}\n.stats dt{font-size:11px}\n.work{padding:20px 20px 3px}\n.section-intro{font-size:12px}\n.project{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:19px 0}\n.project-art{width:38px;height:48px}\n.project-heading{gap:7px}\nh3{font-size:14px}\n.description{font-size:12px;line-height:1.6;margin:7px 0}\n.project-meta{font-size:10px;line-height:1.6}\n.status{font-size:10px;padding:2px 6px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 24V9l10-5 10 5v15H4ZM14 4v20M4 14h20\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<span>Juniper team</span>\n</div>\n<span class=\"workspace\">Practice workspace</span>\n</div>\n</header>\n<main>\n<article class=\"profile\" aria-labelledby=\"profile-name\">\n<section class=\"overview\" aria-label=\"Profile overview\">\n<div class=\"profile-top\">\n<svg class=\"avatar\" viewBox=\"0 0 80 80\" role=\"img\" aria-label=\"Maya Chen’s drawn MC initials\">\n<rect width=\"80\" height=\"80\" rx=\"20\" fill=\"#e8edf5\"/>\n<path d=\"M15 51V29l10 14 10-14v22M64 32c-3-4-7-5-11-3-5 2-7 7-7 11s2 9 7 11c4 2 8 1 11-3\" fill=\"none\" stroke=\"#526789\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15 60h49\" stroke=\"#b4bfd0\" stroke-width=\"1.5\"/>\n</svg>\n<div class=\"identity\">\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\"><strong>Product designer</strong> at Juniper</p>\n</div>\n<div class=\"action\">\n<button type=\"button\">Follow</button>\n<p class=\"action-hint\">Keep up with Maya’s project updates.</p>\n</div>\n</div>\n<p class=\"bio\">I turn everyday studio workflows into clear, practical tools—from early project briefs to drawing reviews. Built with architects, for the way the practice works.</p>\n<p class=\"location\">\n<svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12.5 6.5C12.5 10 8 14 8 14S3.5 10 3.5 6.5a4.5 4.5 0 1 1 9 0Z\" stroke=\"currentColor\"/><circle cx=\"8\" cy=\"6.5\" r=\"1.5\" stroke=\"currentColor\"/></svg>\nSan Francisco · Design technology team\n</p>\n<dl class=\"stats\">\n<div><dd>12</dd><dt>Projects shipped</dt></div>\n<div><dd>6</dd><dt>Studio teams supported</dt></div>\n<div><dd>4</dd><dt>Years at Juniper</dt></div>\n</dl>\n</section>\n<section class=\"work\" aria-labelledby=\"work-title\">\n<div class=\"section-heading\">\n<h2 id=\"work-title\">Recent work</h2>\n<span class=\"count\">3 projects</span>\n</div>\n<p class=\"section-intro\">Digital tools that give project teams more time for design.</p>\n<ol class=\"project-list\">\n<li>\n<article class=\"project\">\n<svg class=\"project-art\" viewBox=\"0 0 64 72\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M12 16h40v40H12zM12 34h25V16M37 34v22M24 34v22M37 44h15\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n<path d=\"m42 22 3 3 6-7\" stroke=\"#526789\" stroke-width=\"1.7\"/>\n<path d=\"M8 62h48M8 60v4M56 60v4\" stroke=\"currentColor\" stroke-width=\".7\"/>\n</svg>\n<div class=\"project-content\">\n<div class=\"project-heading\"><h3>Drawing review workspace</h3><span class=\"status\">In use</span></div>\n<p class=\"description\">One place to mark up drawing sets, resolve comments and keep design decisions attached to the right revision.</p>\n<div class=\"project-meta\"><span>Design lead · 4 project teams</span><span class=\"update\">Updated 2 days ago</span></div>\n</div>\n</article>\n</li>\n<li>\n<article class=\"project\">\n<svg class=\"project-art\" viewBox=\"0 0 64 72\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M12 16h17v17H12zM35 16h17v17H35zM12 39h17v17H12zM35 39h17v17H35z\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n<path d=\"m13 28 11-11m-6 15 10-10M36 44h15M36 49h15M36 54h15M16 43v9m5-9v9m5-9v9\" stroke=\"currentColor\" stroke-width=\".8\"/>\n</svg>\n<div class=\"project-content\">\n<div class=\"project-heading\"><h3>Studio materials library</h3><span class=\"status progress\">In progress</span></div>\n<p class=\"description\">A searchable collection of approved finishes, with supplier details and specification notes beside every sample.</p>\n<div class=\"project-meta\"><span>Research &amp; product design · Interiors</span><span>Pilot in 2 studios</span></div>\n</div>\n</article>\n</li>\n<li>\n<article class=\"project\">\n<svg class=\"project-art\" viewBox=\"0 0 64 72\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M17 13h23l8 8v38H17V13ZM40 13v9h8M29 31h12M29 41h12M29 51h12\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n<path d=\"m21 30 2 2 3-4m-5 12 2 2 3-4m-5 12 2 2 3-4\" stroke=\"#526789\" stroke-width=\"1.3\"/>\n</svg>\n<div class=\"project-content\">\n<div class=\"project-heading\"><h3>Project handover kit</h3><span class=\"status\">In use</span></div>\n<p class=\"description\">A guided checklist for assembling final drawings, warranties and building information into a consistent client handover.</p>\n<div class=\"project-meta\"><span>Product design · Studio operations</span><span>Used on 8 handovers</span></div>\n</div>\n</article>\n</li>\n</ol>\n</section>\n</article>\n</main>\n</body>\n</html>"}]}
{"id":"sft-profiles-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Kite. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Kite team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Kite team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen — Kite team</title>\n<style>\n:root{--paper:#f6f3ed;--ink:#272b27;--muted:#686b63;--line:#d9d8cf;--accent:#a24f38;--soft:#ebe5da}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\n.wrap{width:min(1064px,calc(100% - 80px));margin:auto}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:700;letter-spacing:-.4px}\n.brand svg{width:25px;height:30px;color:var(--accent)}\n.header-note{font-size:13px;color:var(--muted)}\nmain{padding-top:42px;padding-bottom:36px}\n.eyebrow{margin:0 0 25px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}\n.profile{display:grid;grid-template-columns:112px minmax(0,1fr) 174px;column-gap:28px;row-gap:15px;align-items:start}\n.avatar{width:112px;height:112px;grid-column:1;grid-row:1/3}\n.identity{grid-column:2;grid-row:1}\nh1{font-family:Georgia,'Times New Roman',serif;font-size:60px;line-height:1.02;letter-spacing:-2px;font-weight:400;margin:0 0 12px}\n.role{margin:0;font-size:18px;line-height:1.4}\n.role span{color:var(--muted)}\n.bio{grid-column:2;grid-row:2;margin:0;max-width:570px;font-size:16px;line-height:1.65;color:#555b52}\n.actions{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:15px;padding-top:5px}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:44px;padding:0 24px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--paper);font:600 14px Arial,Helvetica,sans-serif;cursor:pointer}\nbutton:hover{background:#41483e}\nbutton:focus-visible{outline:3px solid var(--accent);outline-offset:4px}\nbutton svg{width:14px;height:14px}\n.availability{max-width:160px;text-align:right;font-size:12px;line-height:1.5;color:var(--muted)}\n.availability strong{display:block;font-weight:400;color:var(--ink)}\n.stats{display:flex;gap:0;margin:32px 0 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.stat{display:flex;align-items:baseline;gap:11px;flex:1;padding:0 28px;border-left:1px solid var(--line)}\n.stat:first-child{padding-left:0;border:0}\n.stat dd{order:-1;margin:0;font-family:Georgia,'Times New Roman',serif;font-size:31px;line-height:1}\n.stat dt{font-size:13px;color:var(--muted);line-height:1.4}\n.work{margin-top:35px}\n.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:7px}\nh2{font-family:Georgia,'Times New Roman',serif;font-size:30px;letter-spacing:-.6px;font-weight:400;margin:0}\n.section-meta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}\n.count{color:var(--ink)}\n.section-meta span+span{border-left:1px solid var(--line);padding-left:12px}\n.projects{list-style:none;padding:0;margin:0}\n.project{display:grid;grid-template-columns:126px minmax(0,1fr) 218px;gap:25px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}\n.preview{width:126px;height:90px;display:block;background:var(--soft)}\n.project h3{margin:0 0 8px;font-size:19px;font-weight:500;letter-spacing:-.3px;line-height:1.25}\n.description{margin:0;max-width:480px;color:var(--muted);font-size:14px;line-height:1.6}\n.project-meta{align-self:center;font-size:12px;line-height:1.5}\n.status{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-weight:600}\n.symbol{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}\n.progress{margin:0 0 9px 21px;color:var(--muted);font-size:11px}\n.next{margin:0;color:var(--muted)}\n.next strong{font-weight:500;color:var(--ink)}\nfooter{padding-top:20px;color:var(--muted);font-size:11px;line-height:1.5}\n@media(max-width:700px){\n.wrap{width:calc(100% - 40px)}\n.header-inner{height:64px}\n.brand{font-size:16px}\n.header-note{font-size:11px}\nmain{padding-top:27px;padding-bottom:24px}\n.eyebrow{font-size:10px;margin-bottom:21px}\n.profile{grid-template-columns:72px minmax(0,1fr);gap:18px 17px;align-items:center}\n.avatar{width:72px;height:72px;grid-row:1}\n.identity{grid-column:2;grid-row:1}\nh1{font-size:39px;letter-spacing:-1.5px;margin-bottom:7px}\n.role{font-size:14px}\n.bio{grid-column:1/-1;grid-row:2;font-size:15px;line-height:1.6}\n.actions{grid-column:1/-1;grid-row:3;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding-top:0}\n.availability{text-align:right;font-size:11px}\nbutton{min-width:112px}\n.stats{margin-top:25px;padding:20px 0}\n.stat{display:flex;flex-direction:column;gap:7px;padding:0 12px}\n.stat dd{font-size:29px}\n.stat dt{font-size:11px}\n.work{margin-top:27px}\nh2{font-size:28px}\n.section-head{align-items:center}\n.section-meta{font-size:11px}\n.section-meta span+span{display:none}\n.project{grid-template-columns:minmax(0,1fr);gap:13px;padding:21px 0}\n.preview{display:none}\n.project h3{font-size:19px;margin-bottom:7px}\n.description{font-size:14px;line-height:1.55}\n.project-meta{display:grid;grid-template-columns:130px minmax(0,1fr);gap:0 14px;align-items:start}\n.status{font-size:11px;grid-column:1;grid-row:1}\n.progress{grid-column:1;grid-row:2;margin-bottom:0;font-size:10px}\n.next{grid-column:2;grid-row:1/3;font-size:11px;border-left:1px solid var(--line);padding-left:14px}\nfooter{font-size:10px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"wrap header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 34\" fill=\"none\" aria-hidden=\"true\"><path d=\"M14 2 26 14 14 27 2 14 14 2Z\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"M14 2v25M2 14h24M14 27l-3 5\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>\nKite team\n</div>\n<span class=\"header-note\">People &amp; practice</span>\n</div>\n</header>\n<main class=\"wrap\">\n<p class=\"eyebrow\">Design &amp; technology</p>\n<section class=\"profile\" aria-labelledby=\"profile-name\">\n<svg class=\"avatar\" viewBox=\"0 0 112 112\" role=\"img\" aria-label=\"Hand-drawn MC initials avatar\">\n<rect width=\"112\" height=\"112\" rx=\"56\" fill=\"#e9ded0\"/>\n<path d=\"M91 24C74 9 45 8 25 25 5 44 10 78 29 94c21 17 51 10 66-11\" fill=\"none\" stroke=\"#bba68e\" stroke-width=\"1\"/>\n<g fill=\"none\" stroke=\"#82432f\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n<path d=\"m25 71 4-33 13 23 12-24 2 35\"/>\n<path d=\"M87 43c-5-8-17-7-22 5-6 14 0 25 10 25 5 0 9-3 12-6\"/>\n</g>\n</svg>\n<div class=\"identity\">\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\">Product designer <span>at Kite</span></p>\n</div>\n<p class=\"bio\">I design thoughtful digital tools for architectural practice, helping our teams turn complex briefs into clear decisions. Based in the London studio.</p>\n<div class=\"actions\">\n<button type=\"button\"><svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 2v12M2 8h12\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>Follow</button>\n<span class=\"availability\"><strong>Open for studio reviews</strong>Tuesdays &amp; Thursdays</span>\n</div>\n</section>\n<dl class=\"stats\" aria-label=\"Maya’s contributions\">\n<div class=\"stat\"><dt>Projects supported</dt><dd>12</dd></div>\n<div class=\"stat\"><dt>Design reviews</dt><dd>28</dd></div>\n<div class=\"stat\"><dt>Studio teams</dt><dd>4</dd></div>\n</dl>\n<section class=\"work\" aria-labelledby=\"work-title\">\n<div class=\"section-head\">\n<h2 id=\"work-title\">Recent work</h2>\n<div class=\"section-meta\"><span class=\"count\">3 projects</span><span>Active &amp; recently completed</span></div>\n</div>\n<ol class=\"projects\">\n<li>\n<article class=\"project\">\n<svg class=\"preview\" viewBox=\"0 0 126 90\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M18 17h90v57H18z\" stroke=\"#adae9f\"/>\n<path d=\"M27 28h28v35H27zM65 28h33M65 35h25M65 48h33M65 55h19\" stroke=\"#737b6e\"/>\n<path d=\"M27 42h28M41 28v35\" stroke=\"#adae9f\"/>\n<path d=\"m32 50 5 5 10-11\" stroke=\"#a24f38\" stroke-width=\"1.8\"/>\n</svg>\n<div>\n<h3>Better briefs, from day one</h3>\n<p class=\"description\">A shared briefing workspace that keeps client ambitions, site constraints and design priorities connected.</p>\n</div>\n<div class=\"project-meta\">\n<p class=\"status\"><span class=\"symbol\" aria-hidden=\"true\">◐</span>In progress</p>\n<p class=\"progress\">4 of 6 milestones complete</p>\n<p class=\"next\"><strong>Next:</strong> Pilot with two studio teams.</p>\n</div>\n</article>\n</li>\n<li>\n<article class=\"project\">\n<svg class=\"preview\" viewBox=\"0 0 126 90\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M23 17h76v58H23zM28 22h29v21H28zM63 22h31v21H63zM28 49h46v21H28zM80 49h14v21\" stroke=\"#7b8375\"/>\n<path d=\"M57 32h6M74 59h6\" stroke=\"#7b8375\"/>\n<circle cx=\"91\" cy=\"29\" r=\"12\" fill=\"#ebe5da\" stroke=\"#a24f38\"/>\n<path d=\"M86 27h10M86 31h6M85 38l-2 5 7-3\" stroke=\"#a24f38\"/>\n</svg>\n<div>\n<h3>Drawing reviews, without the noise</h3>\n<p class=\"description\">Clearer annotations and decision trails, so architects spend less time searching and more time designing.</p>\n</div>\n<div class=\"project-meta\">\n<p class=\"status\"><span class=\"symbol\" aria-hidden=\"true\">◇</span>In review</p>\n<p class=\"progress\">5 of 6 milestones complete</p>\n<p class=\"next\"><strong>Next:</strong> Sign-off with project leads.</p>\n</div>\n</article>\n</li>\n<li>\n<article class=\"project\">\n<svg class=\"preview\" viewBox=\"0 0 126 90\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M22 22h29v29H22z\" fill=\"#d1c5b2\" stroke=\"#a79c89\"/>\n<path d=\"M55 16h30v30H55z\" fill=\"#b0b5a5\" stroke=\"#8b9481\"/>\n<path d=\"M72 42h31v31H72z\" fill=\"#c88e72\" stroke=\"#a56c53\"/>\n<path d=\"m76 48 20 20m-20-11 11 11m-2-20 11 11M26 57h35M26 63h25M26 69h30\" stroke=\"#7d8173\" stroke-width=\".8\"/>\n</svg>\n<div>\n<h3>A shared materials library</h3>\n<p class=\"description\">One place to compare finishes, check environmental credentials and carry material choices across projects.</p>\n</div>\n<div class=\"project-meta\">\n<p class=\"status\"><span class=\"symbol\" aria-hidden=\"true\">✓</span>Shipped</p>\n<p class=\"progress\">6 of 6 milestones complete</p>\n<p class=\"next\"><strong>Next:</strong> Gather feedback from studios.</p>\n</div>\n</article>\n</li>\n</ol>\n</section>\n<footer>Good tools make room for better architecture.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-profiles-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Maple. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Maple team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Maple team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Maple team</title>\n<style>\n:root{color-scheme:light;--paper:#f7f8f3;--ink:#244a38;--muted:#66796b;--line:#dce3d8;--soft:#e9eee4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nheader{border-bottom:1px solid var(--line)}\n.topbar{max-width:1040px;margin:auto;padding:23px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:650;letter-spacing:-.3px}\n.brand svg{width:25px;height:29px}\n.section-name{color:var(--muted);font-size:13px}\nmain{max-width:888px;margin:0 auto;padding:60px 32px 48px}\n.identity{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:24px}\n.avatar{display:block;width:88px;height:88px}\nh1,h2,h3,p{margin:0}\nh1{font-size:38px;line-height:1.18;font-weight:600;letter-spacing:-1.3px}\n.role{margin-top:7px;color:var(--muted);font-size:16px}\n.role span{color:var(--ink)}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 20px;border:1px solid var(--ink);border-radius:5px;background:var(--ink);color:var(--paper);font:600 14px system-ui;cursor:pointer}\nbutton svg{width:14px;height:14px}\nbutton:hover{background:#345b43}\nbutton:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n.bio{margin:25px 0 0 112px;max-width:570px;font-size:17px;line-height:1.65}\n.location{margin:13px 0 0 112px;font-size:13px;color:var(--muted)}\n.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:36px 0 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.stat{padding:0 28px;border-left:1px solid var(--line);display:flex;flex-direction:column}\n.stat:first-child{border:0;padding-left:0}\ndt{order:2;color:var(--muted);font-size:13px;margin-top:3px}\ndd{margin:0;font-size:28px;font-weight:500;line-height:1.2;letter-spacing:-.7px;font-variant-numeric:tabular-nums}\n.work{margin-top:40px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}\nh2{font-size:22px;font-weight:600;letter-spacing:-.5px}\n.section-heading span{font-size:12px;color:var(--muted)}\n.intro{color:var(--muted);font-size:14px;margin-bottom:6px}\n.projects{list-style:none;padding:0;margin:0}\n.project{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:24px 0;border-bottom:1px solid var(--line)}\n.number{font-size:12px;color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums}\n.project-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px}\nh3{font-size:17px;font-weight:600;letter-spacing:-.2px}\n.status{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:11px;font-weight:500}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:var(--ink)}\n.status.pilot::before{background:transparent;border:1px solid var(--ink)}\n.summary{margin-top:7px;max-width:610px;font-size:14px;line-height:1.6}\n.detail{margin-top:10px;font-size:12px;line-height:1.6;color:var(--muted);max-width:620px;overflow-wrap:anywhere}\nfooter{padding-top:22px;font-size:12px;color:var(--muted)}\n@media(max-width:600px){\n.topbar{padding:18px 24px}\n.brand{font-size:15px}\n.section-name{font-size:12px}\nmain{padding:32px 24px}\n.identity{grid-template-columns:54px minmax(0,1fr) auto;gap:12px}\n.avatar{width:54px;height:54px}\nh1{font-size:27px;letter-spacing:-.8px}\n.role{font-size:13px;margin-top:4px}\n.role span{display:none}\nbutton{padding:9px 12px;min-height:38px;font-size:13px;gap:5px}\nbutton svg{width:12px}\n.bio{margin:22px 0 0;font-size:15px;line-height:1.65}\n.location{margin:12px 0 0;font-size:12px}\n.stats{margin-top:26px;padding:20px 0}\n.stat{padding:0 15px}\ndd{font-size:25px}\ndt{font-size:11px;line-height:1.45}\n.work{margin-top:28px}\nh2{font-size:21px}\n.intro{font-size:13px;max-width:280px}\n.project{grid-template-columns:21px minmax(0,1fr);gap:9px;padding:21px 0}\n.project-heading{gap:8px;flex-wrap:wrap}\nh3{font-size:16px}\n.summary{font-size:13px;line-height:1.6}\n.detail{font-size:11px;margin-top:8px}\n.status{font-size:10px}\nfooter{font-size:11px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease}}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"topbar\">\n    <div class=\"brand\">\n      <svg viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M14 28V15M14 22C6 22 3 17 3 10c6 0 11 4 11 12ZM14 16C14 8 18 4 25 3c0 8-4 13-11 13Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <span>Maple team</span>\n    </div>\n    <span class=\"section-name\">Field research</span>\n  </div>\n</header>\n<main>\n  <section aria-labelledby=\"profile-name\">\n    <div class=\"identity\">\n      <svg class=\"avatar\" viewBox=\"0 0 88 88\" role=\"img\" aria-label=\"Drawn initials avatar for Maya Chen\">\n        <path d=\"M44 3C66 2 84 19 85 42c2 23-15 42-39 43C22 86 4 70 3 46 1 23 19 4 44 3Z\" fill=\"#e9eee4\"/>\n        <path d=\"M18 24C26 12 46 8 62 17M69 67C58 78 36 79 23 69\" fill=\"none\" stroke=\"#244a38\" stroke-opacity=\".3\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n        <path d=\"M22 54V34l9 14 9-14v20M65 37c-3-4-12-5-16 1-3 4-3 10 0 14 4 5 12 5 16 0\" fill=\"none\" stroke=\"#244a38\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <div>\n        <h1 id=\"profile-name\">Maya Chen</h1>\n        <p class=\"role\">Product designer <span>at Maple</span></p>\n      </div>\n      <button type=\"button\">\n        <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n        Follow\n      </button>\n    </div>\n    <p class=\"bio\">I design practical tools that help research teams spend less time managing data and more time learning in the field.</p>\n    <p class=\"location\">Vancouver, Canada · At Maple since 2022</p>\n    <dl class=\"stats\" aria-label=\"Maya’s work in numbers\">\n      <div class=\"stat\"><dt>Studies supported</dt><dd>18</dd></div>\n      <div class=\"stat\"><dt>Tools shipped</dt><dd>6</dd></div>\n      <div class=\"stat\"><dt>Days in the field</dt><dd>42</dd></div>\n    </dl>\n  </section>\n\n  <section class=\"work\" aria-labelledby=\"recent-work\">\n    <div class=\"section-heading\">\n      <h2 id=\"recent-work\">Recent work</h2>\n      <span>3 projects</span>\n    </div>\n    <p class=\"intro\">Built with researchers, tested where the work happens.</p>\n    <ol class=\"projects\">\n      <li class=\"project\">\n        <span class=\"number\" aria-hidden=\"true\">01</span>\n        <article>\n          <div class=\"project-heading\">\n            <h3>Offline field notes</h3>\n            <span class=\"status pilot\">In pilot</span>\n          </div>\n          <p class=\"summary\">A simpler way to capture observations and photos, even when the signal drops.</p>\n          <p class=\"detail\">Research focus · Observation capture for teams working across remote and low-connectivity field sites</p>\n        </article>\n      </li>\n      <li class=\"project\">\n        <span class=\"number\" aria-hidden=\"true\">02</span>\n        <article>\n          <div class=\"project-heading\">\n            <h3>A clearer consent flow</h3>\n            <span class=\"status\">Shipped</span>\n          </div>\n          <p class=\"summary\">Plain-language prompts help researchers explain participation and record consent with confidence.</p>\n          <p class=\"detail\">Service design · Built with 8 field researchers</p>\n        </article>\n      </li>\n      <li class=\"project\">\n        <span class=\"number\" aria-hidden=\"true\">03</span>\n        <article>\n          <div class=\"project-heading\">\n            <h3>From notes to insights</h3>\n            <span class=\"status\">In use</span>\n          </div>\n          <p class=\"summary\">A shared review workflow that keeps emerging themes connected to the original field evidence.</p>\n          <p class=\"detail\">Research workspace · Supporting 5 active studies</p>\n        </article>\n      </li>\n    </ol>\n  </section>\n  <footer>Part of the Maple field research team.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-profiles-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at North. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"North team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"North team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · North team</title>\n<style>\n:root{color-scheme:light;--ink:#26323e;--muted:#66717e;--blue:#536b8b;--line:#e1e5ea;--paper:#fbfcfd}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\n.site-header{height:68px;border-bottom:1px solid var(--line);background:#fff}\n.header-inner{max-width:1016px;height:100%;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:650;letter-spacing:-.2px}\n.brand svg{color:var(--blue)}\n.workspace{color:var(--muted);font-size:12px}\nmain{max-width:1016px;margin:0 auto;padding:36px 32px 48px}\n.breadcrumb{margin:0 0 25px;color:var(--muted);font-size:12px}\n.breadcrumb span{margin:0 9px;color:#a6afb9}\n.profile{padding-bottom:28px;border-bottom:1px solid var(--line)}\n.profile-top{display:grid;grid-template-columns:88px minmax(0,1fr) auto;column-gap:22px;align-items:center}\n.avatar{display:block;width:88px;height:88px}\nh1{font-size:36px;line-height:1.15;letter-spacing:-1.2px;margin:0 0 7px;font-weight:650}\n.role{margin:0;color:var(--muted);font-size:15px}\n.role strong{color:var(--ink);font-weight:500}\n.action{display:flex;align-items:center;gap:12px}\nbutton{font:inherit;cursor:pointer}\n.follow{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:6px;padding:10px 17px;font-weight:600;min-height:42px}\n.follow:hover{background:#435b7b}\n.follow:focus-visible{outline:3px solid #b5c6df;outline-offset:3px}\n.hint{max-width:114px;color:var(--muted);font-size:11px;line-height:1.5;margin:0}\n.bio{max-width:570px;margin:20px 0 23px;font-size:15px;line-height:1.65;color:#4c5967}\n.stats{display:flex;margin:0;padding:0;gap:32px}\n.stats div{display:flex;align-items:baseline;gap:8px}\n.stats dt{color:var(--muted);font-size:12px;order:2}\n.stats dd{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.5px;margin:0}\n.content{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:44px;padding-top:30px;align-items:start}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}\nh2{font-size:19px;font-weight:650;letter-spacing:-.4px;margin:0}\n.count{color:var(--muted);font-size:12px}\n.project{display:grid;grid-template-columns:26px minmax(0,1fr);gap:13px;padding:22px 0;border-bottom:1px solid var(--line)}\n.project:last-child{border-bottom:0;padding-bottom:0}\n.number{font-size:11px;font-variant-numeric:tabular-nums;color:#8995a4;padding-top:4px}\n.project-head{display:flex;align-items:center;justify-content:space-between;gap:12px}\nh3{font-size:16px;line-height:1.4;letter-spacing:-.2px;font-weight:600;margin:0}\n.status{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:4px;white-space:nowrap;font-size:10px;line-height:1.7;color:#526d60;background:#edf3ee}\n.status:before{content:\"\";width:4px;height:4px;border-radius:50%;background:currentColor}\n.status.pilot{background:#edf1f7;color:var(--blue)}\n.description{margin:8px 0 10px;color:#596572;font-size:13px;line-height:1.65;max-width:450px}\n.meta{margin:0;color:#7b8590;font-size:11px}\n.meta span{margin:0 7px;color:#b1b8c0}\n.details{background:#f0f3f7;border:1px solid #e3e8ef;border-radius:7px;padding:20px}\n.details h2{font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--blue);margin:0 0 18px}\n.context{margin:0;display:grid;gap:16px}\n.context dt{font-size:11px;color:var(--muted);margin-bottom:3px}\n.context dd{margin:0;font-size:13px;line-height:1.5}\n.update{margin-top:21px;padding-top:17px;border-top:1px solid #dce2ea}\n.update-label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin:0 0 6px}\n.update-label svg{color:var(--blue);flex-shrink:0}\n.update p:last-child{font-size:12px;line-height:1.6;margin:0;color:#536171}\nfooter{max-width:1016px;padding:0 32px 24px;margin:auto;color:#89939f;font-size:11px}\n@media(max-width:700px){\n.header-inner{padding:0 22px}\n.site-header{height:58px}\n.workspace{font-size:11px}\nmain{padding:24px 22px 30px}\n.breadcrumb{margin-bottom:22px}\n.profile-top{grid-template-columns:66px minmax(0,1fr);gap:16px}\n.avatar{width:66px;height:66px}\nh1{font-size:29px;letter-spacing:-.8px;margin-bottom:4px}\n.role{font-size:13px}\n.action{grid-column:1/-1;margin-top:4px;gap:14px}\n.hint{max-width:185px;font-size:12px}\n.follow{padding:9px 18px}\n.bio{font-size:14px;margin:18px 0 21px;line-height:1.6}\n.stats{gap:0;justify-content:space-between}\n.stats div{display:block}\n.stats dt{font-size:10px;margin-top:4px}\n.stats dd{font-size:21px}\n.profile{padding-bottom:24px}\n.content{grid-template-columns:minmax(0,1fr);gap:27px;padding-top:23px}\nh2{font-size:18px}\n.project{padding:19px 0;grid-template-columns:20px minmax(0,1fr);gap:9px}\n.description{font-size:13px;margin-top:7px}\n.project-head{gap:8px}\nh3{font-size:15px}\n.details{padding:17px}\n.details h2{margin-bottom:14px}\n.context{grid-template-columns:1fr 1fr;gap:15px}\n.context div:last-child{grid-column:1/-1}\n.update{margin-top:16px;padding-top:14px}\nfooter{padding:0 22px 22px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1\" y=\"1\" width=\"23\" height=\"23\" rx=\"6\" stroke=\"currentColor\"/><path d=\"M7 18V7l11 11V7\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\nNorth team\n</div>\n<span class=\"workspace\">Field research workspace</span>\n</div>\n</header>\n<main>\n<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">People <span aria-hidden=\"true\">/</span> Team profile</nav>\n<section class=\"profile\" aria-labelledby=\"profile-name\">\n<div class=\"profile-top\">\n<svg class=\"avatar\" viewBox=\"0 0 88 88\" role=\"img\" aria-label=\"Drawn MC initials avatar\">\n<rect x=\"1\" y=\"1\" width=\"86\" height=\"86\" rx=\"27\" fill=\"#e8edf4\" stroke=\"#dbe2ed\"/>\n<path d=\"M19 56l2-27 12 19 11-19 1 27M69 33c-4-5-12-4-16 2-4 6-4 14 0 19 4 4 10 4 15 0\" fill=\"none\" stroke=\"#536b8b\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M24 66c12 2 26 2 39-1\" fill=\"none\" stroke=\"#b2c1d4\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n</svg>\n<div>\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\"><strong>Product designer</strong> at North</p>\n</div>\n<div class=\"action\">\n<button class=\"follow\" type=\"button\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\"><path d=\"M7 2v10M2 7h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>Follow</button>\n<p class=\"hint\">Keep up with Maya’s field notes and new work.</p>\n</div>\n</div>\n<p class=\"bio\">I design practical tools for researchers working beyond the desk—from study planning to reliable note capture in the field.</p>\n<dl class=\"stats\" aria-label=\"Maya’s work at a glance\">\n<div><dt>Studies supported</dt><dd>12</dd></div>\n<div><dt>Tools shipped</dt><dd>8</dd></div>\n<div><dt>Followers</dt><dd>248</dd></div>\n</dl>\n</section>\n<div class=\"content\">\n<section aria-labelledby=\"recent-work\">\n<div class=\"section-heading\"><h2 id=\"recent-work\">Recent work</h2><span class=\"count\">3 projects</span></div>\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div>\n<div class=\"project-head\"><h3>Field Kit</h3><span class=\"status pilot\">In pilot</span></div>\n<p class=\"description\">An offline-first capture flow that keeps observations, photos and consent together—even without a signal.</p>\n<p class=\"meta\">Research tools<span aria-hidden=\"true\">·</span>May 2025</p>\n</div>\n</article>\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div>\n<div class=\"project-head\"><h3>Study handoff</h3><span class=\"status\">Shipped</span></div>\n<p class=\"description\">A shared briefing space that helps researchers head into every visit with the context they need.</p>\n<p class=\"meta\">Study planning<span aria-hidden=\"true\">·</span>April 2025</p>\n</div>\n</article>\n<article class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div>\n<div class=\"project-head\"><h3>Signals library</h3><span class=\"status\">Shipped</span></div>\n<p class=\"description\">A searchable home for field insights, grounded in the people and places behind each observation.</p>\n<p class=\"meta\">Research synthesis<span aria-hidden=\"true\">·</span>March 2025</p>\n</div>\n</article>\n</section>\n<aside class=\"details\" aria-labelledby=\"context-heading\">\n<h2 id=\"context-heading\">Working context</h2>\n<dl class=\"context\">\n<div><dt>Current focus</dt><dd>Offline-first research</dd></div>\n<div><dt>Based in</dt><dd>Vancouver, Canada<br>Pacific time</dd></div>\n<div><dt>Works closely with</dt><dd>Researchers &amp; field leads</dd></div>\n</dl>\n<div class=\"update\">\n<p class=\"update-label\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"currentColor\"/><path d=\"M6 3.5V6l1.5 1\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>Updated 3 days ago</p>\n<p>Added offline testing notes to Field Kit.</p>\n</div>\n</aside>\n</div>\n</main>\n<footer>North · Built around the people doing the research.</footer>\n</body>\n</html>"}]}
{"id":"sft-profiles-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Orbit. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Orbit team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Orbit team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Orbit team</title>\n<style>\n:root{--paper:#faf8f4;--ink:#292b27;--muted:#6e7168;--line:#deded4;--accent:#a64e37;--soft:#efe3da}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton,a{-webkit-tap-highlight-color:transparent}\na{color:inherit;text-decoration:none}\na:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}\n.topbar{border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1080px;margin:auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:650;letter-spacing:-.3px;min-height:36px}\n.brand svg{color:var(--accent);flex:none}\n.breadcrumb{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:12px}\n.breadcrumb a{display:inline-flex;align-items:center;min-height:36px}\n.breadcrumb span:last-child{color:var(--ink)}\nmain{max-width:1080px;margin:auto;padding:31px 32px 36px}\n.eyebrow{margin:0 0 23px;color:var(--muted);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:650}\n.person{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:24px}\n.avatar{display:block;width:104px;height:104px}\nh1,h2,h3,p{margin:0}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:49px;font-weight:400;line-height:1.08;letter-spacing:-1.7px}\n.role{font-size:16px;margin-top:10px;color:var(--muted)}\n.role strong{font-weight:500;color:var(--ink)}\n.follow{display:inline-flex;justify-content:center;align-items:center;gap:9px;border:1px solid var(--accent);border-radius:4px;min-height:44px;min-width:116px;padding:10px 20px;background:var(--accent);color:white;font:600 14px system-ui;cursor:pointer}\n.follow:hover{background:#8d402c}\n.intro{margin:22px 0 26px 128px;max-width:650px}\n.bio{font-size:16px;line-height:1.65}\n.meta{display:flex;gap:10px 20px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:13px}\n.location,.status{display:inline-flex;align-items:center;gap:6px}\n.status::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#7d866c}\n.stats{margin:0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}\n.stat{display:flex;align-items:baseline;justify-content:center;gap:12px;padding:0 16px;border-right:1px solid var(--line)}\n.stat:last-child{border-right:0}\n.stat dt{font-size:13px;color:var(--muted)}\n.stat dd{order:-1;margin:0;font-family:Georgia,\"Times New Roman\",serif;font-size:32px;line-height:1.1}\n.content{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:40px;margin-top:33px}\n.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}\nh2{font-family:Georgia,\"Times New Roman\",serif;font-weight:400;font-size:26px;letter-spacing:-.5px}\n.count{color:var(--muted);font-size:12px;white-space:nowrap}\n.projects{list-style:none;margin:0;padding:0}\n.project{border-bottom:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:25px minmax(0,1fr);gap:13px}\n.project:last-child{border-bottom:0;padding-bottom:0}\n.number{padding-top:4px;font-size:11px;color:var(--accent);font-variant-numeric:tabular-nums}\nh3{font-size:17px;font-weight:600;letter-spacing:-.25px;line-height:1.35}\n.description{color:var(--muted);font-size:14px;line-height:1.6;margin-top:6px;max-width:540px}\n.project-meta{margin-top:10px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:11px;color:var(--muted)}\n.project-status{display:inline-flex;align-items:center;gap:6px;color:#59634e;background:#eceee6;padding:2px 7px;border-radius:3px}\n.project-status.pilot{background:#f0e9de;color:#776446}\naside{border-left:1px solid var(--line);padding-left:26px}\naside h2{font-size:23px}\n.empty{padding-top:23px}\n.empty svg{color:#8a8c81;display:block;margin-bottom:15px}\n.empty h3{font-size:14px;letter-spacing:0}\n.empty p{font-size:13px;color:var(--muted);line-height:1.65;margin-top:8px}\nfooter{max-width:1080px;margin:auto;padding:0 32px 25px}\n.footer-inner{border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted)}\n@media(max-width:700px){\n.topbar-inner{padding:12px 20px}\n.breadcrumb{gap:8px;font-size:12px}\nmain{padding:25px 20px 29px}\n.eyebrow{margin-bottom:20px}\n.person{grid-template-columns:72px minmax(0,1fr);gap:0 16px;align-items:start}\n.avatar{width:72px;height:72px;grid-row:1 / span 2}\nh1{font-size:38px;letter-spacing:-1.2px}\n.role{font-size:14px;margin-top:7px}\n.follow{grid-column:2;justify-self:start;margin-top:15px;min-width:112px}\n.intro{margin:20px 0 24px}\n.bio{font-size:15px;line-height:1.6}\n.meta{font-size:11px;gap:8px 16px;margin-top:12px}\n.stats{padding:18px 0}\n.stat{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 6px;text-align:center}\n.stat dd{font-size:29px}\n.stat dt{font-size:11px}\n.content{grid-template-columns:1fr;gap:29px;margin-top:26px}\nh2{font-size:25px}\n.project{padding:17px 0;gap:10px;grid-template-columns:23px minmax(0,1fr)}\nh3{font-size:17px}\n.description{font-size:13px;line-height:1.55}\n.project-meta{margin-top:9px}\naside{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}\naside h2{font-size:23px}\n.empty{position:relative;padding:12px 0 0 43px}\n.empty svg{position:absolute;left:0;top:14px;width:27px;height:31px}\n.empty p{margin-top:5px}\nfooter{padding:0 20px 22px}\n.footer-inner{font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<a class=\"brand\" href=\"#profile\" aria-label=\"Orbit team profile\">\n<svg width=\"29\" height=\"29\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"16\" cy=\"16\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"/><ellipse cx=\"16\" cy=\"16\" rx=\"15\" ry=\"6\" transform=\"rotate(-35 16 16)\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"26\" cy=\"7\" r=\"2.5\" fill=\"currentColor\"/></svg>\nOrbit team\n</a>\n<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><a href=\"#profile\">People</a><span aria-hidden=\"true\">/</span><span>Profile</span></nav>\n</div>\n</header>\n<main id=\"profile\">\n<p class=\"eyebrow\">Meet the team</p>\n<section aria-labelledby=\"profile-name\">\n<div class=\"person\">\n<svg class=\"avatar\" viewBox=\"0 0 104 104\" role=\"img\" aria-label=\"Drawn MC initials avatar\">\n<circle cx=\"52\" cy=\"52\" r=\"50\" fill=\"#efe3da\"/>\n<path d=\"M17 32C27 11 66 7 84 29M88 70C76 94 40 99 20 77\" fill=\"none\" stroke=\"#bc8069\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n<path d=\"M26 67L29 38L40 58L50 38L53 67M78 42C64 31 55 47 59 59C62 69 72 70 80 62\" fill=\"none\" stroke=\"#934a35\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M32 80C44 77 58 78 69 75\" fill=\"none\" stroke=\"#bc8069\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n</svg>\n<div>\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\"><strong>Product designer</strong> at Orbit</p>\n</div>\n<button class=\"follow\" type=\"button\"><span aria-hidden=\"true\">＋</span> Follow</button>\n</div>\n<div class=\"intro\">\n<p class=\"bio\">I design practical tools for research in the real world—from offline note-taking to making sense of what teams learn in the field.</p>\n<div class=\"meta\">\n<span class=\"location\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 16 18\" fill=\"none\" aria-hidden=\"true\"><path d=\"M14 7C14 11 8 16 8 16S2 11 2 7a6 6 0 1 1 12 0Z\" stroke=\"currentColor\" stroke-width=\"1.3\"/><circle cx=\"8\" cy=\"7\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>Oakland, CA · UTC−7</span>\n<span class=\"status\">Active this week</span>\n</div>\n</div>\n<dl class=\"stats\" aria-label=\"Research contributions\">\n<div class=\"stat\"><dt>Field studies</dt><dd>12</dd></div>\n<div class=\"stat\"><dt>Research sessions</dt><dd>38</dd></div>\n<div class=\"stat\"><dt>Teams supported</dt><dd>6</dd></div>\n</dl>\n</section>\n<div class=\"content\">\n<section aria-labelledby=\"work-title\">\n<div class=\"section-heading\"><h2 id=\"work-title\">Recent work</h2><span class=\"count\">3 projects</span></div>\n<ol class=\"projects\">\n<li class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>Field notes, without the signal</h3><p class=\"description\">An offline-first capture flow that keeps observations, photos and interview notes together until teams reconnect.</p><div class=\"project-meta\"><span class=\"project-status\">In field use</span><span>Mobile research · Jun 2025</span></div></div>\n</li>\n<li class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Consent that feels human</h3><p class=\"description\">A clearer participant consent flow, tested with researchers running interviews across languages and locations.</p><div class=\"project-meta\"><span class=\"project-status pilot\">In pilot</span><span>Participant experience · May 2025</span></div></div>\n</li>\n<li class=\"project\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>From observations to evidence</h3><p class=\"description\">A shared research library that helps distributed teams trace findings back to the moments behind them.</p><div class=\"project-meta\"><span class=\"project-status\">Released</span><span>Research synthesis · Apr 2025</span></div></div>\n</li>\n</ol>\n</section>\n<aside aria-labelledby=\"guides-title\">\n<div class=\"section-heading\"><h2 id=\"guides-title\">Field guides</h2><span class=\"count\">0 shared</span></div>\n<div class=\"empty\">\n<svg width=\"32\" height=\"37\" viewBox=\"0 0 32 37\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 2h14l7 7v26H6V2Z\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M20 2v8h7M11 17h11M11 22h11M11 27h7\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>\n<h3>No field guides shared yet</h3>\n<p>Maya hasn’t published any guides. Her interview templates and field methods will appear here when shared with the team.</p>\n</div>\n</aside>\n</div>\n</main>\n<footer><div class=\"footer-inner\"><span>Orbit · People behind the research</span><span>Team member profile</span></div></footer>\n</body>\n</html>"}]}
{"id":"sft-profiles-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a profile for Maya Chen, Product designer at Pine. Include a drawn initials avatar, brief bio, Follow button, three stats and a Recent work section with three project summaries. Keep the profile easy to scan. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Pine team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Pine team\", \"Maya Chen\", \"Product designer\", \"Follow\", \"Recent work\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maya Chen · Pine team</title>\n<style>\n:root{--bg:#f7f5f0;--ink:#29262a;--muted:#6e686d;--plum:#492b43;--line:#ded9d4;--soft:#eee8ed;--green:#42634f}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.55}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1080px;margin:auto;min-height:76px;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:650;letter-spacing:-.4px;color:var(--plum)}\n.directory{font-size:13px;color:var(--muted)}\nmain{max-width:1024px;margin:auto;padding:44px 32px 60px}\n.eyebrow{margin:0 0 26px;font-size:11px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}\n.profile{display:grid;grid-template-columns:88px minmax(0,1fr) auto;grid-template-areas:\"avatar identity action\" \". bio bio\" \". details details\";column-gap:26px;align-items:start}\n.avatar{grid-area:avatar;width:88px;height:88px;display:block}\n.identity{grid-area:identity}\nh1{margin:-6px 0 2px;font-size:40px;line-height:1.2;font-weight:650;letter-spacing:-1.5px}\n.role{margin:0;font-size:17px;color:var(--muted)}\n.bio{grid-area:bio;max-width:630px;margin:17px 0 12px;font-size:17px;line-height:1.65}\n.details{grid-area:details;display:flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:13px}\n.follow{grid-area:action;border:1px solid var(--plum);border-radius:5px;background:var(--plum);color:#fff;padding:10px 21px;min-height:44px;font:600 14px/1.4 inherit;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer}\n.follow:hover{background:#382033}\n.follow:focus-visible{outline:3px solid #a990a5;outline-offset:4px}\n.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:29px 0 43px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.stat{padding:0 28px;border-left:1px solid var(--line)}\n.stat:first-child{padding-left:0;border:0}\n.stat dt{font-size:12px;color:var(--muted);margin-top:3px}\n.stat dd{margin:0;font-size:25px;font-weight:600;line-height:1.2;letter-spacing:-.5px;color:var(--plum)}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}\nh2{margin:0;font-size:23px;line-height:1.3;letter-spacing:-.6px;font-weight:650}\n.count{color:var(--muted);font-size:12px;white-space:nowrap}\n.section-intro{margin:7px 0 24px;color:var(--muted);font-size:14px}\n.projects{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}\n.project{display:grid;grid-template-columns:115px minmax(0,1fr) 122px;grid-template-areas:\"meta content status\";gap:24px;padding:25px 0;border-bottom:1px solid var(--line);align-items:start}\n.project-meta{grid-area:meta;margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.7}\n.project-meta time{display:block;color:var(--ink);font-weight:550}\n.project-content{grid-area:content;min-width:0}\nh3{margin:0 0 7px;font-size:19px;line-height:1.35;font-weight:600;letter-spacing:-.3px;overflow-wrap:anywhere}\n.summary{margin:0;color:var(--muted);font-size:14px;line-height:1.65;max-width:600px}\n.status{grid-area:status;justify-self:end;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid #d9ccd6;border-radius:4px;background:var(--soft);color:var(--plum);font-size:11px;line-height:1.5;white-space:nowrap}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.status.shipped{color:var(--green);background:#edf0e9;border-color:#d5ddd0}\n.status.neutral{background:transparent;color:var(--muted);border-color:var(--line)}\n.flow{margin:15px 0 0;max-width:270px}\n.flow svg{display:block;width:100%;height:auto;color:var(--plum)}\n.flow figcaption{margin-top:5px;font-size:11px;color:var(--muted)}\n@media(max-width:600px){\n.header-inner{padding:16px 22px;min-height:67px}\n.directory{font-size:11px}\nmain{padding:29px 22px 36px}\n.eyebrow{margin-bottom:23px;font-size:10px}\n.profile{grid-template-columns:64px minmax(0,1fr);grid-template-areas:\"avatar identity\" \"bio bio\" \"details action\";column-gap:15px;row-gap:0;align-items:center}\n.avatar{width:64px;height:64px}\nh1{font-size:31px;letter-spacing:-1px;margin:0 0 3px}\n.role{font-size:15px}\n.bio{font-size:15px;line-height:1.65;margin:21px 0 18px}\n.details{font-size:12px}\n.follow{justify-self:end;padding:10px 16px;font-size:13px}\n.stats{margin:25px 0 31px;padding:19px 0}\n.stat{padding:0 14px}\n.stat dd{font-size:24px}\n.stat dt{font-size:11px;line-height:1.45;max-width:85px}\nh2{font-size:22px}\n.section-intro{font-size:13px;margin-bottom:20px;max-width:270px}\n.project{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"meta status\" \"content content\";gap:12px 10px;padding:21px 0}\n.project-meta{display:flex;gap:9px;flex-wrap:wrap;font-size:11px;margin:0}\n.project-meta time{display:inline}\n.project-meta span{display:none}\n.status{font-size:10px;padding:3px 7px}\nh3{font-size:18px;max-width:310px}\n.summary{font-size:13px}\n.flow{max-width:245px;margin-top:14px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg width=\"25\" height=\"28\" viewBox=\"0 0 25 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12.5 2 5.5 11h4L3 19h8v7h3v-7h8l-6.5-8h4L12.5 2Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"/></svg>\n<span>Pine team</span>\n</div>\n<span class=\"directory\">People directory</span>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">People / Design</p>\n<section class=\"profile\" aria-labelledby=\"profile-name\">\n<svg class=\"avatar\" viewBox=\"0 0 88 88\" role=\"img\" aria-label=\"Hand-drawn MC initials\">\n<rect width=\"88\" height=\"88\" rx=\"22\" fill=\"#e9e0df\"/>\n<path d=\"m18 57 3-29 12 19 11-20 1 31M70 31c-5-6-17-3-19 10-2 12 7 20 17 14\" fill=\"none\" stroke=\"#492b43\" stroke-width=\"3.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<div class=\"identity\">\n<h1 id=\"profile-name\">Maya Chen</h1>\n<p class=\"role\">Product designer</p>\n</div>\n<button class=\"follow\" type=\"button\">\n<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\"><path d=\"M7 2v10M2 7h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\nFollow\n</button>\n<p class=\"bio\">I design practical tools for researchers in the field, turning messy observations into clear workflows that hold up beyond reliable Wi-Fi.</p>\n<p class=\"details\">\n<svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 6c0 4-5 8-5 8S2 10 2 6a5 5 0 0 1 10 0Z\" stroke=\"currentColor\" stroke-width=\"1.2\"/><circle cx=\"7\" cy=\"6\" r=\"1.6\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\nPortland, Oregon\n</p>\n</section>\n\n<dl class=\"stats\" aria-label=\"Maya’s work at Pine\">\n<div class=\"stat\"><dd>12</dd><dt>Projects shipped</dt></div>\n<div class=\"stat\"><dd>8</dd><dt>Field studies</dt></div>\n<div class=\"stat\"><dd>3</dd><dt>Regions supported</dt></div>\n</dl>\n\n<section aria-labelledby=\"work-title\">\n<div class=\"section-heading\"><h2 id=\"work-title\">Recent work</h2><span class=\"count\">3 projects</span></div>\n<p class=\"section-intro\">Built with researchers, tested in the field.</p>\n<ol class=\"projects\">\n<li>\n<article class=\"project\">\n<p class=\"project-meta\"><time datetime=\"2025-06\">Jun 2025</time><span>Field capture</span></p>\n<div class=\"project-content\">\n<h3>Offline observation capture</h3>\n<p class=\"summary\">A lighter way to log notes, photos and locations when teams are beyond mobile coverage.</p>\n<figure class=\"flow\">\n<svg viewBox=\"0 0 270 43\" role=\"img\" aria-labelledby=\"flow-title\">\n<title id=\"flow-title\">Capture observations, save offline, then sync later</title>\n<path d=\"M32 10h89m16 0h98\" stroke=\"#c5b9c2\" stroke-width=\"1.3\"/>\n<path d=\"M145 10h81\" stroke=\"#f7f5f0\" stroke-width=\"3\"/>\n<path d=\"M145 10h81\" stroke=\"#a18b9b\" stroke-width=\"1.3\" stroke-dasharray=\"3 4\"/>\n<circle cx=\"25\" cy=\"10\" r=\"5\" fill=\"currentColor\"/>\n<rect x=\"123\" y=\"4\" width=\"12\" height=\"12\" rx=\"2\" fill=\"#f7f5f0\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n<path d=\"m235 6 5 4-5 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<g fill=\"#6e686d\" font-family=\"system-ui,sans-serif\" font-size=\"10\">\n<text x=\"4\" y=\"36\">Capture</text><text x=\"100\" y=\"36\">Save offline</text><text x=\"215\" y=\"36\">Sync later</text>\n</g>\n</svg>\n<figcaption>Notes stay on the device until a connection returns.</figcaption>\n</figure>\n</div>\n<span class=\"status\">Field testing</span>\n</article>\n</li>\n<li>\n<article class=\"project\">\n<p class=\"project-meta\"><time datetime=\"2025-05\">May 2025</time><span>Research ethics</span></p>\n<div class=\"project-content\">\n<h3>Consent that works in changing conditions</h3>\n<p class=\"summary\">Plain-language consent prompts that adapt to the setting without rushing the conversation.</p>\n</div>\n<span class=\"status shipped\">Shipped</span>\n</article>\n</li>\n<li>\n<article class=\"project\">\n<p class=\"project-meta\"><time datetime=\"2025-04\">Apr 2025</time><span>Research systems</span></p>\n<div class=\"project-content\">\n<h3>A shared language for field notes</h3>\n<p class=\"summary\">A flexible tagging system for comparing observations across sites, with room for the details that don’t fit a checklist.</p>\n</div>\n<span class=\"status neutral\">In use</span>\n</article>\n</li>\n</ol>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-tasklist-00","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Alder. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Alder tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Alder tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Alder tasks</title>\n<style>\n:root{color-scheme:light;--bg:#f3f1ea;--surface:#fffef9;--ink:#24342d;--muted:#697068;--green:#214e3b;--line:#e2e4da}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton,input{font:inherit}\n.shell{width:min(100% - 48px,820px);margin:0 auto}\n.brand{display:flex;align-items:center;gap:11px;padding:30px 0 23px;border-bottom:1px solid #dcded3}\n.mark{display:grid;place-items:center;width:34px;height:34px;background:var(--green);color:var(--surface);border-radius:8px}\n.brand-name{font-size:14px;font-weight:750;letter-spacing:.13em}\n.brand-detail{margin-left:auto;color:var(--muted);font-size:12px}\nmain{padding:43px 0 48px}\n.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:29px}\nh1{margin:0 0 9px;font-size:36px;line-height:1.15;font-weight:650;letter-spacing:-1.3px}\n.intro{max-width:48ch;margin:0;color:var(--muted);font-size:15px}\n.date{flex-shrink:0;padding-top:7px;color:var(--muted);font-size:13px}\n.task-panel{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 3px 12px #28392b04}\n.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:23px 28px 18px}\nh2{margin:0;font-size:21px;font-weight:650;letter-spacing:-.4px}\n.count{color:var(--muted);font-size:13px}\n.tasks{list-style:none;padding:0;margin:0}\n.task{display:flex;align-items:flex-start;gap:15px;margin:0 28px;padding:23px 0;border-top:1px solid var(--line)}\n.task input{flex:0 0 auto;width:19px;height:19px;margin:4px 0 0;accent-color:var(--green);cursor:pointer}\n.task-content{min-width:0;flex:1}\n.task-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}\n.task label{font-size:17px;font-weight:600;cursor:pointer;line-height:1.4}\n.priority{flex-shrink:0;font-size:11px;font-weight:600;line-height:1.5;border-radius:4px;padding:2px 7px;letter-spacing:.01em}\n.high{color:#7a5429;background:#f4ecdd}\n.normal{color:#45604b;background:#eaf0e6}\n.low{color:#62685e;background:#eeefe8}\n.detail{max-width:53ch;margin:5px 0 8px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}\n.task-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#697068;font-size:12px}\n.next{font-weight:600;color:var(--green)}\n.separator{color:#b2b6a9}\n.completed label{text-decoration:line-through;text-decoration-color:#a9afa3;color:#787e73}\n.completed .detail{color:#7b8176}\n.done{color:var(--green);font-weight:600}\n.add-form{margin:0 28px;padding:20px 0 25px;border-top:1px solid var(--line)}\n.add-form label{display:block;margin-bottom:8px;font-size:12px;font-weight:650;color:#586354}\n.form-row{display:flex;gap:10px}\n.form-row input{min-width:0;flex:1;height:45px;border:1px solid #cdd3c5;border-radius:6px;background:#fffefa;padding:0 13px;color:var(--ink)}\n.form-row input::placeholder{color:#858b80;opacity:1}\nbutton{flex-shrink:0;min-height:45px;padding:0 19px;border:1px solid var(--green);border-radius:6px;background:var(--green);color:white;font-weight:600;font-size:14px;cursor:pointer}\nbutton:hover{background:#183e2e}\ninput:focus-visible,button:focus-visible{outline:3px solid #9aaf92;outline-offset:3px}\n.summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 28px;background:#f7f8f1;border-top:1px solid var(--line)}\n.summary label{font-size:12px;color:#586354}\n.summary strong{font-weight:650;color:var(--green)}\nprogress{display:block;appearance:none;width:122px;height:5px;border:0;border-radius:10px;overflow:hidden;background:#e1e5da;color:var(--green)}\nprogress::-webkit-progress-bar{background:#e1e5da;border-radius:10px}\nprogress::-webkit-progress-value{background:var(--green);border-radius:10px}\nprogress::-moz-progress-bar{background:var(--green);border-radius:10px}\n.footer-note{margin:17px 0 0;color:#757c70;text-align:center;font-size:12px}\n@media(max-width:600px){\n.shell{width:calc(100% - 32px)}\n.brand{padding:20px 0 18px}\n.brand-detail{font-size:11px}\nmain{padding:28px 0}\n.page-heading{display:block;margin-bottom:22px}\nh1{font-size:31px}\n.intro{font-size:14px;max-width:35ch}\n.date{display:block;padding-top:13px;font-size:12px}\n.panel-heading{padding:19px 19px 15px}\n.task{margin:0 19px;padding:20px 0;gap:12px}\n.task label{font-size:16px}\n.task-top{gap:8px}\n.priority{font-size:10px;padding:2px 6px}\n.detail{font-size:12px;margin-top:6px}\n.task-meta{font-size:11px;gap:6px}\n.add-form{margin:0 19px;padding:18px 0 21px}\n.form-row{gap:8px}\n.form-row input{padding:0 10px;font-size:14px}\nbutton{padding:0 13px;font-size:13px}\n.summary{padding:17px 19px;gap:12px}\nprogress{width:87px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"brand\">\n<span class=\"mark\" aria-hidden=\"true\">\n<svg width=\"23\" height=\"23\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n<circle cx=\"5.5\" cy=\"16.5\" r=\"4\"/><circle cx=\"18.5\" cy=\"16.5\" r=\"4\"/>\n<path d=\"m5.5 16.5 5-9 5 9h-10l4-7h6l3 7M8.5 7.5h4M15.5 9.5l-1-4h3\"/>\n</svg>\n</span>\n<span class=\"brand-name\">ALDER</span>\n<span class=\"brand-detail\">Your independent bike shop</span>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<h1>Alder tasks</h1>\n<p class=\"intro\">Keep the shop admin moving, so there’s more time for bikes.</p>\n</div>\n<time class=\"date\" datetime=\"2025-06-18\">Wednesday, June 18</time>\n</div>\n\n<section class=\"task-panel\" aria-labelledby=\"today-heading\">\n<div class=\"panel-heading\">\n<h2 id=\"today-heading\">Today</h2>\n<span class=\"count\">3 tasks</span>\n</div>\n\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"review\" aria-describedby=\"review-detail review-due\">\n<div class=\"task-content\">\n<div class=\"task-top\">\n<label for=\"review\">Review proposal</label>\n<span class=\"priority high\">High</span>\n</div>\n<p class=\"detail\" id=\"review-detail\">Autumn parts order from Northline Supply</p>\n<div class=\"task-meta\">\n<span class=\"next\">Up next</span><span class=\"separator\" aria-hidden=\"true\">·</span>\n<span id=\"review-due\">Due <time datetime=\"2025-06-18T10:00\">Jun 18, 10 am</time></span>\n</div>\n</div>\n</li>\n\n<li class=\"task completed\">\n<input type=\"checkbox\" id=\"invoice\" checked aria-describedby=\"invoice-detail invoice-due\">\n<div class=\"task-content\">\n<div class=\"task-top\">\n<label for=\"invoice\">Send invoice</label>\n<span class=\"priority normal\">Normal</span>\n</div>\n<p class=\"detail\" id=\"invoice-detail\">Maya Chen’s commuter tune-up · #1048</p>\n<div class=\"task-meta\">\n<span class=\"done\">Complete</span><span class=\"separator\" aria-hidden=\"true\">·</span>\n<span id=\"invoice-due\">Due <time datetime=\"2025-06-18T11:00\">Jun 18, 11 am</time></span>\n</div>\n</div>\n</li>\n\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\" aria-describedby=\"workshop-detail workshop-due\">\n<div class=\"task-content\">\n<div class=\"task-top\">\n<label for=\"workshop\">Plan workshop</label>\n<span class=\"priority low\">Low</span>\n</div>\n<p class=\"detail\" id=\"workshop-detail\">Saturday community bike-maintenance workshop for first-time riders and everyday commuters</p>\n<div class=\"task-meta\" id=\"workshop-due\">Due <time datetime=\"2025-06-18T15:00\">Jun 18, 3 pm</time></div>\n</div>\n</li>\n</ul>\n\n<form class=\"add-form\">\n<label for=\"new-task\">New task</label>\n<div class=\"form-row\">\n<input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"What needs doing?\" autocomplete=\"off\">\n<button type=\"button\">Add task</button>\n</div>\n</form>\n\n<div class=\"summary\">\n<label for=\"completion\"><strong>1 of 3 complete</strong> · A good start</label>\n<progress id=\"completion\" value=\"1\" max=\"3\">1 of 3 complete</progress>\n</div>\n</section>\n<p class=\"footer-note\">A little less admin. A little more time on two wheels.</p>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-tasklist-01","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Birch. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Birch tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Birch tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Birch tasks</title>\n<style>\n:root{color-scheme:light;--bg:#f2f4f7;--surface:#fff;--ink:#253044;--muted:#647084;--line:#e2e7ee;--accent:#50688f;--soft:#edf1f7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\n.shell{width:min(920px,calc(100% - 48px));margin:auto}\n.app-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0 24px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:12px}\n.brand-mark{width:36px;height:36px;display:grid;place-items:center;background:var(--accent);color:white;border-radius:9px;flex:none}\nh1{font-size:19px;letter-spacing:-.5px;margin:0;font-weight:650}\n.workspace{font-size:12px;color:var(--muted)}\n.header-note{color:var(--muted);font-size:12px}\nmain{padding:34px 0 40px}\n.overview{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}\n.date{font-size:12px;color:var(--muted);margin:0 0 4px}\nh2{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0 0 8px;font-weight:650}\n.subheading{margin:0;color:var(--muted);font-size:13px}\n.summary{width:230px;flex:none}\n.summary-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px}\n.summary label{font-size:12px;color:var(--muted)}\n.summary strong{font-size:13px;font-weight:600}\nprogress{display:block;width:100%;height:6px;border:0;border-radius:10px;overflow:hidden;background:var(--line);accent-color:var(--accent)}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--accent);border-radius:10px}\nprogress::-moz-progress-bar{background:var(--accent);border-radius:10px}\n.summary p{font-size:12px;color:var(--muted);margin:7px 0 0}\n.task-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #25304403}\n.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 22px;border-bottom:1px solid var(--line)}\n.panel-heading h3{font-size:13px;font-weight:600;margin:0}\n.panel-heading span{font-size:12px;color:var(--muted)}\n.tasks{list-style:none;margin:0;padding:0}\n.task{display:grid;grid-template-columns:20px minmax(0,1fr) 144px;gap:14px;padding:23px 22px;border-bottom:1px solid var(--line);align-items:start}\n.task input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--accent);cursor:pointer}\n.task label{display:inline-block;font-size:15px;font-weight:600;cursor:pointer;line-height:1.5}\n.description{max-width:420px;margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}\n.meta{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-top:2px}\n.due{font-size:12px;white-space:nowrap;color:var(--muted)}\n.priority{display:inline-block;font-size:11px;line-height:1.5;padding:2px 7px;border-radius:4px;background:#f1f3f6;color:#5d6879;font-weight:500}\n.priority.high{color:var(--accent);background:var(--soft)}\n.done label{text-decoration:line-through;text-decoration-color:#9aa6b7;color:var(--muted)}\n.done .due{color:var(--accent)}\n.add-section{padding:20px 22px 22px;background:#fbfcfd}\n.add-section>label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}\n.add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}\n.input-wrap{min-width:0}\ninput[type=text]{display:block;width:100%;min-width:0;height:42px;padding:9px 12px;border:1px solid #cbd3df;border-radius:6px;background:#fff;color:var(--ink)}\ninput::placeholder{color:#7b8696;opacity:1}\nbutton{min-height:42px;padding:9px 19px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;font-weight:600;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#435b80}\ninput:focus-visible,button:focus-visible{outline:3px solid #aabbd6;outline-offset:3px}\n.hint{margin:7px 0 0;font-size:12px;color:var(--muted)}\n.panel-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:11px 22px;border-top:1px solid var(--line)}\n.recent{display:flex;align-items:center;gap:8px;margin-top:17px;color:var(--muted);font-size:12px}\n.recent svg{color:var(--accent);flex:none}\n.recent strong{font-weight:500;color:var(--ink)}\n@media(max-width:600px){\n.shell{width:calc(100% - 32px)}\n.app-header{padding:20px 0}\n.header-note{display:none}\nmain{padding:25px 0 28px}\n.overview{align-items:flex-start;gap:16px;margin-bottom:20px}\nh2{font-size:28px}\n.summary{width:132px;padding-top:4px}\n.summary-top{display:block;margin-bottom:7px}\n.summary label{display:block;font-size:11px;margin-bottom:2px}\n.summary strong{font-size:13px}\n.summary p{font-size:11px}\n.subheading{font-size:12px}\n.panel-heading{padding:13px 16px}\n.task{grid-template-columns:18px minmax(0,1fr);gap:0 11px;padding:19px 16px}\n.task input{grid-column:1;grid-row:1 / span 2}\n.task-body{grid-column:2}\n.description{font-size:13px;line-height:1.55}\n.meta{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px;padding-top:10px}\n.add-section{padding:17px 16px}\n.add-row{gap:8px}\nbutton{padding:9px 13px}\ninput[type=text]{font-size:16px}\n.hint{font-size:11px;max-width:240px}\n.panel-footer{padding:11px 16px;gap:3px 12px}\n.recent{align-items:flex-start;font-size:11px;line-height:1.6}\n.recent svg{margin-top:2px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"app-header\">\n<div class=\"brand\">\n<div class=\"brand-mark\" aria-hidden=\"true\">\n<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"6\" cy=\"16\" r=\"4\"/><circle cx=\"18\" cy=\"16\" r=\"4\"/><path d=\"m6 16 4-9 5 9H6m4-9h7l1 9M8 7h4m3-3h3l2 4\"/></svg>\n</div>\n<div><h1>Birch tasks</h1><div class=\"workspace\">Independent bike shop</div></div>\n</div>\n<span class=\"header-note\">A little order behind the handlebars.</span>\n</header>\n\n<main>\n<section class=\"overview\" aria-labelledby=\"today-heading\">\n<div>\n<p class=\"date\">Tuesday, 14 October</p>\n<h2 id=\"today-heading\">Today</h2>\n<p class=\"subheading\">3 tasks · 2 remaining</p>\n</div>\n<div class=\"summary\">\n<div class=\"summary-top\"><label for=\"completion\">Completion</label><strong>1 of 3 done</strong></div>\n<progress id=\"completion\" value=\"1\" max=\"3\">1 of 3 complete</progress>\n<p>A good start to the day.</p>\n</div>\n</section>\n\n<section class=\"task-panel\" aria-labelledby=\"list-heading\">\n<div class=\"panel-heading\"><h3 id=\"list-heading\">Around the shop</h3><span>Due today</span></div>\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"review\" aria-describedby=\"review-description review-due review-priority\">\n<div class=\"task-body\">\n<label for=\"review\">Review proposal</label>\n<p class=\"description\" id=\"review-description\">Check the winter parts order from Cedar Cycles before confirming quantities and delivery dates.</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"review-due\" datetime=\"2025-10-14T11:30\">Today · 11:30</time>\n<span class=\"priority high\" id=\"review-priority\">High priority</span>\n</div>\n</li>\n<li class=\"task done\">\n<input type=\"checkbox\" id=\"invoice\" checked aria-describedby=\"invoice-description invoice-due invoice-priority\">\n<div class=\"task-body\">\n<label for=\"invoice\">Send invoice</label>\n<p class=\"description\" id=\"invoice-description\">October tune-ups for the Elm Street delivery fleet, including replacement brake pads.</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"invoice-due\" datetime=\"2025-10-14T12:00\">Today · 12:00</time>\n<span class=\"priority\" id=\"invoice-priority\">Normal priority</span>\n</div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\" aria-describedby=\"workshop-description workshop-due workshop-priority\">\n<div class=\"task-body\">\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"description\" id=\"workshop-description\">Outline Saturday’s puncture-repair session and set aside spare tubes for six riders.</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"workshop-due\" datetime=\"2025-10-14T16:00\">Today · 16:00</time>\n<span class=\"priority\" id=\"workshop-priority\">Low priority</span>\n</div>\n</li>\n</ul>\n\n<div class=\"add-section\">\n<label for=\"new-task\">New task</label>\n<div class=\"add-row\">\n<div class=\"input-wrap\">\n<input type=\"text\" id=\"new-task\" placeholder=\"e.g. Order 700c tubes\" aria-describedby=\"task-hint\">\n</div>\n<button type=\"button\">Add task</button>\n</div>\n<p class=\"hint\" id=\"task-hint\">Keep it short: start with an action, like “Order” or “Call”.</p>\n</div>\n<div class=\"panel-footer\"><span>All times local</span><span>Shop hours · 09:00–18:00</span></div>\n</section>\n\n<div class=\"recent\">\n<svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"7.5\"/><path d=\"M10 5.5V10l3 2\"/></svg>\n<span><strong>Recent update</strong> · 10:42 — Send invoice marked complete.</span>\n</div>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-tasklist-02","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Cedar. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Cedar tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Cedar tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Cedar tasks</title>\n<style>\n:root{color-scheme:light;--paper:#f8f5ef;--ink:#302b26;--muted:#746c63;--line:#dcd5cb;--accent:#a14f36}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\n.masthead{max-width:1040px;margin:auto;padding:28px 32px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:750;letter-spacing:.13em}\n.brand svg{width:34px;height:26px;color:var(--accent)}\n.workspace{font-size:12px;color:var(--muted)}\nmain{max-width:936px;margin:46px auto 40px;padding:0 32px}\n.eyebrow{margin:0 0 8px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}\nh1,h2{font-family:Georgia,\"Times New Roman\",serif;font-weight:400}\nh1{margin:0;font-size:56px;line-height:1.1;letter-spacing:-.045em}\n.intro{margin:12px 0 28px;color:var(--muted);font-size:15px}\n.summary{display:flex;align-items:center;gap:18px;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.summary strong{font-size:13px;font-weight:600;white-space:nowrap}\nprogress{appearance:none;border:0;border-radius:0;width:130px;height:4px;background:var(--line);color:var(--accent)}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--accent)}\nprogress::-moz-progress-bar{background:var(--accent)}\n.status{margin-left:auto;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:7px}\n.status::before{content:\"\";width:7px;height:7px;border:1px solid currentColor;border-radius:50%}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:28px 0 12px}\nh2{margin:0;font-size:30px;letter-spacing:-.025em}\n.section-heading time{font-size:12px;color:var(--muted)}\n.tasks{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}\n.task{display:grid;grid-template-columns:22px minmax(0,1fr) 166px 72px;align-items:center;column-gap:18px;min-height:96px;padding:18px 0;border-bottom:1px solid var(--line)}\n.task input{margin:0;width:20px;height:20px;accent-color:var(--accent);cursor:pointer}\n.task label{display:block;font-size:16px;font-weight:600;cursor:pointer}\n.detail{display:block;margin-top:3px;color:var(--muted);font-size:12px}\n.due{font-size:12px;color:var(--muted)}\n.due span{display:block;margin-bottom:2px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}\n.priority{justify-self:end;border:1px solid var(--line);padding:3px 8px;font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase}\n.priority.high{color:var(--accent);border-color:var(--accent)}\n.completed label{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}\n.done{font-style:normal;font-weight:600;color:var(--ink)}\n.add-form{margin-top:25px}\n.add-form label{display:block;margin-bottom:8px;font-size:12px;font-weight:650}\n.entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}\n.entry input{width:100%;min-width:0;height:46px;border:1px solid #b9afa3;border-radius:3px;padding:0 14px;background:transparent;color:var(--ink)}\n.entry input::placeholder{color:var(--muted)}\nbutton{height:46px;padding:0 23px;border:1px solid var(--accent);border-radius:3px;background:var(--accent);color:var(--paper);font-size:13px;font-weight:650;cursor:pointer}\nbutton:hover{background:#87412d}\n:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\n.next{margin:22px 0 0;color:var(--muted);font-size:12px}\n.next strong{margin-right:8px;color:var(--ink);font-weight:650}\n@media(max-width:600px){\n.masthead{padding:19px 22px 17px}\n.brand{font-size:10px;gap:9px}\n.brand svg{width:29px}\n.workspace{font-size:11px}\nmain{margin:27px auto 28px;padding:0 22px}\nh1{font-size:43px}\n.intro{margin:10px 0 22px;font-size:13px}\n.summary{gap:12px;padding:14px 0}\n.summary strong{font-size:12px}\nprogress{width:62px}\n.status{font-size:11px;gap:5px}\n.section-heading{margin-top:23px;margin-bottom:10px}\nh2{font-size:27px}\n.section-heading time{font-size:11px}\n.task{grid-template-columns:20px minmax(0,1fr) auto;gap:6px 12px;padding:16px 0;min-height:104px}\n.task input{grid-column:1;grid-row:1 / 3;align-self:start;margin-top:3px}\n.task-content{grid-column:2;grid-row:1}\n.task label{font-size:15px}\n.detail{font-size:11px;line-height:1.45;margin-top:2px}\n.due{grid-column:2;grid-row:2;font-size:11px}\n.due span{display:inline;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;margin:0 4px 0 0}\n.priority{grid-column:3;grid-row:1;align-self:start;margin-top:3px;padding:2px 6px;font-size:9px}\n.add-form{margin-top:21px}\n.entry{gap:8px}\n.entry input{padding:0 11px;font-size:13px}\nbutton{padding:0 16px}\n.next{margin-top:18px;font-size:11px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<header class=\"masthead\">\n  <div class=\"brand\">\n    <svg viewBox=\"0 0 40 30\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\">\n      <circle cx=\"9\" cy=\"21\" r=\"7\"/><circle cx=\"31\" cy=\"21\" r=\"7\"/>\n      <path d=\"M9 21 16 9l8 12H9m15 0 5-16h-5M13 9h7M28 9l3 12\"/>\n    </svg>\n    <span>CEDAR CYCLE CO.</span>\n  </div>\n  <span class=\"workspace\">Shop workspace</span>\n</header>\n<main>\n  <header>\n    <p class=\"eyebrow\">Daily planning</p>\n    <h1>Cedar tasks</h1>\n    <p class=\"intro\">A little less admin. A little more time for bikes.</p>\n  </header>\n\n  <div class=\"summary\" aria-label=\"Today's completion summary\">\n    <strong>1 of 3 complete</strong>\n    <progress value=\"1\" max=\"3\" aria-label=\"Today's tasks completed\">1 of 3</progress>\n    <span class=\"status\">In progress</span>\n  </div>\n\n  <section aria-labelledby=\"today-heading\">\n    <div class=\"section-heading\">\n      <h2 id=\"today-heading\">Today</h2>\n      <time datetime=\"2024-06-18\">Tuesday, 18 June</time>\n    </div>\n    <ul class=\"tasks\">\n      <li class=\"task\">\n        <input type=\"checkbox\" id=\"proposal\">\n        <div class=\"task-content\">\n          <label for=\"proposal\">Review proposal</label>\n          <span class=\"detail\">Service-bay upgrade · supplier quote</span>\n        </div>\n        <div class=\"due\"><span>Due today</span><time datetime=\"2024-06-18T10:00\">10:00 am</time></div>\n        <span class=\"priority high\">High</span>\n      </li>\n      <li class=\"task completed\">\n        <input type=\"checkbox\" id=\"invoice\" checked>\n        <div class=\"task-content\">\n          <label for=\"invoice\">Send invoice</label>\n          <span class=\"detail\"><em class=\"done\">Done</em> · Repair #1842, Morgan Ellis</span>\n        </div>\n        <div class=\"due\"><span>Due today</span><time datetime=\"2024-06-18T12:00\">12:00 pm</time></div>\n        <span class=\"priority\">Normal</span>\n      </li>\n      <li class=\"task\">\n        <input type=\"checkbox\" id=\"workshop\">\n        <div class=\"task-content\">\n          <label for=\"workshop\">Plan workshop</label>\n          <span class=\"detail\">Saturday puncture-repair clinic</span>\n        </div>\n        <div class=\"due\"><span>Due today</span><time datetime=\"2024-06-18T16:00\">4:00 pm</time></div>\n        <span class=\"priority\">Low</span>\n      </li>\n    </ul>\n  </section>\n\n  <form class=\"add-form\">\n    <label for=\"new-task\">New task</label>\n    <div class=\"entry\">\n      <input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"e.g. Order brake pads\">\n      <button type=\"button\">Add task</button>\n    </div>\n  </form>\n  <p class=\"next\"><strong>Next up</strong>Review the service-bay quote before opening.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-tasklist-03","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Dune. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Dune tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Dune tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Dune tasks</title>\n<style>\n:root{color-scheme:light;--ink:#29262b;--muted:#6e686e;--plum:#58364f;--line:#dedbd7;--paper:#f7f6f2;--white:#fff;--tint:#eee7ec}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\n.shell{max-width:1120px;margin:auto;padding:0 40px}\n.topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}\n.brand{font-size:13px;font-weight:750;letter-spacing:.13em;text-transform:uppercase}\n.brand span{color:var(--muted);font-weight:450;letter-spacing:.03em;margin-left:14px;padding-left:14px;border-left:1px solid #c9c3c7}\n.section-name{color:var(--muted);font-size:12px}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:44px 0 34px}\nh1,h2,h3,p{margin:0}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:52px;line-height:1.08;font-weight:400;letter-spacing:-1.8px}\n.intro p{color:var(--muted);max-width:490px;margin-top:15px;font-size:15px;line-height:1.6}\n.day{text-align:right;white-space:nowrap;padding-bottom:3px}\n.eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}\n.day time{display:block;margin-top:5px;font-size:14px}\n.workspace{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:28px;align-items:start}\n.tasks{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden}\n.tasks-head{padding:23px 24px 20px;border-bottom:1px solid var(--line)}\n.heading-row{display:flex;justify-content:space-between;align-items:center;gap:16px}\nh2{font-family:Georgia,\"Times New Roman\",serif;font-size:29px;font-weight:400;letter-spacing:-.5px}\n.task-count{font-size:12px;color:var(--muted)}\n.completion{display:flex;align-items:center;gap:12px;margin-top:15px}\n.completion p{font-size:12px;color:var(--muted);white-space:nowrap}\n.completion strong{color:var(--ink);font-weight:600}\nprogress{appearance:none;-webkit-appearance:none;display:block;width:80px;height:4px;border:0;border-radius:3px;overflow:hidden;background:#eae6e9}\nprogress::-webkit-progress-bar{background:#eae6e9}\nprogress::-webkit-progress-value{background:var(--plum)}\nprogress::-moz-progress-bar{background:var(--plum)}\n.task-list{list-style:none;margin:0;padding:0}\n.task{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:13px;align-items:start;padding:24px;border-bottom:1px solid var(--line)}\n.task input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--plum);cursor:pointer}\n.task label{display:block;font-size:16px;font-weight:600;cursor:pointer;line-height:1.45}\n.task-description{font-size:12px;color:var(--muted);margin-top:5px}\n.task.done label{color:var(--muted);text-decoration:line-through;text-decoration-color:#ada2aa}\n.meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-top:2px}\n.due{font-size:11px;color:var(--muted);white-space:nowrap}\n.priority{font-size:10px;line-height:1.5;padding:2px 7px;border-radius:3px;background:#f1f0ed;color:#625c62;white-space:nowrap}\n.priority.high{background:var(--tint);color:var(--plum)}\n.add-form{padding:21px 24px 24px}\n.add-form label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}\n.entry{display:flex;gap:8px}\n.entry input{min-width:0;flex:1;width:100%;height:42px;padding:9px 12px;border:1px solid #c9c3c7;border-radius:4px;color:var(--ink);background:var(--white)}\n.entry input::placeholder{color:#847c83}\nbutton{border:1px solid var(--plum);border-radius:4px;padding:9px 16px;background:var(--plum);color:white;font-weight:600;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#452a3e}\ninput:focus-visible,button:focus-visible{outline:3px solid #ad8ca4;outline-offset:3px}\n.shop-detail{border-top:3px solid var(--plum);padding:20px;background:#eeece6;border-radius:0 0 4px 4px}\n.shop-detail .eyebrow{color:var(--plum)}\nh3{font-family:Georgia,\"Times New Roman\",serif;font-size:24px;font-weight:400;line-height:1.2;margin:12px 0 8px}\n.event-time{font-size:12px;color:var(--muted);line-height:1.7}\nfigure{margin:22px 0 18px}\n.seats{display:block;width:100%;height:22px}\nfigcaption{font-size:12px;margin-top:8px}\nfigcaption span{color:var(--muted)}\n.note{font-size:12px;line-height:1.7;color:#625b61}\n.next{border-top:1px solid #d5d0ca;margin-top:23px;padding-top:17px}\n.next p{font-size:12px;margin-top:7px}\n.next time{display:block;color:var(--muted);font-size:11px;margin-top:4px}\nfooter{padding:22px 0 36px;color:var(--muted);font-size:11px}\n@media(max-width:760px){\n.shell{padding:0 20px}\n.topbar{min-height:63px}\n.brand{font-size:12px}\n.brand span{margin-left:9px;padding-left:9px;font-size:11px}\n.section-name{font-size:11px}\n.intro{display:block;padding:30px 0 25px}\nh1{font-size:42px;letter-spacing:-1.3px}\n.intro p{font-size:14px;margin-top:12px}\n.day{display:flex;align-items:center;gap:10px;text-align:left;margin-top:20px;padding:0}\n.day time{font-size:12px;margin:0}\n.workspace{grid-template-columns:1fr;gap:24px}\n.tasks-head{padding:18px}\n.task{padding:20px 18px;grid-template-columns:18px minmax(0,1fr);column-gap:12px;row-gap:9px}\n.task label{font-size:15px}\n.task-description{font-size:11px}\n.meta{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:0}\n.add-form{padding:18px}\n.entry{flex-direction:column}\n.entry button{min-height:42px}\n.shop-detail{padding:20px}\nfigure{max-width:250px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"topbar\">\n<div class=\"brand\">Dune<span>Cycle shop</span></div>\n<div class=\"section-name\">Daily desk</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<h1 id=\"page-title\">Dune tasks</h1>\n<p>Keep the shop moving, from supplier orders to Saturday’s flat-fix clinic.</p>\n</div>\n<div class=\"day\">\n<span class=\"eyebrow\">Shop day</span>\n<time datetime=\"2025-06-12\">Thursday, 12 June</time>\n</div>\n</section>\n<div class=\"workspace\">\n<section class=\"tasks\" aria-labelledby=\"today-title\">\n<header class=\"tasks-head\">\n<div class=\"heading-row\">\n<h2 id=\"today-title\">Today</h2>\n<span class=\"task-count\">3 tasks</span>\n</div>\n<div class=\"completion\">\n<progress value=\"1\" max=\"3\" aria-label=\"1 of 3 tasks complete\">1 of 3</progress>\n<p><strong>1 of 3 complete</strong> · 2 to go</p>\n</div>\n</header>\n<ul class=\"task-list\">\n<li class=\"task\">\n<input id=\"proposal\" type=\"checkbox\" aria-describedby=\"proposal-detail\">\n<div>\n<label for=\"proposal\">Review proposal</label>\n<p class=\"task-description\" id=\"proposal-detail\">New workstands · Northline Supply</p>\n</div>\n<div class=\"meta\">\n<span class=\"due\">Due <time datetime=\"2025-06-12T11:00\">12 Jun · 11:00</time></span>\n<span class=\"priority high\">High priority</span>\n</div>\n</li>\n<li class=\"task done\">\n<input id=\"invoice\" type=\"checkbox\" checked aria-describedby=\"invoice-detail\">\n<div>\n<label for=\"invoice\">Send invoice</label>\n<p class=\"task-description\" id=\"invoice-detail\">Wheel rebuild · Order #1048</p>\n</div>\n<div class=\"meta\">\n<span class=\"due\">Due <time datetime=\"2025-06-12T12:00\">12 Jun · 12:00</time></span>\n<span class=\"priority\">Normal priority</span>\n</div>\n</li>\n<li class=\"task\">\n<input id=\"workshop\" type=\"checkbox\" aria-describedby=\"workshop-detail\">\n<div>\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"task-description\" id=\"workshop-detail\">Flat-fix clinic · Confirm tools &amp; places</p>\n</div>\n<div class=\"meta\">\n<span class=\"due\">Due <time datetime=\"2025-06-12T16:00\">12 Jun · 16:00</time></span>\n<span class=\"priority\">Normal priority</span>\n</div>\n</li>\n</ul>\n<form class=\"add-form\">\n<label for=\"new-task\">New task</label>\n<div class=\"entry\">\n<input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"e.g. Order 700c inner tubes\">\n<button type=\"button\">Add task</button>\n</div>\n</form>\n</section>\n<aside class=\"shop-detail\" aria-labelledby=\"clinic-title\">\n<span class=\"eyebrow\">At the shop</span>\n<h3 id=\"clinic-title\">Flat-fix clinic</h3>\n<p class=\"event-time\"><time datetime=\"2025-06-14T10:00\">Saturday, 14 June · 10:00–12:00</time><br>On the workshop floor</p>\n<figure>\n<svg class=\"seats\" viewBox=\"0 0 224 22\" role=\"img\" aria-label=\"Workshop capacity: six reserved places and two open places\">\n<g fill=\"#58364f\">\n<rect width=\"22\" height=\"22\" rx=\"3\"/>\n<rect x=\"29\" width=\"22\" height=\"22\" rx=\"3\"/>\n<rect x=\"58\" width=\"22\" height=\"22\" rx=\"3\"/>\n<rect x=\"87\" width=\"22\" height=\"22\" rx=\"3\"/>\n<rect x=\"116\" width=\"22\" height=\"22\" rx=\"3\"/>\n<rect x=\"145\" width=\"22\" height=\"22\" rx=\"3\"/>\n</g>\n<g fill=\"none\" stroke=\"#a79ba3\">\n<rect x=\"174.5\" y=\".5\" width=\"21\" height=\"21\" rx=\"3\"/>\n<rect x=\"203\" y=\".5\" width=\"20.5\" height=\"21\" rx=\"3\"/>\n</g>\n</svg>\n<figcaption>6 of 8 places reserved <span>· 2 open</span></figcaption>\n</figure>\n<p class=\"note\">Set aside patch kits and two spare pumps. Confirm the final headcount before closing today.</p>\n<div class=\"next\">\n<span class=\"eyebrow\">Next up</span>\n<p>Supplier delivery</p>\n<time datetime=\"2025-06-13T09:00\">Fri, 13 Jun · 09:00–12:00</time>\n</div>\n</aside>\n</div>\n</main>\n<footer>All times are local to the shop.</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-tasklist-04","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Elm. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: calm and spacious; use forest green as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Elm tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Elm tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Elm tasks — Cedar Grove Food Co-op</title>\n<style>\n:root{color-scheme:light;--ink:#263b30;--muted:#68736c;--green:#2d5b42;--line:#e0e5de;--paper:#fff;--background:#f5f6f2}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--background);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton,input{font:inherit}\n.site-header{background:#fbfcf9;border-bottom:1px solid var(--line)}\n.header-inner{max-width:980px;min-height:80px;margin:auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px}\n.brand svg{width:29px;height:32px;color:var(--green);flex-shrink:0}\n.brand-name{font-size:20px;font-weight:650;letter-spacing:-.6px}\n.workspace{text-align:right;font-size:13px;font-weight:550}\n.workspace span{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:2px}\nmain{max-width:924px;margin:0 auto;padding:44px 28px 40px}\n.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:25px}\nh1{font-size:34px;line-height:1.2;font-weight:650;letter-spacing:-1px;margin:0 0 8px}\n.date{margin:0;color:var(--muted);font-size:14px}\n.completion{min-width:150px}\n.completion p{font-size:13px;margin:0 0 9px;color:var(--muted)}\n.completion strong{color:var(--green);font-weight:650}\nprogress{display:block;width:150px;height:5px;border:0;border-radius:6px;overflow:hidden;appearance:none;background:#e3e8e0;accent-color:var(--green)}\nprogress::-webkit-progress-bar{background:#e3e8e0}\nprogress::-webkit-progress-value{background:var(--green);border-radius:6px}\nprogress::-moz-progress-bar{background:var(--green)}\n.task-panel{border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden}\n.list-heading{display:flex;justify-content:space-between;gap:16px;padding:13px 22px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}\n.list-heading strong{font-weight:550;color:var(--ink)}\n.tasks{list-style:none;margin:0;padding:0}\n.task{display:grid;grid-template-columns:22px minmax(0,1fr) 147px;gap:14px;padding:18px 22px;align-items:start}\n.task+.task{border-top:1px solid var(--line)}\n.task input{width:20px;height:20px;margin:6px 0 0;accent-color:var(--green);cursor:pointer}\n.task label{display:block;min-width:0;cursor:pointer;padding:2px 0 6px}\n.task-title{display:block;font-size:17px;font-weight:600;line-height:1.5;letter-spacing:-.2px}\n.description{display:block;font-size:14px;line-height:1.6;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}\n.task input:checked+label .task-title{color:#788179;text-decoration:line-through;text-decoration-thickness:1px}\n.task input:checked+label .description{color:#7a837c}\n.metadata{text-align:right;padding-top:6px;font-size:12px;color:var(--muted)}\n.metadata time{display:block;white-space:nowrap}\n.priority{display:inline-flex;align-items:center;gap:5px;margin-top:10px;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:550;line-height:1.6}\n.priority::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.high{background:#f6efe2;color:#8a642d}\n.normal{background:#eef3ed;color:#4e6956}\n.low{background:#f1f3ef;color:#6a746b}\n.add-form{padding:20px 22px 22px;background:#fafbf8;border-top:1px solid var(--line)}\n.add-form label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}\n.add-controls{display:flex;gap:10px}\n.add-controls input{width:100%;min-width:0;flex:1;height:46px;padding:10px 13px;border:1px solid #cdd5cb;border-radius:6px;background:#fff;color:var(--ink)}\n.add-controls input::placeholder{color:#7a837b;opacity:1}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border:1px solid var(--green);border-radius:6px;background:var(--green);color:white;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}\nbutton svg{width:16px;height:16px}\nbutton:hover{background:#224a34}\ninput:focus-visible,button:focus-visible{outline:3px solid #abc7a9;outline-offset:3px}\n.hint{margin:9px 0 0;color:var(--muted);font-size:12px}\n.page-note{display:flex;align-items:center;gap:7px;margin:17px 2px 0;color:var(--muted);font-size:12px}\n.page-note svg{width:15px;height:15px;flex-shrink:0}\n@media(max-width:600px){\n.header-inner{min-height:74px;padding:14px 18px;gap:12px}\n.brand{gap:8px}\n.brand-name{font-size:18px;white-space:nowrap}\n.brand svg{width:24px}\n.workspace{font-size:11px;max-width:145px}\n.workspace span{font-size:10px}\nmain{padding:27px 16px 28px}\n.page-heading{gap:14px;align-items:flex-start;margin-bottom:21px}\nh1{font-size:30px}\n.date{font-size:12px}\n.completion{min-width:110px;padding-top:6px}\n.completion p{font-size:12px}\nprogress{width:110px}\n.list-heading{padding:12px 16px}\n.task{grid-template-columns:22px minmax(0,1fr);gap:0 12px;padding:16px}\n.task-title{font-size:16px}\n.description{font-size:13px;line-height:1.55;margin-top:4px}\n.metadata{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:3px;text-align:left}\n.priority{margin-top:0}\n.add-form{padding:17px 16px 18px}\n.add-controls{gap:8px}\n.add-controls input{font-size:14px;padding:10px}\nbutton{padding:10px 12px;gap:5px}\n.hint{line-height:1.5}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n  <div class=\"header-inner\">\n    <div class=\"brand\">\n      <svg viewBox=\"0 0 32 36\" fill=\"none\" aria-hidden=\"true\"><path d=\"M26 5C12 3 4 10 6 19c1 6 7 9 13 6C27 21 28 13 26 5Z\" fill=\"currentColor\" opacity=\".13\"/><path d=\"M26 5C12 3 4 10 6 19c1 6 7 9 13 6C27 21 28 13 26 5ZM8 32c0-10 7-16 14-22M10 21l-1-7m6 2 7 1\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <span class=\"brand-name\">Elm tasks</span>\n    </div>\n    <div class=\"workspace\">Cedar Grove Food Co-op<span>Coordinator workspace</span></div>\n  </div>\n</header>\n<main>\n  <header class=\"page-heading\">\n    <div>\n      <h1 id=\"today-heading\">Today</h1>\n      <p class=\"date\"><time datetime=\"2025-10-22\">Wednesday, October 22</time></p>\n    </div>\n    <div class=\"completion\">\n      <p id=\"completion-label\"><strong>1 of 3</strong> complete</p>\n      <progress value=\"1\" max=\"3\" aria-labelledby=\"completion-label\">1 of 3 complete</progress>\n    </div>\n  </header>\n\n  <section class=\"task-panel\" aria-labelledby=\"today-heading\">\n    <div class=\"list-heading\"><strong>For the co-op</strong><span>3 tasks</span></div>\n    <ul class=\"tasks\">\n      <li class=\"task\">\n        <input type=\"checkbox\" id=\"review\">\n        <label for=\"review\">\n          <span class=\"task-title\">Review proposal</span>\n          <span class=\"description\">Review the winter produce plan for the Member-led Purchasing &amp; Equitable Neighborhood Food Access Working Group.</span>\n        </label>\n        <div class=\"metadata\">\n          <time datetime=\"2025-10-22T10:00\">Due Oct 22 · 10 am</time>\n          <span class=\"priority high\">High priority</span>\n        </div>\n      </li>\n      <li class=\"task\">\n        <input type=\"checkbox\" id=\"invoice\" checked>\n        <label for=\"invoice\">\n          <span class=\"task-title\">Send invoice</span>\n          <span class=\"description\">October produce delivery · Greenbank Farm · Invoice #1048</span>\n        </label>\n        <div class=\"metadata\">\n          <time datetime=\"2025-10-22T12:00\">Due Oct 22 · 12 pm</time>\n          <span class=\"priority low\">Low priority</span>\n        </div>\n      </li>\n      <li class=\"task\">\n        <input type=\"checkbox\" id=\"workshop\">\n        <label for=\"workshop\">\n          <span class=\"task-title\">Plan workshop</span>\n          <span class=\"description\">Outline a hands-on pickling session for members using surplus vegetables from this week’s harvest.</span>\n        </label>\n        <div class=\"metadata\">\n          <time datetime=\"2025-10-22T15:00\">Due Oct 22 · 3 pm</time>\n          <span class=\"priority normal\">Normal priority</span>\n        </div>\n      </li>\n    </ul>\n    <form class=\"add-form\">\n      <label for=\"new-task\">New task</label>\n      <div class=\"add-controls\">\n        <input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"What needs doing?\" aria-describedby=\"task-hint\">\n        <button type=\"button\">\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n          Add task\n        </button>\n      </div>\n      <p class=\"hint\" id=\"task-hint\">Keep it specific, like “Confirm Saturday’s pantry volunteers.”</p>\n    </form>\n  </section>\n  <p class=\"page-note\">\n    <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"7\" cy=\"6\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M2.5 16v-2a4.5 4.5 0 0 1 9 0v2M13 4a2.5 2.5 0 0 1 0 5m1 2a4 4 0 0 1 3.5 4v1\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\"/></svg>\n    Shared with your co-op’s 6 coordinators\n  </p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-tasklist-05","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Fjord. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: compact but readable; use slate blue as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Fjord tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Fjord tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Fjord tasks</title>\n<style>\n:root{color-scheme:light;--paper:#f5f3ee;--surface:#fcfbf8;--ink:#253244;--muted:#677078;--line:#dedfd9;--accent:#405675}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\n.shell{max-width:928px;margin:auto;padding:0 32px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:12px}\n.brand-mark{width:32px;height:32px;display:grid;place-items:center;background:var(--ink);color:var(--surface);font-family:Georgia,serif;font-size:24px;border-radius:4px}\n.brand-name{font-size:17px;font-weight:700;letter-spacing:-.4px}\n.brand-detail{color:var(--muted);font-size:12px}\n.header-date{font-size:12px;color:var(--muted);white-space:nowrap}\nmain{padding-top:42px!important;padding-bottom:36px!important}\n.intro{margin-bottom:30px}\n.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--accent);margin:0 0 7px}\nh1{font-size:36px;line-height:1.15;letter-spacing:-1.3px;margin:0 0 10px;font-weight:650}\n.intro p:last-child{margin:0;color:var(--muted)}\n.task-section{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}\n.section-heading{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}\nh2{font-size:18px;letter-spacing:-.4px;margin:0}\n.completion{display:flex;align-items:center;gap:12px}\n.completion label{font-size:12px;color:var(--muted);white-space:nowrap}\nprogress{display:block;width:88px;height:5px;border:0;border-radius:3px;overflow:hidden;background:#e5e7e5;accent-color:var(--accent)}\nprogress::-webkit-progress-bar{background:#e5e7e5}\nprogress::-webkit-progress-value{background:var(--accent);border-radius:3px}\nprogress::-moz-progress-bar{background:var(--accent)}\n.tasks{list-style:none;padding:0;margin:0}\n.task{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line)}\n.task input{width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}\n.task label{display:block;font-size:16px;font-weight:600;letter-spacing:-.2px;cursor:pointer}\n.task-context{font-size:12px;color:var(--muted);margin:4px 0 0}\n.task-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}\n.task-meta time{font-size:12px;color:var(--muted);white-space:nowrap}\n.priority{font-size:10px;line-height:1.6;font-weight:600;padding:1px 7px;border-radius:3px;letter-spacing:.2px}\n.high{background:#eee6d9;color:#78582f}\n.medium{background:#e7ecf2;color:#405675}\n.low{background:#eeefeb;color:#657068}\n.task.done label{text-decoration:line-through;text-decoration-thickness:1px;color:#69736f}\n.task.done{background:#f7f8f4}\n.add-task{padding:21px 24px 24px}\n.add-task>label{display:block;font-size:12px;font-weight:650;margin-bottom:8px}\n.entry{display:grid;grid-template-columns:minmax(0,1fr) auto 142px;gap:12px;align-items:center}\n.entry input{width:100%;min-width:0;height:42px;padding:9px 12px;border:1px solid #bcc2c6;border-radius:4px;color:var(--ink);background:#fff}\n.entry input::placeholder{color:#7b8187}\n.entry button{height:42px;padding:0 19px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:white;font-weight:600;white-space:nowrap;cursor:pointer}\n.entry button:hover{background:#304563}\n.entry small{font-size:11px;color:var(--muted);line-height:1.5}\ninput:focus-visible,button:focus-visible{outline:3px solid #a6b7ce;outline-offset:3px}\n.recent{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:12px;margin:18px 2px 0}\n.recent svg{flex:none;margin-top:2px;color:var(--accent)}\n.recent p{margin:0}\n.recent strong{font-weight:600;color:#4b5764}\n@media(max-width:600px){\n.shell{padding:0 20px}\n.header-inner{min-height:68px;gap:10px}\n.brand{gap:9px}\n.brand-detail{font-size:10px}\n.header-date{font-size:11px}\nmain{padding-top:28px!important;padding-bottom:24px!important}\n.intro{margin-bottom:23px}\nh1{font-size:31px}\n.intro p:last-child{font-size:13px}\n.section-heading{padding:17px 16px;gap:12px}\n.completion{flex-direction:column;align-items:flex-end;gap:5px}\n.completion label{font-size:11px}\nprogress{width:88px;height:4px}\n.task{padding:17px 16px;gap:3px 12px;grid-template-columns:18px minmax(0,1fr)}\n.task input{grid-row:1/3;align-self:start;margin-top:3px}\n.task label{font-size:15px}\n.task-context{font-size:11px;margin-top:3px}\n.task-meta{grid-column:2;flex-direction:row;align-items:center;gap:9px;text-align:left;margin-top:5px}\n.task-meta time{font-size:11px}\n.add-task{padding:17px 16px 18px}\n.entry{grid-template-columns:minmax(0,1fr) auto;gap:9px}\n.entry button{padding:0 14px}\n.entry small{grid-column:1/-1;font-size:11px}\n.recent{font-size:11px;margin-top:16px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"shell header-inner\">\n<div class=\"brand\">\n<span class=\"brand-mark\" aria-hidden=\"true\">f</span>\n<div><div class=\"brand-name\">Fjord</div><div class=\"brand-detail\">Community food co-op</div></div>\n</div>\n<time class=\"header-date\" datetime=\"2025-10-14\">Tue, 14 October</time>\n</div>\n</header>\n<main class=\"shell\">\n<div class=\"intro\">\n<p class=\"eyebrow\">THE DAILY LIST</p>\n<h1>Fjord tasks</h1>\n<p>A little coordination. A well-fed community.</p>\n</div>\n<section class=\"task-section\" aria-labelledby=\"today-title\">\n<div class=\"section-heading\">\n<h2 id=\"today-title\">Today</h2>\n<div class=\"completion\">\n<label for=\"daily-progress\">1 of 3 complete</label>\n<progress id=\"daily-progress\" value=\"1\" max=\"3\">1 of 3 complete</progress>\n</div>\n</div>\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"proposal\">\n<div>\n<label for=\"proposal\">Review proposal</label>\n<p class=\"task-context\">Autumn produce sourcing · Buying team</p>\n</div>\n<div class=\"task-meta\">\n<time datetime=\"2025-10-14T11:00\">14 Oct · 11:00</time>\n<span class=\"priority high\">High priority</span>\n</div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"invoice\">\n<div>\n<label for=\"invoice\">Send invoice</label>\n<p class=\"task-context\">Weekly veg boxes · Accounts</p>\n</div>\n<div class=\"task-meta\">\n<time datetime=\"2025-10-14T14:00\">14 Oct · 14:00</time>\n<span class=\"priority medium\">Medium priority</span>\n</div>\n</li>\n<li class=\"task done\">\n<input type=\"checkbox\" id=\"workshop\" checked>\n<div>\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"task-context\">Seasonal cooking · Member events</p>\n</div>\n<div class=\"task-meta\">\n<time datetime=\"2025-10-14T16:00\">14 Oct · 16:00</time>\n<span class=\"priority low\">Low priority</span>\n</div>\n</li>\n</ul>\n<form class=\"add-task\">\n<label for=\"new-task\">New task</label>\n<div class=\"entry\">\n<input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"What needs doing?\" aria-describedby=\"task-hint\">\n<button type=\"button\">Add task</button>\n<small id=\"task-hint\">Keep it specific, like “Confirm produce pickup”.</small>\n</div>\n</form>\n</section>\n<div class=\"recent\">\n<svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M6.5 10l2.3 2.3 4.7-4.8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n<p><strong>Recent update</strong> · Maya completed “Plan workshop” at 09:20.</p>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-tasklist-06","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Grove. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Grove tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Grove tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Grove tasks</title>\n<style>\n:root{color-scheme:light;--bg:#f2f5f4;--paper:#fff;--ink:#293734;--muted:#66736f;--line:#dce3df;--accent:#a64d38;--soft:#f8ede8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\nbutton,input:focus-visible{outline-offset:4px}\n:focus-visible{outline:2px solid var(--accent);outline-offset:4px}\n.shell{max-width:1120px;margin:auto;padding:0 40px}\n.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:28px;height:28px;color:var(--accent)}\n.workspace-label{font-size:12px;color:var(--muted)}\nmain{padding:48px 0 64px}\n.eyebrow{margin:0 0 10px;font-size:11px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}\nh1,h2,h3,p{margin-top:0}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:52px;font-weight:400;letter-spacing:-1.7px;line-height:1.1;margin-bottom:15px}\n.intro{color:var(--muted);font-size:16px;margin-bottom:34px;max-width:560px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}\n.card{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.section-heading{padding:23px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}\nh2{font-family:Georgia,\"Times New Roman\",serif;font-size:26px;line-height:1.2;font-weight:400;margin:0}\n.count{font-size:12px;color:var(--muted);white-space:nowrap}\n.task-list{list-style:none;padding:0;margin:0}\n.task{display:grid;grid-template-columns:19px minmax(0,1fr);gap:13px;padding:23px 26px;border-bottom:1px solid var(--line)}\n.task input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--accent);cursor:pointer}\n.task-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}\n.task label{font-size:16px;font-weight:600;cursor:pointer}\n.task-note{font-size:12px;color:var(--muted);margin:4px 0 0}\n.task-meta{display:flex;align-items:flex-end;flex-direction:column;gap:7px;padding-top:2px}\n.due{font-size:11px;color:var(--muted);white-space:nowrap}\n.priority{font-size:10px;line-height:1.5;padding:2px 7px;border-radius:3px;background:#f0f3f2;color:#5c6864}\n.priority.high{background:var(--soft);color:var(--accent)}\n.task:has(input:checked) label{color:var(--muted);text-decoration:line-through;text-decoration-color:#9aa7a1}\n.add-task{padding:22px 26px 25px;background:#fbfcfc}\n.add-task label{display:block;font-weight:600;font-size:12px;margin-bottom:8px}\n.input-row{display:flex;gap:9px}\n.input-row input{min-width:0;flex:1;width:100%;padding:11px 12px;border:1px solid #bdc8c2;border-radius:4px;background:#fff;color:var(--ink);font-size:14px}\n.input-row input::placeholder{color:#7a8580}\nbutton{flex-shrink:0;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fff;font-weight:600;padding:10px 16px;cursor:pointer}\nbutton:hover{background:#913f2d}\naside{display:grid;gap:20px}\n.summary{padding:24px}\n.summary h2,.upcoming h2{font-family:inherit;font-size:14px;font-weight:650;letter-spacing:0}\n.summary-count{margin:20px 0 12px;display:flex;align-items:baseline;gap:5px}\n.summary-count strong{font-family:Georgia,\"Times New Roman\",serif;font-size:38px;font-weight:400;line-height:1}\n.summary-count span{color:var(--muted);font-size:12px}\nprogress{display:block;appearance:none;width:100%;height:5px;border:0;border-radius:3px;overflow:hidden;background:#e8edeb}\nprogress::-webkit-progress-bar{background:#e8edeb}\nprogress::-webkit-progress-value{background:var(--accent);border-radius:3px}\nprogress::-moz-progress-bar{background:var(--accent);border-radius:3px}\n.summary-detail{font-size:12px;margin:12px 0 20px;color:var(--muted)}\n.status{border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:11px;display:flex;gap:7px;align-items:center}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:#7a8981}\n.upcoming{padding:24px}\n.upcoming-header{display:flex;align-items:center;justify-content:space-between;gap:10px}\n.empty-icon{width:30px;height:30px;color:#8a9891;margin:26px 0 12px}\n.empty-title{font-size:13px;font-weight:600;margin-bottom:7px}\n.empty-copy{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:0}\nfooter{margin-top:28px;font-size:11px;color:var(--muted)}\n@media(max-width:760px){\n.shell{padding:0 20px}\n.site-header{height:70px}\n.workspace-label{max-width:100px;text-align:right;font-size:11px}\nmain{padding:30px 0 36px}\nh1{font-size:42px}\n.intro{font-size:14px;margin-bottom:25px}\n.layout{grid-template-columns:1fr;gap:18px}\n.section-heading{padding:19px 20px}\n.task{padding:19px 20px;gap:11px}\n.task-body{grid-template-columns:1fr;gap:9px}\n.task-meta{flex-direction:row;align-items:center;gap:10px;padding:0}\n.task label{font-size:16px}\n.add-task{padding:19px 20px 21px}\n.input-row input{font-size:16px;padding:10px}\nbutton{padding:10px 12px}\n.summary,.upcoming{padding:21px}\n.summary-count{margin-top:16px}\n.summary-detail{margin-bottom:14px}\n.empty-icon{margin-top:21px}\nfooter{margin-top:22px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"site-header\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M14 25V13M14 17C6 17 3 12 4 5c7 0 11 4 10 12ZM14 13C14 6 18 2 25 3c0 7-4 11-11 10Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n<span>Grove</span>\n</div>\n<span class=\"workspace-label\">Community food co-op</span>\n</header>\n<main>\n<p class=\"eyebrow\"><time datetime=\"2026-05-18\">Monday, 18 May</time> · Operations</p>\n<h1>Grove tasks</h1>\n<p class=\"intro\">A few small steps to keep good food moving through the co-op.</p>\n<div class=\"layout\">\n<section class=\"card\" aria-labelledby=\"today-heading\">\n<div class=\"section-heading\">\n<h2 id=\"today-heading\">Today</h2>\n<span class=\"count\">2 remaining</span>\n</div>\n<ul class=\"task-list\">\n<li class=\"task\">\n<input id=\"review\" type=\"checkbox\" aria-describedby=\"review-note\">\n<div class=\"task-body\">\n<div>\n<label for=\"review\">Review proposal</label>\n<p class=\"task-note\" id=\"review-note\">Seasonal produce from Willow Farm</p>\n</div>\n<div class=\"task-meta\">\n<time class=\"due\" datetime=\"2026-05-18T11:00\">Due today · 11 am</time>\n<span class=\"priority high\">High priority</span>\n</div>\n</div>\n</li>\n<li class=\"task\">\n<input id=\"invoice\" type=\"checkbox\" checked aria-describedby=\"invoice-note\">\n<div class=\"task-body\">\n<div>\n<label for=\"invoice\">Send invoice</label>\n<p class=\"task-note\" id=\"invoice-note\">Weekly order for the community kitchen</p>\n</div>\n<div class=\"task-meta\">\n<time class=\"due\" datetime=\"2026-05-18T13:00\">Due today · 1 pm</time>\n<span class=\"priority\">Medium priority</span>\n</div>\n</div>\n</li>\n<li class=\"task\">\n<input id=\"workshop\" type=\"checkbox\" aria-describedby=\"workshop-note\">\n<div class=\"task-body\">\n<div>\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"task-note\" id=\"workshop-note\">Preserving the harvest with our members</p>\n</div>\n<div class=\"task-meta\">\n<time class=\"due\" datetime=\"2026-05-18T16:00\">Due today · 4 pm</time>\n<span class=\"priority\">Low priority</span>\n</div>\n</div>\n</li>\n</ul>\n<form class=\"add-task\">\n<label for=\"new-task\">New task</label>\n<div class=\"input-row\">\n<input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"What needs doing?\">\n<button type=\"button\">Add task</button>\n</div>\n</form>\n</section>\n<aside aria-label=\"Task overview\">\n<section class=\"card summary\" aria-labelledby=\"completion-heading\">\n<h2 id=\"completion-heading\">Today's progress</h2>\n<p class=\"summary-count\"><strong>1</strong><span>of 3 tasks complete</span></p>\n<progress value=\"1\" max=\"3\" aria-label=\"Today's task completion\">1 of 3 complete</progress>\n<p class=\"summary-detail\">Two more things, one shared purpose.</p>\n<div class=\"status\">No overdue tasks</div>\n</section>\n<section class=\"card upcoming\" aria-labelledby=\"upcoming-heading\">\n<div class=\"upcoming-header\">\n<h2 id=\"upcoming-heading\">Upcoming</h2>\n<span class=\"count\">0 tasks</span>\n</div>\n<svg class=\"empty-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><rect x=\"5\" y=\"7\" width=\"22\" height=\"22\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M5 13h22M11 3v8M21 3v8M12 21h8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"/></svg>\n<p class=\"empty-title\">A little room to look ahead.</p>\n<p class=\"empty-copy\">No tasks are scheduled beyond today. Future-dated tasks will appear here, ready for your next co-op day.</p>\n</section>\n</aside>\n</div>\n<footer>Good food. Shared effort.</footer>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-tasklist-07","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Harbor. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: practical and understated; use deep plum as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Harbor tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Harbor tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Harbor tasks</title>\n<style>\n:root{color-scheme:light;--ink:#342a32;--muted:#776b74;--plum:#59334e;--line:#e5dfe3;--paper:#fffefd;--ground:#f6f3f5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--ground);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\n.page{max-width:824px;margin:48px auto;padding:0 24px}\nheader{margin-bottom:28px}\n.eyebrow{margin:0 0 7px;color:var(--plum);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}\nh1{margin:0;font-size:34px;line-height:1.2;letter-spacing:-1.2px;font-weight:650}\n.intro{margin:10px 0 0;color:var(--muted);font-size:14px}\n.workspace{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 28px 22px;border-bottom:1px solid var(--line)}\nh2{margin:0;font-size:23px;line-height:1.25;letter-spacing:-.5px}\n.date{margin:5px 0 0;font-size:13px;color:var(--muted)}\n.summary{display:flex;align-items:center;gap:10px;flex-shrink:0}\n.summary svg{width:34px;height:34px;flex-shrink:0;transform:rotate(-90deg)}\n.summary p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}\n.summary strong{display:block;color:var(--plum);font-size:13px;font-weight:600}\n.tasks{list-style:none;padding:0;margin:0}\n.task{display:flex;align-items:flex-start;gap:13px;padding:23px 28px}\n.task+.task{border-top:1px solid var(--line)}\n.task input{width:19px;height:19px;margin:3px 0 0;flex-shrink:0;accent-color:var(--plum);cursor:pointer}\n.task-body{min-width:0;flex:1}\n.task-heading{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}\n.task-title{font-size:16px;line-height:1.4;font-weight:600;cursor:pointer;overflow-wrap:anywhere}\n.priority{font-size:10px;line-height:1.6;white-space:nowrap;border:1px solid var(--line);border-radius:4px;padding:0 6px;color:var(--muted)}\n.priority.high{background:#f1eaf0;border-color:#e2d5df;color:var(--plum)}\n.description{max-width:490px;margin:7px 0 8px;color:var(--muted);font-size:14px;line-height:1.55;overflow-wrap:anywhere}\n.details{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}\n.done{color:var(--plum);font-weight:500}\ninput:checked+.task-body .task-title{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}\n.add-task{padding:23px 28px 26px;border-top:1px solid var(--line);background:#faf8f9}\n.add-task label{display:block;margin-bottom:8px;font-size:13px;font-weight:600}\n.form-row{display:flex;gap:10px}\n.form-row input{flex:1;min-width:0;width:100%;height:44px;border:1px solid #cfc2cb;border-radius:5px;background:var(--paper);padding:10px 12px;color:var(--ink);font:inherit;font-size:14px}\n.form-row input::placeholder{color:#8b7c87}\nbutton{flex-shrink:0;min-height:44px;border:1px solid var(--plum);border-radius:5px;background:var(--plum);color:white;padding:10px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}\nbutton:hover{background:#45253c}\ninput:focus-visible,button:focus-visible{outline:3px solid #b89cad;outline-offset:3px}\n.hint{margin:8px 0 0;font-size:12px;color:var(--muted)}\nfooter{padding:16px 2px;color:var(--muted);font-size:12px}\n@media(max-width:520px){\n.page{margin:27px auto;padding:0 16px}\nheader{margin-bottom:22px}\nh1{font-size:30px}\n.intro{max-width:300px}\n.section-heading{padding:20px 18px;gap:12px}\n.summary{gap:7px}\n.summary svg{width:29px;height:29px}\n.summary strong{font-size:12px}\n.summary p{font-size:11px}\n.task{padding:20px 18px;gap:11px}\n.task-heading{gap:6px 9px}\n.description{font-size:13px;margin-top:6px}\n.add-task{padding:20px 18px}\n.form-row{flex-direction:column;gap:9px}\nbutton{align-self:flex-start}\n}\n</style>\n</head>\n<body>\n<div class=\"page\">\n<header>\n<p class=\"eyebrow\">Harbor community food co-op</p>\n<h1>Harbor tasks</h1>\n<p class=\"intro\">The everyday work of keeping good food in reach.</p>\n</header>\n\n<main class=\"workspace\">\n<section aria-labelledby=\"today-heading\">\n<div class=\"section-heading\">\n<div>\n<h2 id=\"today-heading\">Today</h2>\n<p class=\"date\"><time datetime=\"2024-05-14\">Tuesday, May 14</time></p>\n</div>\n<div class=\"summary\">\n<svg viewBox=\"0 0 36 36\" role=\"img\" aria-label=\"One third of today's tasks complete\">\n<circle cx=\"18\" cy=\"18\" r=\"14\" fill=\"none\" stroke=\"#e9e1e6\" stroke-width=\"4\"/>\n<circle cx=\"18\" cy=\"18\" r=\"14\" fill=\"none\" stroke=\"#59334e\" stroke-width=\"4\" stroke-dasharray=\"29.3 88\"/>\n</svg>\n<p><strong>1 of 3 complete</strong>2 left for today</p>\n</div>\n</div>\n\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"proposal\" aria-describedby=\"proposal-description proposal-due\">\n<div class=\"task-body\">\n<div class=\"task-heading\">\n<label class=\"task-title\" for=\"proposal\">Review proposal</label>\n<span class=\"priority high\">High priority</span>\n</div>\n<p class=\"description\" id=\"proposal-description\">Review North Shore Growers’ cold-storage proposal before the member meeting.</p>\n<div class=\"details\" id=\"proposal-due\">\n<time datetime=\"2024-05-14T14:00\">Due May 14 · 2:00 pm</time>\n<span>Member operations</span>\n</div>\n</div>\n</li>\n\n<li class=\"task\">\n<input type=\"checkbox\" id=\"invoice\" checked aria-describedby=\"invoice-description invoice-due\">\n<div class=\"task-body\">\n<div class=\"task-heading\">\n<label class=\"task-title\" for=\"invoice\">Send invoice</label>\n<span class=\"priority\">Normal priority</span>\n</div>\n<p class=\"description\" id=\"invoice-description\">April produce boxes for Elm Street Community Kitchen.</p>\n<div class=\"details\" id=\"invoice-due\">\n<time datetime=\"2024-05-14T12:00\">Due May 14 · 12:00 pm</time>\n<span class=\"done\">Completed</span>\n</div>\n</div>\n</li>\n\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\" aria-describedby=\"workshop-description workshop-due\">\n<div class=\"task-body\">\n<div class=\"task-heading\">\n<label class=\"task-title\" for=\"workshop\">Plan workshop</label>\n<span class=\"priority\">Low priority</span>\n</div>\n<p class=\"description\" id=\"workshop-description\">Outline Saturday’s seasonal cooking session and check ingredients with the volunteer team.</p>\n<div class=\"details\" id=\"workshop-due\">\n<time datetime=\"2024-05-14T17:00\">Due May 14 · 5:00 pm</time>\n<span>Community kitchen</span>\n</div>\n</div>\n</li>\n</ul>\n</section>\n\n<form class=\"add-task\" aria-label=\"Add a task\">\n<label for=\"new-task\">New task</label>\n<div class=\"form-row\">\n<input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"e.g. Confirm the produce delivery\" aria-describedby=\"task-hint\">\n<button type=\"button\">Add task</button>\n</div>\n<p class=\"hint\" id=\"task-hint\">A small next step for the co-op.</p>\n</form>\n</main>\n<footer>Shared effort. A stronger food community.</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-tasklist-08","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Isle. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: calm and spacious; use forest green as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Isle tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Isle tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Isle tasks — Today</title>\n<style>\n:root{color-scheme:light;--paper:#f8f9f5;--ink:#26382e;--muted:#657167;--line:#dce2d9;--green:#315c43}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input{font:inherit}\nbutton,input[type=\"checkbox\"]{cursor:pointer}\nbutton:focus-visible,input:focus-visible{outline:3px solid #8aab91;outline-offset:4px}\n.shell{max-width:1160px;margin:auto;padding:0 48px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:650;letter-spacing:-.6px}\n.brand svg{width:28px;height:28px;color:var(--green);flex-shrink:0}\n.practice{color:var(--muted);font-size:12px;letter-spacing:.03em;text-align:right}\nmain{padding:54px 0 64px}\n.page-heading{margin-bottom:32px}\n.eyebrow{margin:0 0 10px;font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}\nh1{margin:0;font:normal 52px/1.1 Georgia,\"Times New Roman\",serif;letter-spacing:-1.5px}\n.intro{margin:14px 0 0;color:var(--muted)}\n.workspace{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:48px;align-items:start}\n.task-list{padding:0;margin:0;list-style:none;border-top:1px solid var(--ink)}\n.task{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:15px;padding:23px 0;border-bottom:1px solid var(--line)}\n.task input{appearance:auto;accent-color:var(--green);width:19px;height:19px;margin:5px 0 0}\n.task-body{min-width:0}\n.task-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}\n.task label{font-size:18px;font-weight:550;letter-spacing:-.3px;cursor:pointer}\n.next{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--green);font-weight:700;white-space:nowrap}\n.project{margin:5px 0 12px;color:var(--muted);font-size:13px;line-height:1.55;max-width:470px;overflow-wrap:anywhere}\n.task-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px}\n.priority{display:inline-flex;align-items:center;gap:6px;padding:2px 7px;background:#edf1e9;color:#4b5d4b;font-size:10px;line-height:1.5;border-radius:3px}\n.priority::before{content:\"\";width:4px;height:4px;border-radius:50%;background:currentColor}\n.priority.high{background:#f1eee3;color:#78613d}\n.completed label{text-decoration:line-through;text-decoration-thickness:1px;color:#758075}\n.completed .project{color:#7a837a}\n.done{color:var(--green)}\n.add-form{margin-top:28px}\n.add-form label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}\n.add-row{display:flex;gap:10px}\n.add-row input{width:100%;min-width:0;flex:1;padding:12px 13px;border:1px solid #bac7b9;border-radius:4px;background:#fff;color:var(--ink);font-size:14px}\n.add-row input::placeholder{color:#7b847c}\nbutton{flex-shrink:0;border:1px solid var(--green);border-radius:4px;padding:11px 18px;background:var(--green);color:white;font-weight:600;font-size:13px}\nbutton:hover{background:#244b35}\naside{border-top:1px solid var(--ink);padding-top:20px}\naside h2{font-size:11px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;margin:0 0 17px;color:var(--muted)}\n.completion{margin:0 0 12px;display:flex;align-items:baseline;gap:8px}\n.completion strong{font:normal 32px/1 Georgia,\"Times New Roman\",serif;letter-spacing:-1px}\n.completion span{font-size:12px;color:var(--muted)}\nprogress{display:block;width:100%;height:5px;border:0;border-radius:0;background:var(--line);accent-color:var(--green)}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--green)}\nprogress::-moz-progress-bar{background:var(--green)}\n.summary-note{font-size:12px;color:var(--muted);margin:10px 0 22px}\n.details{margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:12px}\n.details div{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}\ndt{color:var(--muted)}\ndd{margin:0;font-weight:550;text-align:right}\n.focus{margin-top:23px;padding-top:18px;border-top:1px solid var(--line)}\n.focus h3{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--muted)}\n.focus p{margin:0;font:normal 18px/1.4 Georgia,\"Times New Roman\",serif}\n.focus small{display:block;margin-top:5px;color:var(--muted);font-size:12px}\nfooter{margin-top:42px;font-size:11px;color:var(--muted);letter-spacing:.02em}\n@media(max-width:760px){\n.shell{padding:0 24px}\nheader{min-height:78px;gap:16px}\n.brand{font-size:18px;gap:9px}\n.practice{font-size:10px;max-width:100px}\nmain{padding:32px 0}\nh1{font-size:43px}\n.page-heading{margin-bottom:26px}\n.intro{font-size:13px;margin-top:10px}\n.workspace{grid-template-columns:minmax(0,1fr);gap:32px}\n.task{padding:20px 0;column-gap:12px}\n.task label{font-size:17px}\n.project{font-size:12px;margin-bottom:10px}\n.next{font-size:9px}\n.add-form{margin-top:24px}\n.add-row{gap:8px}\n.add-row input{font-size:13px;padding:11px 10px}\nbutton{padding:10px 13px}\naside{padding-top:18px}\naside h2{margin-bottom:12px}\n.summary-note{margin-bottom:16px}\n.details{display:flex;gap:24px}\n.details div{flex:1;display:block;margin:0}\ndd{text-align:left;margin-top:3px}\n.focus{margin-top:18px;display:grid;grid-template-columns:1fr 1.4fr;gap:4px 12px;align-items:baseline}\n.focus h3{grid-row:span 2}\n.focus p{font-size:16px}\n.focus small{margin:0}\nfooter{margin-top:28px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 23V9l10-5 10 5v14H4Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M14 4v19M4 14h20M9 23v-9m10 9v-9\" stroke=\"currentColor\" stroke-width=\"1\"/></svg>\n<span>Isle tasks</span>\n</div>\n<div class=\"practice\">Architecture practice<br>Studio workspace</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<p class=\"eyebrow\"><time datetime=\"2024-05-14\">Tuesday, 14 May</time></p>\n<h1>Today</h1>\n<p class=\"intro\">A clear plan for the studio day.</p>\n</div>\n<div class=\"workspace\">\n<section aria-label=\"Today's tasks\">\n<ul class=\"task-list\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"proposal\" aria-describedby=\"proposal-project proposal-due\">\n<div class=\"task-body\">\n<div class=\"task-heading\"><label for=\"proposal\">Review proposal</label><span class=\"next\">Next up</span></div>\n<p class=\"project\" id=\"proposal-project\">North Quay community arts centre — planning submission, inclusive access strategy and client presentation materials</p>\n<div class=\"task-meta\"><time id=\"proposal-due\" datetime=\"2024-05-14T10:30\">Due today, 10:30</time><span class=\"priority high\">High priority</span></div>\n</div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"invoice\" aria-describedby=\"invoice-project invoice-due\">\n<div class=\"task-body\">\n<div class=\"task-heading\"><label for=\"invoice\">Send invoice</label></div>\n<p class=\"project\" id=\"invoice-project\">Alder House · Stage 3 design fees</p>\n<div class=\"task-meta\"><time id=\"invoice-due\" datetime=\"2024-05-14T14:00\">Due today, 14:00</time><span class=\"priority\">Medium priority</span></div>\n</div>\n</li>\n<li class=\"task completed\">\n<input type=\"checkbox\" id=\"workshop\" checked aria-describedby=\"workshop-project workshop-due\">\n<div class=\"task-body\">\n<div class=\"task-heading\"><label for=\"workshop\">Plan workshop</label></div>\n<p class=\"project\" id=\"workshop-project\">Studio · Material reuse and detailing</p>\n<div class=\"task-meta\"><time id=\"workshop-due\" datetime=\"2024-05-14T09:00\">Due today, 09:00</time><span class=\"priority\">Low priority</span><span class=\"done\">Complete</span></div>\n</div>\n</li>\n</ul>\n<form class=\"add-form\">\n<label for=\"new-task\">New task</label>\n<div class=\"add-row\">\n<input type=\"text\" id=\"new-task\" name=\"task\" placeholder=\"e.g. Confirm the site visit\">\n<button type=\"button\">Add task</button>\n</div>\n</form>\n</section>\n<aside aria-labelledby=\"overview-title\">\n<h2 id=\"overview-title\">Daily overview</h2>\n<p class=\"completion\"><strong>1 of 3</strong><span>tasks complete</span></p>\n<progress value=\"1\" max=\"3\" aria-label=\"Today's completion: one of three tasks\"></progress>\n<p class=\"summary-note\">Two tasks left for today.</p>\n<dl class=\"details\">\n<div><dt>Next deadline</dt><dd>10:30</dd></div>\n<div><dt>Open priorities</dt><dd>1 high · 1 medium</dd></div>\n</dl>\n<div class=\"focus\">\n<h3>Focus project</h3>\n<p>North Quay</p>\n<small>Proposal · Client review</small>\n</div>\n</aside>\n</div>\n<footer>A little structure. More room for design.</footer>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-tasklist-09","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Juniper. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: compact but readable; use slate blue as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Juniper tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Juniper tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Juniper tasks</title>\n<style>\n:root{color-scheme:light;--ink:#263340;--muted:#65717e;--line:#dfe4e9;--accent:#526782;--paper:#fff}\n*{box-sizing:border-box}\nbody{margin:0;background:#f4f6f8;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input{font:inherit}\nheader{background:var(--paper);border-bottom:1px solid var(--line)}\n.topbar{max-width:1120px;margin:auto;min-height:76px;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:12px}\n.mark{width:36px;height:36px;display:grid;place-items:center;background:var(--accent);color:white;font-size:22px;font-weight:600;border-radius:7px}\n.brand-name{font-size:16px;font-weight:650;letter-spacing:.01em}\n.brand small{display:block;color:var(--muted);font-size:12px}\n.workspace{font-size:12px;color:var(--muted)}\nmain{max-width:1120px;padding:38px 28px 48px;margin:auto}\n.intro{margin-bottom:26px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-.8px;margin:0 0 9px;font-weight:650}\n.intro p{margin:0;color:var(--muted);max-width:560px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:22px;align-items:start}\n.panel{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.today-head{padding:21px 24px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}\nh2{font-size:19px;line-height:1.3;margin:0 0 4px;font-weight:650;letter-spacing:-.3px}\n.date{font-size:12px;color:var(--muted);margin:0}\n.completion{width:140px;flex-shrink:0}\n.completion label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}\n.completion strong{color:var(--ink);font-weight:600}\nprogress{display:block;width:100%;height:5px;border:0;border-radius:5px;overflow:hidden;background:#e8ecf0;accent-color:var(--accent)}\nprogress::-webkit-progress-bar{background:#e8ecf0}\nprogress::-webkit-progress-value{background:var(--accent);border-radius:5px}\nprogress::-moz-progress-bar{background:var(--accent)}\n.tasks{list-style:none;margin:0;padding:0 24px}\n.task{display:grid;grid-template-columns:22px minmax(0,1fr);gap:13px;padding:15px 0 17px;border-bottom:1px solid var(--line)}\n.task:last-child{border-bottom:0}\n.task input{width:21px;height:21px;margin:12px 0 0;accent-color:var(--accent);cursor:pointer}\n.task-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}\n.task label{font-size:15px;font-weight:600;min-height:44px;display:flex;align-items:center;cursor:pointer}\n.priority{padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;line-height:1.7;letter-spacing:.02em;background:#eef1f5;color:#53647a}\n.priority.high{background:#f5eee5;color:#8a6335}\n.priority.normal{background:#f0f2f3;color:#66717c}\n.project{font-size:12px;color:var(--muted);margin:0 0 5px}\n.due{display:flex;align-items:center;gap:7px;font-size:12px;color:#56677b}\n.due svg{width:13px;height:13px;flex-shrink:0}\n.done label{text-decoration:line-through;color:#78828d}\n.done .due{color:#657a6d}\n.done-text{font-size:11px;border-left:1px solid #d8e0da;padding-left:8px;margin-left:2px}\n.add-form{padding:19px 24px 21px;background:#fafbfc;border-top:1px solid var(--line)}\n.add-form>label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\n.entry{display:flex;gap:9px}\n.entry input{width:100%;min-width:0;min-height:44px;padding:10px 12px;background:white;border:1px solid #cbd3dc;border-radius:6px;color:var(--ink)}\n.entry input::placeholder{color:#85909c;font-size:13px}\nbutton{min-height:44px;flex-shrink:0;padding:10px 15px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:white;font-weight:600;cursor:pointer}\nbutton:hover{background:#435873}\ninput:focus-visible,button:focus-visible{outline:3px solid #acbdd3;outline-offset:3px}\n.hint{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px;color:var(--muted);font-size:11px}\n.remaining{white-space:nowrap}\n.context{padding:21px}\n.eyebrow{font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}\n.context h2{font-size:17px;margin-bottom:5px}\n.context .subtitle{font-size:12px;color:var(--muted);margin:0 0 19px}\ndl{margin:0}\ndl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #edf0f3;font-size:12px}\ndt{color:var(--muted)}\ndd{margin:0;text-align:right;font-weight:500}\n.note{margin-top:18px;padding:13px;background:#f2f5f8;border-radius:5px;border-left:3px solid #a5b3c5}\n.note h3{font-size:12px;margin:0 0 5px;font-weight:650}\n.note p{font-size:12px;line-height:1.65;margin:0;color:#5b6775}\n.update{margin:18px 2px 0;padding:0 5px}\n.update h3{font-size:11px;font-weight:600;color:var(--muted);margin:0 0 7px}\n.update p{margin:0;font-size:12px;line-height:1.6;color:#65717e}\n.update time{font-variant-numeric:tabular-nums;color:#46576a}\n@media(max-width:760px){\n.topbar{padding:12px 20px;min-height:68px}\n.workspace{display:none}\nmain{padding:25px 16px 32px}\nh1{font-size:27px}\n.intro{margin-bottom:21px}\n.intro p{font-size:13px}\n.layout{grid-template-columns:minmax(0,1fr);gap:22px}\n.today-head{padding:18px}\n.completion{width:111px}\n.tasks{padding:0 18px}\n.task{gap:11px;padding:11px 0 14px}\n.task-line{gap:8px}\n.task label{font-size:14px}\n.add-form{padding:16px 18px 18px}\n.entry{gap:8px}\nbutton{padding:10px 12px;font-size:13px}\n.entry input{padding:10px;font-size:13px}\n.hint{display:block}\n.remaining{display:block;margin-top:4px}\n.context{padding:20px}\n}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"topbar\">\n    <div class=\"brand\">\n      <span class=\"mark\" aria-hidden=\"true\">J</span>\n      <div><div class=\"brand-name\">Juniper</div><small>Architecture practice</small></div>\n    </div>\n    <span class=\"workspace\">Studio workspace</span>\n  </div>\n</header>\n<main>\n  <div class=\"intro\">\n    <h1>Juniper tasks</h1>\n    <p>Keep client commitments and studio deadlines in view, from the first proposal to the final drawing issue.</p>\n  </div>\n  <div class=\"layout\">\n    <section class=\"panel\" aria-labelledby=\"today-title\">\n      <div class=\"today-head\">\n        <div>\n          <h2 id=\"today-title\">Today</h2>\n          <p class=\"date\"><time datetime=\"2025-05-14\">Wednesday, 14 May</time></p>\n        </div>\n        <div class=\"completion\">\n          <label for=\"completion\"><strong>1 of 3</strong> complete</label>\n          <progress id=\"completion\" value=\"1\" max=\"3\">1 of 3 complete</progress>\n        </div>\n      </div>\n      <ul class=\"tasks\">\n        <li class=\"task\">\n          <input type=\"checkbox\" id=\"proposal\">\n          <div>\n            <div class=\"task-line\"><label for=\"proposal\">Review proposal</label><span class=\"priority high\" aria-label=\"High priority\">High</span></div>\n            <p class=\"project\">Alder House · Scope &amp; fees</p>\n            <div class=\"due\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M8 4v4l3 2\"/></svg>\n              <span>Due today, 11:00</span>\n            </div>\n          </div>\n        </li>\n        <li class=\"task done\">\n          <input type=\"checkbox\" id=\"invoice\" checked>\n          <div>\n            <div class=\"task-line\"><label for=\"invoice\">Send invoice</label><span class=\"priority normal\" aria-label=\"Normal priority\">Normal</span></div>\n            <p class=\"project\">Mill Lane Studio · April design fees</p>\n            <div class=\"due\"><span>Due today, 12:00</span><span class=\"done-text\">Completed</span></div>\n          </div>\n        </li>\n        <li class=\"task\">\n          <input type=\"checkbox\" id=\"workshop\">\n          <div>\n            <div class=\"task-line\"><label for=\"workshop\">Plan workshop</label><span class=\"priority\" aria-label=\"Medium priority\">Medium</span></div>\n            <p class=\"project\">Civic Rooms · Client briefing session</p>\n            <div class=\"due\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M8 4v4l3 2\"/></svg>\n              <span>Due today, 16:00</span>\n            </div>\n          </div>\n        </li>\n      </ul>\n      <form class=\"add-form\">\n        <label for=\"new-task\">New task</label>\n        <div class=\"entry\">\n          <input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"e.g. Check Alder House plans\" aria-describedby=\"task-hint\">\n          <button type=\"button\">Add task</button>\n        </div>\n        <div class=\"hint\"><span id=\"task-hint\">Include a project name for easy scanning.</span><span class=\"remaining\">2 tasks remaining</span></div>\n      </form>\n    </section>\n    <aside aria-label=\"Project context and recent update\">\n      <section class=\"panel context\" aria-labelledby=\"context-title\">\n        <p class=\"eyebrow\">Focus project</p>\n        <h2 id=\"context-title\">Alder House</h2>\n        <p class=\"subtitle\">Residential extension · JNP–024</p>\n        <dl>\n          <div><dt>Stage</dt><dd>Concept design</dd></div>\n          <div><dt>Project lead</dt><dd>Maya Chen</dd></div>\n          <div><dt>Next milestone</dt><dd>Client review</dd></div>\n          <div><dt>Review date</dt><dd><time datetime=\"2025-05-16\">Fri, 16 May</time></dd></div>\n        </dl>\n        <div class=\"note\">\n          <h3>Proposal review notes</h3>\n          <p>Confirm the scope matches the revised concept drawings. Check the survey exclusions and fee allowance before issuing to the client.</p>\n        </div>\n      </section>\n      <section class=\"update\" aria-labelledby=\"update-title\">\n        <h3 id=\"update-title\">Recent update</h3>\n        <p><time datetime=\"2025-05-14T09:12\">09:12</time> · Maya added the revised fee schedule to the Alder House proposal.</p>\n      </section>\n    </aside>\n  </div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-tasklist-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Kite. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Kite tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Kite tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Kite tasks — Today</title>\n<style>\n:root{color-scheme:light;--paper:#f6f3ed;--surface:#fcfaf6;--ink:#292b27;--muted:#68675f;--line:#dcd6cc;--terra:#a34e37}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton,input{font:inherit}\n.shell{width:min(100% - 64px,960px);margin:auto}\n.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0 23px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:12px}\n.brand svg{width:25px;height:31px;color:var(--terra);flex:none}\nh1{font:400 29px/1.1 Georgia,\"Times New Roman\",serif;letter-spacing:-1px;margin:0}\n.workspace{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);text-align:right}\nmain{padding:40px 0 36px}\n.overview{display:grid;grid-template-columns:1fr 238px;gap:48px;align-items:end;margin-bottom:32px}\n.eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:650;color:var(--terra)}\nh2{font:400 60px/1.05 Georgia,\"Times New Roman\",serif;letter-spacing:-2px;margin:0 0 12px}\n.intro{margin:0;color:var(--muted);max-width:42ch;font-size:15px}\n.summary{padding-left:22px;border-left:1px solid var(--line)}\n.summary label{display:block;font-size:14px;font-weight:650}\nprogress{display:block;appearance:none;width:100%;height:5px;border:0;margin:12px 0 9px;background:var(--line);border-radius:0;overflow:hidden}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--terra)}\nprogress::-moz-progress-bar{background:var(--terra)}\n.status{margin:0;color:var(--muted);font-size:12px}\n.next{margin:10px 0 0;font-size:12px}\n.next span{color:var(--muted)}\n.task-panel{border:1px solid var(--line);background:var(--surface)}\n.list-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;border-bottom:1px solid var(--line)}\nh3{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:650}\n.list-heading span{font-size:12px;color:var(--muted)}\n.tasks{list-style:none;margin:0;padding:0}\n.task{display:grid;grid-template-columns:22px minmax(0,1fr) 145px;gap:16px;padding:25px 24px;border-bottom:1px solid var(--line)}\n.task:last-child{border-bottom:0}\n.task input[type=checkbox]{width:19px;height:19px;margin:4px 0 0;accent-color:var(--ink);cursor:pointer}\n.task label{font-size:18px;font-weight:600;line-height:1.4;cursor:pointer;letter-spacing:-.25px}\n.description{font-size:14px;line-height:1.6;color:var(--muted);margin:5px 0 0;max-width:46ch}\n.meta{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-top:3px}\n.due{font-size:12px;white-space:nowrap}\n.due span{color:var(--muted);margin-right:4px}\n.priority{font-size:10px;line-height:1.6;padding:2px 7px;border:1px solid var(--line);letter-spacing:.25px}\n.priority.high{color:#8b3e2b;border-color:#d8b6a8;background:#f7eee7}\n.completed label{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}\n.completed .due{color:var(--muted)}\n.composer{margin-top:27px}\n.composer label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}\n.entry{display:flex;gap:10px}\n.entry input{min-width:0;flex:1;height:48px;padding:11px 14px;background:var(--surface);border:1px solid #b8b2a7;border-radius:2px;color:var(--ink)}\n.entry input::placeholder{color:#76736c}\nbutton{flex:none;padding:11px 25px;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:#fffdf8;font-weight:600;cursor:pointer}\nbutton:hover{background:#41433c}\ninput:focus-visible,button:focus-visible{outline:2px solid var(--terra);outline-offset:4px}\n.hint{font-size:12px;color:var(--muted);margin:9px 0 0}\nfooter{margin-top:30px;padding-top:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px}\n@media(max-width:600px){\n.shell{width:calc(100% - 36px)}\n.site-header{padding:22px 0 19px;gap:16px}\nh1{font-size:26px}\n.workspace{font-size:9px;letter-spacing:1px;max-width:98px}\nmain{padding:28px 0}\n.overview{grid-template-columns:1fr;gap:22px;margin-bottom:24px}\nh2{font-size:49px;margin-bottom:9px}\n.intro{font-size:14px;max-width:34ch}\n.summary{padding:0;border-left:0;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}\n.summary label{font-size:13px}\nprogress{grid-column:1/-1;grid-row:2;margin:10px 0}\n.status{font-size:11px;text-align:right}\n.next{grid-column:1/-1;margin-top:0}\n.list-heading{padding:12px 16px}\n.task{grid-template-columns:19px minmax(0,1fr);column-gap:12px;row-gap:12px;padding:20px 16px}\n.task label{font-size:17px}\n.description{font-size:13px;line-height:1.55}\n.meta{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:0}\n.due{font-size:11px}\n.priority{font-size:9px;padding:2px 6px}\n.composer{margin-top:23px}\n.entry{gap:8px}\n.entry input{width:0;font-size:13px;padding:10px}\nbutton{padding:10px 14px;font-size:13px}\nfooter{margin-top:25px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"site-header\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 25 31\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12.5 1.5 23 11 12.5 25 2 11 12.5 1.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M12.5 2v23m-10-14H23m-10.5 14 3 5\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\n<h1>Kite tasks</h1>\n</div>\n<div class=\"workspace\">Architecture practice</div>\n</header>\n<main>\n<section class=\"overview\" aria-labelledby=\"today-heading\">\n<div>\n<p class=\"eyebrow\"><time datetime=\"2025-10-16\">Thursday, 16 October</time></p>\n<h2 id=\"today-heading\">Today</h2>\n<p class=\"intro\">A little structure for the day.<br>Keep your projects moving, one task at a time.</p>\n</div>\n<div class=\"summary\">\n<label for=\"completion\">1 of 3 complete</label>\n<progress id=\"completion\" value=\"1\" max=\"3\">1 of 3 complete</progress>\n<p class=\"status\">In progress · 2 remaining</p>\n<p class=\"next\"><span>Next up:</span> Review proposal</p>\n</div>\n</section>\n\n<section class=\"task-panel\" aria-labelledby=\"task-list-heading\">\n<div class=\"list-heading\">\n<h3 id=\"task-list-heading\">Your day, in focus</h3>\n<span>3 tasks</span>\n</div>\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"review\" aria-describedby=\"review-description review-due\">\n<div>\n<label for=\"review\">Review proposal</label>\n<p class=\"description\" id=\"review-description\">Check the revised scope and fees for the Willow Court extension.</p>\n</div>\n<div class=\"meta\">\n<div class=\"due\" id=\"review-due\"><span>Due</span><time datetime=\"2025-10-16T14:00\">16 Oct · 14:00</time></div>\n<span class=\"priority high\">High priority</span>\n</div>\n</li>\n<li class=\"task completed\">\n<input type=\"checkbox\" id=\"invoice\" checked aria-describedby=\"invoice-description invoice-due\">\n<div>\n<label for=\"invoice\">Send invoice</label>\n<p class=\"description\" id=\"invoice-description\">Issue the stage-two invoice for the Elm Street retrofit.</p>\n</div>\n<div class=\"meta\">\n<div class=\"due\" id=\"invoice-due\"><span>Due</span><time datetime=\"2025-10-16T10:00\">16 Oct · 10:00</time></div>\n<span class=\"priority\">✓ Completed · Normal</span>\n</div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\" aria-describedby=\"workshop-description workshop-due\">\n<div>\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"description\" id=\"workshop-description\">Gather material samples and set the agenda for the client session.</p>\n</div>\n<div class=\"meta\">\n<div class=\"due\" id=\"workshop-due\"><span>Due</span><time datetime=\"2025-10-16T17:00\">16 Oct · 17:00</time></div>\n<span class=\"priority\">Normal priority</span>\n</div>\n</li>\n</ul>\n</section>\n\n<section class=\"composer\" aria-label=\"New task\">\n<label for=\"new-task\">Task name</label>\n<div class=\"entry\">\n<input type=\"text\" id=\"new-task\" name=\"task\" placeholder=\"e.g. Confirm façade samples\">\n<button type=\"button\">Add task</button>\n</div>\n<p class=\"hint\">Make room for the next detail, decision or deadline.</p>\n</section>\n<footer>\n<span>Kite / Practice workspace</span>\n<span>All times local</span>\n</footer>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-tasklist-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Larch. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: practical and understated; use deep plum as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Larch tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Larch tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Larch tasks — Today</title>\n<style>\n:root{color-scheme:light;--bg:#f4f5f6;--ink:#292b30;--muted:#666a72;--line:#d9dce0;--plum:#593b52;--pale:#ebe5e9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\n.wrap{width:min(1080px,calc(100% - 80px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-size:19px;font-weight:700;letter-spacing:.2em}\n.brand span{display:inline-block;width:9px;height:19px;background:var(--plum);margin-right:12px;vertical-align:-2px}\n.workspace{color:var(--muted);font-size:12px;letter-spacing:.03em}\nmain{padding-top:48px;padding-bottom:40px}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--plum);margin:0 0 10px}\nh1,h2,h3,p{margin-top:0}\nh1{font-family:Georgia,'Times New Roman',serif;font-size:52px;line-height:1.1;font-weight:400;letter-spacing:-1.7px;margin-bottom:14px}\n.intro{color:var(--muted);font-size:15px;margin-bottom:38px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:48px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:15px}\nh2{font-size:23px;letter-spacing:-.5px;margin:0;font-weight:600}\n.day{color:var(--muted);font-size:12px;white-space:nowrap}\n.tasks{list-style:none;margin:0;padding:0}\n.task{display:grid;grid-template-columns:20px minmax(0,1fr) 106px;gap:14px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}\n.task input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--plum);cursor:pointer}\n.task label{display:block;font-size:17px;font-weight:600;line-height:1.5;cursor:pointer}\n.task-meta{font-size:12px;color:var(--muted);margin:5px 0 0}\n.done label{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}\n.schedule{text-align:right;padding-top:2px}\n.schedule time{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}\n.priority{display:inline-block;font-size:10px;letter-spacing:.03em;line-height:1.5;padding:2px 7px;border:1px solid #d3d6da;border-radius:3px;color:#575b64}\n.priority.high{color:var(--plum);border-color:#d9cbd4;background:var(--pale)}\n.completion{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0 25px}\n.completion label{font-size:12px;color:var(--muted)}\n.completion strong{color:var(--ink);font-weight:600}\nprogress{appearance:none;border:0;border-radius:2px;overflow:hidden;height:4px;width:112px;background:var(--line)}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--plum)}\nprogress::-moz-progress-bar{background:var(--plum)}\n.new-task{padding-top:1px}\n.new-task label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}\n.add-row{display:flex;gap:10px}\n.add-row input{min-width:0;flex:1;width:100%;border:1px solid #bfc3ca;background:#fafbfc;color:var(--ink);border-radius:4px;padding:12px 13px}\n.add-row input::placeholder{color:#777c84}\nbutton{border:1px solid var(--plum);border-radius:4px;background:var(--plum);color:white;font-weight:600;padding:11px 19px;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#452d40}\ninput:focus-visible,button:focus-visible{outline:2px solid var(--plum);outline-offset:3px}\naside{border-left:1px solid var(--line);padding-left:28px}\n.aside-heading{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;margin:6px 0 20px}\nh3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:23px;line-height:1.2;letter-spacing:-.4px;margin-bottom:6px}\n.project-meta{font-size:12px;color:var(--muted);margin-bottom:20px}\nfigure{margin:0 0 19px}\n.plan{display:block;width:100%;height:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}\nfigcaption{font-size:11px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:7px}\n.key{width:8px;height:8px;background:var(--plum);flex-shrink:0}\n.review-note{font-size:13px;line-height:1.65;margin-bottom:24px}\n.milestone{border-top:1px solid var(--line);padding-top:15px}\n.milestone span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}\n.milestone p{font-size:12px;margin:0}\nfooter{border-top:1px solid var(--line);padding-top:18px;margin-top:52px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:20px}\n@media(max-width:760px){\n.wrap{width:calc(100% - 40px)}\n.header-inner{min-height:64px}\n.brand{font-size:17px}\n.workspace{font-size:11px}\nmain{padding-top:30px}\nh1{font-size:40px;letter-spacing:-1.1px}\n.intro{font-size:14px;max-width:310px;margin-bottom:28px}\n.layout{grid-template-columns:minmax(0,1fr);gap:36px}\n.section-heading{padding-bottom:12px}\nh2{font-size:22px}\n.task{grid-template-columns:18px minmax(0,1fr) 88px;gap:11px;padding:20px 0}\n.task label{font-size:16px}\n.task-meta{font-size:11px;line-height:1.6}\n.schedule time{font-size:11px}\n.completion{padding-bottom:22px}\n.add-row{gap:8px}\n.add-row input{font-size:13px;padding:12px 10px}\nbutton{padding:11px 15px;font-size:13px}\naside{border-left:0;border-top:1px solid var(--line);padding:22px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}\n.aside-heading{grid-column:1/-1;margin:0 0 16px}\n.project-info{grid-column:1/-1}\nh3{font-size:22px}\n.project-meta{margin-bottom:15px}\nfigure{margin:0}\n.plan{padding:8px 0}\nfigcaption{font-size:10px;align-items:flex-start}\n.review-note{font-size:12px;margin-bottom:14px}\n.milestone{padding-top:10px}\n.milestone p{font-size:11px}\nfooter{margin-top:32px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wrap header-inner\">\n<div class=\"brand\"><span aria-hidden=\"true\"></span>LARCH</div>\n<div class=\"workspace\">Architecture · Practice workspace</div>\n</div>\n</header>\n<main class=\"wrap\">\n<p class=\"eyebrow\">Daily overview</p>\n<h1>Larch tasks</h1>\n<p class=\"intro\">A clear view of the day, from concept to coordination.</p>\n<div class=\"layout\">\n<section aria-labelledby=\"today-title\">\n<div class=\"section-heading\">\n<h2 id=\"today-title\">Today</h2>\n<time class=\"day\" datetime=\"2024-06-18\">Tuesday, 18 June</time>\n</div>\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"proposal\" aria-describedby=\"proposal-detail\">\n<div>\n<label for=\"proposal\">Review proposal</label>\n<p class=\"task-meta\" id=\"proposal-detail\">Hawthorn House · Stage 2 concept</p>\n</div>\n<div class=\"schedule\">\n<time datetime=\"2024-06-18T11:00\">18 Jun · 11:00</time>\n<span class=\"priority high\">High priority</span>\n</div>\n</li>\n<li class=\"task done\">\n<input type=\"checkbox\" id=\"invoice\" checked aria-describedby=\"invoice-detail\">\n<div>\n<label for=\"invoice\">Send invoice</label>\n<p class=\"task-meta\" id=\"invoice-detail\">Canal Studio · Invoice 0241</p>\n</div>\n<div class=\"schedule\">\n<time datetime=\"2024-06-18\">Due 18 Jun</time>\n<span class=\"priority\">Low priority</span>\n</div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\" aria-describedby=\"workshop-detail\">\n<div>\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"task-meta\" id=\"workshop-detail\">Mill Lane Library · Design team</p>\n</div>\n<div class=\"schedule\">\n<time datetime=\"2024-06-18T15:00\">18 Jun · 15:00</time>\n<span class=\"priority\">Medium priority</span>\n</div>\n</li>\n</ul>\n<div class=\"completion\">\n<label for=\"daily-progress\"><strong>1 of 3 complete</strong> · Two to go</label>\n<progress id=\"daily-progress\" value=\"1\" max=\"3\">1 of 3 complete</progress>\n</div>\n<form class=\"new-task\">\n<label for=\"new-task\">New task</label>\n<div class=\"add-row\">\n<input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"e.g. Confirm material samples\">\n<button type=\"button\">Add task</button>\n</div>\n</form>\n</section>\n<aside aria-labelledby=\"focus-title\">\n<h2 class=\"aside-heading\" id=\"focus-title\">On the drawing board</h2>\n<div class=\"project-info\">\n<h3>Hawthorn House</h3>\n<p class=\"project-meta\">HH–024 · Concept review</p>\n</div>\n<figure>\n<svg class=\"plan\" viewBox=\"0 0 230 154\" role=\"img\" aria-labelledby=\"plan-title plan-desc\">\n<title id=\"plan-title\">Ground-floor review area</title>\n<desc id=\"plan-desc\">A schematic plan highlights the connection between the kitchen and living space for today's proposal review.</desc>\n<path d=\"M20 18H210V131H20Z\" fill=\"#edeff1\" stroke=\"#92969e\" stroke-width=\"3\"/>\n<path d=\"M96 19V68M96 90V131M20 85H67M83 85H96M152 19V56M152 76V131\" fill=\"none\" stroke=\"#92969e\" stroke-width=\"2\"/>\n<path d=\"M98 21H150V128H98Z\" fill=\"#ebe5e9\"/>\n<path d=\"M99 23H148V126H99\" fill=\"none\" stroke=\"#593b52\" stroke-width=\"1.5\" stroke-dasharray=\"3 3\"/>\n<path d=\"M31 31H79V47H31ZM163 31H197V43H163Z\" fill=\"none\" stroke=\"#a5a9b0\"/>\n<path d=\"M61 131V111A20 20 0 0 1 81 131\" fill=\"none\" stroke=\"#92969e\"/>\n<path d=\"M39 18H69M174 131H198\" stroke=\"#f4f5f6\" stroke-width=\"4\"/>\n<g fill=\"#666a72\" font-family=\"Arial, sans-serif\" font-size=\"9\">\n<text x=\"36\" y=\"66\">Kitchen</text>\n<text x=\"166\" y=\"91\">Living</text>\n<text x=\"33\" y=\"105\">Entry</text>\n</g>\n<path d=\"M112 75H137M132 70L137 75L132 80\" fill=\"none\" stroke=\"#593b52\" stroke-width=\"1.5\"/>\n</svg>\n<figcaption><span class=\"key\" aria-hidden=\"true\"></span>Ground floor · Connection under review</figcaption>\n</figure>\n<div>\n<p class=\"review-note\">Check the kitchen–living connection before issuing the concept proposal.</p>\n<div class=\"milestone\">\n<span>Next milestone</span>\n<p>Client review · Thu 20 Jun</p>\n</div>\n</div>\n</aside>\n</div>\n<footer>\n<span>Larch · Architecture &amp; interiors</span>\n<span>Small details. Steady progress.</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-tasklist-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Maple. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Maple tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Maple tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maple tasks</title>\n<style>\n:root{color-scheme:light;--paper:#f7f8f3;--green:#254d3d;--muted:#62766a;--line:#d7dfd5;--wash:#e9eee5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--green);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\n.workspace{max-width:916px;margin:auto;padding:0 32px}\nheader{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:36px 0 25px;border-bottom:1px solid var(--line)}\n.brand{display:flex;align-items:center;gap:12px}\n.brand svg{width:32px;height:36px;flex:none}\nh1{margin:0;font-size:21px;font-weight:650;letter-spacing:-.6px}\n.team{margin:0;color:var(--muted);font-size:13px}\nmain{padding:38px 0 48px}\n.date{margin:0 0 10px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase}\n.overview{display:flex;justify-content:space-between;align-items:center;gap:24px}\nh2{margin:0;font-size:38px;line-height:1.15;font-weight:600;letter-spacing:-1.4px}\n.summary{width:152px;flex:none}\n.summary label{display:block;margin-bottom:7px;font-size:12px;color:var(--muted)}\nprogress{display:block;width:100%;height:5px;border:0;border-radius:4px;overflow:hidden;background:var(--line);accent-color:var(--green)}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--green)}\nprogress::-moz-progress-bar{background:var(--green)}\n.intro{max-width:540px;margin:14px 0 28px;color:var(--muted);font-size:15px}\n.tasks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}\n.task{display:grid;grid-template-columns:22px minmax(0,1fr) 166px;gap:17px;align-items:start;padding:25px 0;border-bottom:1px solid var(--line)}\n.task input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--green);cursor:pointer}\n.task label{display:block;width:fit-content;font-size:17px;font-weight:550;letter-spacing:-.25px;cursor:pointer}\n.detail{max-width:440px;margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.55;overflow-wrap:anywhere}\n.done label{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}\n.meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:3px;font-size:12px}\n.due{white-space:nowrap}\n.priority{font-size:10px;line-height:1.5;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}\n.priority.high{padding:1px 7px;background:var(--wash);border-radius:3px;color:var(--green);font-weight:650}\nform{margin-top:28px}\nform>label{display:block;margin-bottom:9px;font-size:13px;font-weight:600}\n.add-row{display:flex;gap:10px}\ninput[type=\"text\"]{min-width:0;flex:1;width:100%;padding:12px 14px;border:1px solid #b7c5b9;border-radius:5px;background:transparent;color:var(--green);font:inherit}\ninput::placeholder{color:var(--muted);opacity:1}\nbutton{flex:none;padding:12px 22px;border:1px solid var(--green);border-radius:5px;background:var(--green);color:var(--paper);font:inherit;font-size:14px;font-weight:600;cursor:pointer}\nbutton:hover{background:#193b2d}\ninput:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}\n.note{margin:10px 0 0;color:var(--muted);font-size:12px}\n@media(max-width:600px){\n.workspace{padding:0 22px}\nheader{padding:24px 0 20px;align-items:flex-start;gap:10px}\n.brand{gap:9px}\n.brand svg{width:25px;height:30px}\nh1{font-size:20px}\n.team{max-width:98px;font-size:11px;text-align:right;line-height:1.45}\nmain{padding:27px 0 32px}\nh2{font-size:34px}\n.overview{gap:16px}\n.summary{width:120px}\n.summary label{font-size:11px}\n.intro{font-size:14px;margin:14px 0 23px}\n.task{grid-template-columns:20px minmax(0,1fr);column-gap:13px;row-gap:10px;padding:20px 0}\n.task label{font-size:16px}\n.detail{font-size:12px;margin-top:4px}\n.meta{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:0;font-size:11px}\nform{margin-top:23px}\n.add-row{gap:8px}\ninput[type=\"text\"]{padding:11px 10px;font-size:14px}\nbutton{padding:11px 15px;font-size:13px}\n}\n</style>\n</head>\n<body>\n<div class=\"workspace\">\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 36\" aria-hidden=\"true\" fill=\"none\">\n<path d=\"M16 3 20 11 26 8 24 17 30 19 19 27 16 26 13 27 2 19 8 17 6 8 12 11Z\" fill=\"currentColor\"/>\n<path d=\"M16 18V33\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n</svg>\n<h1>Maple tasks</h1>\n</div>\n<p class=\"team\">Watershed research team</p>\n</header>\n<main>\n<section aria-labelledby=\"today-heading\">\n<p class=\"date\">Tuesday, May 14</p>\n<div class=\"overview\">\n<h2 id=\"today-heading\">Today</h2>\n<div class=\"summary\">\n<label for=\"completion\">1 of 3 complete</label>\n<progress id=\"completion\" value=\"1\" max=\"3\">1 of 3 complete</progress>\n</div>\n</div>\n<p class=\"intro\">A little planning today keeps the next day in the field running smoothly.</p>\n<ul class=\"tasks\" aria-label=\"Today's tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"proposal\" aria-describedby=\"proposal-detail proposal-due\">\n<div>\n<label for=\"proposal\">Review proposal</label>\n<p class=\"detail\" id=\"proposal-detail\">North watershed study · Sampling plan for the June field visit</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"proposal-due\" datetime=\"2024-05-14T11:00\">May 14 · 11:00 am</time>\n<span class=\"priority high\">High priority</span>\n</div>\n</li>\n<li class=\"task done\">\n<input type=\"checkbox\" id=\"invoice\" checked aria-describedby=\"invoice-detail invoice-due\">\n<div>\n<label for=\"invoice\">Send invoice</label>\n<p class=\"detail\" id=\"invoice-detail\">Equipment hire · April water-quality survey</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"invoice-due\" datetime=\"2024-05-14T14:00\">May 14 · 2:00 pm</time>\n<span class=\"priority\">Normal priority</span>\n</div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\" aria-describedby=\"workshop-detail workshop-due\">\n<div>\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"detail\" id=\"workshop-detail\">Community-led watershed monitoring and seasonal habitat observation workshop · Cedar Creek field station</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"workshop-due\" datetime=\"2024-05-14T16:00\">May 14 · 4:00 pm</time>\n<span class=\"priority\">Normal priority</span>\n</div>\n</li>\n</ul>\n<form aria-label=\"Add a task\">\n<label for=\"new-task\">New task</label>\n<div class=\"add-row\">\n<input type=\"text\" id=\"new-task\" name=\"task\" placeholder=\"e.g. Prepare sampling kits\" autocomplete=\"off\">\n<button type=\"button\">Add task</button>\n</div>\n<p class=\"note\">Make it specific, so the next step is clear.</p>\n</form>\n</section>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-tasklist-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for North. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"North tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"North tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>North tasks — Today</title>\n<style>\n:root{color-scheme:light;--ink:#26313c;--muted:#68737d;--accent:#526b89;--line:#dfe4e7;--paper:#fff;--ground:#f5f6f4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--ground);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\nheader{border-bottom:1px solid var(--line);background:var(--paper)}\n.header-inner{max-width:1080px;margin:auto;padding:23px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:650;letter-spacing:-.5px}\n.brand svg{width:27px;height:27px;color:var(--accent);flex-shrink:0}\n.team{color:var(--muted);font-size:12px}\nmain{max-width:1080px;margin:44px auto;padding:0 32px}\n.eyebrow{margin:0 0 13px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:start}\n.task-sheet{background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden}\n.sheet-heading{padding:25px 28px 21px;border-bottom:1px solid var(--line)}\n.heading-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:38px;font-weight:400;line-height:1.15;letter-spacing:-1px;margin:0}\n.date{color:var(--muted);font-size:12px}\n.intro{margin:9px 0 19px;color:var(--muted);font-size:13px}\n.summary{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}\n.summary strong{font-weight:600;color:var(--ink)}\nprogress{appearance:none;width:92px;height:5px;border:0;border-radius:5px;overflow:hidden;background:#e8edf1;flex-shrink:0}\nprogress::-webkit-progress-bar{background:#e8edf1}\nprogress::-webkit-progress-value{background:var(--accent);border-radius:5px}\nprogress::-moz-progress-bar{background:var(--accent);border-radius:5px}\n.tasks{list-style:none;margin:0;padding:0 28px}\n.task{display:grid;grid-template-columns:20px minmax(0,1fr);gap:13px;padding:22px 0;border-bottom:1px solid var(--line)}\n.task:last-child{border-bottom:0}\n.task input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--accent);cursor:pointer}\n.task label{font-size:16px;font-weight:600;cursor:pointer;letter-spacing:-.2px}\n.description{max-width:390px;font-size:13px;line-height:1.55;color:var(--muted);margin:5px 0 10px}\n.metadata{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}\n.priority{font-size:10px;line-height:1.5;padding:1px 7px;border:1px solid #dce3e9;border-radius:3px;background:#f5f7f9;color:#5b6b7b}\n.priority.high{color:#8a5c46;background:#faf4f0;border-color:#eaddd3}\n.done label{text-decoration:line-through;text-decoration-thickness:1px;color:#7b858d}\n.done .metadata time{color:#7b858d}\n.composer{border-top:1px solid var(--line);padding:20px 28px 24px;background:#fcfcfb}\n.composer label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\n.composer input{display:block;width:100%;min-width:0;border:1px solid #cbd3db;border-radius:4px;padding:10px 12px;background:white;color:var(--ink)}\n.composer input::placeholder{color:#8a939c}\n.action-row{display:flex;align-items:center;gap:14px;margin-top:12px}\nbutton{border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:white;font-size:13px;font-weight:600;padding:9px 16px;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#435d7b}\ninput:focus-visible,button:focus-visible{outline:3px solid #b3c5da;outline-offset:3px}\n.hint{color:var(--muted);font-size:11px;line-height:1.5;max-width:220px;margin:0}\naside{padding-top:3px}\n.aside-title{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:600}\n.field-brief{background:#edf1f4;border-top:3px solid #72869e;padding:20px}\n.site-code{font-size:10px;letter-spacing:1.1px;color:var(--accent);font-weight:700;margin:0 0 10px}\n.field-brief h3{font-family:Georgia,\"Times New Roman\",serif;font-size:23px;line-height:1.2;font-weight:400;letter-spacing:-.4px;margin:0 0 5px}\n.visit{font-size:12px;color:#536578;margin:0}\n.field-brief p:last-child{border-top:1px solid #d6dee5;padding-top:13px;margin:16px 0 0;font-size:12px;color:#62707d;line-height:1.6}\n.recent{margin-top:25px;padding-top:18px;border-top:1px solid var(--line)}\n.recent h3{font-size:12px;font-weight:600;margin:0 0 9px}\n.update{display:flex;gap:9px;align-items:flex-start}\n.update-dot{width:6px;height:6px;background:#81958a;border-radius:50%;flex-shrink:0;margin-top:6px}\n.update p{font-size:12px;line-height:1.6;margin:0;color:var(--muted)}\n.update strong{font-weight:500;color:var(--ink)}\n.update time{display:block;color:#879098;font-size:11px;margin-top:4px}\nfooter{margin-top:17px;color:#8a9299;font-size:11px}\n@media(max-width:700px){\n.header-inner{padding:18px 20px;gap:12px}\n.brand{font-size:18px}\n.team{font-size:10px;max-width:90px;text-align:right}\nmain{margin:26px auto;padding:0 20px}\n.eyebrow{font-size:9px;letter-spacing:1.3px}\n.layout{grid-template-columns:minmax(0,1fr);gap:28px}\n.sheet-heading{padding:20px}\n.heading-line{align-items:flex-start;gap:10px}\nh1{font-size:33px}\n.date{font-size:11px;max-width:85px;text-align:right;padding-top:4px}\n.intro{margin:10px 0 16px;max-width:270px}\n.tasks{padding:0 20px}\n.task{padding:18px 0;gap:11px}\n.task label{font-size:15px}\n.description{font-size:12px;margin-bottom:9px}\n.metadata{gap:9px;font-size:10px}\n.composer{padding:18px 20px 20px}\n.composer input{font-size:16px;padding:9px 10px}\n.action-row{gap:12px}\n.hint{font-size:10px}\naside{display:grid;grid-template-columns:minmax(0,1fr);padding:0}\n.aside-title{margin-bottom:10px}\n.field-brief{padding:17px 20px}\n.recent{margin-top:18px;padding-top:15px}\nfooter{margin-bottom:24px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1\" y=\"1\" width=\"26\" height=\"26\" rx=\"5\" stroke=\"currentColor\"/><path d=\"M8 20V8l12 12V8M16 8h4v4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n<span>North tasks</span>\n</div>\n<span class=\"team\">Field research team</span>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">Estuary study / Field operations</p>\n<div class=\"layout\">\n<section class=\"task-sheet\" aria-labelledby=\"today\">\n<div class=\"sheet-heading\">\n<div class=\"heading-line\">\n<h1 id=\"today\">Today</h1>\n<time class=\"date\" datetime=\"2024-06-18\">Tuesday, 18 June</time>\n</div>\n<p class=\"intro\">A few things to settle before the next site visit.</p>\n<div class=\"summary\">\n<progress value=\"1\" max=\"3\" aria-label=\"1 of 3 tasks complete\">1 of 3</progress>\n<span><strong>1 of 3 complete</strong> · Two to go</span>\n</div>\n</div>\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"proposal\">\n<div>\n<label for=\"proposal\">Review proposal</label>\n<p class=\"description\">Check the sampling plan and site access notes for North Marsh.</p>\n<div class=\"metadata\"><time datetime=\"2024-06-18T11:00\">Due today, 11:00</time><span class=\"priority high\">High priority</span></div>\n</div>\n</li>\n<li class=\"task done\">\n<input type=\"checkbox\" id=\"invoice\" checked>\n<div>\n<label for=\"invoice\">Send invoice</label>\n<p class=\"description\">Submit equipment hire and travel costs for the coastal survey.</p>\n<div class=\"metadata\"><time datetime=\"2024-06-18T14:00\">Due today, 14:00</time><span class=\"priority\">Normal priority</span></div>\n</div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\">\n<div>\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"description\">Outline the team debrief and choose field observations to share.</p>\n<div class=\"metadata\"><time datetime=\"2024-06-18T16:30\">Due today, 16:30</time><span class=\"priority\">Normal priority</span></div>\n</div>\n</li>\n</ul>\n<form class=\"composer\" aria-label=\"New task\">\n<label for=\"new-task\">New task</label>\n<input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"e.g. Confirm North Marsh access\">\n<div class=\"action-row\">\n<button type=\"button\">Add task</button>\n<p class=\"hint\">Start with an action and include the site name.</p>\n</div>\n</form>\n</section>\n<aside aria-labelledby=\"field-details\">\n<h2 class=\"aside-title\" id=\"field-details\">Field brief</h2>\n<section class=\"field-brief\" aria-labelledby=\"site\">\n<p class=\"site-code\">NEXT VISIT · ROUND 04</p>\n<h3 id=\"site\">North Marsh</h3>\n<p class=\"visit\"><time datetime=\"2024-06-19T07:30\">Wed, 19 June · 07:30</time></p>\n<p>Meet at the east gate. Bring spare sample labels and the printed tide sheet.</p>\n</section>\n<section class=\"recent\" aria-labelledby=\"recent-update\">\n<h3 id=\"recent-update\">Recent update</h3>\n<div class=\"update\">\n<span class=\"update-dot\" aria-hidden=\"true\"></span>\n<p><strong>Maya Chen</strong> completed Send invoice.<time datetime=\"2024-06-18T09:12\">Today at 09:12</time></p>\n</div>\n</section>\n</aside>\n</div>\n<footer>North · Small steps, better fieldwork.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-tasklist-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Orbit. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Orbit tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Orbit tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Orbit tasks</title>\n<style>\n:root{--paper:#faf8f4;--ink:#292d29;--muted:#6d7169;--line:#deded4;--accent:#a64d35;--tint:#f1e5de}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\n.topbar{border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1120px;margin:auto;min-height:80px;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:28px;height:28px;color:var(--accent)}\n.workspace{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}\n.avatar{width:34px;height:34px;display:grid;place-items:center;background:#e8e9e0;border-radius:50%;font-size:11px;letter-spacing:.04em;color:#4e564b;font-weight:650}\nmain{max-width:1120px;margin:0 auto;padding:46px 32px 60px}\n.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding-bottom:30px;border-bottom:1px solid var(--line)}\n.eyebrow{margin:0 0 8px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:46px;line-height:1.1;font-weight:400;letter-spacing:-1.5px;margin:0 0 12px}\n.subtitle{margin:0;color:var(--muted);font-size:15px}\n.summary{min-width:190px;padding-bottom:2px}\n.summary-line{display:flex;align-items:baseline;justify-content:space-between;gap:24px}\n.summary strong{font-size:22px;font-weight:500;letter-spacing:-.6px}\n.summary span{color:var(--muted);font-size:12px}\nprogress{display:block;appearance:none;width:100%;height:4px;margin:9px 0 7px;border:0;background:#e4e3da;border-radius:2px;overflow:hidden}\nprogress::-webkit-progress-bar{background:#e4e3da}\nprogress::-webkit-progress-value{background:var(--accent)}\nprogress::-moz-progress-bar{background:var(--accent)}\n.summary p{margin:0;color:var(--muted);font-size:12px}\n.content{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;padding-top:30px}\n.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}\nh2{font-size:21px;font-weight:600;letter-spacing:-.5px;margin:0}\n.count{font-size:12px;color:var(--muted)}\n.date{margin:4px 0 19px;color:var(--muted);font-size:13px}\n.tasks{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}\n.task{display:grid;grid-template-columns:24px minmax(0,1fr) 105px;gap:12px;align-items:start;padding:21px 0;border-bottom:1px solid var(--line)}\n.task input{appearance:auto;accent-color:var(--accent);width:19px;height:19px;margin:4px 0;cursor:pointer}\n.task-copy label{display:flex;align-items:center;min-height:28px;font-size:16px;font-weight:600;cursor:pointer;letter-spacing:-.2px}\n.task-copy p{color:var(--muted);font-size:12px;margin:4px 0 0}\n.task-meta{text-align:right;padding-top:4px}\ntime{display:block;font-size:12px;white-space:nowrap}\n.priority{display:inline-block;margin-top:8px;font-size:10px;font-weight:650;line-height:1.5;padding:2px 7px;border-radius:3px;background:#ebece5;color:#62685b}\n.priority.high{background:var(--tint);color:var(--accent)}\n.priority.medium{background:#eeeadd;color:#776b49}\n.task:has(input:checked) .task-copy label{text-decoration:line-through;color:var(--muted)}\n.add-form{margin-top:24px}\n.add-form label{display:block;font-size:12px;font-weight:650;margin-bottom:8px}\n.input-row{display:flex;gap:10px}\n.input-row input{min-width:0;flex:1;width:100%;height:46px;border:1px solid #c8c9be;border-radius:4px;padding:10px 12px;background:#fffefa;color:var(--ink)}\n.input-row input::placeholder{color:#86877e}\nbutton{border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:white;font-weight:600;padding:10px 19px;min-height:46px;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#8f402c}\ninput:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}\n.form-note{font-size:12px;color:var(--muted);margin:9px 0 0}\naside{border-left:1px solid var(--line);padding-left:28px}\naside h2{font-size:17px}\n.empty{padding-top:32px}\n.empty svg{width:30px;height:30px;color:#8b9083;margin-bottom:15px}\n.empty h3{margin:0 0 8px;font-size:14px;font-weight:600}\n.empty p{margin:0;font-size:13px;color:var(--muted);line-height:1.65}\n.status{display:inline-flex;align-items:center;gap:6px;margin-top:20px;color:#6c7465;font-size:11px}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:#8b947f}\nfooter{margin-top:34px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:12px}\n@media(max-width:760px){\n.topbar-inner{padding:14px 20px;min-height:66px}\n.workspace{font-size:11px;gap:8px}\nmain{padding:28px 20px 36px}\n.page-heading{display:block;padding-bottom:23px}\nh1{font-size:39px;margin-bottom:8px}\n.subtitle{font-size:13px}\n.summary{margin-top:22px;max-width:100%}\n.summary-line{justify-content:flex-start;gap:10px}\n.summary strong{font-size:17px}\n.summary p{font-size:11px}\nprogress{margin:7px 0}\n.content{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:23px}\n.task{grid-template-columns:22px minmax(0,1fr) 82px;gap:9px;padding:17px 0}\n.task-copy label{font-size:15px}\n.task-copy p{font-size:11px;max-width:180px}\ntime{font-size:11px}\n.input-row{gap:8px}\nbutton{padding:10px 14px}\n.input-row input{font-size:13px;padding:10px}\naside{border-left:0;border-top:1px solid var(--line);padding:23px 0 0}\n.empty{padding-top:19px;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:15px}\n.empty svg{grid-row:1 / 4;margin-top:2px}\n.empty p{max-width:360px}\n.status{margin-top:12px}\nfooter{margin-top:28px;flex-wrap:wrap}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"16\" cy=\"16\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"/><ellipse cx=\"16\" cy=\"16\" rx=\"16\" ry=\"6\" transform=\"rotate(-40 16 16)\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"22\" cy=\"9\" r=\"3\" fill=\"currentColor\"/></svg>\nOrbit\n</div>\n<div class=\"workspace\"><span>Field research team</span><span class=\"avatar\" aria-label=\"Field team workspace\">FT</span></div>\n</div>\n</header>\n<main>\n<header class=\"page-heading\">\n<div>\n<p class=\"eyebrow\">Fieldwork / Daily plan</p>\n<h1>Orbit tasks</h1>\n<p class=\"subtitle\">The small actions behind good research.</p>\n</div>\n<section class=\"summary\" aria-label=\"Completion summary\">\n<div class=\"summary-line\"><strong>0 of 3</strong><span>tasks completed</span></div>\n<progress value=\"0\" max=\"3\" aria-label=\"0 of 3 tasks completed\"></progress>\n<p>3 open · Ready for the day</p>\n</section>\n</header>\n<div class=\"content\">\n<section aria-labelledby=\"today-heading\">\n<div class=\"section-head\"><h2 id=\"today-heading\">Today</h2><span class=\"count\">3 tasks</span></div>\n<p class=\"date\">Thursday, 12 June</p>\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"proposal\">\n<div class=\"task-copy\"><label for=\"proposal\">Review proposal</label><p>Estuary study · Check the sampling plan</p></div>\n<div class=\"task-meta\"><time datetime=\"2025-06-12T11:00\">Due 11:00</time><span class=\"priority high\">High priority</span></div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"invoice\">\n<div class=\"task-copy\"><label for=\"invoice\">Send invoice</label><p>Site logistics · May equipment hire</p></div>\n<div class=\"task-meta\"><time datetime=\"2025-06-12T14:00\">Due 14:00</time><span class=\"priority medium\">Medium</span></div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\">\n<div class=\"task-copy\"><label for=\"workshop\">Plan workshop</label><p>Community session · Draft the agenda</p></div>\n<div class=\"task-meta\"><time datetime=\"2025-06-12T16:30\">Due 16:30</time><span class=\"priority\">Low priority</span></div>\n</li>\n</ul>\n<form class=\"add-form\">\n<label for=\"new-task\">New task</label>\n<div class=\"input-row\"><input id=\"new-task\" name=\"task\" type=\"text\" placeholder=\"e.g. Prepare interview kits\" autocomplete=\"off\"><button type=\"button\">Add task</button></div>\n<p class=\"form-note\">Make it a clear next step for the team.</p>\n</form>\n</section>\n<aside aria-labelledby=\"upcoming-heading\">\n<div class=\"section-head\"><h2 id=\"upcoming-heading\">Upcoming</h2><span class=\"count\">0 tasks</span></div>\n<div class=\"empty\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><rect x=\"5\" y=\"7\" width=\"22\" height=\"22\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M5 13h22M11 3v8M21 3v8M12 21h8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"/></svg>\n<h3>No upcoming tasks</h3>\n<p>Nothing is scheduled after today. Future site visits, debriefs and research follow-ups will appear here.</p>\n<span class=\"status\">Schedule clear</span>\n</div>\n</aside>\n</div>\n<footer><span>Field research workspace</span><span>All times in your local time zone</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-tasklist-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a task manager for Pine. Under Today show Review proposal, Send invoice and Plan workshop with native checkboxes, due dates and small priority labels. Add an input and Add task button. Include a small completion summary. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Pine tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Pine tasks\", \"Today\", \"Review proposal\", \"Send invoice\", \"Plan workshop\", \"Add task\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Pine tasks</title>\n<style>\n:root{color-scheme:light;--bg:#f5f2ec;--paper:#fffdf9;--ink:#302b2e;--muted:#736c70;--line:#e5dfd8;--plum:#482b42}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{max-width:864px;margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-size:21px;font-weight:700;letter-spacing:-.7px;color:var(--plum)}\n.workspace{font-size:12px;color:var(--muted)}\n.project{font-size:12px;color:var(--muted);text-align:right}\n.project strong{display:block;color:var(--ink);font-weight:500}\nmain{max-width:800px;margin:44px auto;padding:0 32px}\n.heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px}\nh1{margin:0;font-size:34px;line-height:1.2;font-weight:650;letter-spacing:-1.2px}\n.date{color:var(--muted);font-size:13px;white-space:nowrap}\n.intro{margin:10px 0 25px;color:var(--muted);max-width:450px}\n.task-panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.list-heading{padding:14px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}\n.list-heading h2{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0;color:var(--muted)}\n.count{font-size:12px;color:var(--muted)}\n.tasks{list-style:none;margin:0;padding:0}\n.task{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:14px;align-items:start;padding:22px;border-bottom:1px solid var(--line)}\ninput[type=checkbox]{margin:4px 0 0;width:19px;height:19px;accent-color:var(--plum);cursor:pointer}\n.task label{display:block;font-size:16px;font-weight:600;cursor:pointer;line-height:1.5;overflow-wrap:anywhere}\n.note{margin:3px 0 0;font-size:13px;color:var(--muted);max-width:310px}\n.meta{text-align:right;padding-top:3px}\n.due{display:block;color:var(--muted);font-size:12px;white-space:nowrap}\n.priority{display:inline-block;margin-top:7px;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:600;line-height:1.7}\n.high{color:var(--plum);background:#efe5ec}\n.medium{color:#776139;background:#f2ecdf}\n.low{color:#6c7169;background:#eeefe9}\n.completed label{color:#7d767a;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:#aaa1a7}\n.completed .note{color:#8a8286}\nform{padding:19px 22px 22px}\nform label{display:block;margin-bottom:8px;font-size:13px;font-weight:600}\n.entry{display:flex;gap:9px}\ninput[type=text]{flex:1;min-width:0;width:100%;height:44px;border:1px solid #cfc5cc;border-radius:6px;background:#fff;color:var(--ink);padding:10px 12px;font:inherit}\ninput::placeholder{color:#8b8288}\nbutton{flex:none;border:1px solid var(--plum);border-radius:6px;background:var(--plum);color:white;padding:10px 17px;min-height:44px;font:inherit;font-weight:600;cursor:pointer}\nbutton:hover{background:#5b3a54}\ninput:focus-visible,button:focus-visible{outline:3px solid #bfa4b9;outline-offset:3px}\n.summary{display:flex;align-items:center;gap:14px;margin-top:22px;padding:0 3px}\n.summary svg{flex:none;width:42px;height:42px}\n.summary h2{margin:0;font-size:14px;font-weight:600}\n.summary p{margin:2px 0 0;color:var(--muted);font-size:13px}\nfooter{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\n@media(max-width:560px){\n.header-inner{padding:18px 20px}\n.brand{font-size:20px}\n.project{max-width:115px}\n.project span{display:none}\nmain{margin:27px auto;padding:0 20px}\nh1{font-size:30px}\n.heading{gap:10px}\n.date{font-size:12px}\n.intro{margin:9px 0 20px;font-size:13px}\n.list-heading{padding:12px 16px}\n.task{grid-template-columns:19px minmax(0,1fr);column-gap:12px;row-gap:8px;padding:17px 16px}\n.task label{font-size:15px}\n.note{font-size:12px}\n.meta{grid-column:2;text-align:left;display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:0}\n.priority{margin:0}\nform{padding:16px}\nbutton{padding:10px 13px;font-size:13px}\ninput[type=text]{font-size:13px;padding:10px}\n.summary{margin-top:19px;gap:12px}\n.summary p{font-size:12px}\nfooter{margin-top:22px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div>\n<div class=\"brand\">Pine tasks</div>\n<div class=\"workspace\">Field research workspace</div>\n</div>\n<div class=\"project\"><strong>River basin study</strong><span>June field season</span></div>\n</div>\n</header>\n<main>\n<div class=\"heading\">\n<h1>Today</h1>\n<time class=\"date\" datetime=\"2026-06-18\">Thu, June 18</time>\n</div>\n<p class=\"intro\">Clear the desk work before tomorrow’s river survey.</p>\n\n<section class=\"task-panel\" aria-labelledby=\"task-list-title\">\n<div class=\"list-heading\">\n<h2 id=\"task-list-title\">Fieldwork preparation</h2>\n<span class=\"count\">3 tasks</span>\n</div>\n<ul class=\"tasks\">\n<li class=\"task\">\n<input type=\"checkbox\" id=\"proposal\" aria-describedby=\"proposal-note proposal-due\">\n<div>\n<label for=\"proposal\">Review proposal</label>\n<p class=\"note\" id=\"proposal-note\">North transect study · revised sampling plan</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"proposal-due\" datetime=\"2026-06-18T10:00\">Due Jun 18 · 10:00</time>\n<span class=\"priority high\">High priority</span>\n</div>\n</li>\n<li class=\"task completed\">\n<input type=\"checkbox\" id=\"invoice\" checked aria-describedby=\"invoice-note invoice-due\">\n<div>\n<label for=\"invoice\">Send invoice</label>\n<p class=\"note\" id=\"invoice-note\">Boat hire · June field visit</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"invoice-due\" datetime=\"2026-06-18T12:00\">Due Jun 18 · 12:00</time>\n<span class=\"priority low\">Low priority</span>\n</div>\n</li>\n<li class=\"task\">\n<input type=\"checkbox\" id=\"workshop\" aria-describedby=\"workshop-note workshop-due\">\n<div>\n<label for=\"workshop\">Plan workshop</label>\n<p class=\"note\" id=\"workshop-note\">Community mapping with the local river monitoring team</p>\n</div>\n<div class=\"meta\">\n<time class=\"due\" id=\"workshop-due\" datetime=\"2026-06-18T16:00\">Due Jun 18 · 16:00</time>\n<span class=\"priority medium\">Medium priority</span>\n</div>\n</li>\n</ul>\n<form>\n<label for=\"new-task\">New task</label>\n<div class=\"entry\">\n<input type=\"text\" id=\"new-task\" name=\"task\" placeholder=\"Name your next task\">\n<button type=\"button\">Add task</button>\n</div>\n</form>\n</section>\n\n<section class=\"summary\" aria-labelledby=\"completion-title\">\n<svg viewBox=\"0 0 42 42\" role=\"img\" aria-labelledby=\"progress-title\">\n<title id=\"progress-title\">One third of today’s tasks complete</title>\n<circle cx=\"21\" cy=\"21\" r=\"17\" fill=\"none\" stroke=\"#e3dce0\" stroke-width=\"4\"/>\n<circle cx=\"21\" cy=\"21\" r=\"17\" fill=\"none\" stroke=\"#482b42\" stroke-width=\"4\" stroke-dasharray=\"35.6 106.8\" stroke-linecap=\"round\" transform=\"rotate(-90 21 21)\"/>\n<text x=\"21\" y=\"25\" text-anchor=\"middle\" fill=\"#482b42\" font-family=\"system-ui, sans-serif\" font-size=\"12\" font-weight=\"600\">1/3</text>\n</svg>\n<div>\n<h2 id=\"completion-title\">1 of 3 complete</h2>\n<p>Two tasks left to get the team field-ready.</p>\n</div>\n</section>\n<footer>All due times are local to the field site.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-00","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Alder. Include Visitors 2400, Conversion 2.0%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Alder analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Alder analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Alder analytics</title>\n<style>\n:root{color-scheme:light;--bg:#f6f5ef;--paper:#fffefa;--ink:#202f28;--muted:#667168;--green:#214f3d;--line:#dedfd5;--soft:#eaf0e7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\na{color:var(--green);text-underline-offset:4px}\na:focus-visible,select:focus-visible{outline:3px solid #8ba894;outline-offset:4px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1184px;margin:auto;padding:19px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700;letter-spacing:-1px}\n.brand-mark{width:29px;height:29px;background:var(--green);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:18px;letter-spacing:0}\n.header-note{color:var(--muted);font-size:12px}\nmain{max-width:1184px;margin:auto;padding:36px 32px 28px}\n.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-bottom:26px}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1.1px;margin:0 0 9px;font-weight:650}\n.subtitle{color:var(--muted);margin:0;max-width:580px}\n.range{min-width:194px}\nlabel{display:block;font-size:12px;font-weight:650;margin-bottom:6px}\nselect{width:100%;min-height:43px;padding:9px 36px 9px 12px;border:1px solid #b8c0b6;border-radius:6px;background:var(--paper);color:var(--ink);font:inherit}\n.range p{margin:6px 0 0;font-size:11px;color:var(--muted)}\n.next-step{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:19px 22px;background:var(--soft);border-left:3px solid var(--green);border-radius:0 7px 7px 0;margin-bottom:24px}\n.eyebrow{margin:0 0 5px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:750;color:var(--green)}\n.next-step h2{font-size:17px;line-height:1.35;letter-spacing:-.2px;margin:0 0 5px}\n.next-step p:last-child{color:#526155;margin:0;font-size:13px}\n.action{flex:none;display:inline-flex;align-items:center;gap:14px;padding:11px 15px;background:var(--green);color:white;border-radius:5px;font-weight:600;font-size:12px;text-decoration:none}\n.action:hover{background:#173f2e}\n.summary{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:8px;margin-bottom:24px;padding:22px 0}\n.metric{padding:0 26px}\n.metric+.metric{border-left:1px solid var(--line)}\n.metric h2{font-size:13px;font-weight:550;color:var(--muted);margin:0 0 5px}\n.value{font-size:36px;font-weight:600;letter-spacing:-1.3px;line-height:1.2}\n.metric-detail{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:12px;color:var(--muted)}\n.change{color:var(--green);font-weight:650}\n.detail-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px}\n.panel{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:23px}\n.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:5px}\n.panel h2{font-size:17px;letter-spacing:-.3px;margin:0;font-weight:650}\n.panel-description{font-size:12px;color:var(--muted);margin:0}\n.legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}\n.dot{width:7px;height:7px;border-radius:50%;background:var(--green)}\nfigure{margin:24px 0 0}\n.axis-title{font-size:11px;color:var(--muted);margin-bottom:9px}\n.plot{display:grid;grid-template-columns:27px minmax(0,1fr);gap:8px;align-items:stretch}\n.y-labels{display:flex;flex-direction:column;justify-content:space-between;text-align:right;font-size:10px;color:var(--muted);padding:3px 0}\n.trend{display:block;width:100%;height:146px;overflow:visible}\n.x-labels{display:flex;justify-content:space-between;margin:8px 0 0 35px;color:var(--muted);font-size:10px}\n.x-labels span{width:26px;text-align:center}\n.axis-bottom{text-align:center;font-size:11px;color:var(--muted);margin:9px 0 0 35px}\nfigcaption{border-top:1px solid var(--line);margin-top:19px;padding-top:13px;font-size:12px;color:var(--muted)}\nfigcaption strong{color:var(--ink);font-weight:600}\ntable{border-collapse:collapse;width:100%;margin-top:19px;font-size:12px;table-layout:fixed}\nth{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;padding:0 0 10px}\nth:last-child,td:last-child{text-align:right;width:62px;padding-left:12px;font-variant-numeric:tabular-nums}\ntd{border-top:1px solid var(--line);padding:11px 0;vertical-align:top}\n.page-name{font-weight:550;overflow-wrap:anywhere;line-height:1.4}\n.path{display:block;color:var(--muted);font-size:11px;margin-top:3px}\n.table-note{margin:8px 0 0;font-size:11px;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:18px;margin-top:20px;color:var(--muted);font-size:11px}\nfooter p{margin:0}\n@media(min-width:1000px){.panel{min-height:357px}}\n@media(max-width:700px){\n.header-inner{padding:15px 20px}.header-note{font-size:10px}\nmain{padding:26px 20px 24px}\n.page-heading{display:block;margin-bottom:20px}h1{font-size:29px}.subtitle{font-size:13px}\n.range{margin-top:19px;display:grid;grid-template-columns:1fr 1.3fr;align-items:center;column-gap:12px;min-width:0}\n.range label{margin:0}.range p{grid-column:2}\n.next-step{display:block;padding:17px;margin-bottom:18px}\n.next-step h2{font-size:16px}.action{margin-top:14px}\n.summary{padding:18px 0;margin-bottom:18px}.metric{padding:0 17px}.value{font-size:31px}\n.metric-detail{gap:3px;font-size:11px;flex-direction:column;align-items:flex-start}\n.detail-grid{grid-template-columns:1fr;gap:18px}.panel{padding:19px}\nfigure{margin-top:20px}.trend{height:140px}\nfooter{flex-direction:column;gap:7px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\"><span class=\"brand-mark\" aria-hidden=\"true\">a</span> alder<span style=\"font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:7px\">Bike shop</span></div>\n<span class=\"header-note\">Website overview</span>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<h1>Alder analytics</h1>\n<p class=\"subtitle\">See how riders find your shop and turn visits into workshop bookings.</p>\n</div>\n<div class=\"range\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n<p>Weekly snapshot · 12–18 May 2025</p>\n</div>\n</div>\n\n<section class=\"next-step\" aria-labelledby=\"next-title\">\n<div>\n<p class=\"eyebrow\">Recommended next step</p>\n<h2 id=\"next-title\">Make workshop bookings easier to find</h2>\n<p>Your workshop page drew 760 views this week. Give its booking link a clear spot near the top.</p>\n</div>\n<a class=\"action\" href=\"#top-pages\">Review top pages <span aria-hidden=\"true\">↓</span></a>\n</section>\n\n<section class=\"summary\" aria-label=\"Weekly performance summary\">\n<div class=\"metric\">\n<h2>Visitors</h2>\n<div class=\"value\">2400</div>\n<div class=\"metric-detail\"><span class=\"change\">↑ 12.4%</span><span>vs. previous 7 days</span></div>\n</div>\n<div class=\"metric\">\n<h2>Conversion</h2>\n<div class=\"value\">2.0%</div>\n<div class=\"metric-detail\"><span class=\"change\">↑ 0.3 pts</span><span>48 workshop bookings</span></div>\n</div>\n</section>\n\n<div class=\"detail-grid\">\n<section class=\"panel\" aria-labelledby=\"trend-heading\">\n<div class=\"panel-head\">\n<h2 id=\"trend-heading\">Weekly trend</h2>\n<span class=\"legend\"><span class=\"dot\" aria-hidden=\"true\"></span>Visitors</span>\n</div>\n<p class=\"panel-description\">Daily visits to your bike shop website</p>\n<figure>\n<div class=\"axis-title\">Visitors · daily count</div>\n<div class=\"plot\">\n<div class=\"y-labels\" aria-hidden=\"true\"><span>500</span><span>250</span><span>0</span></div>\n<svg class=\"trend\" viewBox=\"0 0 560 140\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Website visitors, Monday to Sunday</title>\n<desc id=\"chart-desc\">The vertical axis shows daily visitors from 0 to 500. The horizontal axis shows days of the week, 12–18 May. Monday: 270; Tuesday: 320; Wednesday: 300; Thursday: 410; Friday: 360; Saturday: 330; Sunday: 410.</desc>\n<g fill=\"none\" stroke=\"#dedfd5\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\">\n<path d=\"M8 10H552M8 70H552M8 130H552\" />\n</g>\n<path d=\"M8 65.2L98.7 53.2L189.3 58L280 31.6L370.7 43.6L461.3 50.8L552 31.6V130H8Z\" fill=\"#eaf0e7\"/>\n<path d=\"M8 65.2L98.7 53.2L189.3 58L280 31.6L370.7 43.6L461.3 50.8L552 31.6\" fill=\"none\" stroke=\"#214f3d\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n<circle cx=\"552\" cy=\"31.6\" r=\"4\" fill=\"#214f3d\"/>\n</svg>\n</div>\n<div class=\"x-labels\" aria-hidden=\"true\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>\n<p class=\"axis-bottom\">Day of week · 12–18 May</p>\n<figcaption><strong>Thursday and Sunday led the week</strong> with 410 visitors each.</figcaption>\n</figure>\n</section>\n\n<section class=\"panel\" id=\"top-pages\" aria-labelledby=\"pages-heading\">\n<div class=\"panel-head\"><h2 id=\"pages-heading\">Top pages</h2></div>\n<p class=\"panel-description\">Where riders spend their time</p>\n<table>\n<caption style=\"position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)\">Four most-viewed pages, 12–18 May 2025</caption>\n<thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Views</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Home</span><span class=\"path\">/</span></td><td>1,120</td></tr>\n<tr><td><span class=\"page-name\">Workshop tune-ups, repairs and pre-ride safety checks</span><span class=\"path\">/workshop</span></td><td>760</td></tr>\n<tr><td><span class=\"page-name\">Bikes for everyday riding</span><span class=\"path\">/bikes</span></td><td>640</td></tr>\n<tr><td><span class=\"page-name\">Visit the shop</span><span class=\"path\">/visit</span></td><td>410</td></tr>\n</tbody>\n</table>\n<p class=\"table-note\">Views include repeat visits to the same page.</p>\n</section>\n</div>\n<footer>\n<p>Conversion = completed workshop bookings ÷ visitors.</p>\n<p>Snapshot prepared 19 May 2025 · All times local</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-01","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Birch. Include Visitors 2491, Conversion 2.1%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Birch analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Birch analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Birch analytics — Birch Cycle Co.</title>\n<style>\n:root{color-scheme:light;--bg:#f3f5f8;--paper:#fff;--ink:#273244;--muted:#647084;--line:#dfe5ec;--accent:#50648b;--tint:#eef2f8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{background:var(--paper);border-bottom:1px solid var(--line)}\n.bar{max-width:1120px;margin:auto;min-height:76px;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700;letter-spacing:-.7px}\n.brand svg{color:var(--accent)}\n.shop{text-align:right;font-size:13px}\n.shop small{display:block;color:var(--muted);font-size:12px}\nmain{max-width:1120px;margin:auto;padding:30px 32px 24px}\n.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}\nh1,h2,p{margin:0}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin-bottom:7px}\n.subtitle{color:var(--muted)}\n.updated{font-size:12px;color:var(--muted);white-space:nowrap}\n.toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:5px}\nselect,button{font:inherit;border-radius:6px;min-height:40px}\nselect{width:184px;padding:8px 34px 8px 12px;color:var(--ink);border:1px solid #cbd3df;background:var(--paper)}\nbutton{border:1px solid var(--accent);background:var(--accent);color:white;padding:9px 15px;font-weight:600;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#425576}\nbutton:focus-visible,select:focus-visible{outline:3px solid #aebcd5;outline-offset:3px}\n.action{display:flex;gap:12px;align-items:center}\n.hint{max-width:165px;font-size:12px;color:var(--muted);line-height:1.4}\n.metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}\n.card{background:var(--paper);border:1px solid var(--line);border-radius:9px;min-width:0}\n.metric{padding:20px 22px}\n.metric h2{font-size:14px;font-weight:600}\n.metric-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:5px 0 6px}\n.number{font-size:36px;line-height:1.2;letter-spacing:-1.2px;font-weight:650;font-variant-numeric:tabular-nums}\n.change{font-size:12px;color:var(--accent);font-weight:600}\n.metric p{font-size:13px;color:var(--muted);max-width:310px}\n.details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:18px;align-items:stretch}\n.card-head{padding:20px 22px 16px}\n.card-head h2{font-size:17px;letter-spacing:-.25px}\n.card-head p{font-size:12px;color:var(--muted);margin-top:3px}\n.chart{padding:0 22px}\n.axis-title{font-size:11px;color:var(--muted);margin:0 0 12px}\n.plot{display:grid;grid-template-columns:25px minmax(0,1fr);gap:8px}\n.scale{height:160px;display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:10px;line-height:1;text-align:right}\n.graph{min-width:0}\n.graph svg{display:block;width:100%;height:160px;overflow:visible}\n.days{display:flex;justify-content:space-between;gap:2px;margin-top:10px;color:var(--muted);font-size:10px;white-space:nowrap}\n.day-title{text-align:center;font-size:11px;color:var(--muted);margin:10px 0 20px}\n.insight{border-top:1px solid var(--line);padding:15px 22px 18px;font-size:12px;color:var(--muted)}\n.insight strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\nth,td{padding:12px 20px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}\nth{font-size:11px;color:var(--muted);font-weight:600;background:#f9fafc}\nth:first-child,td:first-child{text-align:left;width:61%}\nth:nth-child(2),td:nth-child(2){width:17%;padding-left:0;padding-right:8px}\nth:last-child,td:last-child{width:22%;padding-left:8px}\ntd{font-size:13px;vertical-align:top}\n.page-name{font-weight:600;display:block;margin-bottom:2px}\n.page-description{display:block;font-size:12px;color:var(--muted);line-height:1.45;max-width:215px}\n.table-note{padding:12px 20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:12px;padding-top:18px;font-size:11px;color:var(--muted)}\n@media(max-width:760px){\n.bar{padding:14px 20px;min-height:66px}\nmain{padding:24px 20px}\n.intro{display:block;margin-bottom:20px}\nh1{font-size:28px}\n.updated{margin-top:10px}\n.toolbar{align-items:flex-start;gap:16px;flex-wrap:wrap}\n.action{padding-top:0}\n.hint{max-width:180px}\n.metrics{gap:12px}\n.metric{padding:16px}\n.metric-value{gap:5px;display:block;margin:8px 0}\n.number{font-size:32px;display:block}\n.change{display:block;margin-top:5px;font-size:11px}\n.metric p{font-size:12px}\n.details{grid-template-columns:minmax(0,1fr)}\n.card-head{padding:18px 18px 15px}\n.chart{padding:0 18px}\n.insight{padding:14px 18px}\nth,td{padding:12px 14px}\nth:first-child,td:first-child{width:57%}\nth:nth-child(2),td:nth-child(2){width:18%}\nth:last-child,td:last-child{width:25%;padding-right:14px}\nfooter{flex-wrap:wrap}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"bar\">\n    <div class=\"brand\">\n      <svg width=\"24\" height=\"29\" viewBox=\"0 0 24 29\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M12 27V5M12 16C5 16 3 11 3 6c6 0 9 4 9 10ZM12 11c0-6 4-9 9-9 0 6-3 9-9 9Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      Birch\n    </div>\n    <div class=\"shop\">Birch Cycle Co.<small>birchcycle.co.uk</small></div>\n  </div>\n</header>\n<main>\n  <section class=\"intro\" aria-labelledby=\"page-title\">\n    <div>\n      <h1 id=\"page-title\">Birch analytics</h1>\n      <p class=\"subtitle\">See how riders find your shop online.</p>\n    </div>\n    <p class=\"updated\">Updated 16 June at 09:42</p>\n  </section>\n\n  <div class=\"toolbar\">\n    <div>\n      <label for=\"date-range\">Date range</label>\n      <select id=\"date-range\" name=\"date-range\">\n        <option selected>Last 7 days</option>\n        <option>Last 30 days</option>\n      </select>\n    </div>\n    <div class=\"action\">\n      <button type=\"button\" aria-describedby=\"export-hint\">Export CSV</button>\n      <p class=\"hint\" id=\"export-hint\">Includes visitor totals and page performance.</p>\n    </div>\n  </div>\n\n  <section class=\"metrics\" aria-label=\"Website performance\">\n    <article class=\"card metric\">\n      <h2>Visitors</h2>\n      <div class=\"metric-value\"><span class=\"number\">2491</span><span class=\"change\">↑ 12.4% vs previous 7 days</span></div>\n      <p>Unique people exploring your bikes, gear and workshop services.</p>\n    </article>\n    <article class=\"card metric\">\n      <h2>Conversion</h2>\n      <div class=\"metric-value\"><span class=\"number\">2.1%</span><span class=\"change\">↑ 0.3 percentage points</span></div>\n      <p>52 visitors booked a service or sent a bike enquiry this week.</p>\n    </article>\n  </section>\n\n  <div class=\"details\">\n    <section class=\"card\" aria-labelledby=\"trend-title\">\n      <div class=\"card-head\">\n        <h2 id=\"trend-title\">Weekly traffic</h2>\n        <p>10–16 June 2024 · Daily visitors</p>\n      </div>\n      <div class=\"chart\">\n        <p class=\"axis-title\">Vertical axis · Visitors per day</p>\n        <div class=\"plot\">\n          <div class=\"scale\" aria-hidden=\"true\"><span>600</span><span>400</span><span>200</span><span>0</span></div>\n          <div class=\"graph\">\n            <svg viewBox=\"0 0 600 160\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"svg-title svg-desc\">\n              <title id=\"svg-title\">Weekly visitor trend</title>\n              <desc id=\"svg-desc\">Visitors by day: Monday 284, Tuesday 312, Wednesday 348, Thursday 296, Friday 421, Saturday 468, Sunday 362. Vertical scale: zero to 600 visitors. Horizontal scale: 10 to 16 June.</desc>\n              <path d=\"M0 0H600M0 53.3H600M0 106.7H600M0 160H600\" stroke=\"#e3e8ef\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" fill=\"none\"/>\n              <path d=\"M8 84.3L105 76.8L203 67.2L300 81.1L397 47.7L495 35.2L592 63.5V160H8Z\" fill=\"#eef2f8\"/>\n              <path d=\"M8 84.3L105 76.8L203 67.2L300 81.1L397 47.7L495 35.2L592 63.5\" fill=\"none\" stroke=\"#50648b\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n            </svg>\n            <div class=\"days\" aria-hidden=\"true\"><span>Mon 10</span><span>Tue 11</span><span>Wed 12</span><span>Thu 13</span><span>Fri 14</span><span>Sat 15</span><span>Sun 16</span></div>\n          </div>\n        </div>\n        <p class=\"day-title\">Horizontal axis · Day in June</p>\n      </div>\n      <div class=\"insight\">\n        <strong>A busy Saturday online</strong>\n        468 visitors stopped by your website on Saturday, the week's busiest day.\n      </div>\n    </section>\n\n    <section class=\"card\" aria-labelledby=\"pages-title\">\n      <div class=\"card-head\">\n        <h2 id=\"pages-title\">Top pages</h2>\n        <p>Your most-viewed pages this week.</p>\n      </div>\n      <table aria-labelledby=\"pages-title\">\n        <thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Views</th><th scope=\"col\">Enquiries</th></tr></thead>\n        <tbody>\n          <tr><td><span class=\"page-name\">Bikes &amp; gear</span><span class=\"page-description\">Bikes for commutes and weekend trails.</span></td><td>1,248</td><td>18</td></tr>\n          <tr><td><span class=\"page-name\">Workshop</span><span class=\"page-description\">Repairs, tune-ups and service bookings.</span></td><td>986</td><td>27</td></tr>\n          <tr><td><span class=\"page-name\">Home</span><span class=\"page-description\">Shop news and opening hours.</span></td><td>842</td><td>5</td></tr>\n          <tr><td><span class=\"page-name\">Local rides</span><span class=\"page-description\">Routes picked by the shop team.</span></td><td>367</td><td>2</td></tr>\n        </tbody>\n      </table>\n      <p class=\"table-note\">Views include repeat visits. Enquiries include service bookings.</p>\n    </section>\n  </div>\n  <footer><span>Reporting timezone: Europe/London</span><span>Comparison: 3–9 June 2024</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-02","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Cedar. Include Visitors 2582, Conversion 2.3%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Cedar analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Cedar analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Cedar analytics — Weekly overview</title>\n<style>\n:root{--paper:#faf8f4;--ink:#302d29;--muted:#77716a;--line:#ded9d1;--accent:#a64f36}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\n.wrap{width:min(1040px,calc(100% - 64px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.masthead{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-family:Georgia,serif;font-weight:bold;font-size:30px;letter-spacing:-1.5px}\n.brand span{color:var(--accent)}\n.eyebrow{font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}\n.masthead .eyebrow{color:var(--muted)}\nmain{padding:38px 0 24px}\n.title-row{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:28px}\nh1{font-family:Georgia,serif;font-size:42px;font-weight:400;letter-spacing:-1.4px;line-height:1.15;margin:0 0 10px}\np{margin:0}\n.subtle{color:var(--muted)}\n.date-control{min-width:180px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\nselect{width:100%;min-height:43px;padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);font:inherit}\nselect:focus-visible{outline:2px solid var(--accent);outline-offset:3px}\n.metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}\n.metric{padding:21px 0 23px}\n.metric+ .metric{border-left:1px solid var(--line);padding-left:40px}\n.metric h2{font-size:14px;font-weight:500;margin:0 0 4px}\n.value{font-size:48px;line-height:1.2;letter-spacing:-2px;font-weight:500;font-variant-numeric:tabular-nums}\n.change{margin-top:9px;font-size:12px;color:var(--muted)}\n.change strong{color:var(--accent);font-weight:600}\nsection{margin:0}\n.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}\nh2{font-size:19px;font-weight:600;letter-spacing:-.35px;margin:0}\n.section-head p{font-size:12px;color:var(--muted)}\n.trend{padding:25px 0 22px;border-bottom:1px solid var(--line)}\nfigure{margin:0}\n.axis-title{font-size:11px;color:var(--muted);margin-bottom:9px}\n.chart{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px}\n.y-labels{display:flex;flex-direction:column;justify-content:space-between;height:160px;font-size:11px;color:var(--muted);text-align:right;line-height:1}\n.plot{min-width:0}\n.plot svg{display:block;width:100%;height:160px;overflow:visible}\n.x-labels{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:var(--muted)}\nfigcaption{margin:9px 0 0 42px;text-align:center;font-size:11px;color:var(--muted)}\n.pages{padding-top:25px}\ntable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}\nth{padding:0 0 10px;border-bottom:1px solid var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}\ntd{padding:12px 0;border-bottom:1px solid var(--line)}\nth:first-child,td:first-child{text-align:left}\nth:not(:first-child),td:not(:first-child){text-align:right}\nth:nth-child(2){width:18%}\nth:last-child{width:22%}\n.page-name{font-size:14px;font-weight:550}\n.path{display:block;font-size:11px;color:var(--muted);margin-top:1px}\n.share{display:flex;justify-content:flex-end;align-items:center;gap:12px}\n.track{width:66px;height:3px;background:var(--line)}\n.track span{display:block;height:100%;background:var(--muted)}\n.next{display:flex;gap:22px;padding:20px 0;align-items:baseline}\n.next .eyebrow{color:var(--accent);white-space:nowrap}\n.next p{font-size:13px}\nfooter{border-top:1px solid var(--line);padding:15px 0 22px}\n.footer-row{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:11px}\n.status{color:var(--ink)}\n@media(max-width:600px){\n.wrap{width:calc(100% - 40px)}\n.masthead{min-height:62px}\n.brand{font-size:27px}\n.masthead .eyebrow{font-size:10px;letter-spacing:.08em}\nmain{padding-top:26px}\n.title-row{display:block;margin-bottom:22px}\nh1{font-size:34px;letter-spacing:-1px}\n.title-row p{font-size:12px}\n.date-control{margin-top:19px;min-width:0}\n.metric{padding:18px 0}\n.metric+ .metric{padding-left:20px}\n.value{font-size:39px;letter-spacing:-1.5px}\n.change{font-size:11px;max-width:140px}\n.change strong{display:block}\n.section-head{display:block;margin-bottom:17px}\n.section-head p{margin-top:4px}\n.trend{padding-top:22px}\n.track{display:none}\nth:nth-child(2){width:20%}\nth:last-child{width:21%}\n.next{display:block;padding:18px 0}\n.next p{margin-top:6px}\n.footer-row{display:block}\n.footer-row p+p{margin-top:5px}\n}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"wrap masthead\">\n    <div class=\"brand\" aria-label=\"Cedar\">cedar<span>.</span></div>\n    <div class=\"eyebrow\">Independent bike shop</div>\n  </div>\n</header>\n<main class=\"wrap\">\n  <div class=\"title-row\">\n    <div>\n      <h1>Cedar analytics</h1>\n      <p class=\"subtle\">Your shop online · 10–16 June 2024</p>\n    </div>\n    <div class=\"date-control\">\n      <label for=\"date-range\">Date range</label>\n      <select id=\"date-range\" name=\"date-range\">\n        <option selected>Last 7 days</option>\n        <option>Last 30 days</option>\n      </select>\n    </div>\n  </div>\n\n  <section class=\"metrics\" aria-label=\"Weekly performance\">\n    <div class=\"metric\">\n      <h2>Visitors</h2>\n      <p class=\"value\">2582</p>\n      <p class=\"change\"><strong>↑ 12.4% more</strong> than the previous 7 days</p>\n    </div>\n    <div class=\"metric\">\n      <h2>Conversion</h2>\n      <p class=\"value\">2.3%</p>\n      <p class=\"change\"><strong>59 bookings &amp; orders</strong> from website visitors</p>\n    </div>\n  </section>\n\n  <section class=\"trend\" aria-labelledby=\"trend-heading\">\n    <div class=\"section-head\">\n      <h2 id=\"trend-heading\">Weekly trend</h2>\n      <p>Peak day: Saturday · 462 visitors</p>\n    </div>\n    <figure>\n      <div class=\"axis-title\">Visitors per day</div>\n      <div class=\"chart\">\n        <div class=\"y-labels\" aria-hidden=\"true\"><span>500</span><span>250</span><span>0</span></div>\n        <div class=\"plot\">\n          <svg viewBox=\"0 0 600 160\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n            <title id=\"chart-title\">Daily website visitors, 10–16 June</title>\n            <desc id=\"chart-desc\">The vertical axis runs from 0 to 500 visitors. The horizontal axis runs from Monday to Sunday. Daily visitors: Monday 290, Tuesday 335, Wednesday 310, Thursday 370, Friday 425, Saturday 462, Sunday 390.</desc>\n            <path d=\"M0 0H600 M0 80H600 M0 160H600\" fill=\"none\" stroke=\"#ded9d1\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>\n            <path d=\"M0 67.2L100 52.8L200 60.8L300 41.6L400 24L500 12.16L600 35.2\" fill=\"none\" stroke=\"#a64f36\" stroke-width=\"2.5\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n          </svg>\n          <div class=\"x-labels\" aria-hidden=\"true\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>\n        </div>\n      </div>\n      <figcaption>Day of week · 10–16 June</figcaption>\n    </figure>\n  </section>\n\n  <section class=\"pages\" aria-labelledby=\"pages-heading\">\n    <div class=\"section-head\">\n      <h2 id=\"pages-heading\">Top pages</h2>\n      <p>4 pages · 3,204 page views</p>\n    </div>\n    <table aria-label=\"Top pages ranked by page views\">\n      <thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Views</th><th scope=\"col\">Share</th></tr></thead>\n      <tbody>\n        <tr><td><span class=\"page-name\">Bikes</span><span class=\"path\">/bikes</span></td><td>1,340</td><td><div class=\"share\"><span>42%</span><span class=\"track\" aria-hidden=\"true\"><span style=\"width:42%\"></span></span></div></td></tr>\n        <tr><td><span class=\"page-name\">Home</span><span class=\"path\">/</span></td><td>962</td><td><div class=\"share\"><span>30%</span><span class=\"track\" aria-hidden=\"true\"><span style=\"width:30%\"></span></span></div></td></tr>\n        <tr><td><span class=\"page-name\">Workshop</span><span class=\"path\">/workshop</span></td><td>584</td><td><div class=\"share\"><span>18%</span><span class=\"track\" aria-hidden=\"true\"><span style=\"width:18%\"></span></span></div></td></tr>\n        <tr><td><span class=\"page-name\">Visit the shop</span><span class=\"path\">/visit</span></td><td>318</td><td><div class=\"share\"><span>10%</span><span class=\"track\" aria-hidden=\"true\"><span style=\"width:10%\"></span></span></div></td></tr>\n      </tbody>\n    </table>\n  </section>\n\n  <aside class=\"next\" aria-label=\"Suggested next step\">\n    <span class=\"eyebrow\">Next step</span>\n    <p>Help more riders book a service: add a clear workshop booking link to your home page.</p>\n  </aside>\n</main>\n<footer>\n  <div class=\"wrap footer-row\">\n    <p class=\"status\">✓ Report complete · 7 of 7 days included</p>\n    <p>Sample data · Read-only weekly snapshot</p>\n  </div>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-analytics-03","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Dune. Include Visitors 2673, Conversion 2.4%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Dune analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Dune analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Dune analytics</title>\n<style>\n:root{color-scheme:light;--ink:#29252a;--muted:#736d72;--plum:#60364f;--line:#e2dedf;--paper:#fff;--bg:#f7f6f3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nheader{border-bottom:1px solid var(--line)}\n.header-inner,main{max-width:1080px;margin:auto;padding-left:32px;padding-right:32px}\n.header-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{font-weight:750;font-size:20px;letter-spacing:-.7px}\n.brand span{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;border-left:1px solid var(--line);margin-left:18px;padding-left:18px;color:var(--muted)}\n.header-note{font-size:12px;color:var(--muted)}\nmain{padding-top:34px;padding-bottom:36px}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:26px}\n.eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--plum);font-weight:700}\nh1{font:normal 44px/1.12 Georgia,serif;letter-spacing:-1.3px;margin:0 0 10px}\n.intro p:last-child{margin:0;color:var(--muted);max-width:540px}\n.range{flex:0 0 180px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\nselect{font:inherit;color:var(--ink);background:var(--paper);border:1px solid #c9c2c6;border-radius:5px;min-height:42px;width:100%;padding:8px 12px}\nselect:focus-visible{outline:2px solid var(--plum);outline-offset:3px}\n.period{font-size:12px;color:var(--muted);margin:7px 0 0}\n.metrics{display:grid;grid-template-columns:1fr 1fr;margin:0 0 22px;background:var(--paper);border:1px solid var(--line);border-radius:7px}\n.metric{padding:18px 24px}\n.metric+.metric{border-left:1px solid var(--line)}\ndt{font-size:13px;font-weight:600}\ndd{margin:4px 0 0;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}\n.value{font-size:36px;line-height:1.2;font-weight:600;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}\n.change{font-size:12px;color:var(--plum)}\n.change span{color:var(--muted);margin-left:4px}\n.panel{background:var(--paper);border:1px solid var(--line);border-radius:7px;overflow:hidden}\n.traffic{display:grid;grid-template-columns:minmax(0,1fr) 220px;margin-bottom:22px}\n.chart-area{padding:20px 24px 16px;min-width:0}\n.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}\nh2{font-size:16px;letter-spacing:-.2px;margin:0;font-weight:650}\n.subtle{color:var(--muted);font-size:12px;margin:0}\n.axis-label{font-size:11px;color:var(--muted);margin:14px 0 8px}\n.plot{display:flex;gap:10px;height:140px}\n.ticks{width:25px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--muted);text-align:right;line-height:1}\n.plot svg{display:block;width:100%;height:140px;overflow:visible}\n.days{display:flex;justify-content:space-between;margin:7px 0 0 35px;font-size:11px;color:var(--muted)}\n.x-label{text-align:center;font-size:11px;color:var(--muted);margin:8px 0 0 35px}\n.detail{border-left:1px solid var(--line);padding:23px 22px;background:#fbfafb}\n.detail h3{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--plum);margin:0 0 16px}\n.detail strong{font-size:24px;font-weight:600;letter-spacing:-.6px}\n.detail p{font-size:12px;margin:3px 0 0;color:var(--muted)}\n.detail .definition{border-top:1px solid var(--line);padding-top:13px;margin-top:16px;line-height:1.6}\n.table-heading{padding:18px 24px 15px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}\ntable{border-collapse:collapse;width:100%;text-align:left;font-size:13px}\nth{background:#faf9f7;color:var(--muted);font-size:11px;font-weight:500;padding:9px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\ntd{padding:11px 24px;border-bottom:1px solid #eeebed}\nth:not(:first-child),td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}\n.page{font-weight:600}\n.path{color:var(--muted);font-size:11px;margin-left:12px;font-weight:400}\n.share{display:inline-block;width:80px;height:4px;background:#eee9ed;border-radius:3px;margin-right:12px;vertical-align:middle;overflow:hidden}\n.share i{display:block;height:100%;background:#98758b}\n.table-note{padding:11px 24px;margin:0;font-size:11px;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:11px;color:var(--muted)}\n@media(max-width:600px){\n.header-inner,main{padding-left:20px;padding-right:20px}\n.header-inner{height:58px}.header-note{display:none}.brand span{font-size:10px}\nmain{padding-top:24px}\n.intro{display:block;margin-bottom:20px}h1{font-size:36px}\n.intro p:last-child{font-size:13px}\n.range{margin-top:20px;display:grid;grid-template-columns:1fr 155px;align-items:center;column-gap:12px}\n.range label{margin:0}.period{grid-column:2;font-size:11px}\n.metric{padding:15px 16px}dd{display:block}.value{font-size:32px}.change{display:block;margin-top:7px;font-size:11px}.change span{display:block;margin:1px 0 0}\n.metrics{margin-bottom:16px}\n.traffic{grid-template-columns:1fr;margin-bottom:16px}\n.chart-area{padding:17px 16px 15px}.section-head{gap:8px}.section-head .subtle{font-size:10px}\n.plot,.plot svg{height:125px}\n.detail{border-left:0;border-top:1px solid var(--line);padding:14px 16px;display:grid;grid-template-columns:1fr 1.1fr;column-gap:18px}\n.detail h3{grid-column:1/-1;margin-bottom:7px;font-size:10px}.detail strong{font-size:21px}\n.detail .definition{border:0;padding:0;margin:0;font-size:11px}\n.table-heading{padding:16px}.table-heading .subtle{font-size:11px}\nth,td{padding-left:16px;padding-right:16px}th{font-size:10px}\ntd{font-size:12px}.path{display:block;margin:1px 0 0}.share{display:none}\n.table-note{padding:11px 16px;line-height:1.6}footer{font-size:10px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\">dune<span>Shop insights</span></div>\n<div class=\"header-note\">Independent bike shop · Website overview</div>\n</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Overview</p>\n<h1 id=\"page-title\">Dune analytics</h1>\n<p>See how riders find your shop, explore the range and turn a visit into an order.</p>\n</div>\n<div class=\"range\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n<p class=\"period\">10–16 June 2024</p>\n</div>\n</section>\n\n<dl class=\"metrics\">\n<div class=\"metric\">\n<dt>Visitors</dt>\n<dd><span class=\"value\">2673</span><span class=\"change\">↑ 8.6% <span>vs. previous 7 days</span></span></dd>\n</div>\n<div class=\"metric\">\n<dt>Conversion</dt>\n<dd><span class=\"value\">2.4%</span><span class=\"change\">↑ 0.3 percentage points <span>vs. previous 7 days</span></span></dd>\n</div>\n</dl>\n\n<section class=\"panel traffic\" aria-labelledby=\"traffic-title\">\n<div class=\"chart-area\">\n<div class=\"section-head\">\n<h2 id=\"traffic-title\">Weekly traffic</h2>\n<p class=\"subtle\">Peak: Saturday · 465 visitors</p>\n</div>\n<p class=\"axis-label\">Visitors per day</p>\n<div class=\"plot\">\n<div class=\"ticks\" aria-hidden=\"true\"><span>500</span><span>250</span><span>0</span></div>\n<svg viewBox=\"0 0 600 140\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Daily visitors, 10–16 June</title>\n<desc id=\"chart-desc\">Vertical axis: visitors, from 0 to 500. Horizontal axis: Monday to Sunday. Monday 312, Tuesday 368, Wednesday 346, Thursday 410, Friday 385, Saturday 465, Sunday 387.</desc>\n<g fill=\"none\" stroke=\"#e8e4e7\" stroke-width=\"1\">\n<path d=\"M0 1H600M0 70H600M0 139H600\"/>\n</g>\n<path d=\"M2 53L101 37L200 43L300 25L400 32L499 10L598 32V139H2Z\" fill=\"#60364f\" opacity=\".055\"/>\n<path d=\"M2 53L101 37L200 43L300 25L400 32L499 10L598 32\" fill=\"none\" stroke=\"#60364f\" stroke-width=\"2.5\" vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<circle cx=\"499\" cy=\"10\" r=\"4\" fill=\"#60364f\"/>\n</svg>\n</div>\n<div class=\"days\" aria-hidden=\"true\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>\n<p class=\"x-label\">Day of week · 10–16 June</p>\n</div>\n<aside class=\"detail\" aria-labelledby=\"detail-title\">\n<h3 id=\"detail-title\">Behind the conversion</h3>\n<div><strong>64</strong><p>completed online orders</p></div>\n<p class=\"definition\">Conversion is the share of visitors who placed an order. Workshop enquiries are counted separately.</p>\n</aside>\n</section>\n\n<section class=\"panel\" aria-labelledby=\"pages-title\">\n<div class=\"table-heading\">\n<h2 id=\"pages-title\">Top pages</h2>\n<p class=\"subtle\">Where visits began</p>\n</div>\n<table>\n<thead><tr><th scope=\"col\">Landing page</th><th scope=\"col\">Visitors</th><th scope=\"col\">Share of total</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page\">Bikes</span><span class=\"path\">/bikes</span></td><td>986</td><td><span class=\"share\" aria-hidden=\"true\"><i style=\"width:36.9%\"></i></span>36.9%</td></tr>\n<tr><td><span class=\"page\">Workshop</span><span class=\"path\">/workshop</span></td><td>624</td><td><span class=\"share\" aria-hidden=\"true\"><i style=\"width:23.3%\"></i></span>23.3%</td></tr>\n<tr><td><span class=\"page\">Home</span><span class=\"path\">/</span></td><td>543</td><td><span class=\"share\" aria-hidden=\"true\"><i style=\"width:20.3%\"></i></span>20.3%</td></tr>\n<tr><td><span class=\"page\">Accessories</span><span class=\"path\">/accessories</span></td><td>328</td><td><span class=\"share\" aria-hidden=\"true\"><i style=\"width:12.3%\"></i></span>12.3%</td></tr>\n</tbody>\n</table>\n<p class=\"table-note\">Showing the four most common landing pages. Staff visits and known bots are excluded.</p>\n</section>\n<footer><span>Reporting timezone: Europe/London</span><span>Weekly snapshot · 16 June 2024</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-04","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Elm. Include Visitors 2764, Conversion 2.5%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: calm and spacious; use forest green as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Elm analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Elm analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Elm analytics — Community food co-op</title>\n<style>\n:root{color-scheme:light;--bg:#f6f7f3;--paper:#fff;--ink:#24372e;--muted:#68736b;--green:#2d6248;--line:#dce2d9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line)}\n.bar{max-width:1040px;margin:auto;min-height:72px;padding:12px 28px;display:flex;align-items:center;gap:24px}\n.wordmark{font-family:Georgia,serif;font-size:32px;line-height:1;color:var(--green);letter-spacing:-2px}\n.brand-detail{border-left:1px solid var(--line);padding-left:24px;color:var(--muted);font-size:13px}\nmain{max-width:1040px;margin:auto;padding:30px 28px 20px}\n.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-bottom:24px}\nh1,h2,p{margin:0}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;font-weight:650;margin-bottom:10px}\n.subtitle{max-width:470px;color:var(--muted);font-size:15px}\n.filter{flex:0 0 190px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\nselect{width:100%;min-height:44px;border:1px solid #bdc9bd;border-radius:5px;background:var(--paper);color:var(--ink);padding:10px 34px 10px 12px;font:inherit}\nselect:focus-visible{outline:3px solid #a5c3ac;outline-offset:3px}\n.metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-bottom:24px}\n.metric{padding-right:28px}\n.metric+.metric{border-left:1px solid var(--line);padding:0 0 0 32px}\n.metric h2{font-size:14px;font-weight:600}\n.value-line{display:flex;align-items:baseline;gap:16px;margin:2px 0}\n.value{font-size:38px;line-height:1.3;letter-spacing:-1.5px;font-weight:600;font-variant-numeric:tabular-nums}\n.change{font-size:12px;color:var(--green);white-space:nowrap}\n.metric p{max-width:340px;font-size:13px;color:var(--muted)}\n.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}\nh2{font-size:17px;font-weight:650;letter-spacing:-.25px}\n.meta{color:var(--muted);font-size:12px}\nfigure{margin:0 0 24px}\n.axis-title{font-size:11px;color:var(--muted);margin-bottom:5px}\n.chart{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px}\n.y-axis{height:144px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:var(--muted);font-size:11px;line-height:1}\n.plot{min-width:0}\n.plot svg{display:block;width:100%;height:144px;overflow:visible}\n.days{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:11px}\n.x-title{text-align:center;margin-top:5px;color:var(--muted);font-size:11px}\n.pages{border-top:1px solid var(--line);padding-top:20px}\n.pages .section-head{margin-bottom:10px}\ntable{border-collapse:collapse;width:100%;table-layout:fixed}\nth{text-align:left;font-size:11px;color:var(--muted);font-weight:500;padding:8px 0;border-bottom:1px solid var(--line)}\nth:first-child{width:68%}\nth:not(:first-child),td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}\ntd{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:middle}\ntd:first-child{padding-right:20px}\n.page-name{font-weight:600;font-size:14px}\n.page-description{display:block;max-width:430px;color:var(--muted);font-size:12px;margin-top:2px;overflow-wrap:anywhere}\n.share{color:var(--muted)}\n.table-note{font-size:12px;color:var(--muted);margin-top:10px}\nfooter{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-top:24px;padding-bottom:8px}\n@media(max-width:600px){\n.bar{min-height:62px;padding:12px 20px;gap:18px}\n.brand-detail{padding-left:18px;font-size:12px}\nmain{padding:24px 20px 16px}\n.intro{display:block;margin-bottom:20px}\nh1{font-size:28px}\n.subtitle{font-size:14px}\n.filter{margin-top:18px;max-width:100%}\n.metrics{padding:16px 0;margin-bottom:22px}\n.metric{padding-right:14px}\n.metric+.metric{padding-left:18px}\n.value-line{display:block;margin:4px 0 7px}\n.value{font-size:34px;display:block}\n.change{display:block}\n.metric p{font-size:12px}\n.section-head{gap:8px}\nh2{font-size:16px}\n.meta{font-size:11px}\n.chart{grid-template-columns:24px minmax(0,1fr);gap:8px}\n.days{font-size:10px}\nth:first-child{width:62%}\ntd{padding:12px 0;font-size:13px}\ntd:first-child{padding-right:12px}\n.page-name{font-size:13px}\n.page-description{font-size:12px;line-height:1.45}\nfooter{margin-top:20px;gap:4px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"bar\">\n<span class=\"wordmark\" aria-label=\"Elm\">elm</span>\n<span class=\"brand-detail\">Community food co-op</span>\n</div>\n</header>\n<main>\n<div class=\"intro\">\n<div>\n<h1>Elm analytics</h1>\n<p class=\"subtitle\">See how neighbors find the co-op and take their next step toward membership.</p>\n</div>\n<div class=\"filter\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n</div>\n</div>\n\n<section class=\"metrics\" aria-label=\"Website performance\">\n<div class=\"metric\">\n<h2>Visitors</h2>\n<div class=\"value-line\"><span class=\"value\">2764</span><span class=\"change\">↑ 8.4% vs. prior week</span></div>\n<p>People exploring fresh food, local growers, and co-op life.</p>\n</div>\n<div class=\"metric\">\n<h2>Conversion</h2>\n<div class=\"value-line\"><span class=\"value\">2.5%</span><span class=\"change\">↑ 0.3 pts vs. prior week</span></div>\n<p>Share of visitors who submitted a membership application.</p>\n</div>\n</section>\n\n<figure aria-labelledby=\"trend-heading\">\n<div class=\"section-head\">\n<h2 id=\"trend-heading\">Visitor trend</h2>\n<span class=\"meta\">10–16 June 2024</span>\n</div>\n<div class=\"axis-title\">Visitors · people per day</div>\n<div class=\"chart\">\n<div class=\"y-axis\" aria-hidden=\"true\"><span>600</span><span>400</span><span>200</span><span>0</span></div>\n<div class=\"plot\">\n<svg viewBox=\"0 0 900 150\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Daily visitors for the last seven days</title>\n<desc id=\"chart-desc\">The vertical axis shows visitors from zero to 600. The horizontal axis shows Monday through Sunday. Monday: 312; Tuesday: 354; Wednesday: 326; Thursday: 412; Friday: 386; Saturday: 508; Sunday: 466.</desc>\n<g fill=\"none\" stroke=\"#dce2d9\" stroke-width=\"1\">\n<path d=\"M0 1H900M0 50H900M0 100H900M0 149H900\" vector-effect=\"non-scaling-stroke\"/>\n</g>\n<path d=\"M2 72L151 61.5L300 68.5L450 47L600 53.5L749 23L898 33.5V149H2Z\" fill=\"#e8efe7\"/>\n<path d=\"M2 72L151 61.5L300 68.5L450 47L600 53.5L749 23L898 33.5\" fill=\"none\" stroke=\"#2d6248\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" vector-effect=\"non-scaling-stroke\"/>\n</svg>\n<div class=\"days\" aria-hidden=\"true\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>\n<div class=\"x-title\">Day of week</div>\n</div>\n</div>\n</figure>\n\n<section class=\"pages\" aria-labelledby=\"pages-heading\">\n<div class=\"section-head\">\n<h2 id=\"pages-heading\">Top pages</h2>\n<span class=\"meta\">Where neighbors arrive</span>\n</div>\n<table aria-labelledby=\"pages-heading\">\n<thead><tr><th scope=\"col\">Entry page</th><th scope=\"col\">Visitors</th><th scope=\"col\">Share</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"page-name\">Home</span><span class=\"page-description\">Seasonal news and everyday essentials</span></td>\n<td>1120</td><td class=\"share\">40.5%</td>\n</tr>\n<tr>\n<td><span class=\"page-name\">Weekly produce boxes</span><span class=\"page-description\">What's fresh from nearby growers</span></td>\n<td>742</td><td class=\"share\">26.8%</td>\n</tr>\n<tr>\n<td><span class=\"page-name\">Become a member</span><span class=\"page-description\">Joining, benefits, and how to take part</span></td>\n<td>553</td><td class=\"share\">20.0%</td>\n</tr>\n<tr>\n<td><span class=\"page-name\">Food access &amp; community</span><span class=\"page-description\">Our shared commitment to affordable, nourishing food for every neighbor in our community</span></td>\n<td>349</td><td class=\"share\">12.6%</td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-note\">Entry page is the first page a visitor sees. Percentages are rounded.</p>\n</section>\n<footer>\n<span>Weekly snapshot · 10–16 June 2024</span>\n<span>Aggregate counts only. No personal visitor details.</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-05","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Fjord. Include Visitors 2855, Conversion 2.6%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: compact but readable; use slate blue as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Fjord analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Fjord analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Fjord analytics</title>\n<style>\n:root{color-scheme:light;--bg:#f5f3ee;--paper:#fffefa;--ink:#243147;--muted:#667080;--line:#dedfdc;--accent:#53668b;--green:#426854}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line);background:var(--paper)}\n.header-inner,main,footer{max-width:1080px;margin:auto;padding-left:32px;padding-right:32px}\n.header-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{font-size:21px;font-weight:750;letter-spacing:-.7px}\n.brand span{font-size:12px;font-weight:450;letter-spacing:0;color:var(--muted);margin-left:18px}\n.header-note{font-size:12px;color:var(--muted)}\nmain{padding-top:30px;padding-bottom:22px}\n.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-bottom:26px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0 0 7px;font-weight:700}\np{margin:0}\n.subtitle{color:var(--muted)}\n.range{min-width:288px}\n.range label{display:block;font-size:12px;font-weight:650;margin-bottom:5px}\n.controls{display:flex;gap:8px}\nselect,button{font:inherit;border-radius:5px;min-height:40px}\nselect{flex:1;min-width:0;border:1px solid #bac0c8;color:var(--ink);background:var(--paper);padding:8px 32px 8px 11px}\nbutton{border:1px solid var(--ink);background:var(--ink);color:white;font-weight:600;padding:8px 18px;cursor:pointer}\nbutton:hover{background:#354762}\nselect:focus-visible,button:focus-visible{outline:3px solid #a5b5d3;outline-offset:3px}\n.hint{font-size:11px;color:var(--muted);margin-top:6px}\n.metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;background:var(--paper)}\n.metric{padding:0 24px}\n.metric+ .metric{border-left:1px solid var(--line)}\n.metric h2{font-size:13px;font-weight:600;margin:0 0 3px}\n.value{font-size:36px;line-height:1.2;font-weight:650;letter-spacing:-1.3px;font-variant-numeric:tabular-nums}\n.metric-detail{display:flex;align-items:center;gap:12px;margin-top:7px;font-size:12px;color:var(--muted)}\n.change{color:var(--green);font-weight:600}\nsection.trend{padding:23px 0 20px;border-bottom:1px solid var(--line)}\n.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}\nh2{font-size:16px;letter-spacing:-.2px;margin:0;font-weight:650}\n.section-note{font-size:12px;color:var(--muted)}\nfigure{margin:0}\n.axis-title{font-size:11px;color:var(--muted);margin-bottom:8px}\n.chart{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px}\n.y-axis{height:150px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--muted);text-align:right;line-height:1;transform:translateY(-5px)}\n.plot{min-width:0}\nsvg{display:block;width:100%;height:150px;overflow:visible}\n.days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--muted);margin-top:8px}\nfigcaption{margin:8px 0 0 38px;text-align:center;color:var(--muted);font-size:11px}\n.pages{padding-top:20px}\n.pages .section-heading{margin-bottom:10px}\ntable{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}\nth{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 12px}\nth:first-child{width:62%;padding-left:0}\nth:not(:first-child),td:not(:first-child){text-align:right}\ntd{padding:10px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}\ntd:first-child{padding-left:0}\nth:last-child,td:last-child{padding-right:0}\n.page-name{display:block;font-weight:550}\n.path{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere}\nfooter{padding-bottom:24px;color:var(--muted);font-size:11px}\n.footer-inner{display:flex;justify-content:space-between;gap:16px}\n.update{display:flex;align-items:baseline;gap:7px}\n.update::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}\n@media(max-width:600px){\n.header-inner,main,footer{padding-left:20px;padding-right:20px}\n.header-inner{min-height:54px}\n.brand span{margin-left:12px;font-size:11px}\n.header-note{display:none}\nmain{padding-top:22px;padding-bottom:18px}\nh1{font-size:27px}\n.subtitle{font-size:13px}\n.intro{display:block;margin-bottom:20px}\n.range{min-width:0;margin-top:18px}\n.hint{font-size:11px}\n.metrics{padding:15px 0}\n.metric{padding:0 15px}\n.metric:first-child{padding-left:0}\n.metric:last-child{padding-right:0}\n.value{font-size:32px}\n.metric-detail{display:block;font-size:11px;margin-top:6px}\n.metric-detail span{display:block}\nsection.trend{padding-top:20px;padding-bottom:17px}\n.section-heading{margin-bottom:12px}\n.section-note{font-size:11px}\n.pages{padding-top:17px}\n.pages .section-heading{display:block}\n.pages .section-note{display:block;margin-top:3px}\nth:first-child{width:58%}\nth,td{padding-left:7px;padding-right:7px}\nth{font-size:10px;letter-spacing:.3px}\ntd{font-size:12px;padding-top:9px;padding-bottom:9px}\n.path{font-size:10px}\n.footer-inner{display:block}\n.update{margin-bottom:7px}\n}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"header-inner\">\n    <div class=\"brand\">Fjord<span>Community food co-op</span></div>\n    <span class=\"header-note\">Website overview</span>\n  </div>\n</header>\n<main>\n  <div class=\"intro\">\n    <div>\n      <h1>Fjord analytics</h1>\n      <p class=\"subtitle\">See how your community connects with the co-op.</p>\n    </div>\n    <div class=\"range\">\n      <label for=\"date-range\">Date range</label>\n      <div class=\"controls\">\n        <select id=\"date-range\" name=\"date-range\">\n          <option selected>Last 7 days</option>\n          <option>Last 30 days</option>\n        </select>\n        <button type=\"button\">Apply</button>\n      </div>\n      <p class=\"hint\">Dates follow your co-op’s local time.</p>\n    </div>\n  </div>\n\n  <section class=\"metrics\" aria-label=\"Weekly performance\">\n    <div class=\"metric\">\n      <h2>Visitors</h2>\n      <p class=\"value\">2855</p>\n      <p class=\"metric-detail\"><span class=\"change\">↑ 12.0% vs prior week</span><span>Unique website visitors</span></p>\n    </div>\n    <div class=\"metric\">\n      <h2>Conversion</h2>\n      <p class=\"value\">2.6%</p>\n      <p class=\"metric-detail\"><span class=\"change\">↑ 0.3 percentage points</span><span>74 member sign-ups</span></p>\n    </div>\n  </section>\n\n  <section class=\"trend\" aria-labelledby=\"trend-title\">\n    <div class=\"section-heading\">\n      <h2 id=\"trend-title\">Weekly visitor trend</h2>\n      <span class=\"section-note\">May 12–18, 2025</span>\n    </div>\n    <figure>\n      <div class=\"axis-title\">Visitors per day</div>\n      <div class=\"chart\">\n        <div class=\"y-axis\" aria-hidden=\"true\"><span>600</span><span>400</span><span>200</span><span>0</span></div>\n        <div class=\"plot\">\n          <svg viewBox=\"0 0 600 150\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n            <title id=\"chart-title\">Daily visitors, Monday through Sunday</title>\n            <desc id=\"chart-desc\">The vertical axis shows 0 to 600 visitors. The horizontal axis shows days of the week. Monday: 322; Tuesday: 368; Wednesday: 354; Thursday: 435; Friday: 403; Saturday: 501; Sunday: 472.</desc>\n            <path d=\"M0 0H600 M0 50H600 M0 100H600 M0 150H600\" fill=\"none\" stroke=\"#dedfdc\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>\n            <path d=\"M43 150V69.5L129 58L214 61.5L300 41.25L386 49.25L471 24.75L557 32V150Z\" fill=\"#e6eaf1\"/>\n            <path d=\"M43 69.5L129 58L214 61.5L300 41.25L386 49.25L471 24.75L557 32\" fill=\"none\" stroke=\"#53668b\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n          </svg>\n          <div class=\"days\" aria-hidden=\"true\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>\n        </div>\n      </div>\n      <figcaption>Day of week · Saturday was busiest, with 501 visitors.</figcaption>\n    </figure>\n  </section>\n\n  <section class=\"pages\" aria-labelledby=\"pages-title\">\n    <div class=\"section-heading\">\n      <h2 id=\"pages-title\">Top pages</h2>\n      <p class=\"section-note\">What your neighbors are reading this week</p>\n    </div>\n    <table aria-label=\"Top pages by page views\">\n      <thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Views</th><th scope=\"col\">Sign-ups</th></tr></thead>\n      <tbody>\n        <tr><td><span class=\"page-name\">Co-op home</span><span class=\"path\">/</span></td><td>2,014</td><td>18</td></tr>\n        <tr><td><span class=\"page-name\">Weekly produce box</span><span class=\"path\">/produce-box</span></td><td>1,126</td><td>32</td></tr>\n        <tr><td><span class=\"page-name\">Become a member</span><span class=\"path\">/membership</span></td><td>682</td><td>21</td></tr>\n        <tr><td><span class=\"page-name\">Visit the co-op</span><span class=\"path\">/visit</span></td><td>408</td><td>3</td></tr>\n      </tbody>\n    </table>\n  </section>\n</main>\n<footer>\n  <div class=\"footer-inner\">\n    <p class=\"update\">Recent update · May 15: membership page refreshed.</p>\n    <p>Conversion = completed member sign-ups ÷ visitors.</p>\n  </div>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-analytics-06","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Grove. Include Visitors 2946, Conversion 2.8%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Grove analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Grove analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Grove analytics</title>\n<style>\n:root{--bg:#f3f4f3;--paper:#fff;--ink:#26312e;--muted:#68716e;--line:#dce1de;--accent:#a44e36}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line)}\n.masthead{max-width:1160px;margin:auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{font-family:Georgia,serif;font-size:26px;font-weight:bold;letter-spacing:-1px}\n.brand span{color:var(--accent)}\n.workspace{color:var(--muted);font-size:12px}\nmain{max-width:1160px;margin:auto;padding:36px 32px}\n.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}\n.eyebrow{margin:0 0 6px;color:var(--muted);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:650}\nh1,h2,p{margin-top:0}\nh1{font-family:Georgia,serif;font-size:42px;line-height:1.15;letter-spacing:-1.2px;font-weight:400;margin-bottom:12px}\n.intro p:last-child{margin-bottom:0;color:var(--muted);max-width:510px}\n.range{flex-shrink:0}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\nselect{width:188px;min-height:44px;border:1px solid #b9c2bc;border-radius:5px;padding:10px 34px 10px 12px;background:var(--paper);color:var(--ink);font:inherit}\nselect:focus-visible{outline:2px solid var(--accent);outline-offset:3px}\n.period{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px;color:var(--muted)}\n.status{display:inline-flex;align-items:center;gap:6px}\n.status::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#7b8580}\n.metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}\n.metric{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px 24px}\n.metric h2{font-size:14px;font-weight:550;margin:0 0 6px}\n.number{font-family:Georgia,serif;font-size:44px;line-height:1.2;letter-spacing:-1px;margin-bottom:6px}\n.metric p{font-size:12px;color:var(--muted);margin-bottom:0}\n.dashboard{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}\n.panel{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:22px}\n.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}\nh2{font-family:Georgia,serif;font-size:23px;font-weight:400;line-height:1.25;margin-bottom:0}\n.detail{font-size:12px;color:var(--muted)}\n.chart-note{margin:0 0 14px;color:var(--muted);font-size:12px}\nfigure{margin:0}\n.axis-label{font-size:11px;color:var(--muted);margin-bottom:4px}\nsvg{display:block;width:100%;height:auto}\nsvg text{font-family:system-ui,sans-serif;fill:var(--muted);font-size:14px}\n.x-label{text-align:center;margin:2px 0 0;font-size:11px;color:var(--muted)}\n.legend{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:12px;color:var(--muted)}\n.legend::before{content:\"\";width:18px;height:3px;background:var(--accent)}\ntable{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}\nth{text-align:left;font-size:11px;color:var(--muted);font-weight:500;padding:0 0 10px;border-bottom:1px solid var(--line)}\ntd{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\nth:not(:first-child),td:not(:first-child){text-align:right;white-space:nowrap;padding-left:14px}\n.page-name{display:block;font-weight:550}\n.path{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere}\n.empty{margin-top:22px;display:flex;align-items:flex-start;gap:18px;padding:20px 22px;border:1px dashed #c9d0cc;border-radius:6px}\n.empty-symbol{width:34px;height:34px;flex-shrink:0;border:1px solid #c9d0cc;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:18px}\n.empty h2{font-family:inherit;font-size:14px;font-weight:600;margin-bottom:4px}\n.empty p{margin:0;color:var(--muted);font-size:12px;max-width:670px}\nfooter{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:var(--muted);font-size:11px}\n@media(max-width:700px){\n.masthead{padding:14px 20px}\nmain{padding:24px 20px}\n.intro{display:block;margin-bottom:20px}\nh1{font-size:35px}\n.intro p:last-child{font-size:13px}\n.range{margin-top:20px}\nselect{width:100%}\n.metrics{gap:12px;margin-bottom:16px}\n.metric{padding:16px}\n.number{font-size:36px}\n.metric p{font-size:11px}\n.dashboard{grid-template-columns:1fr;gap:16px}\n.panel{padding:18px}\n.panel-head{gap:8px}\nh2{font-size:22px}\n.detail{font-size:11px}\n.empty{margin-top:16px;padding:16px;gap:12px}\nfooter{display:block}\nfooter span{display:block;margin-top:5px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"masthead\">\n<div class=\"brand\">Grove<span>.</span></div>\n<div class=\"workspace\">Community food co-op / Website</div>\n</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Website overview</p>\n<h1 id=\"page-title\">Grove analytics</h1>\n<p>See how neighbors find fresh food and connect with the co-op.</p>\n</div>\n<div class=\"range\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n</div>\n</section>\n\n<div class=\"period\">\n<span>8–14 July 2025</span>\n<span class=\"status\">Complete week</span>\n</div>\n\n<section class=\"metrics\" aria-label=\"Key metrics\">\n<article class=\"metric\">\n<h2>Visitors</h2>\n<div class=\"number\">2946</div>\n<p>People who visited the co-op website</p>\n</article>\n<article class=\"metric\">\n<h2>Conversion</h2>\n<div class=\"number\">2.8%</div>\n<p>83 completed membership sign-ups</p>\n</article>\n</section>\n\n<div class=\"dashboard\">\n<section class=\"panel\" aria-labelledby=\"trend-title\">\n<div class=\"panel-head\">\n<h2 id=\"trend-title\">A week at a glance</h2>\n</div>\n<p class=\"chart-note\">Visitor activity picked up toward the weekend.</p>\n<figure aria-labelledby=\"trend-title\">\n<div class=\"axis-label\">Visitors per day</div>\n<svg viewBox=\"0 0 400 215\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Daily visitors, 8–14 July</title>\n<desc id=\"chart-desc\">The vertical axis shows visitors from 0 to 500. The horizontal axis shows the day in July. Daily visitors: 8 July, 350; 9 July, 390; 10 July, 375; 11 July, 455; 12 July, 410; 13 July, 470; 14 July, 496.</desc>\n<g stroke=\"#e3e7e4\" stroke-width=\"1\">\n<path d=\"M43 25H380 M43 100H380 M43 175H380\"/>\n</g>\n<g text-anchor=\"end\">\n<text x=\"34\" y=\"30\">500</text>\n<text x=\"34\" y=\"105\">250</text>\n<text x=\"34\" y=\"180\">0</text>\n</g>\n<path d=\"M45 70L101 58L157 62.5L213 38.5L269 52L325 34L380 26.2\" fill=\"none\" stroke=\"#a44e36\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<g fill=\"#a44e36\" stroke=\"#fff\" stroke-width=\"2\">\n<circle cx=\"45\" cy=\"70\" r=\"4\"/><circle cx=\"101\" cy=\"58\" r=\"4\"/>\n<circle cx=\"157\" cy=\"62.5\" r=\"4\"/><circle cx=\"213\" cy=\"38.5\" r=\"4\"/>\n<circle cx=\"269\" cy=\"52\" r=\"4\"/><circle cx=\"325\" cy=\"34\" r=\"4\"/>\n<circle cx=\"380\" cy=\"26.2\" r=\"4\"/>\n</g>\n<g text-anchor=\"middle\">\n<text x=\"45\" y=\"201\">8</text><text x=\"101\" y=\"201\">9</text>\n<text x=\"157\" y=\"201\">10</text><text x=\"213\" y=\"201\">11</text>\n<text x=\"269\" y=\"201\">12</text><text x=\"325\" y=\"201\">13</text>\n<text x=\"380\" y=\"201\">14</text>\n</g>\n</svg>\n<figcaption class=\"x-label\">Day in July</figcaption>\n</figure>\n<p class=\"legend\">Daily visitors</p>\n</section>\n\n<section class=\"panel\" aria-labelledby=\"pages-title\">\n<div class=\"panel-head\">\n<h2 id=\"pages-title\">Top pages</h2>\n<span class=\"detail\">4 pages tracked</span>\n</div>\n<p class=\"chart-note\">Where neighbors started their visit.</p>\n<table>\n<thead><tr><th scope=\"col\">Entry page</th><th scope=\"col\">Visitors</th><th scope=\"col\">Share</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Weekly produce box</span><span class=\"path\">/produce-box</span></td><td>1,284</td><td>44%</td></tr>\n<tr><td><span class=\"page-name\">Become a member</span><span class=\"path\">/membership</span></td><td>806</td><td>27%</td></tr>\n<tr><td><span class=\"page-name\">Shop hours &amp; location</span><span class=\"path\">/visit</span></td><td>512</td><td>17%</td></tr>\n<tr><td><span class=\"page-name\">Community kitchen</span><span class=\"path\">/community-kitchen</span></td><td>344</td><td>12%</td></tr>\n</tbody>\n</table>\n</section>\n</div>\n\n<section class=\"empty\" aria-labelledby=\"campaign-title\">\n<div class=\"empty-symbol\" aria-hidden=\"true\">—</div>\n<div>\n<h2 id=\"campaign-title\">Campaigns · No activity yet</h2>\n<p>No tagged campaign visits this week. Visits from the co-op newsletter will appear here when links include campaign tags.</p>\n</div>\n</section>\n<footer>\n<span>Conversion counts completed co-op membership forms.</span>\n<span>Weekly snapshot · Times shown in local time</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-07","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Harbor. Include Visitors 3037, Conversion 2.9%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: practical and understated; use deep plum as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Harbor analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Harbor analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Harbor analytics</title>\n<style>\n:root{--ink:#392637;--muted:#796d76;--line:#ded7dc;--paper:#faf8f9;--plum:#633c5b;--tint:#eee7ec}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line)}\n.header-inner,main,footer{max-width:1120px;margin:auto;padding-left:40px;padding-right:40px}\n.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-size:21px;font-weight:750;letter-spacing:-.7px}\n.brand span{font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted);border-left:1px solid var(--line);margin-left:17px;padding-left:17px}\n.header-note{color:var(--muted);font-size:12px}\nmain{padding-top:38px;padding-bottom:36px}\n.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}\n.eyebrow{margin:0 0 7px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:650;color:var(--muted)}\nh1{margin:0;font-size:32px;font-weight:650;letter-spacing:-1.2px;line-height:1.2}\n.intro p:not(.eyebrow){margin:10px 0 0;max-width:470px;color:var(--muted)}\nform{flex:none;min-width:180px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\nselect{width:100%;min-height:42px;padding:8px 32px 8px 12px;border:1px solid #bfb1bc;border-radius:5px;background:var(--paper);color:var(--ink);font:inherit}\nselect:focus-visible{outline:2px solid var(--plum);outline-offset:3px}\n.period{display:block;margin-top:6px;color:var(--muted);font-size:12px}\n.metrics{display:grid;grid-template-columns:1fr 1fr;margin:30px 0 36px;border:1px solid var(--line);border-radius:7px;background:#fff}\n.metric{padding:22px 26px}\n.metric+.metric{border-left:1px solid var(--line)}\n.metric h2{font-size:13px;font-weight:600;margin:0 0 6px}\n.metric-value{font-size:42px;line-height:1.15;letter-spacing:-1.7px;font-weight:600;font-variant-numeric:tabular-nums}\n.metric-line{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap}\n.change{font-size:12px;color:var(--plum);white-space:nowrap}\n.metric p{color:var(--muted);margin:9px 0 0;max-width:310px;font-size:13px}\n.workspace{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:40px;align-items:start}\nsection h2{margin:0;font-size:18px;letter-spacing:-.4px;font-weight:650}\n.section-head{border-top:1px solid var(--line);padding-top:19px}\n.section-head p{margin:5px 0 0;font-size:13px;color:var(--muted)}\nfigure{margin:22px 0 0}\n.axis-label{font-size:11px;color:var(--muted)}\n.chart{display:block;width:100%;height:auto;overflow:visible}\n.chart text{font-family:system-ui,sans-serif;font-size:15px;fill:var(--muted)}\n.chart .grid{stroke:var(--line);stroke-width:1}\n.day-label{text-align:center;margin-top:2px}\nfigcaption{display:flex;gap:9px;align-items:baseline;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}\n.dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--plum)}\nfigcaption strong{font-weight:600;color:var(--ink)}\ntable{width:100%;border-collapse:collapse;margin-top:15px;table-layout:fixed}\nth{font-size:11px;color:var(--muted);font-weight:500;text-align:left;padding:9px 0;border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right;width:75px;padding-left:10px;font-variant-numeric:tabular-nums}\ntd{padding:15px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}\n.page-name{font-weight:600;display:block;overflow-wrap:anywhere}\n.page-detail{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:3px;max-width:235px}\n.table-note{font-size:11px;color:var(--muted);margin:12px 0 0}\nfooter{padding-top:19px;padding-bottom:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted)}\nfooter p{margin:0}\n@media(max-width:700px){\n.header-inner,main,footer{padding-left:22px;padding-right:22px}\n.header-inner{min-height:64px}\n.brand span{font-size:11px;margin-left:11px;padding-left:11px}\n.header-note{display:none}\nmain{padding-top:26px}\n.intro{display:block}\nh1{font-size:29px}\n.intro p:not(.eyebrow){font-size:13px;max-width:320px}\nform{display:grid;grid-template-columns:1fr 170px;align-items:center;column-gap:12px;margin-top:22px;min-width:0}\nlabel{margin:0}\n.period{grid-column:2;margin-top:5px;font-size:11px}\n.metrics{margin:24px 0 29px}\n.metric{padding:17px 15px}\n.metric-value{font-size:34px}\n.metric-line{display:block}\n.change{display:block;margin-top:7px;font-size:11px;white-space:normal}\n.metric p{font-size:12px;margin-top:8px}\n.workspace{grid-template-columns:minmax(0,1fr);gap:28px}\nfigure{margin-top:18px}\n.page-detail{max-width:240px}\ntd{padding:14px 0}\nfooter{display:block}\nfooter p+p{margin-top:5px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\">Harbor<span>Community food co-op</span></div>\n<div class=\"header-note\">Website overview</div>\n</div>\n</header>\n<main>\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Your co-op, online</p>\n<h1>Harbor analytics</h1>\n<p>See how neighbors find your co-op and take the next step toward membership.</p>\n</div>\n<form>\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n<span class=\"period\">Jun 10–16, 2024</span>\n</form>\n</div>\n\n<section class=\"metrics\" aria-label=\"Key website metrics\">\n<article class=\"metric\">\n<h2>Visitors</h2>\n<div class=\"metric-line\"><span class=\"metric-value\">3037</span><span class=\"change\">↑ 8.4% vs. previous 7 days</span></div>\n<p>People exploring your co-op online, from weekly produce to community events.</p>\n</article>\n<article class=\"metric\">\n<h2>Conversion</h2>\n<div class=\"metric-line\"><span class=\"metric-value\">2.9%</span><span class=\"change\">↑ 0.3 percentage points</span></div>\n<p>88 visitors completed a membership application during this period.</p>\n</article>\n</section>\n\n<div class=\"workspace\">\n<section aria-labelledby=\"trend-heading\">\n<div class=\"section-head\">\n<h2 id=\"trend-heading\">Weekly visitors</h2>\n<p>A daily look at your community’s interest.</p>\n</div>\n<figure>\n<div class=\"axis-label\">Visitors per day</div>\n<svg class=\"chart\" viewBox=\"0 0 430 220\" role=\"img\" aria-labelledby=\"chart-title chart-description\">\n<title id=\"chart-title\">Daily visitors, June 10–16</title>\n<desc id=\"chart-description\">The vertical axis shows visitors from 0 to 600. The horizontal axis shows Monday through Sunday. Daily visitors: Monday 310, Tuesday 420, Wednesday 385, Thursday 460, Friday 510, Saturday 432, Sunday 520.</desc>\n<g class=\"grid\">\n<path d=\"M40 22H408M40 74H408M40 126H408M40 178H408\"/>\n</g>\n<g text-anchor=\"end\">\n<text x=\"30\" y=\"27\">600</text>\n<text x=\"30\" y=\"79\">400</text>\n<text x=\"30\" y=\"131\">200</text>\n<text x=\"30\" y=\"183\">0</text>\n</g>\n<path d=\"M44 97.4L104 68.8L164 77.9L224 58.4L284 45.4L344 65.7L404 42.8V178H44Z\" fill=\"#633c5b\" opacity=\".06\"/>\n<path d=\"M44 97.4L104 68.8L164 77.9L224 58.4L284 45.4L344 65.7L404 42.8\" fill=\"none\" stroke=\"#633c5b\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\"/>\n<g fill=\"#633c5b\" stroke=\"#faf8f9\" stroke-width=\"2\">\n<circle cx=\"44\" cy=\"97.4\" r=\"4\"/><circle cx=\"104\" cy=\"68.8\" r=\"4\"/><circle cx=\"164\" cy=\"77.9\" r=\"4\"/><circle cx=\"224\" cy=\"58.4\" r=\"4\"/><circle cx=\"284\" cy=\"45.4\" r=\"4\"/><circle cx=\"344\" cy=\"65.7\" r=\"4\"/><circle cx=\"404\" cy=\"42.8\" r=\"4\"/>\n</g>\n<g text-anchor=\"middle\">\n<text x=\"44\" y=\"205\">Mon</text><text x=\"104\" y=\"205\">Tue</text><text x=\"164\" y=\"205\">Wed</text><text x=\"224\" y=\"205\">Thu</text><text x=\"284\" y=\"205\">Fri</text><text x=\"344\" y=\"205\">Sat</text><text x=\"404\" y=\"205\">Sun</text>\n</g>\n</svg>\n<div class=\"axis-label day-label\">Day of week · Jun 10–16</div>\n<figcaption><span class=\"dot\" aria-hidden=\"true\"></span><span><strong>Sunday led the week</strong> with 520 visitors.</span></figcaption>\n</figure>\n</section>\n\n<section aria-labelledby=\"pages-heading\">\n<div class=\"section-head\">\n<h2 id=\"pages-heading\">Top pages</h2>\n<p>What brought neighbors through your digital door.</p>\n</div>\n<table>\n<thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Visitors</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Weekly harvest &amp; produce boxes</span><span class=\"page-detail\">Seasonal food from the growers down the road.</span></td><td>1,246</td></tr>\n<tr><td><span class=\"page-name\">Become a member</span><span class=\"page-detail\">A share in the co-op. A say in its future.</span></td><td>892</td></tr>\n<tr><td><span class=\"page-name\">Community kitchen &amp; shared meals</span><span class=\"page-detail\">Cooking workshops and a place at the table.</span></td><td>613</td></tr>\n<tr><td><span class=\"page-name\">Visit the store</span><span class=\"page-detail\">Opening hours and directions.</span></td><td>286</td></tr>\n</tbody>\n</table>\n<p class=\"table-note\">Unique visitors per page. A person may visit more than one page.</p>\n</section>\n</div>\n</main>\n<footer>\n<p>Conversion measures completed membership applications, not grocery purchases.</p>\n<p>Report as of Jun 17, 2024</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-analytics-08","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Isle. Include Visitors 3128, Conversion 3.0%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: calm and spacious; use forest green as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Isle analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Isle analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Isle analytics</title>\n<style>\n:root{color-scheme:light;--ink:#24372d;--muted:#6b736b;--line:#dbe0d7;--green:#315d46;--paper:#f8f9f5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nmain{max-width:1160px;margin:auto;padding:40px 40px 28px}\n.eyebrow{margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}\nheader{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:28px}\nh1{font:normal 42px/1.1 Georgia,serif;letter-spacing:-1.5px;margin:0 0 10px}\n.subtitle{margin:0;color:var(--muted)}\n.period{flex:0 0 180px}\nlabel{display:block;font-size:12px;margin-bottom:6px;color:var(--muted)}\nselect{width:100%;min-height:42px;padding:8px 32px 8px 12px;border:1px solid #b9c3b6;border-radius:3px;background:var(--paper);color:var(--ink);font:inherit}\nselect:focus-visible,a:focus-visible{outline:3px solid #8bac94;outline-offset:4px}\n.next{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#edf1e9;border-left:3px solid var(--green);padding:19px 22px}\n.next .eyebrow{color:var(--green);margin:0 0 4px}\n.next h2{font-size:17px;font-weight:500;margin:0 0 4px}\n.next p:last-child{margin:0;font-size:13px;color:#5b685c}\n.action{flex-shrink:0;display:inline-block;padding:10px 15px;background:var(--green);border:1px solid var(--green);border-radius:3px;color:white;text-decoration:none;font-size:13px;font-weight:500}\n.action:hover{background:#254936}\n.metrics{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:30px;margin:0;padding:27px 0;border-bottom:1px solid var(--line)}\n.metric dt{font-size:13px;color:var(--muted)}\n.metric dd{margin:3px 0 0;font-size:38px;font-weight:400;letter-spacing:-1.3px;line-height:1.2;font-variant-numeric:tabular-nums}\n.change{display:block;color:var(--green);font-size:12px;margin-top:7px}\n.summary{padding-left:24px;border-left:1px solid var(--line)}\n.summary strong{display:block;font-size:14px;font-weight:500;margin-bottom:4px}\n.summary p{font-size:12px;color:var(--muted);margin:0;max-width:220px}\n.workspace{display:grid;grid-template-columns:1.15fr 1fr;margin-top:28px}\n.trend{padding-right:30px;min-width:0}\n.pages{border-left:1px solid var(--line);padding-left:30px;min-width:0}\n.section-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:16px}\nh2{font-size:18px;font-weight:500;letter-spacing:-.3px;margin:0}\n.period-note{font-size:12px;color:var(--muted);white-space:nowrap}\nfigure{margin:0}\n.axis-title{font-size:11px;color:var(--muted);margin-bottom:10px}\n.plot{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}\n.y-labels{height:150px;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--muted);text-align:right;line-height:1}\n.chart{height:150px;width:100%;display:block;overflow:visible}\n.days{display:flex;justify-content:space-between;margin:9px 0 0 36px;font-size:11px;color:var(--muted)}\n.x-title{text-align:center;margin:6px 0 0 36px;font-size:11px;color:var(--muted)}\nfigcaption{margin-top:20px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}\nfigcaption strong{font-weight:500;color:var(--ink)}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}\nth{text-align:left;font-size:11px;font-weight:500;color:var(--muted);padding:0 0 9px;border-bottom:1px solid var(--line)}\nth:first-child{width:58%}\nth:not(:first-child),td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}\ntd{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}\ntd:first-child{padding-right:14px;overflow-wrap:anywhere}\n.page-name{font-weight:500}\n.page-detail{display:block;font-size:11px;line-height:1.45;color:var(--muted);margin-top:3px}\n.detail{display:grid;grid-template-columns:150px 1fr auto;gap:22px;align-items:start;margin-top:28px;padding:17px 0 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\n.detail h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink)}\n.detail p{margin:0;max-width:510px}\n.detail .stamp{white-space:nowrap;text-align:right}\n@media(max-width:700px){\nmain{padding:24px 20px}\n.eyebrow{font-size:10px;margin-bottom:12px}\nheader{gap:14px;padding-bottom:22px;align-items:flex-start}\nh1{font-size:30px;letter-spacing:-1px;margin-bottom:7px}\n.subtitle{font-size:12px;max-width:175px}\n.period{flex:0 0 137px}\nselect{font-size:13px;min-height:40px}\n.next{padding:14px 15px;gap:12px;flex-wrap:wrap}\n.next h2{font-size:16px}\n.next p:last-child{font-size:12px}\n.action{font-size:12px;padding:8px 12px}\n.metrics{grid-template-columns:1fr 1fr;gap:14px;padding:21px 0}\n.metric dd{font-size:34px}\n.change{font-size:11px}\n.summary{grid-column:1/-1;border:0;padding:0;display:flex;align-items:baseline;gap:10px}\n.summary strong{font-size:12px;white-space:nowrap;margin:0}\n.summary p{font-size:11px;max-width:none}\n.workspace{display:block;margin-top:22px}\n.trend{padding:0}\n.section-head{margin-bottom:13px}\nh2{font-size:17px}\n.chart,.y-labels{height:115px}\nfigcaption{margin-top:13px;padding-top:10px}\n.pages{border-left:0;border-top:1px solid var(--line);padding:20px 0 0;margin-top:20px}\ntd{padding:10px 0}\n.detail{grid-template-columns:1fr;gap:7px;margin-top:20px;padding-top:14px}\n.detail .stamp{text-align:left}\n}\n</style>\n</head>\n<body>\n<main>\n<p class=\"eyebrow\">Isle / Architecture practice</p>\n<header>\n<div>\n<h1>Isle analytics</h1>\n<p class=\"subtitle\">A clear view of your practice online.</p>\n</div>\n<div class=\"period\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n</div>\n</header>\n\n<section class=\"next\" aria-labelledby=\"next-title\">\n<div>\n<p class=\"eyebrow\">Next focus</p>\n<h2 id=\"next-title\">Make project interest an enquiry.</h2>\n<p>Your portfolio leads traffic. Keep the path from each project to contact clear.</p>\n</div>\n<a class=\"action\" href=\"#top-pages\">Review top pages <span aria-hidden=\"true\">↓</span></a>\n</section>\n\n<section class=\"metrics\" aria-label=\"Weekly summary\">\n<dl class=\"metric\" style=\"margin:0\">\n<dt>Visitors</dt>\n<dd>3128</dd>\n<span class=\"change\">↑ 12.4% vs previous week</span>\n</dl>\n<dl class=\"metric\" style=\"margin:0\">\n<dt>Conversion</dt>\n<dd>3.0%</dd>\n<span class=\"change\">↑ 0.2 percentage points</span>\n</dl>\n<div class=\"summary\">\n<strong>94 enquiries</strong>\n<p>More people found your work; enquiry conversion held steady.</p>\n</div>\n</section>\n\n<div class=\"workspace\">\n<section class=\"trend\" aria-labelledby=\"trend-title\">\n<div class=\"section-head\">\n<h2 id=\"trend-title\">Weekly visitors</h2>\n<span class=\"period-note\">10–16 June 2024</span>\n</div>\n<figure>\n<div class=\"axis-title\">Visitors per day</div>\n<div class=\"plot\">\n<div class=\"y-labels\" aria-hidden=\"true\"><span>600</span><span>300</span><span>0</span></div>\n<svg class=\"chart\" viewBox=\"0 0 600 150\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-description\">\n<title id=\"chart-title\">Daily visitors, Monday to Sunday</title>\n<desc id=\"chart-description\">The vertical axis runs from 0 to 600 visitors. The horizontal axis shows days from 10 to 16 June. Monday 348, Tuesday 419, Wednesday 386, Thursday 511, Friday 462, Saturday 534, Sunday 468.</desc>\n<g fill=\"none\" stroke=\"#dbe0d7\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\">\n<path d=\"M0 0H600 M0 75H600\" stroke-dasharray=\"3 5\"/>\n<path d=\"M0 150H600\"/>\n</g>\n<path d=\"M0 63 L100 45.25 L200 53.5 L300 22.25 L400 34.5 L500 16.5 L600 33\" fill=\"none\" stroke=\"#315d46\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n</svg>\n</div>\n<div class=\"days\" aria-hidden=\"true\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>\n<div class=\"x-title\">Day of week</div>\n<figcaption><strong>Saturday led the week</strong> with 534 visitors exploring the practice.</figcaption>\n</figure>\n</section>\n\n<section class=\"pages\" id=\"top-pages\" aria-labelledby=\"pages-title\">\n<div class=\"section-head\">\n<h2 id=\"pages-title\">Top pages</h2>\n<span class=\"period-note\">By visitors</span>\n</div>\n<table>\n<thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Visitors</th><th scope=\"col\">Enquiries</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Selected projects</span><span class=\"page-detail\">Residential architecture, adaptive reuse and places for community life</span></td><td>1462</td><td>41</td></tr>\n<tr><td><span class=\"page-name\">The studio</span><span class=\"page-detail\">People &amp; approach</span></td><td>624</td><td>12</td></tr>\n<tr><td><span class=\"page-name\">Journal</span><span class=\"page-detail\">Ideas &amp; observations</span></td><td>486</td><td>6</td></tr>\n<tr><td><span class=\"page-name\">Contact</span><span class=\"page-detail\">Start a conversation</span></td><td>278</td><td>35</td></tr>\n</tbody>\n</table>\n</section>\n</div>\n\n<aside class=\"detail\" aria-labelledby=\"detail-title\">\n<h2 id=\"detail-title\">About these figures</h2>\n<p>Conversion is the share of visitors who submit an enquiry. Enquiries are attributed to the last page viewed before contact. A visitor may appear on more than one page.</p>\n<p class=\"stamp\">Sample reporting snapshot<br>Week ending 16 June 2024</p>\n</aside>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Kite. Include Visitors 3310, Conversion 3.3%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"Kite analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Kite analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Kite analytics — Website overview</title>\n<style>\n:root{--paper:#f6f3ed;--surface:#fcfaf6;--ink:#282a25;--muted:#6b6c62;--line:#dcd7cc;--accent:#a34f38}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nmain{max-width:1184px;margin:auto;padding:28px 36px 32px}\n.masthead{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--ink)}\n.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.7px}\n.brand svg{width:25px;height:30px;color:var(--accent)}\n.report-number{color:var(--muted);font-size:12px}\n.heading{display:flex;justify-content:space-between;align-items:end;gap:28px;padding:32px 0 28px}\n.eyebrow{margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent)}\nh1,h2,p{margin-top:0}\nh1{font-family:Georgia,'Times New Roman',serif;font-size:46px;font-weight:400;line-height:1.12;letter-spacing:-1.6px;margin-bottom:12px}\n.intro{max-width:440px;color:var(--muted);margin-bottom:0;font-size:15px}\n.range{min-width:192px}\nlabel{display:block;font-size:12px;font-weight:700;margin-bottom:7px}\nselect{width:100%;min-height:44px;padding:10px 36px 10px 12px;border:1px solid #aaa99e;border-radius:3px;background:var(--surface);color:var(--ink);font:inherit}\nselect:focus-visible{outline:2px solid var(--accent);outline-offset:3px}\n.dates{display:block;margin-top:6px;color:var(--muted);font-size:12px}\n.summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px}\n.summary p{margin:0}\n.status{color:var(--muted);display:flex;align-items:center;gap:6px}\n.status span{font-size:13px}\n.metrics{display:grid;grid-template-columns:1fr 1fr;padding:26px 0 28px}\n.metric{padding-right:30px}\n.metric+.metric{padding:0 0 0 32px;border-left:1px solid var(--line)}\n.metric h2{font-size:13px;font-weight:600;margin-bottom:7px}\n.value{font-family:Georgia,'Times New Roman',serif;font-size:52px;line-height:1.1;letter-spacing:-2px;margin:0 0 8px;font-variant-numeric:tabular-nums}\n.metric-description{color:var(--muted);max-width: thirtych;max-width:32ch;margin-bottom:12px;line-height:1.45}\n.comparison{font-size:12px;margin:0}\n.comparison strong{font-weight:600;color:var(--accent)}\n.comparison span{color:var(--muted)}\n.details{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border:1px solid var(--line);background:var(--surface)}\n.trend,.pages{padding:25px 24px 18px;min-width:0}\n.pages{border-left:1px solid var(--line)}\n.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:5px}\nh2{font-family:Georgia,'Times New Roman',serif;font-size:23px;font-weight:400;line-height:1.25;margin-bottom:0;letter-spacing:-.4px}\n.count{font-size:11px;color:var(--muted);white-space:nowrap}\n.section-note{font-size:12px;color:var(--muted);margin:0 0 21px}\nfigure{margin:0}\n.axis-label{font-size:11px;color:var(--muted);margin-bottom:4px}\n.chart{display:block;width:100%;height:auto;overflow:visible}\n.chart text{font-family:Arial,Helvetica,sans-serif;font-size:15px;fill:var(--muted)}\n.chart .grid{stroke:var(--line);stroke-width:1}\n.chart .area{fill:var(--accent);opacity:.055}\n.chart .line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}\n.chart .point{fill:var(--surface);stroke:var(--accent);stroke-width:3}\nfigcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:var(--muted);margin-top:8px}\n.legend{display:inline-flex;align-items:center;gap:7px}\n.legend::before{content:\"\";width:19px;height:2px;background:var(--accent)}\ntable{border-collapse:collapse;width:100%;font-size:13px}\ncaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\nth{text-align:left;font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 0 10px;border-bottom:1px solid var(--line)}\ntd{padding:13px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}\nth:not(:first-child),td:not(:first-child){text-align:right;padding-left:12px}\ntbody tr:last-child td{border-bottom:0}\n.page-name{display:block;font-weight:600;line-height:1.35}\n.path{display:block;font-size:11px;color:var(--muted);margin-top:3px}\n.share{color:var(--muted)}\n.next{display:grid;grid-template-columns:130px 1fr;gap:24px;margin-top:22px;padding:19px 0;border-top:1px solid var(--ink)}\n.next-label{display:flex;gap:10px;align-items:baseline;font-size:12px;font-weight:700}\n.next-label span{color:var(--accent);font-size:17px}\n.next h2{font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;margin-bottom:5px}\n.next p{max-width:700px;font-size:13px;color:var(--muted);margin:0}\nfooter{display:flex;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}\n@media(max-width:700px){\nmain{padding:20px}\n.masthead{padding-bottom:15px}\n.report-number{font-size:10px}\n.heading{padding:24px 0 20px;display:block}\nh1{font-size:37px}\n.intro{font-size:14px;max-width:32ch}\n.range{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:center;min-width:0}\n.range label{margin:0}\n.range select{grid-column:2;grid-row:1 / 3;min-width:0}\n.dates{margin-top:2px;font-size:11px}\n.summary{font-size:11px;gap:8px}\n.metrics{padding:23px 0}\n.metric{padding-right:17px}\n.metric+.metric{padding-left:18px}\n.metric h2{font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:0}\n.value{font-size:42px}\n.metric-description{font-size:12px;margin-bottom:12px}\n.comparison{font-size:11px;line-height:1.6}\n.comparison span{display:block}\n.details{grid-template-columns:minmax(0,1fr)}\n.trend,.pages{padding:20px 17px 17px}\n.pages{border-left:0;border-top:1px solid var(--line)}\nh2{font-size:22px}\n.section-note{margin-bottom:17px}\n.chart text{font-size:20px}\n.chart .line{stroke-width:4}\n.next{grid-template-columns:1fr;gap:8px;margin-top:21px;padding:17px 0}\nfooter{flex-wrap:wrap;gap:4px}\n}\n</style>\n</head>\n<body>\n<main>\n<header class=\"masthead\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 30 36\" aria-hidden=\"true\"><path d=\"M15 2 28 13 15 31 2 13Z M15 2V31 M2 13H28 M15 31 11 35\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\nKite\n</div>\n<span class=\"report-number\">Practice insights / 023</span>\n</header>\n\n<section class=\"heading\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Website overview</p>\n<h1 id=\"page-title\">Kite analytics</h1>\n<p class=\"intro\">A clearer view of how people discover your work and become your next clients.</p>\n</div>\n<div class=\"range\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n<span class=\"dates\">2–8 June 2025</span>\n</div>\n</section>\n\n<div class=\"summary\">\n<p><strong>7 days</strong> in view · <strong>4 pages</strong> tracked</p>\n<p class=\"status\"><span aria-hidden=\"true\">✓</span> Complete snapshot</p>\n</div>\n\n<section class=\"metrics\" aria-label=\"Key website metrics\">\n<article class=\"metric\">\n<h2>Visitors</h2>\n<p class=\"value\">3,310</p>\n<p class=\"metric-description\">People exploring the practice and its architecture.</p>\n<p class=\"comparison\"><strong>↑ 12.8%</strong> <span>vs previous 7 days</span></p>\n</article>\n<article class=\"metric\">\n<h2>Conversion</h2>\n<p class=\"value\">3.3%</p>\n<p class=\"metric-description\">109 project enquiries from website visitors.</p>\n<p class=\"comparison\"><strong>↑ 0.4 pts</strong> <span>vs previous 7 days</span></p>\n</article>\n</section>\n\n<div class=\"details\">\n<section class=\"trend\" aria-labelledby=\"trend-title\">\n<div class=\"section-title\">\n<h2 id=\"trend-title\">Weekly visitors</h2>\n<span class=\"count\">Daily totals</span>\n</div>\n<p class=\"section-note\">Interest in the practice grew through the week.</p>\n<figure>\n<p class=\"axis-label\">Vertical axis · Visitors per day</p>\n<svg class=\"chart\" viewBox=\"0 0 600 265\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Daily visitors, 2–8 June 2025</title>\n<desc id=\"chart-desc\">Monday 382, Tuesday 440, Wednesday 416, Thursday 505, Friday 478, Saturday 534 and Sunday 555. Horizontal axis shows dates; vertical axis runs from 0 to 600 visitors.</desc>\n<g class=\"grid\">\n<path d=\"M48 25H576M48 115H576M48 205H576\"/>\n</g>\n<g>\n<text x=\"37\" y=\"30\" text-anchor=\"end\">600</text>\n<text x=\"37\" y=\"120\" text-anchor=\"end\">300</text>\n<text x=\"37\" y=\"210\" text-anchor=\"end\">0</text>\n</g>\n<path class=\"area\" d=\"M48 90.4 136 73 224 80.2 312 53.5 400 61.6 488 44.8 576 38.5V205H48Z\"/>\n<path class=\"line\" d=\"M48 90.4 136 73 224 80.2 312 53.5 400 61.6 488 44.8 576 38.5\"/>\n<circle class=\"point\" cx=\"576\" cy=\"38.5\" r=\"5\"/>\n<g text-anchor=\"middle\">\n<text x=\"48\" y=\"239\">2</text><text x=\"136\" y=\"239\">3</text>\n<text x=\"224\" y=\"239\">4</text><text x=\"312\" y=\"239\">5</text>\n<text x=\"400\" y=\"239\">6</text><text x=\"488\" y=\"239\">7</text>\n<text x=\"576\" y=\"239\">8</text>\n</g>\n</svg>\n<figcaption><span>Horizontal axis · Date in June</span><span class=\"legend\">Visitors</span></figcaption>\n</figure>\n</section>\n\n<section class=\"pages\" aria-labelledby=\"pages-title\">\n<div class=\"section-title\">\n<h2 id=\"pages-title\">Top pages</h2>\n<span class=\"count\">4 pages</span>\n</div>\n<p class=\"section-note\">Where prospective clients spend time.</p>\n<table>\n<caption>Page views and share of views, 2–8 June 2025</caption>\n<thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Views</th><th scope=\"col\">Share</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Selected work</span><span class=\"path\">/work</span></td><td>2,140</td><td class=\"share\">48%</td></tr>\n<tr><td><span class=\"page-name\">The practice</span><span class=\"path\">/practice</span></td><td>1,120</td><td class=\"share\">25%</td></tr>\n<tr><td><span class=\"page-name\">Journal</span><span class=\"path\">/journal</span></td><td>780</td><td class=\"share\">17%</td></tr>\n<tr><td><span class=\"page-name\">Start a project</span><span class=\"path\">/contact</span></td><td>460</td><td class=\"share\">10%</td></tr>\n</tbody>\n</table>\n</section>\n</div>\n\n<aside class=\"next\" aria-labelledby=\"next-title\">\n<div class=\"next-label\"><span aria-hidden=\"true\">↗</span> Next focus</div>\n<div>\n<h2 id=\"next-title\">Connect your work to the next conversation.</h2>\n<p>Selected work attracts 48% of page views. Make the project enquiry link easy to find at the end of each case study.</p>\n</div>\n</aside>\n<footer>\n<span>Conversion = a submitted project enquiry.</span>\n<span>Weekly snapshot · Europe/London</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Larch. Include Visitors 3401, Conversion 3.4%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: practical and understated; use deep plum as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Larch analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Larch analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Larch analytics</title>\n<style>\n:root{--bg:#f3f5f6;--ink:#252a2d;--muted:#647077;--line:#d7dde0;--plum:#583b55;--tint:#e9e3e9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\na{color:inherit;text-decoration:none}\na:focus-visible,select:focus-visible{outline:2px solid var(--plum);outline-offset:5px}\n.shell{max-width:1120px;margin:auto;padding:0 36px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{min-height:78px;display:flex;align-items:center;gap:48px}\n.wordmark{font-size:19px;letter-spacing:4px;font-weight:650;color:var(--plum)}\nnav{display:flex;align-self:stretch;gap:28px}\nnav a{display:flex;align-items:center;color:var(--muted);border-bottom:2px solid transparent;padding-top:2px}\nnav a[aria-current]{color:var(--plum);border-color:var(--plum)}\n.site-address{margin-left:auto;color:var(--muted);font-size:12px}\nmain{padding-top:42px!important}\n.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-bottom:32px}\n.eyebrow{margin:0 0 12px;font-size:10px;letter-spacing:1.7px;font-weight:650;color:var(--muted);text-transform:uppercase}\nh1{margin:0;font:normal 48px/1.12 Georgia,\"Times New Roman\",serif;letter-spacing:-1.7px}\n.intro{margin:15px 0 0;color:var(--muted);max-width:520px}\n.range{flex:0 0 200px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\nselect{width:100%;min-height:42px;padding:8px 12px;border:1px solid #b7c0c5;border-radius:3px;background:#fafbfc;color:var(--ink);font:inherit}\n.period{margin:8px 0 0;color:var(--muted);font-size:11px}\n.metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}\n.metric{padding-right:28px}\n.metric+.metric{border-left:1px solid var(--line);padding-left:36px}\n.metric h2{font-size:13px;font-weight:600;margin:0 0 8px}\n.metric-value{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}\n.number{font-size:48px;line-height:1.15;letter-spacing:-2px;font-weight:450;font-variant-numeric:tabular-nums}\n.change{color:var(--plum);font-size:12px;font-weight:600}\n.metric p{color:var(--muted);font-size:12px;margin:10px 0 0}\n.metric p strong{font-weight:500;color:var(--ink)}\nsection{scroll-margin-top:24px}\n.trend{padding:28px 0 24px;border-bottom:1px solid var(--line)}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}\nh2{font-size:17px;letter-spacing:-.25px;margin:0;font-weight:600}\n.section-heading p{margin:4px 0 0;font-size:12px;color:var(--muted)}\n.legend{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}\n.legend::before{content:\"\";width:17px;height:2px;background:var(--plum)}\nfigure{margin:0}\n.axis-title{font-size:11px;color:var(--muted);margin:0 0 12px}\n.chart{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px}\n.y-axis{height:180px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;font-size:10px;color:var(--muted);line-height:1}\n.y-axis span:first-child{transform:translateY(-4px)}\n.y-axis span:last-child{transform:translateY(4px)}\n.plot{min-width:0}\n.plot svg{display:block;width:100%;height:180px;overflow:visible}\n.x-axis{display:flex;justify-content:space-between;gap:4px;margin-top:12px;padding:0 3px;color:var(--muted);font-size:11px}\n.x-axis span{text-align:center}\n.x-axis small{display:block;font-size:10px;color:#7a848b}\nfigcaption{margin:15px 0 0 42px;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px}\nfigcaption strong{color:var(--ink);font-weight:500}\n.pages{padding-top:26px}\n.pages .section-heading{margin-bottom:12px}\n.table-note{font-size:11px;color:var(--muted)}\ntable{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}\nth{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;padding:10px 0;border-bottom:1px solid var(--line)}\ntd{padding:13px 0;border-bottom:1px solid var(--line)}\nth:first-child,td:first-child{text-align:left}\nth:not(:first-child),td:not(:first-child){text-align:right;padding-left:18px}\nth:first-child{width:65%}\n.page-name{font-weight:550}\n.path{display:block;font-size:11px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}\n.share{color:var(--muted)}\n.footnote{font-size:11px;color:var(--muted);margin:12px 0 0}\nfooter{display:flex;justify-content:space-between;gap:16px;padding-top:30px!important;padding-bottom:26px!important;color:var(--muted);font-size:10px}\n@media(min-width:1400px){main{padding-top:56px!important}}\n@media(max-width:600px){\n.shell{padding-left:22px;padding-right:22px}\n.header-inner{min-height:64px;gap:28px}\n.wordmark{font-size:16px;letter-spacing:3px}\nnav{gap:20px;font-size:12px}\n.site-address{display:none}\nmain{padding-top:28px!important}\n.page-heading{display:block;padding-bottom:24px}\n.eyebrow{font-size:9px;margin-bottom:10px}\nh1{font-size:39px;letter-spacing:-1.3px}\n.intro{font-size:13px;margin-top:12px}\n.range{margin-top:22px;display:grid;grid-template-columns:1fr 165px;column-gap:14px;align-items:center}\n.range label{margin:0}\n.period{grid-column:2;font-size:10px;margin-top:5px}\nselect{font-size:13px}\n.metrics{padding:22px 0}\n.metric{padding-right:16px}\n.metric+.metric{padding-left:20px}\n.number{font-size:38px;letter-spacing:-1.5px}\n.metric-value{gap:6px}\n.change{font-size:10px}\n.metric p{font-size:11px;line-height:1.6}\n.trend{padding-top:24px}\nh2{font-size:16px}\n.section-heading{gap:10px;margin-bottom:18px}\n.legend{font-size:10px}\n.chart{grid-template-columns:23px minmax(0,1fr);gap:9px}\n.x-axis{font-size:10px;padding:0}\n.x-axis small{font-size:9px}\nfigcaption{margin-left:32px;display:block;line-height:1.7}\nfigcaption span{display:block}\n.pages .section-heading{align-items:baseline}\n.table-note{font-size:10px}\nth:first-child{width:60%}\nth{font-size:9px;letter-spacing:.5px}\nth:not(:first-child),td:not(:first-child){padding-left:10px}\ntd{font-size:12px;padding-top:12px;padding-bottom:12px}\n.path{font-size:10px}\nfooter{flex-direction:column;gap:4px;padding-top:24px!important}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"shell header-inner\">\n<a class=\"wordmark\" href=\"#overview\" aria-label=\"Larch overview\">LARCH</a>\n<nav aria-label=\"Analytics navigation\">\n<a href=\"#overview\" aria-current=\"page\">Overview</a>\n<a href=\"#pages\">Top pages</a>\n</nav>\n<span class=\"site-address\">Practice website · larch.studio</span>\n</div>\n</header>\n<main class=\"shell\" id=\"overview\">\n<div class=\"page-heading\">\n<div>\n<p class=\"eyebrow\">Website performance / Weekly overview</p>\n<h1>Larch analytics</h1>\n<p class=\"intro\">How people explore your practice, discover your projects, and start a conversation.</p>\n</div>\n<div class=\"range\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n<p class=\"period\">10–16 June 2024</p>\n</div>\n</div>\n\n<section class=\"metrics\" aria-label=\"Key performance measures\">\n<div class=\"metric\">\n<h2>Visitors</h2>\n<div class=\"metric-value\"><span class=\"number\">3401</span><span class=\"change\">↑ 12.8%</span></div>\n<p>Unique visitors to your website.<br>Compared with the previous 7 days.</p>\n</div>\n<div class=\"metric\">\n<h2>Conversion</h2>\n<div class=\"metric-value\"><span class=\"number\">3.4%</span><span class=\"change\">↑ 0.6 pp</span></div>\n<p><strong>116 project enquiries</strong> submitted.<br>Share of visitors who sent an enquiry.</p>\n</div>\n</section>\n\n<section class=\"trend\" aria-labelledby=\"trend-heading\">\n<div class=\"section-heading\">\n<div>\n<h2 id=\"trend-heading\">Visitors over time</h2>\n<p>A daily view of interest in the practice.</p>\n</div>\n<span class=\"legend\">Daily visitors</span>\n</div>\n<figure>\n<p class=\"axis-title\">Visitors per day</p>\n<div class=\"chart\">\n<div class=\"y-axis\" aria-hidden=\"true\"><span>600</span><span>400</span><span>200</span><span>0</span></div>\n<div class=\"plot\">\n<svg viewBox=\"0 0 600 180\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Weekly visitor trend, 10–16 June</title>\n<desc id=\"chart-desc\">The vertical axis shows visitors per day, from 0 to 600. The horizontal axis shows Monday through Sunday. Daily totals: 390, 465, 528, 490, 572, 438, and 518 visitors.</desc>\n<g stroke=\"#d7dde0\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\">\n<path d=\"M0 0H600 M0 60H600 M0 120H600 M0 180H600\"/>\n</g>\n<path d=\"M20 63L113 40.5L207 21.6L300 33L393 8.4L487 48.6L580 24.6V180H20Z\" fill=\"#583b55\" opacity=\".05\"/>\n<path d=\"M20 63L113 40.5L207 21.6L300 33L393 8.4L487 48.6L580 24.6\" fill=\"none\" stroke=\"#583b55\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" vector-effect=\"non-scaling-stroke\"/>\n<circle cx=\"393\" cy=\"8.4\" r=\"3.5\" fill=\"#583b55\"/>\n</svg>\n<div class=\"x-axis\" aria-hidden=\"true\">\n<span>Mon<small>10 Jun</small></span><span>Tue<small>11 Jun</small></span><span>Wed<small>12 Jun</small></span><span>Thu<small>13 Jun</small></span><span>Fri<small>14 Jun</small></span><span>Sat<small>15 Jun</small></span><span>Sun<small>16 Jun</small></span>\n</div>\n</div>\n</div>\n<figcaption><span><strong>Friday was the busiest day:</strong> 572 visitors.</span><span>Dates · June 2024</span></figcaption>\n</figure>\n</section>\n\n<section class=\"pages\" id=\"pages\" aria-labelledby=\"pages-heading\">\n<div class=\"section-heading\">\n<h2 id=\"pages-heading\">Top pages</h2>\n<span class=\"table-note\">Ranked by visitors</span>\n</div>\n<table>\n<thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Visitors</th><th scope=\"col\">Share</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Courtyard House</span><span class=\"path\">/projects/courtyard-house</span></td><td>984</td><td class=\"share\">28.9%</td></tr>\n<tr><td><span class=\"page-name\">Home</span><span class=\"path\">/</span></td><td>812</td><td class=\"share\">23.9%</td></tr>\n<tr><td><span class=\"page-name\">The practice</span><span class=\"path\">/studio</span></td><td>476</td><td class=\"share\">14.0%</td></tr>\n<tr><td><span class=\"page-name\">Start a project</span><span class=\"path\">/contact</span></td><td>318</td><td class=\"share\">9.4%</td></tr>\n</tbody>\n</table>\n<p class=\"footnote\">Share of all website visitors. A visitor may view more than one page.</p>\n</section>\n</main>\n<footer class=\"shell\">\n<span>Larch · Architecture &amp; interiors</span>\n<span>Report excludes internal practice traffic.</span>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-analytics-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Maple. Include Visitors 3492, Conversion 3.6%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: calm and spacious; use forest green as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Maple analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Maple analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Maple analytics</title>\n<style>\n:root{color-scheme:light;--paper:#f7f9f5;--ink:#193f31;--muted:#607368;--line:#d9e2d9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line)}\n.topbar{max-width:1184px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:650;letter-spacing:-.6px}\n.brand svg{width:27px;height:29px}\n.workspace{font-size:13px;color:var(--muted)}\nmain{max-width:1184px;margin:auto;padding:46px 32px 28px}\n.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:36px}\n.eyebrow{margin:0 0 9px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:650;color:var(--muted)}\nh1{font-size:38px;line-height:1.15;letter-spacing:-1.4px;font-weight:600;margin:0 0 14px}\n.support{max-width:530px;margin:0;color:var(--muted);font-size:15px}\n.range{width:190px;flex-shrink:0}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\nselect{width:100%;min-height:43px;padding:10px 32px 10px 12px;border:1px solid #a7b8ab;border-radius:5px;background:var(--paper);font:inherit;color:var(--ink)}\nselect:focus-visible{outline:2px solid var(--ink);outline-offset:3px}\n.period{margin:8px 0 0;font-size:12px;color:var(--muted)}\n.metrics{display:grid;grid-template-columns:1fr 1fr;margin:36px 0 0;padding:25px 0 27px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.metric{padding-right:30px}\n.metric+.metric{border-left:1px solid var(--line);padding-left:38px}\ndt{font-size:14px;font-weight:550}\ndd{margin:5px 0 0;font-size:44px;line-height:1.2;font-weight:550;letter-spacing:-1.7px;font-variant-numeric:tabular-nums}\n.comparison{font-size:12px;color:var(--muted);margin:9px 0 0}\n.change{font-weight:600;color:var(--ink)}\n.reports{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);margin-top:34px}\nh2{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.3px;margin:0}\n.section-note{font-size:12px;color:var(--muted);margin:5px 0 0}\n.trend{padding-right:38px;min-width:0}\n.pages{padding-left:34px;border-left:1px solid var(--line);min-width:0}\nfigure{margin:25px 0 0}\n.axis-title{font-size:11px;color:var(--muted);margin:0 0 16px}\n.chart{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:6px}\n.yaxis{height:160px;position:relative;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}\n.yaxis span{position:absolute;right:0;transform:translateY(-50%)}\n.plot{width:100%;height:160px;display:block;overflow:visible}\n.days{grid-column:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:11px;font-size:11px;color:var(--muted);text-align:center}\n.x-title{grid-column:2;text-align:center;font-size:11px;color:var(--muted);margin:12px 0 0}\nfigcaption{border-top:1px solid var(--line);margin-top:23px;padding-top:13px;font-size:12px;color:var(--muted)}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:21px}\nth{text-align:left;font-size:11px;color:var(--muted);font-weight:500;padding:0 0 11px}\nth:nth-child(2){width:65px}\nth:nth-child(3){width:47px}\nth:not(:first-child),td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}\ntd{padding:14px 0;border-top:1px solid var(--line);vertical-align:top;font-size:13px}\ntd:first-child{padding-right:16px}\n.page-name{display:block;font-weight:550}\n.page-detail{display:block;margin-top:3px;font-size:11px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}\nfooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:36px;padding-top:17px;color:var(--muted);font-size:11px}\nfooter p{margin:0}\n@media(max-width:760px){\n.topbar{padding:17px 20px}.workspace{font-size:11px}\nmain{padding:28px 20px 22px}\n.intro{display:block}h1{font-size:32px;letter-spacing:-1px}.support{font-size:14px}\n.range{margin-top:22px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:center}\n.range label{margin:0}.range select{grid-column:2;grid-row:1 / 3}.period{grid-column:1;margin-top:3px;font-size:11px}\n.metrics{margin-top:25px;padding:21px 0}.metric{padding-right:14px}.metric+.metric{padding-left:20px}\ndd{font-size:36px}.comparison{font-size:11px;max-width:145px;line-height:1.6}\n.reports{display:block;margin-top:26px}.trend{padding:0}.pages{padding:24px 0 0;margin-top:25px;border-left:0;border-top:1px solid var(--line)}\nfigure{margin-top:20px}figcaption{margin-top:17px}table{margin-top:18px}td{padding:12px 0}\nfooter{display:block;margin-top:24px}footer p+p{margin-top:6px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"topbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 30 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M15 3l3.2 6 4-2-1 7 5-1-2 6 3 1-10.8 5v5h-2.8v-5L3 20l3-1-2-6 5 1-1-7 4 2L15 3Z\" fill=\"currentColor\"/></svg>\n<span>Maple</span>\n</div>\n<span class=\"workspace\">Field research workspace</span>\n</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Website overview</p>\n<h1 id=\"page-title\">Maple analytics</h1>\n<p class=\"support\">See how people discover your field studies and take the next step toward joining the research.</p>\n</div>\n<div class=\"range\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n<p class=\"period\">10–16 June 2024</p>\n</div>\n</section>\n\n<dl class=\"metrics\" aria-label=\"Website performance\">\n<div class=\"metric\">\n<dt>Visitors</dt>\n<dd>3492</dd>\n<p class=\"comparison\"><span class=\"change\">↑ 12.4%</span> vs previous 7 days</p>\n</div>\n<div class=\"metric\">\n<dt>Conversion</dt>\n<dd>3.6%</dd>\n<p class=\"comparison\"><span class=\"change\">↑ 0.5 percentage points</span> vs previous 7 days</p>\n</div>\n</dl>\n\n<div class=\"reports\">\n<section class=\"trend\" aria-labelledby=\"trend-title\">\n<h2 id=\"trend-title\">Weekly trend</h2>\n<p class=\"section-note\">Daily visitors to the research website</p>\n<figure>\n<p class=\"axis-title\">Visitors per day</p>\n<div class=\"chart\">\n<div class=\"yaxis\" aria-hidden=\"true\">\n<span style=\"top:0\">800</span><span style=\"top:25%\">600</span><span style=\"top:50%\">400</span><span style=\"top:75%\">200</span><span style=\"top:100%\">0</span>\n</div>\n<svg class=\"plot\" viewBox=\"0 0 840 160\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-description\">\n<title id=\"chart-title\">Daily visitors, 10–16 June 2024</title>\n<desc id=\"chart-description\">The vertical axis shows visitors from 0 to 800. The horizontal axis shows Monday through Sunday. Daily counts are 402, 468, 431, 512, 486, 565 and 628.</desc>\n<path d=\"M0 0H840M0 40H840M0 80H840M0 120H840M0 160H840\" fill=\"none\" stroke=\"#d9e2d9\" vector-effect=\"non-scaling-stroke\"/>\n<polyline points=\"60,79.6 180,66.4 300,73.8 420,57.6 540,62.8 660,47 780,34.4\" fill=\"none\" stroke=\"#193f31\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n<g fill=\"#193f31\">\n<circle cx=\"60\" cy=\"79.6\" r=\"3.5\"/><circle cx=\"180\" cy=\"66.4\" r=\"3.5\"/><circle cx=\"300\" cy=\"73.8\" r=\"3.5\"/><circle cx=\"420\" cy=\"57.6\" r=\"3.5\"/><circle cx=\"540\" cy=\"62.8\" r=\"3.5\"/><circle cx=\"660\" cy=\"47\" r=\"3.5\"/><circle cx=\"780\" cy=\"34.4\" r=\"3.5\"/>\n</g>\n</svg>\n<div class=\"days\" aria-hidden=\"true\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>\n<p class=\"x-title\">Day of week</p>\n</div>\n<figcaption>Sunday was the busiest day, with 628 visitors.</figcaption>\n</figure>\n</section>\n\n<section class=\"pages\" aria-labelledby=\"pages-title\">\n<h2 id=\"pages-title\">Top pages</h2>\n<p class=\"section-note\">Where visitors first arrived</p>\n<table aria-labelledby=\"pages-title\">\n<thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Visitors</th><th scope=\"col\">Share</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Field journal</span><span class=\"page-detail\">Updates from our research sites</span></td><td>1428</td><td>41%</td></tr>\n<tr><td><span class=\"page-name\">Join a field study</span><span class=\"page-detail\">Current participation opportunities</span></td><td>936</td><td>27%</td></tr>\n<tr><td><span class=\"page-name\">Monitoring protocols</span><span class=\"page-detail\">Community-led biodiversity monitoring guidance for remote and low-connectivity field sites</span></td><td>664</td><td>19%</td></tr>\n<tr><td><span class=\"page-name\">Our research team</span><span class=\"page-detail\">Meet the people behind the studies</span></td><td>464</td><td>13%</td></tr>\n</tbody>\n</table>\n</section>\n</div>\n<footer>\n<p>Conversion = completed participation forms ÷ visitors.</p>\n<p>Reporting timezone: UTC</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for North. Include Visitors 3583, Conversion 3.7%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: compact but readable; use slate blue as a restrained accent on a light background. Some descriptions should wrap to two lines; handle this naturally on mobile. Required visible text: \"North analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"North analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>North analytics</title>\n<style>\n:root{color-scheme:light;--ink:#25313d;--muted:#637080;--accent:#526a90;--line:#dce1e7;--paper:#fff;--bg:#f5f6f8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nmain{max-width:1160px;margin:0 auto;padding:32px 28px 24px}\n.masthead{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:19px}\n.brand{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.12em}\n.mark{display:grid;place-items:center;width:27px;height:27px;background:var(--accent);color:white;font-size:15px;letter-spacing:0}\n.updated{color:var(--muted);font-size:12px}\n.intro{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:28px 0 25px}\nh1,h2,p{margin:0}\nh1{font-size:30px;line-height:1.2;letter-spacing:-.035em;font-weight:650}\n.description{max-width:410px;margin-top:9px;color:var(--muted)}\n.actions{display:flex;align-items:center;gap:22px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:5px}\nselect,button{font:inherit;min-height:40px;border-radius:5px}\nselect{width:156px;background:var(--paper);color:var(--ink);border:1px solid #bcc5d0;padding:8px 30px 8px 11px}\nbutton{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:9px 15px;font-weight:600;white-space:nowrap;cursor:pointer}\nselect:focus-visible,button:focus-visible{outline:3px solid #aabbd5;outline-offset:3px}\n.export{display:flex;align-items:center;gap:12px;padding-top:22px}\n.hint{font-size:12px;line-height:1.4;color:var(--muted);max-width:112px}\n.summary{display:grid;grid-template-columns:1fr 1fr 1.1fr;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--paper);margin-bottom:22px}\n.metric{padding:21px 24px}\n.metric+.metric{border-left:1px solid var(--line)}\n.metric h2{font-size:13px;font-weight:500;color:var(--muted)}\n.value{font-size:36px;line-height:1.3;letter-spacing:-.045em;font-weight:600;font-variant-numeric:tabular-nums;margin:5px 0 8px}\n.comparison{font-size:12px;color:var(--muted)}\n.change{color:var(--accent);font-weight:650;margin-right:5px}\n.note{background:#eef1f5;border-left:1px solid var(--line);padding:21px 24px}\n.eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent)}\n.note strong{display:block;margin:6px 0 5px;font-size:14px;font-weight:600}\n.note p{font-size:12px;color:var(--muted);max-width:285px}\n.content{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:stretch}\n.panel{background:var(--paper);border:1px solid var(--line);border-radius:7px;min-width:0}\n.panel-head{padding:20px 22px 0}\nh2{font-size:16px;letter-spacing:-.015em;font-weight:650}\n.sub{font-size:12px;color:var(--muted);margin-top:4px}\n.chart{padding:22px 22px 0}\n.axis-label{font-size:11px;color:var(--muted)}\n.plot{display:flex;gap:10px;margin-top:13px}\n.y-ticks{height:150px;width:24px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:var(--muted);font-size:10px;line-height:1}\n.y-ticks span:first-child{transform:translateY(-5px)}\n.y-ticks span:last-child{transform:translateY(5px)}\n.graph{flex:1;min-width:0}\nsvg{display:block;width:100%;height:150px;overflow:visible}\n.x-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:9px}\n.x-label{text-align:center;margin:9px 0 18px}\n.chart-footer{border-top:1px solid var(--line);padding:13px 22px;color:var(--muted);font-size:12px}\n.chart-footer strong{color:var(--ink);font-weight:600}\ntable{border-collapse:collapse;table-layout:fixed;width:100%;font-size:12px;margin-top:17px}\nth{text-align:left;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fafbfc;padding:9px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\nth:first-child,td:first-child{padding-left:22px;width:60%}\nth:nth-child(2){width:23%}\nth:last-child{width:17%}\ntd{padding:12px 14px;border-bottom:1px solid #e9edf1;vertical-align:middle}\nth:not(:first-child),td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}\nth:last-child,td:last-child{padding-right:22px}\ntbody tr:last-child td{border-bottom:0}\n.page-name{display:block;font-weight:600;font-size:13px}\n.path{display:block;margin-top:2px;color:var(--muted);font-size:11px;overflow-wrap:anywhere}\n.share{color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:16px;padding-top:18px;color:var(--muted);font-size:11px}\n@media(max-width:900px){\n.intro{align-items:flex-start;flex-direction:column;gap:18px}\n.actions{width:100%;justify-content:space-between}\n.content{grid-template-columns:1.15fr 1fr;gap:16px}\n.metric,.note{padding:18px}\n.panel-head{padding:18px 16px 0}\n.chart{padding:22px 16px 0}\nth:first-child,td:first-child{padding-left:16px}\nth:last-child,td:last-child{padding-right:16px}\n}\n@media(max-width:650px){\nmain{padding:20px 18px}\n.masthead{gap:10px;align-items:flex-start;padding-bottom:15px}\n.brand{font-size:9px;letter-spacing:.09em;gap:7px}\n.mark{width:24px;height:24px}\n.updated{font-size:10px;max-width:114px;text-align:right;line-height:1.5}\n.intro{padding:22px 0 20px}\nh1{font-size:27px}\n.description{font-size:13px;max-width:315px}\n.actions{gap:14px;align-items:flex-end}\nselect{width:140px}\n.export{padding-top:0;flex-direction:column;align-items:flex-start;gap:5px}\n.export button{width:100%;padding:8px 12px}\n.hint{max-width:145px;font-size:10px}\n.summary{grid-template-columns:1fr 1fr;margin-bottom:16px}\n.metric{padding:16px}\n.value{font-size:32px;margin:3px 0 7px}\n.comparison{font-size:10px}\n.change{display:block;margin-bottom:2px;font-size:11px}\n.note{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:13px 16px}\n.note strong{display:inline;font-size:12px;margin:0 0 0 9px}\n.note p{max-width:none;margin-top:5px;font-size:11px}\n.eyebrow{font-size:9px}\n.content{grid-template-columns:1fr;gap:16px}\n.panel-head{padding-top:16px}\n.chart{padding-top:18px}\n.chart-footer{padding:11px 16px;font-size:11px}\ntd{padding-top:11px;padding-bottom:11px}\nfooter{flex-direction:column;gap:4px;padding-top:14px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<main>\n<header>\n<div class=\"masthead\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\">N</span> NORTH / FIELD SYSTEMS</div>\n<p class=\"updated\">Updated 12 Jun · 08:40 UTC</p>\n</div>\n<div class=\"intro\">\n<div>\n<h1>North analytics</h1>\n<p class=\"description\">Understand how researchers find resources and request access to the field.</p>\n</div>\n<div class=\"actions\">\n<div>\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n</div>\n<div class=\"export\">\n<button type=\"button\">Export report</button>\n<p class=\"hint\">A short snapshot for your field briefing.</p>\n</div>\n</div>\n</div>\n</header>\n\n<section class=\"summary\" aria-label=\"Key metrics\">\n<article class=\"metric\">\n<h2>Visitors</h2>\n<p class=\"value\">3583</p>\n<p class=\"comparison\"><span class=\"change\">↑ 12.4%</span>vs previous 7 days</p>\n</article>\n<article class=\"metric\">\n<h2>Conversion</h2>\n<p class=\"value\">3.7%</p>\n<p class=\"comparison\"><span class=\"change\">↑ 0.6 pp</span>vs previous 7 days</p>\n</article>\n<aside class=\"note\" aria-label=\"Measurement note\">\n<span class=\"eyebrow\">In context</span>\n<strong>133 access requests</strong>\n<p>A conversion is a submitted field access request, not a completed deployment.</p>\n</aside>\n</section>\n\n<div class=\"content\">\n<section class=\"panel\" aria-labelledby=\"trend-title\">\n<div class=\"panel-head\">\n<h2 id=\"trend-title\">Weekly visitor trend</h2>\n<p class=\"sub\">6–12 June 2025 · Daily unique visitors</p>\n</div>\n<div class=\"chart\">\n<p class=\"axis-label\">Visitors per day</p>\n<div class=\"plot\">\n<div class=\"y-ticks\" aria-hidden=\"true\"><span>750</span><span>500</span><span>250</span><span>0</span></div>\n<div class=\"graph\">\n<svg viewBox=\"0 0 700 150\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Daily visitors, 6–12 June</title>\n<desc id=\"chart-desc\">The vertical axis shows visitors from 0 to 750. The horizontal axis shows days in June. Daily counts are 420, 475, 448, 612, 518, 565 and 545. The peak is 612 visitors on 9 June.</desc>\n<path d=\"M0 0H700 M0 50H700 M0 100H700 M0 150H700\" fill=\"none\" stroke=\"#e4e8ed\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>\n<path d=\"M8 66L122 55L236 60.4L350 27.6L464 46.4L578 37L692 41\" fill=\"none\" stroke=\"#526a90\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" vector-effect=\"non-scaling-stroke\"/>\n</svg>\n<div class=\"x-ticks\" aria-hidden=\"true\"><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span></div>\n</div>\n</div>\n<p class=\"axis-label x-label\">Day in June · UTC</p>\n</div>\n<p class=\"chart-footer\"><strong>9 June was the busiest day</strong> · 612 visitors</p>\n</section>\n\n<section class=\"panel\" aria-labelledby=\"pages-title\">\n<div class=\"panel-head\">\n<h2 id=\"pages-title\">Top pages</h2>\n<p class=\"sub\">The resources researchers visited most.</p>\n</div>\n<table>\n<thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Visitors</th><th scope=\"col\">Share</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Field guide</span><span class=\"path\">/resources/field-guide</span></td><td>1,268</td><td class=\"share\">35%</td></tr>\n<tr><td><span class=\"page-name\">Active research sites</span><span class=\"path\">/research/sites</span></td><td>894</td><td class=\"share\">25%</td></tr>\n<tr><td><span class=\"page-name\">Data collection kit</span><span class=\"path\">/resources/collection-kit</span></td><td>642</td><td class=\"share\">18%</td></tr>\n<tr><td><span class=\"page-name\">Request field access</span><span class=\"path\">/field-access</span></td><td>381</td><td class=\"share\">11%</td></tr>\n</tbody>\n</table>\n</section>\n</div>\n<footer>\n<p>Public website only · Team traffic and known bots excluded.</p>\n<p>Visitors may appear on more than one page.</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-analytics-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Orbit. Include Visitors 3674, Conversion 3.8%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: editorial with clear hierarchy; use warm terracotta as a restrained accent on a light background. Use clear section boundaries without excessive cards. Required visible text: \"Orbit analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Orbit analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Orbit analytics — Research hub</title>\n<style>\n:root{color-scheme:light;--paper:#f8f7f3;--ink:#292824;--muted:#706b63;--rule:#dedad2;--accent:#a54e35}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader,main,footer{width:min(1120px,calc(100% - 64px));margin:auto}\nheader{min-height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.6px}\n.brand svg{width:29px;height:29px;color:var(--accent)}\n.workspace{margin-left:18px;padding-left:24px;border-left:1px solid var(--rule);font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted)}\n.status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap}\n.status::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#8b887b}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:32px 0 25px}\n.eyebrow{margin:0 0 5px;color:var(--accent);font-size:11px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase}\nh1{font-size:38px;line-height:1.15;letter-spacing:-1.3px;margin:0 0 10px;font-weight:650}\np{margin:0}\n.muted{color:var(--muted)}\n.range{flex:0 0 190px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\nselect{width:100%;min-height:44px;padding:9px 34px 9px 12px;border:1px solid #c9c3b8;border-radius:3px;background:var(--paper);color:var(--ink);font:inherit}\nselect:focus-visible{outline:2px solid var(--accent);outline-offset:3px}\n.period{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--rule);font-size:12px;color:var(--muted)}\n.metrics{display:grid;grid-template-columns:1fr 1fr;padding:22px 0 24px;border-bottom:1px solid var(--rule)}\n.metric:first-child{padding-right:30px}\n.metric:last-child{padding-left:32px;border-left:1px solid var(--rule)}\n.metric h2{margin:0 0 3px;font-size:14px;font-weight:500}\n.value{font-size:44px;line-height:1.15;letter-spacing:-1.6px;font-weight:600;font-variant-numeric:tabular-nums}\n.metric-note{margin-top:7px;font-size:12px;color:var(--muted)}\n.change{color:var(--accent);font-weight:600;margin-right:6px}\n.trend{margin:0;padding:23px 0 20px;border-bottom:1px solid var(--rule)}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}\nh2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.3px}\n.section-heading p{font-size:12px;color:var(--muted);margin-top:2px}\n.legend{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap}\n.legend::before{content:\"\";height:2px;width:21px;background:var(--accent)}\n.axis-title{font-size:11px;color:var(--muted);margin-bottom:9px}\n.plot{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px}\n.y-axis{height:170px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;font-size:11px;line-height:1;color:var(--muted)}\n.plot-area{min-width:0}\n.chart{display:block;width:100%;height:170px;overflow:visible}\n.x-axis{display:flex;justify-content:space-between;gap:2px;margin-top:8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}\n.axis-footer{margin-top:10px;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}\n.lower{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);padding:25px 0}\n.pages{padding-right:32px}\n.pages .section-heading{margin-bottom:12px}\n.count{font-size:12px;font-weight:400;color:var(--muted)}\ntable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}\nth{text-align:left;font-size:11px;color:var(--muted);font-weight:500;padding:0 0 9px;border-bottom:1px solid var(--rule)}\ntd{padding:11px 0;border-bottom:1px solid var(--rule);font-size:13px}\ntbody tr:last-child td{border-bottom:0}\nth:not(:first-child),td:not(:first-child){text-align:right;padding-left:14px;white-space:nowrap}\n.page-name{font-weight:550}\n.path{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere;margin-top:1px}\n.share{color:var(--muted)}\n.empty{border-left:1px solid var(--rule);padding-left:28px}\n.empty h2{margin-bottom:5px}\n.empty-count{font-size:12px;color:var(--muted)}\n.empty-message{margin-top:25px}\n.empty-message svg{width:25px;height:25px;color:#938b7d;margin-bottom:9px}\n.empty h3{font-size:14px;margin:0 0 7px;font-weight:600}\n.empty-message p{font-size:13px;color:var(--muted);line-height:1.65}\n.hint{margin-top:14px;font-size:12px;color:var(--muted)}\nfooter{padding:15px 0 25px;border-top:1px solid var(--rule);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:14px}\n@media(max-width:600px){\nheader,main,footer{width:calc(100% - 36px)}\nheader{min-height:64px;gap:10px}\n.workspace{display:none}\n.brand{font-size:20px}\n.intro{padding:24px 0 18px;display:block}\nh1{font-size:32px}\n.intro p.muted{font-size:13px;max-width:320px}\n.range{display:flex;align-items:center;gap:14px;margin-top:20px}\nlabel{margin:0;white-space:nowrap}\nselect{flex:1;min-width:0}\n.period{font-size:11px;gap:8px}\n.metrics{padding:18px 0}\n.metric:first-child{padding-right:15px}\n.metric:last-child{padding-left:18px}\n.value{font-size:37px}\n.metric-note{font-size:11px;line-height:1.65}\n.change{display:block;margin-right:0}\n.trend{padding:20px 0 17px}\n.section-heading{margin-bottom:15px}\nh2{font-size:17px}\n.legend{font-size:11px}\n.chart,.y-axis{height:140px}\n.plot{grid-template-columns:25px minmax(0,1fr);gap:6px}\n.axis-footer{font-size:10px}\n.lower{display:block;padding-top:20px}\n.pages{padding:0}\n.empty{border-left:0;border-top:1px solid var(--rule);padding:20px 0 0;margin-top:17px}\n.empty-message{margin-top:15px}\n.empty-message svg{float:left;margin:2px 12px 0 0}\n.empty-message p{margin-left:37px}\n.hint{margin-left:37px}\nfooter{display:block;padding-top:13px}\nfooter span{display:block;margin-top:3px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"16\" cy=\"16\" r=\"8\" stroke=\"currentColor\" stroke-width=\"1.8\"/><ellipse cx=\"16\" cy=\"16\" rx=\"15\" ry=\"6\" transform=\"rotate(-35 16 16)\" stroke=\"currentColor\" stroke-width=\"1.8\"/><circle cx=\"27\" cy=\"9\" r=\"2.5\" fill=\"currentColor\"/></svg>\nOrbit <span class=\"workspace\">North Coast Research</span>\n</div>\n<span class=\"status\">Weekly snapshot</span>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"title\">\n<div>\n<p class=\"eyebrow\">Research hub · Overview</p>\n<h1 id=\"title\">Orbit analytics</h1>\n<p class=\"muted\">How people discover your fieldwork and research resources.</p>\n</div>\n<div class=\"range\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n</div>\n</section>\n<div class=\"period\"><span>8–14 June 2026</span><span>4 tracked pages · All traffic</span></div>\n<section class=\"metrics\" aria-label=\"Key performance metrics\">\n<div class=\"metric\">\n<h2>Visitors</h2>\n<p class=\"value\">3674</p>\n<p class=\"metric-note\"><span class=\"change\">+8.2%</span>vs. previous 7 days</p>\n</div>\n<div class=\"metric\">\n<h2>Conversion</h2>\n<p class=\"value\">3.8%</p>\n<p class=\"metric-note\"><span class=\"change\">140 field kit downloads</span>of all visitors</p>\n</div>\n</section>\n<figure class=\"trend\" aria-labelledby=\"trend-title\">\n<figcaption class=\"section-heading\">\n<div><h2 id=\"trend-title\">Weekly trend</h2><p>A steady rise in research hub visitors.</p></div>\n<span class=\"legend\">Visitors</span>\n</figcaption>\n<p class=\"axis-title\">Visitors per day</p>\n<div class=\"plot\">\n<div class=\"y-axis\" aria-hidden=\"true\"><span>800</span><span>600</span><span>400</span><span>200</span><span>0</span></div>\n<div class=\"plot-area\">\n<svg class=\"chart\" viewBox=\"0 0 900 170\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Daily visitors, 8–14 June 2026</title>\n<desc id=\"chart-desc\">Vertical axis: visitors per day, from 0 to 800. Horizontal axis: dates from 8 to 14 June. Daily totals: 410, 485, 450, 600, 530, 560 and 639 visitors.</desc>\n<path d=\"M0 0H900 M0 42.5H900 M0 85H900 M0 127.5H900 M0 170H900\" fill=\"none\" stroke=\"#dedad2\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>\n<path d=\"M0 82.9L150 66.9L300 74.4L450 42.5L600 57.4L750 51L900 34.2V170H0Z\" fill=\"#a54e35\" opacity=\".05\"/>\n<path d=\"M0 82.9L150 66.9L300 74.4L450 42.5L600 57.4L750 51L900 34.2\" fill=\"none\" stroke=\"#a54e35\" stroke-width=\"2.5\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n</svg>\n<div class=\"x-axis\" aria-hidden=\"true\"><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span></div>\n</div>\n</div>\n<div class=\"axis-footer\"><span>Date · June 2026</span><span>Peak: 639 visitors · 14 Jun</span></div>\n</figure>\n<div class=\"lower\">\n<section class=\"pages\" aria-labelledby=\"pages-title\">\n<div class=\"section-heading\"><div><h2 id=\"pages-title\">Top pages</h2><p>Most visited field research resources</p></div><span class=\"count\">4,935 views</span></div>\n<table>\n<thead><tr><th scope=\"col\">Page</th><th scope=\"col\">Views</th><th scope=\"col\">Share</th></tr></thead>\n<tbody>\n<tr><td><span class=\"page-name\">Field guides</span><span class=\"path\">/field-guides</span></td><td>1,984</td><td class=\"share\">40%</td></tr>\n<tr><td><span class=\"page-name\">Research sites</span><span class=\"path\">/sites</span></td><td>1,426</td><td class=\"share\">29%</td></tr>\n<tr><td><span class=\"page-name\">Water sampling protocol</span><span class=\"path\">/protocols/water-sampling</span></td><td>917</td><td class=\"share\">19%</td></tr>\n<tr><td><span class=\"page-name\">Join a survey</span><span class=\"path\">/join-a-survey</span></td><td>608</td><td class=\"share\">12%</td></tr>\n</tbody>\n</table>\n</section>\n<section class=\"empty\" aria-labelledby=\"outreach-title\">\n<h2 id=\"outreach-title\">Outreach tracking</h2>\n<p class=\"empty-count\">0 tagged campaigns</p>\n<div class=\"empty-message\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><path d=\"M10 4H4v6l10 10 6-6L10 4Z\"/><circle cx=\"7.5\" cy=\"7.5\" r=\"1\"/></svg>\n<h3>No tagged visits this week</h3>\n<p>Your hub has visitors, but none arrived through campaign-tagged links.</p>\n</div>\n<p class=\"hint\">Add UTM tags to survey invitations to compare outreach by partner or field site.</p>\n</section>\n</div>\n</main>\n<footer><span>Reporting in UTC · Internal team visits excluded</span><span>Research hub · Sample report</span></footer>\n</body>\n</html>"}]}
{"id":"sft-analytics-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a website analytics overview for Pine. Include Visitors 3765, Conversion 4.0%, an inline SVG weekly trend, Top pages table with four rows, and a date range select with Last 7 days and Last 30 days options. Explain chart axes with visible labels. Style: practical and understated; use deep plum as a restrained accent on a light background. Include a short supporting sentence of realistic copy, not lorem ipsum. Required visible text: \"Pine analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\". Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Pine analytics\", \"Visitors\", \"Conversion\", \"Top pages\", \"Last 7 days\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Pine analytics</title>\n<style>\n:root{color-scheme:light;--bg:#f4f2ed;--surface:#fdfcf9;--ink:#2c292d;--muted:#736d73;--line:#dedad3;--plum:#482b43;--green:#3e6755}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nmain{max-width:1080px;margin:auto;padding:32px 32px 24px}\n.eyebrow{margin:0 0 14px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:1.5px}\n.header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:26px}\nh1{margin:0 0 8px;font-size:32px;line-height:1.15;letter-spacing:-1.1px;font-weight:650}\n.intro{margin:0;max-width:570px;color:var(--muted)}\n.range{flex:0 0 174px}\nlabel{display:block;margin-bottom:6px;font-size:12px;font-weight:600}\nselect{width:100%;min-height:42px;padding:8px 12px;border:1px solid #c8c1c7;border-radius:6px;background:var(--surface);color:var(--ink);font:inherit}\nselect:focus-visible{outline:3px solid #cdbdcc;outline-offset:2px}\n.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.metrics{display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px}\n.metric{padding:20px 24px}\n.metric+.metric{border-left:1px solid var(--line)}\n.metric h2{margin:0 0 4px;font-size:13px;font-weight:600}\n.value{font-size:38px;line-height:1.2;letter-spacing:-1.2px;font-weight:600;color:var(--plum);font-variant-numeric:tabular-nums}\n.metric p{margin:7px 0 0;color:var(--muted);font-size:12px}\n.positive{color:var(--green);font-weight:600}\n.chart{padding:20px 24px 16px;margin-bottom:24px}\n.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}\nh2{margin:0;font-size:16px;font-weight:650;letter-spacing:-.2px}\n.period{font-size:12px;color:var(--muted);white-space:nowrap}\n.axis-title{margin:0 0 10px;font-size:11px;color:var(--muted)}\n.plot{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px}\n.scale{height:160px;display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:11px;line-height:12px;text-align:right}\n.graph{min-width:0}\n.graph svg{display:block;width:100%;height:160px;overflow:visible}\n.days{display:flex;justify-content:space-between;gap:2px;margin-top:8px;color:var(--muted);font-size:11px}\n.axis-bottom{margin:8px 0 0;text-align:center;font-size:11px;color:var(--muted)}\n.chart-note{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:12px;color:var(--muted)}\n.swatch{width:16px;height:3px;background:var(--plum);border-radius:2px;flex:none}\n.pages .section-head{padding:19px 24px 0;margin-bottom:4px}\n.section-copy{margin:0;padding:0 24px 16px;color:var(--muted);font-size:12px}\ntable{border-collapse:collapse;width:100%;table-layout:fixed}\nth,td{padding:13px 24px;text-align:left;border-top:1px solid var(--line);vertical-align:middle}\nth{background:#f8f6f2;font-size:11px;color:var(--muted);font-weight:600}\nth:first-child{width:66%}\nth:not(:first-child),td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}\n.page-name{display:block;font-weight:550;overflow-wrap:anywhere}\n.path{display:block;margin-top:2px;font-size:11px;color:var(--muted);overflow-wrap:anywhere}\n.share{color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:12px;margin-top:16px;color:var(--muted);font-size:11px}\n@media(max-width:600px){\nmain{padding:22px 16px}\n.eyebrow{margin-bottom:12px;font-size:10px}\n.header{flex-direction:column;gap:18px;margin-bottom:20px}\nh1{font-size:29px}\n.intro{font-size:13px}\n.range{flex:auto;width:100%}\nlabel{font-size:11px}\n.metrics{margin-bottom:14px}\n.metric{padding:16px}\n.value{font-size:32px}\n.metric p{font-size:11px;max-width:135px}\n.chart{padding:17px 16px 15px;margin-bottom:18px}\n.section-head{gap:8px;margin-bottom:15px}\nh2{font-size:15px}\n.period{font-size:11px}\n.plot{grid-template-columns:24px minmax(0,1fr);column-gap:8px}\n.days{font-size:10px}\n.pages .section-head{padding:16px 16px 0}\n.section-copy{padding:0 16px 14px}\nth,td{padding:12px 12px}\nth:first-child,td:first-child{padding-left:16px}\nth:first-child{width:60%}\nth:last-child,td:last-child{padding-right:16px}\ntd{font-size:12px}\n.path{font-size:10px}\nfooter{flex-direction:column;gap:3px}\n}\n</style>\n</head>\n<body>\n<main>\n<p class=\"eyebrow\">PINE / FIELD RESEARCH WORKSPACE</p>\n<header class=\"header\">\n<div>\n<h1>Pine analytics</h1>\n<p class=\"intro\">Track how field teams find protocols, prepare for site visits, and request access.</p>\n</div>\n<div class=\"range\">\n<label for=\"date-range\">Date range</label>\n<select id=\"date-range\" name=\"date-range\">\n<option selected>Last 7 days</option>\n<option>Last 30 days</option>\n</select>\n</div>\n</header>\n\n<section class=\"panel metrics\" aria-label=\"Key metrics\">\n<article class=\"metric\">\n<h2>Visitors</h2>\n<div class=\"value\">3765</div>\n<p><span class=\"positive\">↑ 12.6%</span> vs. previous 7 days</p>\n</article>\n<article class=\"metric\">\n<h2>Conversion</h2>\n<div class=\"value\">4.0%</div>\n<p>151 access requests submitted</p>\n</article>\n</section>\n\n<section class=\"panel chart\" aria-labelledby=\"trend-title\">\n<div class=\"section-head\">\n<h2 id=\"trend-title\">Weekly visitors</h2>\n<span class=\"period\">12–18 May 2025</span>\n</div>\n<p class=\"axis-title\">Visitors per day</p>\n<div class=\"plot\">\n<div class=\"scale\" aria-hidden=\"true\">\n<span>800</span><span>600</span><span>400</span><span>200</span><span>0</span>\n</div>\n<div class=\"graph\">\n<svg viewBox=\"0 0 680 160\" preserveAspectRatio=\"none\" role=\"img\" aria-labelledby=\"chart-title chart-desc\">\n<title id=\"chart-title\">Daily visitors, 12–18 May 2025</title>\n<desc id=\"chart-desc\">Horizontal axis: Monday through Sunday. Vertical axis: visitors per day, from 0 to 800. Monday 430, Tuesday 510, Wednesday 485, Thursday 610, Friday 540, Saturday 625, Sunday 565.</desc>\n<g fill=\"none\" stroke=\"#e7e3dc\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\">\n<path d=\"M0 6H680 M0 43H680 M0 80H680 M0 117H680 M0 154H680\"/>\n</g>\n<path d=\"M4 74.45 116 59.65 228 64.275 340 41.15 452 54.1 564 38.375 676 49.475V154H4Z\" fill=\"#482b43\" fill-opacity=\".055\"/>\n<path d=\"M4 74.45 116 59.65 228 64.275 340 41.15 452 54.1 564 38.375 676 49.475\" fill=\"none\" stroke=\"#482b43\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" vector-effect=\"non-scaling-stroke\"/>\n</svg>\n<div class=\"days\" aria-hidden=\"true\">\n<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>\n</div>\n<p class=\"axis-bottom\">Day of week</p>\n</div>\n</div>\n<p class=\"chart-note\"><span class=\"swatch\" aria-hidden=\"true\"></span>Daily visitors · Saturday was the busiest day.</p>\n</section>\n\n<section class=\"panel pages\" aria-labelledby=\"pages-title\">\n<div class=\"section-head\">\n<h2 id=\"pages-title\">Top pages</h2>\n<span class=\"period\">By visitors</span>\n</div>\n<p class=\"section-copy\">The resources teams returned to while planning fieldwork.</p>\n<table aria-label=\"Top pages for 12–18 May 2025\">\n<thead>\n<tr><th scope=\"col\">Page</th><th scope=\"col\">Visitors</th><th scope=\"col\">Share</th></tr>\n</thead>\n<tbody>\n<tr>\n<td><span class=\"page-name\">Fieldwork handbook</span><span class=\"path\">/handbook</span></td>\n<td>1248</td><td class=\"share\">33.1%</td>\n</tr>\n<tr>\n<td><span class=\"page-name\">North Coast estuary sampling protocol</span><span class=\"path\">/protocols/north-coast-estuary</span></td>\n<td>986</td><td class=\"share\">26.2%</td>\n</tr>\n<tr>\n<td><span class=\"page-name\">Site guides &amp; access notes</span><span class=\"path\">/sites</span></td>\n<td>804</td><td class=\"share\">21.4%</td>\n</tr>\n<tr>\n<td><span class=\"page-name\">Request equipment &amp; field support</span><span class=\"path\">/field-support</span></td>\n<td>392</td><td class=\"share\">10.4%</td>\n</tr>\n</tbody>\n</table>\n</section>\n\n<footer>\n<span>Internal traffic excluded · Timezone: UTC</span>\n<span>Report updated 19 May 2025, 08:15 UTC</span>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-0","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Alder. Include client Maya Chen, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Alder</title>\n<style>\n:root{color-scheme:light;--bg:#f3f0e9;--paper:#fffdf8;--ink:#26382f;--muted:#6b7068;--line:#dedfd5;--soft:#eeeee5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\n.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:29px;height:29px}\n.shop{text-align:right;font-size:13px;font-weight:600}\n.shop span{display:block;color:var(--muted);font-size:11px;font-weight:400}\nmain{max-width:1080px;margin:44px auto;padding:0 28px}\n.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:40px;font-weight:400;letter-spacing:-1.1px;line-height:1.15;margin:0 0 9px}\n.page-heading p{margin:0;color:var(--muted)}\n.status{display:inline-flex;align-items:center;gap:7px;border:1px solid #d5d6c9;border-radius:20px;padding:5px 12px;background:#e8e9de;font-size:12px;font-weight:600;margin-top:7px;white-space:nowrap}\n.status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#727956}\n.review{background:var(--paper);border:1px solid #d8dbcf;border-radius:12px;overflow:hidden;box-shadow:0 5px 18px #26382f05}\n.next-action{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px;border-bottom:1px solid var(--line);background:#e9ede3}\n.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}\n.next-action h2{font-size:17px;font-weight:650;margin:3px 0}\n.next-action p{margin:0;font-size:12px;color:var(--muted)}\n.send{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:16px;background:var(--ink);color:#fffdf8;border:1px solid var(--ink);border-radius:6px;padding:12px 18px;min-height:46px;font-weight:600;cursor:pointer}\n.send svg{width:16px;height:16px}\n.send:hover{background:#354c40}\n.send:focus-visible{outline:3px solid #a78345;outline-offset:3px}\n.review-content{display:grid;grid-template-columns:minmax(0,1fr) 300px}\n.invoice{padding:28px 32px 24px;min-width:0}\n.invoice-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:25px}\n.invoice h2{font-size:23px;letter-spacing:-.5px;margin:0 0 3px;font-weight:600}\n.invoice-header p{margin:0;font-size:13px;color:var(--muted)}\n.invoice-mark{color:#8a8f7d;width:34px;height:34px;flex-shrink:0}\ntable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}\ncaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\nth{text-align:left;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:0 0 10px;font-weight:600;border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right;white-space:nowrap}\ntd{padding:15px 0;border-bottom:1px solid var(--line);vertical-align:top}\ntd:first-child{padding-right:16px}\n.service{font-weight:600}\n.description{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:400}\n.tax td{padding:12px 0;color:var(--muted);font-size:13px}\n.total td{border:0;padding:15px 0 0;font-size:21px;font-weight:650}\n.total td:first-child{font-size:15px;vertical-align:middle}\n.summary{background:#f7f6f0;border-left:1px solid var(--line);padding:28px 25px}\n.summary h2{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 22px;color:var(--muted)}\n.summary dl{margin:0;display:grid;gap:21px}\ndt{font-size:11px;color:var(--muted);margin-bottom:4px;line-height:1.5}\ndd{margin:0;font-size:13px}\ndd strong{font-size:14px;font-weight:600}\n.detail{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}\n.reference{border-top:1px solid var(--line);padding-top:17px}\n.reference dd{font-size:12px}\n.footnote{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:12px;margin:16px 2px 0}\n.footnote svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}\n@media(max-width:650px){\n.topbar{height:58px;padding:0 20px}.brand{font-size:23px}.brand svg{width:25px;height:25px}.shop{font-size:11px}.shop span{display:none}\nmain{margin:24px auto;padding:0 18px}\n.page-heading{margin-bottom:19px;gap:10px}\nh1{font-size:31px;margin-bottom:7px}\n.page-heading p{font-size:12px;max-width:260px}\n.status{font-size:11px;padding:4px 9px;margin-top:4px}\n.next-action{padding:16px;gap:12px}\n.next-action h2{font-size:14px;margin:3px 0}\n.next-action p{font-size:11px}\n.eyebrow{font-size:9px;letter-spacing:1.2px}\n.send{font-size:12px;gap:8px;padding:11px 12px;min-height:43px}\n.send svg{width:14px;height:14px}\n.review-content{grid-template-columns:minmax(0,1fr)}\n.invoice{padding:20px}\n.invoice-header{margin-bottom:19px}\n.invoice h2{font-size:21px}\n.invoice-header p{font-size:12px}\ntd{padding:12px 0}.description{font-size:11px;max-width:210px}\n.tax td{padding:10px 0}.total td{padding-top:12px}\n.summary{border-left:0;border-top:1px solid var(--line);padding:17px 20px}\n.summary h2{margin-bottom:12px}\n.summary dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px}\n.summary dd{font-size:12px}.summary dd strong{font-size:13px}\n.detail{font-size:11px}\n.reference{grid-column:1/-1;padding-top:11px}\n.reference dt{max-width:300px;font-size:10px}\n.reference dd{font-size:11px}\n.footnote{font-size:11px;margin-top:12px}\n}\n@media(prefers-reduced-motion:no-preference){.send{transition:background .15s}}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 25 16 5l10 20M10 18h12\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 28h24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\nAlder\n</div>\n<div class=\"shop\">Oak Street Cycles<span>Workshop billing</span></div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<h1>Invoice review</h1>\n<p>One last check before it leaves the shop.</p>\n</div>\n<span class=\"status\">Draft</span>\n</div>\n<section class=\"review\" aria-label=\"Invoice review and delivery\">\n<div class=\"next-action\">\n<div>\n<div class=\"eyebrow\">Next step</div>\n<h2>Send to Maya Chen</h2>\n<p>Invoice and payment details by email.</p>\n</div>\n<button class=\"send\" type=\"button\">Send invoice <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 10h12m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n</div>\n<div class=\"review-content\">\n<section class=\"invoice\" aria-labelledby=\"invoice-number\">\n<header class=\"invoice-header\">\n<div>\n<h2 id=\"invoice-number\">Invoice #1048</h2>\n<p>Due 28 November</p>\n</div>\n<svg class=\"invoice-mark\" viewBox=\"0 0 40 40\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"27\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"30\" cy=\"27\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m10 27 7-13 8 13H10l-4-9h8m16 9-6-17h-5m-6 4h8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</header>\n<table>\n<caption>Invoice services and total in US dollars</caption>\n<thead><tr><th scope=\"col\">Service</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td class=\"service\">Consulting<span class=\"description\">Commuter bike fit &amp; workshop planning</span></td><td>$1800</td></tr>\n<tr><td class=\"service\">Research<span class=\"description\">Component compatibility &amp; sourcing</span></td><td>$400</td></tr>\n<tr class=\"tax\"><td>Tax</td><td>$280</td></tr>\n</tbody>\n<tfoot><tr class=\"total\"><td>Total</td><td>$2480</td></tr></tfoot>\n</table>\n</section>\n<aside class=\"summary\" aria-labelledby=\"summary-title\">\n<h2 id=\"summary-title\">Client &amp; payment</h2>\n<dl>\n<div>\n<dt>Bill to</dt>\n<dd><strong>Maya Chen</strong><span class=\"detail\">maya.chen@example.com</span></dd>\n</div>\n<div>\n<dt>Payment details</dt>\n<dd>Bank transfer · USD<span class=\"detail\">Oak Street Cycles</span><span class=\"detail\">Account ending 4821</span><span class=\"detail\">Payment reference: 1048</span></dd>\n</div>\n<div class=\"reference\">\n<dt>Customer reference for workshop consultation and component compatibility research</dt>\n<dd>MC-1048 · Commuter build</dd>\n</div>\n</dl>\n</aside>\n</div>\n</section>\n<p class=\"footnote\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 9V6a4 4 0 0 1 8 0v3M5 9h10v8H5z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"/></svg>\nDraft only — this invoice has not been sent to your customer.\n</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-2","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Fieldwork. Include client Samira Patel, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Fieldwork</title>\n<style>\n:root{--paper:#f7f6f1;--ink:#272d29;--muted:#696d65;--line:#d8dad1;--soft:#eeefe7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit;cursor:pointer}\nbutton:focus-visible{outline:3px solid var(--muted);outline-offset:4px}\n.site-header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.5%}\n.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:750;letter-spacing:-.8px}\n.brand svg{width:28px;height:28px}\n.workspace{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:13px}\n.workspace svg{width:24px;height:24px}\nmain{max-width:1120px;margin:0 auto;padding:38px 24px 48px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}\nh1{font-size:32px;line-height:1.15;letter-spacing:-1.1px;margin:0 0 8px;font-weight:650}\n.subtitle{margin:0;color:var(--muted)}\n.status{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:4px;padding:7px 11px;font-size:12px;white-space:nowrap}\n.status svg{width:13px;height:13px}\n.steps{display:flex;list-style:none;padding:0 0 23px;margin:0 0 26px;border-bottom:1px solid var(--line);gap:30px;color:var(--muted);font-size:13px}\n.steps li{display:flex;align-items:center;gap:9px}\n.step-number{width:23px;height:23px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:11px}\n.steps [aria-current]{font-weight:650;color:var(--ink)}\n.steps [aria-current] .step-number{background:var(--ink);color:var(--paper);border-color:var(--ink)}\n.review-layout{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:28px;align-items:start}\n.invoice{border:1px solid var(--line);padding:30px 32px;background:rgba(255,255,255,.26)}\n.invoice-heading{display:flex;justify-content:space-between;gap:14px;align-items:baseline}\nh2{margin:0;font-size:21px;letter-spacing:-.5px;font-weight:650}\n.count{color:var(--muted);font-size:12px;white-space:nowrap}\n.project{margin:5px 0 25px;color:var(--muted);font-size:13px}\n.invoice-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}\n.label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.9px;font-weight:600;color:var(--muted);margin-bottom:5px}\n.invoice-meta p{margin:0}\n.client{font-size:16px;font-weight:600}\n.client-shop{font-size:12px;color:var(--muted);margin-top:2px!important}\n.due{text-align:right}\n.due strong{font-size:14px;font-weight:550}\ntable{border-collapse:collapse;width:100%;font-size:14px}\nth{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;text-align:left;padding:0 0 10px;border-bottom:1px solid var(--line)}\ntd{padding:13px 0;border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right;font-variant-numeric:tabular-nums}\ntfoot td{border:0;padding:10px 0 0}\n.tax td{color:var(--muted);font-size:13px;padding-top:15px}\n.total td{font-size:20px;font-weight:650;padding-top:9px;letter-spacing:-.3px}\n.payment{border-top:1px solid var(--line);margin-top:25px;padding-top:19px;display:grid;grid-template-columns:1fr auto;gap:12px}\n.payment h3{font-size:13px;margin:0 0 6px;font-weight:650}\n.payment p{font-size:12px;margin:2px 0;color:var(--muted)}\n.payment .reference{text-align:right;align-self:end}\n.send-panel{padding:3px 0}\n.next{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:650;margin:0 0 8px}\n.send-panel h2{font-size:22px}\n.send-panel>p:not(.next){color:var(--muted);font-size:13px;margin:10px 0 23px}\n.delivery{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:0 0 21px}\n.delivery dt{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:5px}\n.delivery dd{margin:0;font-size:13px;overflow-wrap:anywhere}\n.delivery .email{font-size:12px;color:var(--muted);margin-top:2px}\n.send-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--paper);padding:13px 16px;font-weight:600}\n.send-button svg{width:17px;height:17px}\n.edit-button{display:block;width:100%;border:0;background:transparent;color:var(--ink);padding:12px;margin-top:5px;font-size:13px;text-decoration:underline;text-underline-offset:3px}\n.draft-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--muted);margin-top:13px}\n.draft-note svg{width:13px;height:13px;flex-shrink:0}\n@media(max-width:700px){\n.site-header{height:58px;padding:0 20px}\n.brand{font-size:20px}.brand svg{width:24px;height:24px}\n.workspace{font-size:11px;gap:6px}.workspace svg{display:none}\nmain{padding:23px 18px 24px}\n.page-heading{align-items:flex-start;gap:8px;margin-bottom:19px}\nh1{font-size:26px;letter-spacing:-.8px;margin-bottom:6px}\n.subtitle{font-size:12px;max-width:220px}\n.status{font-size:10px;padding:5px 7px;gap:4px;margin-top:3px}\n.status svg{width:11px;height:11px}\n.steps{justify-content:space-between;gap:12px;padding-bottom:17px;margin-bottom:18px;font-size:12px}\n.steps li{gap:6px}.step-number{width:21px;height:21px}\n.review-layout{grid-template-columns:1fr;gap:21px}\n.invoice{padding:19px 18px}\nh2{font-size:19px}.count{font-size:11px}\n.project{font-size:12px;margin:3px 0 18px}\n.invoice-meta{margin-bottom:20px;gap:10px}\n.label{font-size:10px;margin-bottom:3px}\n.client{font-size:15px}.due strong{font-size:12px}\ntd{padding:10px 0}.tax td{padding-top:10px}\n.total td{font-size:20px;padding-top:6px}\n.payment{margin-top:17px;padding-top:14px;gap:8px}\n.payment h3{font-size:12px}.payment p{font-size:11px}\n.send-panel{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:0}\n.next{grid-column:1/-1;margin-bottom:5px}\n.send-panel h2{font-size:19px}\n.send-panel>p:not(.next){display:none}\n.delivery{border:0;padding:0;margin:3px 0 14px;grid-column:1/-1}\n.delivery dt{display:none}\n.delivery dd{display:inline;font-size:12px}\n.delivery .email{margin-left:5px;font-size:11px}\n.send-button{grid-column:1/-1;padding:12px 14px}\n.edit-button{grid-column:2;grid-row:2;padding:0;margin:0;width:auto;font-size:12px}\n.draft-note{grid-column:1/-1;margin-top:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 23V5h20M4 14h15M12 23V5\" stroke=\"currentColor\" stroke-width=\"3\"/></svg>\nFieldwork\n</div>\n<div class=\"workspace\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"6\" cy=\"19\" r=\"4.5\" stroke=\"currentColor\"/><circle cx=\"22\" cy=\"19\" r=\"4.5\" stroke=\"currentColor\"/><path d=\"m6 19 5-10 6 10H6l8-7h6l2 7M9 9h5M18 6h3l-1 6\" stroke=\"currentColor\" stroke-linejoin=\"round\"/></svg>\nNorthline Cycle Works\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<h1>Invoice review</h1>\n<p class=\"subtitle\">A final look before it leaves the shop.</p>\n</div>\n<span class=\"status\">\n<svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 2h6l3 3v9H4zM9 2v4h4M6 9h5M6 11h3\" stroke=\"currentColor\"/></svg>\nDraft · Not sent\n</span>\n</div>\n<nav aria-label=\"Invoice progress\">\n<ol class=\"steps\">\n<li><span class=\"step-number\" aria-label=\"Complete\">✓</span>Details</li>\n<li aria-current=\"step\"><span class=\"step-number\">2</span>Review</li>\n<li><span class=\"step-number\">3</span>Send</li>\n</ol>\n</nav>\n<div class=\"review-layout\">\n<article class=\"invoice\" aria-labelledby=\"invoice-title\">\n<div class=\"invoice-heading\">\n<h2 id=\"invoice-title\">Invoice #1048</h2>\n<span class=\"count\">2 line items</span>\n</div>\n<p class=\"project\">Workshop planning &amp; supplier research</p>\n<div class=\"invoice-meta\">\n<div>\n<span class=\"label\">Bill to</span>\n<p class=\"client\">Samira Patel</p>\n<p class=\"client-shop\">Patel Cycles</p>\n</div>\n<div class=\"due\">\n<span class=\"label\">Payment terms</span>\n<p><strong>Due 28 November</strong></p>\n<p class=\"client-shop\">Bank transfer</p>\n</div>\n</div>\n<table aria-label=\"Invoice charges\">\n<thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td>Consulting</td><td>$1800</td></tr>\n<tr><td>Research</td><td>$400</td></tr>\n</tbody>\n<tfoot>\n<tr class=\"tax\"><td>Tax</td><td>$280</td></tr>\n<tr class=\"total\"><td>Total</td><td>$2480</td></tr>\n</tfoot>\n</table>\n<section class=\"payment\" aria-labelledby=\"payment-title\">\n<div>\n<h3 id=\"payment-title\">Payment details</h3>\n<p>Northline Cycle Works</p>\n<p>Bank transfer · Account ending 4821</p>\n</div>\n<div class=\"reference\">\n<span class=\"label\">Reference</span>\n<p>INV-1048</p>\n</div>\n</section>\n</article>\n<aside class=\"send-panel\" aria-labelledby=\"send-title\">\n<p class=\"next\">Next step · Send to client</p>\n<h2 id=\"send-title\">Ready to send?</h2>\n<p>Check the workshop charges and bank details before sharing this invoice.</p>\n<dl class=\"delivery\">\n<dt>Invoice recipient</dt>\n<dd>Samira Patel</dd>\n<dd class=\"email\">samira@patelcycles.example</dd>\n</dl>\n<button class=\"send-button\" type=\"button\">\nSend invoice\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</button>\n<button class=\"edit-button\" type=\"button\">Edit details</button>\n<div class=\"draft-note\">\n<svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\"/><path d=\"M8 4.5V8l2 1.5\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>\nDraft only — no payment requested yet\n</div>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-3","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Common. Include client Noah Tremblay, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review — Common</title>\n<style>\n:root{--ink:#263c34;--muted:#73786e;--line:#dedfd5;--paper:#fffef9;--ground:#f3f3eb;--soft:#eceee5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--ground);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit;cursor:pointer}\nbutton:focus-visible{outline:3px solid #a18448;outline-offset:4px}\n.app-header{height:76px;border-bottom:1px solid var(--line);padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-size:25px;font-weight:700;letter-spacing:-1.2px}\n.brand span{font-weight:400}\n.workspace{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:13px}\n.workspace::before{content:\"\";width:7px;height:7px;border-radius:50%;background:#65765a}\nmain{max-width:1152px;margin:auto;padding:42px 32px 44px}\n.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:29px}\nh1,h2,p{margin:0}\nh1{font-family:Georgia,'Times New Roman',serif;font-size:48px;font-weight:400;line-height:1.12;letter-spacing:-1.7px}\n.intro{color:var(--muted);margin-top:12px;font-size:14px}\n.edit{border:1px solid #bfc6b8;background:transparent;color:var(--ink);padding:10px 17px;border-radius:4px;white-space:nowrap}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}\n.invoice{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:29px 30px}\n.invoice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}\n.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;color:var(--muted)}\nh2{font-family:Georgia,'Times New Roman',serif;font-size:29px;font-weight:400;letter-spacing:-.5px;margin-top:5px}\n.due{margin-top:6px;font-size:13px}\n.status{display:inline-flex;align-items:center;gap:6px;background:#f1e9d6;color:#765d2f;border-radius:20px;padding:4px 10px;font-size:12px}\n.status::before{content:\"\";height:5px;width:5px;border-radius:50%;background:#a78545}\n.parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:27px 0}\n.parties dt{font-size:11px;color:var(--muted);margin-bottom:5px}\n.parties dd{margin:0}\n.name{font-weight:600}\n.secondary{color:var(--muted);font-size:12px;margin-top:3px;overflow-wrap:anywhere}\n.project{display:flex;align-items:center;gap:17px;background:#f0f2e9;border-radius:3px;padding:13px 15px;margin-bottom:20px}\n.project svg{width:94px;height:53px;flex:none;color:#65745c}\n.project-title{font-size:13px;font-weight:600;margin-top:2px}\n.project .secondary{font-size:11px}\ntable{border-collapse:collapse;width:100%;font-size:13px}\ncaption{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:700;padding-bottom:11px}\nth{color:var(--muted);font-size:11px;font-weight:400;text-align:left;border-bottom:1px solid var(--line);padding:0 0 9px}\ntd{padding:17px 0;border-bottom:1px solid var(--line);vertical-align:top}\nth:nth-child(2),td:nth-child(2){text-align:center;width:48px}\nth:last-child,td:last-child{text-align:right;white-space:nowrap;width:92px;font-variant-numeric:tabular-nums}\n.service{font-weight:600;font-size:14px}\n.description{font-size:11px;color:var(--muted);margin-top:4px;max-width:250px}\n.note{margin-top:22px;font-size:12px;color:var(--muted);line-height:1.6}\n.note strong{display:block;color:var(--ink);font-size:11px;margin-bottom:4px}\n.summary{border-top:3px solid var(--ink);padding:20px 22px 22px;background:#e9ece2;border-radius:0 0 4px 4px}\n.summary h2{font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;margin:0 0 18px}\n.totals{margin:0}\n.totals>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}\n.totals dt{color:#677162;font-size:13px}\n.totals dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums}\n.totals .total{border-top:1px solid #cbd2c2;margin-top:17px;padding-top:15px;align-items:baseline}\n.total dt{color:var(--ink);font-size:15px;font-weight:600}\n.total dd{font-family:Georgia,'Times New Roman',serif;font-size:36px;letter-spacing:-1px}\n.send{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--ink);color:#fffef9;border:0;border-radius:4px;width:100%;padding:13px 16px;margin-top:17px;font-weight:600}\n.send svg{width:17px;height:17px;flex:none}\n.send-note{font-size:11px;color:#687160;margin-top:10px;line-height:1.5}\n.payment{margin-top:24px;padding-top:19px;border-top:1px solid #cbd2c2}\n.payment h3{font-size:12px;margin:0 0 12px;font-weight:600}\n.method{font-size:13px;margin-bottom:11px}\n.payment dl{margin:0;font-size:11px}\n.payment dl>div{display:flex;justify-content:space-between;gap:15px;margin-top:7px}\n.payment dt{color:#687160}\n.payment dd{margin:0;text-align:right}\nfooter{margin-top:19px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:15px}\n@media(max-width:760px){\n.app-header{height:62px;padding:0 20px}\n.brand{font-size:23px}\n.workspace{font-size:11px;gap:7px}\nmain{padding:27px 20px 25px}\n.page-heading{gap:12px;margin-bottom:23px;align-items:flex-start;flex-wrap:wrap}\nh1{font-size:37px;letter-spacing:-1.2px}\n.intro{font-size:12px;margin-top:9px;max-width:270px}\n.edit{padding:7px 12px;font-size:12px}\n.layout{grid-template-columns:1fr;gap:20px}\n.invoice{padding:21px 18px}\nh2{font-size:25px}\n.parties{gap:14px;margin:22px 0}\n.parties dt{font-size:10px}\n.parties dd{font-size:12px}\n.secondary{font-size:10px}\n.project{padding:10px;gap:10px;margin-bottom:18px}\n.project svg{width:76px;height:46px}\n.project-title{font-size:12px}\n.project .secondary{font-size:10px}\ntd{padding:14px 0}\nth:nth-child(2),td:nth-child(2){width:35px}\nth:last-child,td:last-child{width:67px}\n.description{font-size:10px;padding-right:8px}\n.note{font-size:11px;margin-top:17px}\n.summary{padding:19px 20px 21px}\n.summary h2{margin-bottom:15px}\n.payment{margin-top:19px;padding-top:16px}\nfooter{font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"app-header\">\n<div class=\"brand\">Common<span>.</span></div>\n<div class=\"workspace\">Alder Cycle Co.</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<h1>Invoice review</h1>\n<p class=\"intro\">A final check before it leaves the workshop.</p>\n</div>\n<button class=\"edit\" type=\"button\">Edit invoice</button>\n</div>\n\n<div class=\"layout\">\n<article class=\"invoice\" aria-labelledby=\"invoice-title\">\n<div class=\"invoice-head\">\n<div>\n<p class=\"eyebrow\">Customer invoice</p>\n<h2 id=\"invoice-title\">Invoice #1048</h2>\n<p class=\"due\">Due 28 November</p>\n</div>\n<span class=\"status\">Draft</span>\n</div>\n\n<dl class=\"parties\">\n<div>\n<dt>Bill to</dt>\n<dd class=\"name\">Noah Tremblay</dd>\n<dd class=\"secondary\">noah.tremblay@example.com</dd>\n</div>\n<div>\n<dt>From</dt>\n<dd class=\"name\">Alder Cycle Co.</dd>\n<dd class=\"secondary\">Independent bike shop<br>Issued 14 November</dd>\n</div>\n</dl>\n\n<div class=\"project\">\n<svg viewBox=\"0 0 112 62\" fill=\"none\" role=\"img\" aria-label=\"Commuter bike with a 54 centimetre frame\">\n<circle cx=\"22\" cy=\"42\" r=\"17\" stroke=\"currentColor\" stroke-width=\"1.4\"/>\n<circle cx=\"91\" cy=\"42\" r=\"17\" stroke=\"currentColor\" stroke-width=\"1.4\"/>\n<path d=\"M22 42L39 15L55 42H22ZM39 15H76L55 42M72 8L91 42M72 8H83M35 10H46M39 10V15M55 42L63 46\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M45 5H66M45 2V8M66 2V8\" stroke=\"currentColor\" stroke-width=\".8\"/>\n</svg>\n<div>\n<p class=\"eyebrow\">Build brief · NT–24</p>\n<p class=\"project-title\">Everyday commuter</p>\n<p class=\"secondary\">54 cm frame · flat bar · 1×10 gearing</p>\n</div>\n</div>\n\n<table>\n<caption>Work &amp; services</caption>\n<thead>\n<tr><th scope=\"col\">Description</th><th scope=\"col\">Hours</th><th scope=\"col\">Amount</th></tr>\n</thead>\n<tbody>\n<tr>\n<td><div class=\"service\">Consulting</div><div class=\"description\">Fit &amp; custom build planning · $150/hr</div></td>\n<td>12</td><td>$1800</td>\n</tr>\n<tr>\n<td><div class=\"service\">Research</div><div class=\"description\">Frame &amp; component sourcing · $100/hr</div></td>\n<td>4</td><td>$400</td>\n</tr>\n</tbody>\n</table>\n<p class=\"note\"><strong>Note for Noah</strong>Thanks for trusting us with your daily ride. This invoice covers planning and research; parts and workshop labour are quoted separately.</p>\n</article>\n\n<aside class=\"summary\" aria-labelledby=\"summary-title\">\n<h2 id=\"summary-title\">Invoice summary</h2>\n<dl class=\"totals\">\n<div><dt>Subtotal</dt><dd>$2200</dd></div>\n<div><dt>Tax</dt><dd>$280</dd></div>\n<div class=\"total\"><dt>Total</dt><dd>$2480</dd></div>\n</dl>\n<button class=\"send\" type=\"button\">\n<span>Send invoice</span>\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10H16M11 4L17 10L11 16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</button>\n<p class=\"send-note\">Not sent yet. The invoice will be addressed to Noah Tremblay.</p>\n\n<section class=\"payment\" aria-labelledby=\"payment-title\">\n<h3 id=\"payment-title\">Payment details</h3>\n<p class=\"method\">Bank transfer · CAD</p>\n<dl>\n<div><dt>Account name</dt><dd>Alder Cycle Co.</dd></div>\n<div><dt>Account ending</dt><dd>4821</dd></div>\n<div><dt>Payment reference</dt><dd>1048</dd></div>\n<div><dt>Terms</dt><dd>Within 14 days</dd></div>\n</dl>\n</section>\n</aside>\n</div>\n<footer><span>All amounts in Canadian dollars.</span><span>Common / Invoices</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-4","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Rill. Include client Leila Haddad, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Rill</title>\n<style>\n:root{--ink:#213b30;--muted:#647169;--line:#dce2db;--paper:#fff;--wash:#f5f6f1;--green:#285940}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--wash);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input{font:inherit}\nbutton,a,input{ -webkit-tap-highlight-color:transparent}\nbutton{cursor:pointer}\nbutton:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #92b89e;outline-offset:3px}\nheader{height:76px;background:var(--paper);border-bottom:1px solid var(--line)}\n.header-inner{max-width:1184px;height:100%;padding:0 32px;margin:auto;display:flex;align-items:center;gap:32px}\n.brand{display:flex;align-items:center;gap:9px;font-size:27px;font-weight:750;letter-spacing:-1.3px}\n.brand svg{width:25px;height:28px;color:var(--green)}\n.workspace{border-left:1px solid var(--line);padding-left:25px;font-size:13px;color:var(--muted)}\nnav{display:flex;align-self:stretch;gap:24px;margin-left:auto}\nnav a{display:flex;align-items:center;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;padding:0 3px}\nnav a[aria-current]{color:var(--ink);border-color:var(--green)}\n.avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#e7ecdf;font-size:12px;font-weight:700}\nmain{max-width:1184px;margin:auto;padding:30px 32px 36px}\n.breadcrumb{display:flex;gap:10px;color:var(--muted);font-size:12px;margin-bottom:18px}\n.breadcrumb a{color:inherit;text-decoration:none}\n.page-title{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:24px}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0 0 8px;font-weight:650}\n.page-title p{margin:0;color:var(--muted)}\n.status{display:inline-flex;align-items:center;gap:7px;border:1px solid #d7ddce;background:#edf0e4;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:650;white-space:nowrap}\n.status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#7a8755}\n.review{display:grid;grid-template-columns:minmax(0,1fr) 320px;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.invoice{padding:28px 32px 24px;min-width:0}\n.invoice-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:23px;border-bottom:1px solid var(--line)}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}\nh2{font-size:20px;line-height:1.3;letter-spacing:-.35px;margin:0;font-weight:650}\n.due{font-size:13px;margin:4px 0 0;color:var(--muted)}\n.doc-icon{width:38px;height:44px;color:#78907b;flex:none}\n.parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:23px 0}\n.parties p{margin:0}\n.parties strong{font-weight:600}\n.secondary{font-size:12px;color:var(--muted);overflow-wrap:anywhere}\n.parties .eyebrow{margin-bottom:6px}\ntable{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}\ncaption{text-align:left;font-size:14px;font-weight:650;padding:6px 0 12px}\nthead{background:#f5f7f2;color:var(--muted);font-size:11px}\nth{padding:9px 12px;font-weight:600}\nth:last-child,td:last-child{text-align:right;width:100px}\ntd{padding:17px 0;border-bottom:1px solid var(--line);vertical-align:top}\ntd:first-child{padding-right:16px}\ntd:last-child{font-variant-numeric:tabular-nums;font-weight:550}\n.item{font-weight:600;margin-bottom:4px}\n.description{max-width:380px;font-size:12px;line-height:1.55;color:var(--muted)}\n.totals{margin:14px 0 0 auto;max-width:300px}\n.totals div{display:flex;justify-content:space-between;gap:16px;padding:5px 0}\n.totals dt{color:var(--muted)}\n.totals dd{margin:0;font-variant-numeric:tabular-nums}\n.totals .total{border-top:1px solid var(--line);margin-top:11px;padding-top:14px;align-items:baseline}\n.total dt{font-size:16px;font-weight:650;color:var(--ink)}\n.total dd{font-size:27px;line-height:1.2;font-weight:650;letter-spacing:-.7px}\n.invoice-note{border-top:1px solid var(--line);margin:23px 0 0;padding-top:16px;color:var(--muted);font-size:12px}\naside{border-left:1px solid var(--line);background:#fbfcf8;padding:29px 24px 24px;min-width:0}\naside h2{font-size:16px;margin-bottom:8px;letter-spacing:0}\n.intro{color:var(--muted);font-size:12px;margin:0 0 20px}\n.payment{margin:0}\n.payment div{padding:11px 0;border-bottom:1px solid var(--line)}\n.payment dt{color:var(--muted);font-size:12px;margin-bottom:3px}\n.payment dd{margin:0;font-size:13px;font-weight:550;overflow-wrap:anywhere}\n.payment .bank{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}\n.send{margin-top:26px}\n.send h2{margin-bottom:16px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\ninput{width:100%;min-width:0;min-height:44px;border:1px solid #cbd4ca;border-radius:5px;padding:10px 11px;background:white;color:var(--ink);font-size:13px}\n.send button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;width:100%;border:1px solid var(--green);border-radius:5px;background:var(--green);color:#fff;font-weight:600;margin-top:16px}\n.send button:hover{background:#204b35}\n.send svg{width:16px;height:16px}\n.send-note{color:var(--muted);font-size:11px;line-height:1.6;margin:10px 0 0}\nfooter{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;margin-top:17px}\n@media(max-width:800px){\n.header-inner{padding:0 20px;gap:20px}.workspace{display:none}\nmain{padding:25px 20px}.review{grid-template-columns:minmax(0,1fr)}\naside{border-left:0;border-top:1px solid var(--line);padding:24px}\n.payment{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}\n.send{border-top:1px solid var(--line);padding-top:22px;margin-top:20px}\n}\n@media(max-width:480px){\nheader{height:62px}.header-inner{padding:0 18px;gap:18px}\n.brand{font-size:25px}nav{gap:12px}nav a{font-size:13px}nav a:not([aria-current]){display:none}\n.avatar{width:32px;height:32px}\nmain{padding:20px 14px 24px}.breadcrumb{margin-bottom:16px}\nh1{font-size:27px}.page-title{margin-bottom:20px;gap:10px;align-items:flex-start}\n.page-title p{font-size:12px;max-width:245px}.status{margin-top:3px;padding:4px 9px}\n.invoice{padding:21px 18px}.invoice-heading{padding-bottom:18px}\nh2{font-size:19px}.parties{gap:14px;padding:19px 0}\n.parties strong{font-size:13px}.parties .secondary{font-size:11px}\nth:last-child,td:last-child{width:78px}th{padding:8px}\ntd{padding:14px 0}.description{font-size:12px}.totals{max-width:100%;margin-top:12px}\n.invoice-note{margin-top:19px;padding-top:13px}\naside{padding:21px 18px}.intro{margin-bottom:10px}\n.payment{column-gap:16px}.payment dd{font-size:12px}\n.send{padding-top:19px}.send h2{margin-bottom:12px}\nfooter{padding:0 4px;display:block}footer span{display:block;margin-top:4px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\" aria-label=\"Rill\">\n<svg viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 3v12c0 7 5 13 12 14M13 3v11c0 3 2 6 6 6h5M22 3v8\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\"/></svg>\nRill\n</div>\n<div class=\"workspace\">Community food co-op</div>\n<nav aria-label=\"Main navigation\">\n<a href=\"#invoice\" aria-current=\"page\">Invoices</a>\n<a href=\"#member\">Members</a>\n</nav>\n<div class=\"avatar\" aria-label=\"Account: Maya Chen\">MC</div>\n</div>\n</header>\n<main id=\"invoice\">\n<div class=\"breadcrumb\"><a href=\"#invoice\">Invoices</a><span aria-hidden=\"true\">/</span><span>1048</span></div>\n<div class=\"page-title\">\n<div><h1>Invoice review</h1><p>A final check before sharing with your co-op member.</p></div>\n<span class=\"status\">Draft</span>\n</div>\n<div class=\"review\">\n<section class=\"invoice\" aria-labelledby=\"invoice-title\">\n<div class=\"invoice-heading\">\n<div><p class=\"eyebrow\">Member invoice</p><h2 id=\"invoice-title\">Invoice #1048</h2><p class=\"due\">Due 28 November</p></div>\n<svg class=\"doc-icon\" viewBox=\"0 0 38 44\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 2h15l9 9v30H6V4a2 2 0 0 1 2-2Z\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M22 2v10h10M12 21h14M12 27h14M12 33h8\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n</div>\n<div class=\"parties\">\n<div id=\"member\"><p class=\"eyebrow\">Bill to</p><p><strong>Leila Haddad</strong></p><p class=\"secondary\">leila.haddad@example.com</p></div>\n<div><p class=\"eyebrow\">From</p><p><strong>Rill Community Food Co-op</strong></p><p class=\"secondary\">Member services</p></div>\n</div>\n<table>\n<caption>Services &amp; fees</caption>\n<thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td><div class=\"item\">Consulting</div><div class=\"description\">Shared member purchasing, local grower coordination and seasonal pantry planning support</div></td><td>$1800</td></tr>\n<tr><td><div class=\"item\">Research</div><div class=\"description\">Local supplier and seasonal produce sourcing</div></td><td>$400</td></tr>\n</tbody>\n</table>\n<dl class=\"totals\">\n<div><dt>Subtotal</dt><dd>$2200</dd></div>\n<div><dt>Tax</dt><dd>$280</dd></div>\n<div class=\"total\"><dt>Total</dt><dd>$2480</dd></div>\n</dl>\n<p class=\"invoice-note\">Thank you for helping build a stronger local food network.</p>\n</section>\n<aside aria-label=\"Payment and delivery\">\n<section aria-labelledby=\"payment-title\">\n<h2 id=\"payment-title\">Payment details</h2>\n<p class=\"intro\">Included on the invoice so members know how to pay.</p>\n<dl class=\"payment\">\n<div><dt>Payment method</dt><dd>Bank transfer</dd></div>\n<div><dt>Payable to</dt><dd>Rill Community Food Co-op</dd></div>\n<div><dt>Bank account</dt><dd>Account ending 8042<span class=\"bank\">Community Credit Union</span></dd></div>\n<div><dt>Payment reference</dt><dd>Invoice #1048</dd></div>\n</dl>\n</section>\n<form class=\"send\" aria-labelledby=\"send-title\">\n<h2 id=\"send-title\">Share with your member</h2>\n<label for=\"recipient\">Send to</label>\n<input id=\"recipient\" name=\"recipient\" type=\"email\" value=\"leila.haddad@example.com\" autocomplete=\"email\">\n<button type=\"button\">Send invoice <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 10h12m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n<p class=\"send-note\">Not sent yet. This invoice remains a draft until you send it.</p>\n</form>\n</aside>\n</div>\n<footer><span>Rill · Community-led, locally grown.</span><span>All amounts in USD</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-5","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for North. Include client Jules Martin, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · North</title>\n<style>\n:root{color-scheme:light;--bg:#f4f1eb;--paper:#fffefa;--ink:#26392f;--text:#303630;--muted:#70746c;--line:#e1e1d7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input{font:inherit}\n.topbar{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}\n.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:24px;font-weight:750;letter-spacing:-1px}\n.mark{display:grid;place-items:center;width:32px;height:34px;background:var(--ink);color:var(--paper);border-radius:5px;font-size:22px;font-family:Georgia,serif;font-weight:400}\n.workspace{display:flex;align-items:center;gap:12px;font-size:13px}\n.avatar{display:grid;place-items:center;width:32px;height:32px;border:1px solid #d1d5c8;border-radius:50%;font-size:11px;font-weight:650;background:#e7e9df}\nmain{max-width:1072px;margin:0 auto;padding:38px 24px 24px}\n.breadcrumb{color:var(--muted);font-size:12px;margin-bottom:22px}\n.breadcrumb span{margin:0 9px;color:#a3a69b}\n.heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:36px;line-height:1.15;font-weight:400;letter-spacing:-1px;margin:0 0 8px;color:var(--ink)}\n.heading p{margin:0;color:var(--muted)}\n.status{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;background:#eae7dc;border:1px solid #ded9c9;border-radius:30px;font-size:12px;font-weight:600;white-space:nowrap}\n.status::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#88784c}\n.review{display:grid;grid-template-columns:minmax(0,1fr) 310px;background:var(--paper);border:1px solid #dcddd2;border-radius:10px;box-shadow:0 3px 10px #26392f04;overflow:hidden}\n.invoice{padding:30px 32px}\n.invoice-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:26px}\nh2{font-size:20px;line-height:1.3;letter-spacing:-.4px;margin:0;color:var(--ink)}\n.document-type{font-size:10px;letter-spacing:1.4px;font-weight:650;color:var(--muted);margin:0 0 7px}\n.due{font-size:12px;white-space:nowrap;background:#f2f3ec;padding:6px 9px;border-radius:4px;margin-top:20px}\n.parties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}\n.label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}\n.parties p{margin:0;font-size:13px}\n.parties strong{font-weight:600}\ntable{border-collapse:collapse;width:100%;font-size:14px}\nth{text-align:left;color:var(--muted);font-size:11px;font-weight:500;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}\ntd{padding:16px 0;border-bottom:1px solid #eeeee6;vertical-align:top}\ntd:first-child{padding-right:12px}\n.service{display:block;font-weight:600;margin-bottom:3px}\n.description{display:block;font-size:12px;color:var(--muted)}\ntfoot td{border:0;padding:7px 0;font-size:13px}\ntfoot tr:first-child td{padding-top:18px}\ntfoot .total td{padding-top:13px;font-size:18px;color:var(--ink);font-weight:650}\n.currency{font-weight:400;font-size:10px;color:var(--muted);margin-right:7px}\n.invoice-note{font-size:12px;color:var(--muted);margin:25px 0 0;max-width:330px}\n.details{padding:30px 24px;background:#f9f9f3;border-left:1px solid var(--line)}\nh3{font-size:13px;font-weight:650;color:var(--ink);margin:0 0 16px}\nlabel{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}\ninput{width:100%;min-width:0;padding:9px 10px;border:1px solid #d5d9cd;background:var(--paper);color:var(--text);border-radius:5px;font-size:12px;outline-offset:3px}\n.delivery-note{margin:8px 0 25px;font-size:11px;color:var(--muted)}\n.payment{padding-top:21px;border-top:1px solid var(--line)}\ndl{margin:0;display:grid;gap:15px}\ndt{font-size:11px;color:var(--muted);margin-bottom:2px}\ndd{margin:0;font-size:12px}\n.bank{display:block;color:var(--muted);font-size:11px;margin-top:2px}\n.reference{font-variant-numeric:tabular-nums;letter-spacing:.4px}\n.actionbar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 26px;border-top:1px solid var(--line)}\n.actionbar p{margin:0;font-size:12px;color:var(--muted);max-width:360px}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:1px solid var(--ink);border-radius:5px;background:var(--ink);color:white;padding:12px 19px;font-weight:600;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#374d3f}\nbutton:focus-visible,input:focus-visible{outline:3px solid #839b73;outline-offset:3px}\nbutton span{font-size:17px;font-weight:400;line-height:1}\n.updated{font-size:11px;color:var(--muted);text-align:right;margin:13px 2px 0}\n@media(max-width:700px){\n.topbar{height:61px;padding:0 20px}\n.brand{font-size:22px}\n.mark{width:28px;height:30px;font-size:20px}\n.workspace{font-size:11px;gap:8px}\n.workspace .workspace-name{max-width:120px;line-height:1.3;text-align:right}\n.avatar{width:28px;height:28px}\nmain{padding:23px 16px 18px}\n.breadcrumb{display:none}\n.heading{margin-bottom:19px;align-items:flex-start;gap:10px}\nh1{font-size:29px;margin-bottom:6px}\n.heading p{font-size:11px;max-width:240px}\n.status{font-size:11px;padding:5px 9px;margin-top:4px}\n.review{grid-template-columns:minmax(0,1fr);border-radius:8px}\n.invoice{padding:20px 18px}\n.invoice-head{margin-bottom:18px;gap:7px}\nh2{font-size:18px}\n.document-type{font-size:9px;margin-bottom:5px}\n.due{font-size:10px;margin-top:19px;padding:5px 7px}\n.parties{margin-bottom:18px;gap:12px}\n.parties p{font-size:12px}\nth{padding:8px 0;font-size:10px}\ntd{padding:12px 0;font-size:13px}\n.description{font-size:11px}\ntfoot td{padding:5px 0;font-size:12px}\ntfoot tr:first-child td{padding-top:12px}\ntfoot .total td{font-size:18px;padding-top:9px}\n.invoice-note{display:none}\n.details{padding:17px 18px;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:15px}\nh3{margin-bottom:10px;font-size:12px}\nlabel{font-size:11px}\ninput{font-size:12px;padding:8px 10px}\n.delivery-note{display:none}\n.payment{padding-top:14px}\ndl{grid-template-columns:1fr 1fr;gap:10px 16px}\ndt{font-size:10px}\ndd{font-size:11px}\n.bank{font-size:10px}\n.actionbar{padding:17px 18px;gap:14px}\n.actionbar p{font-size:11px;line-height:1.5;max-width:170px}\nbutton{padding:11px 13px;font-size:12px;gap:10px}\n.updated{font-size:10px;margin-top:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\">N</span>North</div>\n<div class=\"workspace\"><span class=\"workspace-name\">Common Ground Food Co-op</span><span class=\"avatar\" aria-label=\"Maya Chen\">MC</span></div>\n</header>\n<main>\n<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">Finances<span aria-hidden=\"true\">/</span>Invoices<span aria-hidden=\"true\">/</span>Review</nav>\n<div class=\"heading\">\n<div><h1>Invoice review</h1><p>A final check before sharing with your co-op partner.</p></div>\n<span class=\"status\">Draft</span>\n</div>\n<section class=\"review\" aria-label=\"Invoice and delivery details\">\n<article class=\"invoice\" aria-labelledby=\"invoice-title\">\n<header class=\"invoice-head\">\n<div><p class=\"document-type\">MEMBER SERVICES</p><h2 id=\"invoice-title\">Invoice #1048</h2></div>\n<span class=\"due\">Due 28 November</span>\n</header>\n<div class=\"parties\">\n<div><span class=\"label\">Bill to</span><p><strong>Jules Martin</strong></p></div>\n<div><span class=\"label\">Issued</span><p>14 November</p></div>\n</div>\n<table aria-label=\"Invoice line items and total in US dollars\">\n<thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount · USD</th></tr></thead>\n<tbody>\n<tr><td><span class=\"service\">Consulting</span><span class=\"description\">Seasonal co-op purchasing plan</span></td><td>$1800</td></tr>\n<tr><td><span class=\"service\">Research</span><span class=\"description\">Local grower sourcing &amp; outreach</span></td><td>$400</td></tr>\n</tbody>\n<tfoot>\n<tr><td>Subtotal</td><td>$2200</td></tr>\n<tr><td>Tax</td><td>$280</td></tr>\n<tr class=\"total\"><td>Total</td><td><span class=\"currency\">USD</span>$2480</td></tr>\n</tfoot>\n</table>\n<p class=\"invoice-note\">Thank you for helping build a stronger, more connected local food system.</p>\n</article>\n<aside class=\"details\" aria-label=\"Delivery and payment\">\n<section>\n<h3>Delivery</h3>\n<label for=\"recipient\">Recipient email</label>\n<input id=\"recipient\" name=\"recipient\" type=\"email\" value=\"jules.martin@example.com\" autocomplete=\"email\">\n<p class=\"delivery-note\">Sent on behalf of Common Ground Food Co-op.</p>\n</section>\n<section class=\"payment\" aria-labelledby=\"payment-title\">\n<h3 id=\"payment-title\">Payment details</h3>\n<dl>\n<div><dt>Payment method</dt><dd>Bank transfer · USD</dd></div>\n<div><dt>Payable to</dt><dd>Common Ground Food Co-op</dd></div>\n<div><dt>Receiving account</dt><dd>Account ending 4182<span class=\"bank\">Community Credit Union</span></dd></div>\n<div><dt>Payment reference</dt><dd class=\"reference\">INV-1048</dd></div>\n</dl>\n</section>\n</aside>\n<footer class=\"actionbar\">\n<p id=\"send-hint\">Jules will receive a PDF invoice with these payment details.</p>\n<button type=\"button\" aria-describedby=\"send-hint\">Send invoice <span aria-hidden=\"true\">↗</span></button>\n</footer>\n</section>\n<p class=\"updated\">Last updated today at 09:42 by Maya Chen</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-6","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Alder. Include client Emilia Santos, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Alder</title>\n<style>\n:root{color-scheme:light;--bg:#f2f5f7;--paper:#fff;--ink:#24353e;--muted:#63727c;--line:#dce3e7;--accent:#17665e;--soft:#eaf3f0}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\nbutton:focus-visible,a:focus-visible{outline:3px solid #72aba4;outline-offset:4px}\n.topbar{height:76px;background:var(--paper);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1160px;height:100%;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1px}\n.brand-mark{width:32px;height:34px;display:grid;place-items:center;background:var(--accent);border-radius:9px;color:white}\n.workspace{text-align:right;font-size:13px;font-weight:600}\n.workspace small{display:block;color:var(--muted);font-size:11px;font-weight:400}\nmain{max-width:1160px;margin:auto;padding:32px}\n.breadcrumb{color:var(--muted);font-size:12px;margin-bottom:15px;display:flex;gap:9px;align-items:center}\n.breadcrumb a{color:var(--muted);text-decoration:none}\n.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}\nh1{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:0 0 7px;font-weight:650}\n.heading p{margin:0;color:var(--muted);font-size:13px}\n.status{text-align:right}\n.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid #d6dee3;background:#edf1f4;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600;color:#52616b}\n.dot{height:6px;width:6px;border-radius:50%;background:#7b8992}\n.status small{display:block;color:var(--muted);font-size:11px;margin-top:5px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:start;gap:24px}\n.invoice{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.invoice-body{padding:28px 30px 24px}\n.invoice-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:23px;border-bottom:1px solid var(--line)}\nh2{font-size:21px;letter-spacing:-.5px;margin:0 0 5px;font-weight:650}\n.invoice-header p{margin:0;color:var(--muted);font-size:12px}\n.invoice-number{font-size:10px;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase;margin:0 0 6px}\n.due{font-size:12px;background:var(--soft);color:var(--accent);border-radius:5px;padding:6px 9px;white-space:nowrap;font-weight:600}\n.recipient{padding:22px 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px}\n.label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;margin:0 0 7px}\n.recipient strong{font-weight:600;font-size:15px}\n.recipient p:not(.label){font-size:12px;color:var(--muted);margin:3px 0 0;overflow-wrap:anywhere}\ntable{border-collapse:collapse;width:100%;font-size:14px}\nth{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:var(--muted);padding:10px 0;background:#f6f8f9;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\nth:first-child{padding-left:10px}\nth:last-child{padding-right:10px}\ntd{padding:14px 0;border-bottom:1px solid #e9eef0}\nth:last-child,td:last-child{text-align:right;font-variant-numeric:tabular-nums;width:95px}\ntd small{display:block;font-size:11px;color:var(--muted);margin-top:2px}\n.totals{width:235px;max-width:100%;margin:14px 0 22px auto}\n.totals div{display:flex;justify-content:space-between;gap:20px;padding:4px 0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}\n.totals .total{border-top:1px solid var(--line);margin-top:9px;padding-top:13px;color:var(--ink);align-items:center;font-size:15px;font-weight:650}\n.total strong{font-size:27px;letter-spacing:-.7px}\n.total small{font-size:10px;font-weight:500;color:var(--muted);margin-right:7px}\n.payment{background:#f6f8f9;border:1px solid #e5eaed;border-radius:7px;padding:15px 17px}\n.payment h3{margin:0 0 9px;font-size:12px;font-weight:650}\n.payment dl{display:grid;grid-template-columns:1fr auto;gap:5px 14px;margin:0;font-size:11px}\ndt{color:var(--muted)}\ndd{margin:0;text-align:right}\n.actions{border-top:1px solid var(--line);padding:18px 30px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#fcfdfd}\n.actions p{font-size:11px;color:var(--muted);margin:0;max-width:185px}\n.buttons{display:flex;gap:10px;flex-shrink:0}\nbutton{border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);padding:10px 14px;font-size:12px;font-weight:600;cursor:pointer;min-height:40px}\n.primary{background:var(--accent);border-color:var(--accent);color:white;display:flex;align-items:center;gap:10px}\nbutton:hover{filter:brightness(.96)}\naside{display:grid;gap:20px}\n.context{padding:3px 0 0}\n.context h2,.attachments h2{font-size:13px;letter-spacing:0;margin:0;font-weight:650}\n.context p{font-size:12px;color:var(--muted);margin:9px 0 0;line-height:1.7}\n.context .category{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:650;margin:0 0 7px}\n.attachments{border:1px solid var(--line);background:#f9fbfc;border-radius:9px;padding:18px}\n.section-title{display:flex;justify-content:space-between;align-items:center}\n.count{font-size:11px;color:var(--muted);background:#e9eef1;border-radius:4px;padding:1px 6px}\n.empty{text-align:center;padding:24px 0 5px}\n.empty svg{color:#8899a3;margin-bottom:10px}\n.empty strong{display:block;font-size:12px;font-weight:600}\n.empty p{font-size:12px;line-height:1.7;color:var(--muted);margin:7px 0 0}\n.footnote{font-size:11px;color:var(--muted);margin:16px 2px 0;display:flex;align-items:center;gap:7px}\n@media(max-width:760px){\n.topbar{height:64px}.topbar-inner{padding:0 18px}.workspace{font-size:11px}.workspace small{display:none}\nmain{padding:20px 16px 28px}.breadcrumb{margin-bottom:14px}.heading{margin-bottom:20px;gap:10px}h1{font-size:26px}.heading p{font-size:12px}.status small{font-size:10px}\n.layout{grid-template-columns:1fr;gap:22px}.invoice-body{padding:20px}.invoice-header{gap:10px;padding-bottom:18px}h2{font-size:18px}.due{font-size:10px;padding:6px 7px}.invoice-header p{font-size:11px}\n.recipient{padding:18px 0;gap:14px}.recipient strong{font-size:14px}.recipient p:not(.label){font-size:11px}\ntd{padding:12px 0}.totals{margin-bottom:18px}.payment{padding:13px}.payment dl{font-size:10px;gap:6px 10px}\n.actions{padding:16px 20px;flex-direction:column;align-items:stretch;gap:12px}.actions p{max-width:none;text-align:center}.buttons{display:grid;grid-template-columns:1fr 1.25fr}.primary{justify-content:center}\naside{gap:16px}.context{padding:0 4px}.context p{margin-top:5px}.attachments{padding:16px}.empty{padding:17px 0 4px}.empty p{max-width:280px;margin:7px auto 0}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\"><span class=\"brand-mark\" aria-hidden=\"true\"><svg width=\"23\" height=\"25\" viewBox=\"0 0 24 26\" fill=\"none\"><path d=\"M12 23V11M12 16C5 16 3 11 4 5c6 0 9 4 8 11ZM12 11c0-6 4-9 9-9 0 6-3 10-9 9Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></span>Alder</div>\n<div class=\"workspace\">Northside Food Co-op<small>Member-owned. Community-led.</small></div>\n</div>\n</header>\n<main>\n<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><a href=\"#invoice\">Invoices</a><span aria-hidden=\"true\">/</span><span>Review</span></nav>\n<div class=\"heading\">\n<div><h1>Invoice review</h1><p>1 invoice · 2 line items</p></div>\n<div class=\"status\"><span class=\"badge\"><span class=\"dot\"></span>Draft</span><small>Not yet sent</small></div>\n</div>\n<div class=\"layout\">\n<section class=\"invoice\" id=\"invoice\" aria-labelledby=\"invoice-title\">\n<div class=\"invoice-body\">\n<header class=\"invoice-header\">\n<div><div class=\"invoice-number\">Northside Food Co-op</div><h2 id=\"invoice-title\">Invoice #1048</h2><p>Issued 14 November · USD</p></div>\n<span class=\"due\">Due 28 November</span>\n</header>\n<div class=\"recipient\">\n<div><p class=\"label\">Bill to</p><strong>Emilia Santos</strong><p>Community outreach coordinator</p></div>\n<div><p class=\"label\">Project</p><strong>Food access programme</strong><p>Autumn planning &amp; member research</p></div>\n</div>\n<table aria-label=\"Invoice line items\">\n<thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td>Consulting<small>Community food access planning</small></td><td>$1800</td></tr>\n<tr><td>Research<small>Member needs &amp; local food supply</small></td><td>$400</td></tr>\n</tbody>\n</table>\n<div class=\"totals\">\n<div><span>Subtotal</span><span>$2200</span></div>\n<div><span>Tax</span><span>$280</span></div>\n<div class=\"total\"><span>Total</span><span><small>USD</small><strong>$2480</strong></span></div>\n</div>\n<section class=\"payment\" aria-labelledby=\"payment-title\">\n<h3 id=\"payment-title\">Payment details</h3>\n<dl>\n<dt>Method</dt><dd>Bank transfer · Net 14</dd>\n<dt>Payable to</dt><dd>Northside Food Co-op</dd>\n<dt>Bank account</dt><dd>Community Credit Union · •••• 2841</dd>\n<dt>Payment reference</dt><dd>Invoice #1048</dd>\n</dl>\n</section>\n</div>\n<footer class=\"actions\">\n<p>Review the details before sending to Emilia.</p>\n<div class=\"buttons\"><button type=\"button\">Edit invoice</button><button type=\"button\" class=\"primary\">Send invoice <span aria-hidden=\"true\">→</span></button></div>\n</footer>\n</section>\n<aside aria-label=\"Additional invoice information\">\n<section class=\"context\">\n<p class=\"category\">Community services</p>\n<h2>Supporting better food access</h2>\n<p>Planning and research to help the co-op understand member needs and strengthen its local food network.</p>\n</section>\n<section class=\"attachments\" aria-labelledby=\"attachments-title\">\n<div class=\"section-title\"><h2 id=\"attachments-title\">Attachments</h2><span class=\"count\" aria-label=\"0 attachments\">0</span></div>\n<div class=\"empty\">\n<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 2h10l7 7v21H6V2Z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"/><path d=\"M16 2v8h7M10 17h9M10 22h6\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"/></svg>\n<strong>No supporting files</strong>\n<p>No research notes or timesheets are attached. They’re optional; this invoice can be sent without them.</p>\n</div>\n</section>\n</aside>\n</div>\n<p class=\"footnote\"><span aria-hidden=\"true\">○</span> Draft invoices are not visible to the client.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-7","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Morrow. Include client Kai Nguyen, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Morrow</title>\n<style>\n:root{--ink:#243c31;--muted:#69756c;--line:#d8ded4;--paper:#fbfcf7;--wash:#eef1e8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--wash);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\nbutton,a,input{outline-offset:4px}\na{color:inherit;text-decoration:none}\nbutton{cursor:pointer}\n.topbar{height:80px;background:var(--paper);border-bottom:1px solid var(--line);padding:0 40px;display:flex;align-items:center;gap:38px}\n.brand{font-size:27px;font-weight:650;letter-spacing:-1.4px}\n.workspace{border-left:1px solid var(--line);padding-left:28px;font-size:13px;line-height:1.4}\n.workspace span{display:block;color:var(--muted);font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}\nnav{margin-left:auto;display:flex;align-items:center;gap:28px;height:100%}\nnav a{height:100%;display:flex;align-items:center;color:var(--muted);border-bottom:2px solid transparent}\nnav a[aria-current]{color:var(--ink);border-color:var(--ink)}\n.avatar{width:34px;height:34px;border-radius:50%;background:var(--wash);display:grid;place-items:center;font-size:11px;font-weight:650}\nmain{max-width:1140px;margin:0 auto;padding:34px 32px 46px}\n.back{font-size:12px;color:var(--muted);display:inline-block;margin-bottom:22px}\n.back span{margin-right:8px}\n.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px}\nh1{font-size:34px;font-weight:550;letter-spacing:-1.3px;line-height:1.2;margin:0 0 8px}\n.page-heading p{margin:0;color:var(--muted);font-size:13px}\n.status{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--line);border-radius:20px;background:var(--paper);font-size:12px;margin-top:5px}\n.status::before{content:\"\";height:6px;width:6px;border-radius:50%;background:var(--ink)}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}\n.invoice{background:var(--paper);border:1px solid var(--line);padding:30px 32px 25px}\n.invoice-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid var(--line)}\n.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 6px;font-weight:600}\nh2{font-size:23px;font-weight:550;letter-spacing:-.65px;margin:0;line-height:1.25}\n.due{font-size:12px;white-space:nowrap;margin-top:25px}\n.parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 0 25px}\n.parties p{margin:0}\n.parties .name{font-size:15px;font-weight:550;line-height:1.5}\n.parties .detail{font-size:12px;color:var(--muted);margin-top:3px}\ntable{width:100%;border-collapse:collapse;text-align:left}\nth{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--line)}\ntd{padding:16px 0;vertical-align:top;border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right;white-space:nowrap;padding-left:16px;font-variant-numeric:tabular-nums}\n.item{font-weight:550}\n.item-note{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:3px;max-width:280px}\n.totals{width:58%;margin:17px 0 0 auto}\n.totals div{display:flex;justify-content:space-between;gap:18px;padding:4px 0;font-size:13px}\n.totals dt,.totals dd{margin:0}\n.totals dd{font-variant-numeric:tabular-nums}\n.totals .total{font-size:20px;font-weight:600;letter-spacing:-.3px;border-top:1px solid var(--line);margin-top:10px;padding-top:13px}\n.payment{margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}\nh3{font-size:13px;font-weight:650;margin:0 0 10px}\n.payment-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}\n.payment p{margin:0;font-size:12px}\n.payment .secondary{color:var(--muted);margin-top:3px;font-size:11px}\n.side-card{background:var(--paper);border:1px solid var(--line);padding:23px}\n.side-card h2{font-size:17px;letter-spacing:-.3px;margin-bottom:19px}\nlabel{display:block;font-size:12px;font-weight:550;margin-bottom:7px}\ninput{display:block;width:100%;min-width:0;border:1px solid #b9c4b7;border-radius:4px;background:var(--paper);padding:10px 11px;color:var(--ink);font-size:13px}\n.hint{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0 19px}\n.delivery-meta{margin:0;padding-top:17px;border-top:1px solid var(--line)}\n.delivery-meta div{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:12px}\n.delivery-meta dt{color:var(--muted)}\n.delivery-meta dd{margin:0;text-align:right}\n.actions{margin-top:21px}\n.primary,.secondary-button{width:100%;border-radius:4px;padding:12px 16px;font-size:13px;font-weight:600}\n.primary{background:var(--ink);border:1px solid var(--ink);color:var(--paper)}\n.primary:hover{background:#365343}\n.secondary-button{border:1px solid var(--line);background:transparent;color:var(--ink);margin-top:9px}\n.send-total{display:none}\n.progress{padding:24px 14px 0}\n.progress h3{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:10px}\n.progress svg{display:block;width:100%;height:auto;color:var(--ink)}\n.progress p{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0 0}\n@media(max-width:800px){\n.topbar{padding:0 24px;gap:23px}\n.workspace{padding-left:20px}\nnav{gap:18px}\nnav a:not([aria-current]){display:none}\nmain{padding:28px 24px 40px}\n.layout{grid-template-columns:minmax(0,1fr) 270px;gap:16px}\n.invoice{padding:24px}\n.invoice-top{display:block}\n.due{margin-top:9px}\n}\n@media(max-width:640px){\n.topbar{height:68px;padding:0 20px;gap:20px}\n.brand{font-size:25px}\n.workspace{border:0;padding:0;font-size:11px;max-width:165px}\n.workspace span{font-size:9px}\nnav{margin-left:auto}\nnav a{display:none!important}\n.avatar{width:30px;height:30px;font-size:10px}\nmain{padding:22px 16px 122px}\n.back{margin-bottom:18px}\n.page-heading{margin-bottom:22px;gap:8px}\nh1{font-size:28px;letter-spacing:-1px}\n.page-heading p{font-size:12px;max-width:245px}\n.status{padding:4px 10px;font-size:11px;margin-top:3px}\n.layout{display:block}\n.invoice{padding:22px 20px}\n.invoice-top{display:flex;align-items:flex-start;padding-bottom:19px;gap:10px}\nh2{font-size:20px}\n.due{font-size:10px;margin-top:25px}\n.parties{gap:18px;padding:20px 0 23px;grid-template-columns:.9fr 1.1fr}\n.parties .name{font-size:13px}\n.parties .detail{font-size:11px;overflow-wrap:anywhere}\ntd{padding:14px 0;font-size:13px}\n.item-note{font-size:11px}\n.totals{width:68%}\n.payment{margin-top:23px}\n.payment-grid{gap:14px;grid-template-columns:1.2fr 1fr}\n.payment p{font-size:11px}\n.side-card{margin-top:16px;padding:20px}\n.side-card h2{margin-bottom:15px}\n.delivery-meta{margin-bottom:0}\n.actions{margin:0}\n.send-bar{position:fixed;z-index:2;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid var(--line);padding:14px 20px calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:24px}\n.send-total{display:block;min-width:80px;line-height:1.3}\n.send-total span{display:block;font-size:10px;color:var(--muted)}\n.send-total strong{font-size:20px;font-weight:600;letter-spacing:-.4px}\n.primary{flex:1}\n.secondary-button{margin-top:14px}\n.progress{padding:22px 20px 0}\n.progress svg{max-width:260px}\n.progress p{max-width:310px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<a class=\"brand\" href=\"#\" aria-label=\"Morrow home\">morrow</a>\n<div class=\"workspace\"><span>Your workspace</span>Cedar &amp; Common Food Co-op</div>\n<nav aria-label=\"Main navigation\">\n<a href=\"#\">Overview</a>\n<a href=\"#\">Members</a>\n<a href=\"#\" aria-current=\"page\">Invoices</a>\n<div class=\"avatar\" aria-label=\"Account: Alex Rivera\">AR</div>\n</nav>\n</header>\n<main id=\"review\">\n<a class=\"back\" href=\"#\"><span aria-hidden=\"true\">←</span>All invoices</a>\n<div class=\"page-heading\">\n<div>\n<h1>Invoice review</h1>\n<p>One last look before sharing with your member.</p>\n</div>\n<span class=\"status\">Draft</span>\n</div>\n<div class=\"layout\">\n<article class=\"invoice\" aria-labelledby=\"invoice-number\">\n<header class=\"invoice-top\">\n<div><p class=\"eyebrow\">Member invoice</p><h2 id=\"invoice-number\">Invoice #1048</h2></div>\n<p class=\"due\">Due 28 November</p>\n</header>\n<div class=\"parties\">\n<section aria-labelledby=\"bill-to\">\n<p class=\"eyebrow\" id=\"bill-to\">Bill to</p>\n<p class=\"name\">Kai Nguyen</p>\n<p class=\"detail\">Co-op member · #0274</p>\n</section>\n<section aria-labelledby=\"from\">\n<p class=\"eyebrow\" id=\"from\">From</p>\n<p class=\"name\">Cedar &amp; Common<br>Food Co-op</p>\n<p class=\"detail\">Community-owned, locally rooted</p>\n</section>\n</div>\n<table aria-label=\"Invoice line items\">\n<thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td><span class=\"item\">Consulting</span><span class=\"item-note\">Seasonal buying plans &amp; member-led purchasing</span></td><td>$1800</td></tr>\n<tr><td><span class=\"item\">Research</span><span class=\"item-note\">Local grower pricing review</span></td><td>$400</td></tr>\n</tbody>\n</table>\n<dl class=\"totals\">\n<div><dt>Subtotal</dt><dd>$2200</dd></div>\n<div><dt>Tax</dt><dd>$280</dd></div>\n<div class=\"total\"><dt>Total</dt><dd>$2480</dd></div>\n</dl>\n<section class=\"payment\" aria-labelledby=\"payment-title\">\n<h3 id=\"payment-title\">Payment details</h3>\n<div class=\"payment-grid\">\n<div><p>Bank transfer</p><p class=\"secondary\">Community Credit Union<br>Account ending 4821</p></div>\n<div><p>Reference: #1048</p><p class=\"secondary\">Please include this reference<br>with your payment.</p></div>\n</div>\n</section>\n</article>\n<aside aria-label=\"Review and send\">\n<section class=\"side-card\">\n<h2>Delivery details</h2>\n<label for=\"recipient\">Recipient email</label>\n<input id=\"recipient\" type=\"email\" value=\"kai.nguyen@example.com\" autocomplete=\"email\" aria-describedby=\"delivery-hint\">\n<p class=\"hint\" id=\"delivery-hint\">Includes a PDF invoice and bank transfer details for Kai’s records.</p>\n<dl class=\"delivery-meta\">\n<div><dt>Payment terms</dt><dd>14 days</dd></div>\n<div><dt>Invoice date</dt><dd>14 November</dd></div>\n</dl>\n<div class=\"actions\">\n<div class=\"send-bar\">\n<div class=\"send-total\"><span>Total</span><strong>$2480</strong></div>\n<button class=\"primary\" type=\"button\">Send invoice <span aria-hidden=\"true\">↗</span></button>\n</div>\n<button class=\"secondary-button\" type=\"button\">Edit invoice</button>\n</div>\n</section>\n<section class=\"progress\" aria-labelledby=\"progress-title\">\n<h3 id=\"progress-title\">Invoice progress</h3>\n<svg viewBox=\"0 0 248 48\" role=\"img\" aria-label=\"Draft is the current stage, followed by Sent and Paid\">\n<path d=\"M27 10H221\" stroke=\"#d8ded4\" stroke-width=\"1.5\"/>\n<circle cx=\"27\" cy=\"10\" r=\"6\" fill=\"currentColor\"/>\n<circle cx=\"124\" cy=\"10\" r=\"5\" fill=\"#eef1e8\" stroke=\"#69756c\"/>\n<circle cx=\"221\" cy=\"10\" r=\"5\" fill=\"#eef1e8\" stroke=\"#69756c\"/>\n<g fill=\"currentColor\" font-family=\"system-ui, sans-serif\" font-size=\"10\" text-anchor=\"middle\">\n<text x=\"27\" y=\"37\" font-weight=\"600\">Draft</text>\n<text x=\"124\" y=\"37\" fill=\"#69756c\">Sent</text>\n<text x=\"221\" y=\"37\" fill=\"#69756c\">Paid</text>\n</g>\n</svg>\n<p>Still a draft. Check the details and recipient before sending to your member.</p>\n</section>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-8","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Fieldwork. Include client Maya Chen, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review — Fieldwork</title>\n<style>\n:root{--paper:#f6f5f0;--white:#fffefa;--ink:#26372f;--muted:#69736b;--line:#d9ddd4;--green:#304c3d;--tint:#eaf0e6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton{font:inherit;cursor:pointer}\nbutton:focus-visible{outline:3px solid #859b78;outline-offset:4px}\n.site-header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:650;letter-spacing:-.7px}\n.brand svg{width:25px;height:29px}\n.practice{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}\nmain{max-width:1112px;margin:0 auto;padding:44px 36px 32px}\n.eyebrow{margin:0 0 12px;color:var(--muted);font-size:11px;letter-spacing:1.6px;text-transform:uppercase}\n.review-header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}\n.title-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap}\nh1{font:normal 40px/1.15 Georgia,\"Times New Roman\",serif;letter-spacing:-1.2px;margin:0}\n.status{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid #d9d5c1;border-radius:20px;background:#f0ede0;color:#6e6243;font-size:11px;font-weight:600}\n.status::before{content:\"\";width:5px;height:5px;background:#9c8754;border-radius:50%}\n.intro{margin:10px 0 0;color:var(--muted)}\n.actions{display:flex;align-items:center;gap:10px;flex-shrink:0}\n.primary,.secondary{min-height:44px;border-radius:3px;padding:10px 17px;font-weight:600}\n.primary{background:var(--green);color:white;border:1px solid var(--green);display:flex;align-items:center;justify-content:center;gap:20px}\n.primary svg{width:16px;height:16px}\n.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}\n.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start}\n.invoice{background:var(--white);border:1px solid var(--line);padding:30px 32px 24px}\n.invoice-heading{display:flex;justify-content:space-between;gap:16px;align-items:baseline}\nh2{font-size:20px;line-height:1.3;letter-spacing:-.4px;margin:0;font-weight:600}\n.due{font-size:12px;white-space:nowrap;color:var(--muted)}\n.project{margin:9px 0 28px;color:var(--muted);font-size:13px}\n.project strong{color:var(--ink);font-weight:500}\ntable{border-collapse:collapse;width:100%;table-layout:fixed}\nth{text-align:left;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 0 11px;border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right;width:92px;font-variant-numeric:tabular-nums}\ntd{padding:17px 0;border-bottom:1px solid var(--line);vertical-align:top}\n.service{font-size:15px;font-weight:500}\n.service-note{display:block;margin-top:3px;font-size:12px;color:var(--muted);font-weight:400}\n.totals{margin:17px 0 0 auto;max-width:250px}\n.totals div{display:flex;justify-content:space-between;gap:16px;padding:4px 0}\n.totals dt,.totals dd{margin:0;font-variant-numeric:tabular-nums}\n.tax{color:var(--muted);font-size:13px}\n.totals .grand-total{margin-top:9px;padding-top:13px;border-top:1px solid var(--line);align-items:baseline;font-weight:600}\n.grand-total dd{font:normal 30px/1.1 Georgia,\"Times New Roman\",serif;letter-spacing:-.5px}\n.currency{text-align:right;font-size:10px;color:var(--muted);margin:5px 0 0;letter-spacing:.8px}\n.invoice-note{border-top:1px solid var(--line);margin:24px 0 0;padding-top:14px;font-size:12px;color:var(--muted)}\n.details{background:var(--tint);padding:23px 22px;border-top:3px solid var(--green)}\n.details h2{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:20px}\n.detail-block + .detail-block{border-top:1px solid #cfd8ca;margin-top:22px;padding-top:20px}\ndl{margin:0}\n.details dt,.detail-label{color:var(--muted);font-size:11px;line-height:1.45;margin:0 0 5px}\n.details dd{margin:0;font-size:13px;overflow-wrap:anywhere}\n.details .client{font-size:16px;font-weight:550}\n.email{display:block;margin-top:2px;color:var(--muted);font-size:12px}\n.reference{margin-top:18px}\n.details h3{margin:0 0 10px;font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase}\n.bank-name{font-size:13px;font-weight:600;margin:0 0 3px}\n.bank-info{font-size:12px;line-height:1.65;margin:0;color:var(--muted)}\n.payment-reference{font-size:12px;margin:12px 0 0}\n.page-note{display:flex;align-items:center;gap:7px;margin:18px 0 0;color:var(--muted);font-size:12px}\n.page-note svg{width:13px;height:13px;flex-shrink:0}\n@media(max-width:760px){\n.site-header{height:58px;padding:0 22px}\n.brand{font-size:19px}\n.practice{font-size:9px;letter-spacing:1px}\nmain{padding:25px 22px}\n.eyebrow{margin-bottom:9px;font-size:10px}\n.review-header{display:block;margin-bottom:20px}\nh1{font-size:32px;letter-spacing:-.8px}\n.title-line{gap:12px}\n.intro{font-size:12px;margin-top:7px}\n.actions{margin-top:16px}\n.primary{flex:1}\n.secondary{padding:10px 13px}\n.workspace{grid-template-columns:1fr;gap:16px}\n.invoice{padding:20px}\nh2{font-size:18px}\n.invoice-heading{gap:8px}\n.due{font-size:11px}\n.project{font-size:12px;margin:7px 0 20px}\ntd{padding:13px 0}\n.service{font-size:14px}\n.service-note{font-size:11px;max-width:205px}\n.totals{margin-top:12px;max-width:220px}\n.totals .grand-total{margin-top:5px;padding-top:10px}\n.grand-total dd{font-size:27px}\n.invoice-note{margin-top:16px;padding-top:11px;font-size:11px}\n.details{padding:17px 18px}\n.details h2{margin-bottom:15px;font-size:10px}\n.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.detail-block + .detail-block{border-top:0;border-left:1px solid #cfd8ca;padding:0 0 0 17px;margin:0}\n.details .client{font-size:14px}\n.reference{margin-top:13px}\n.details dt{font-size:10px}\n.details dd{font-size:12px}\n.email{font-size:11px}\n.details h3{font-size:10px;letter-spacing:.7px;margin-bottom:7px}\n.bank-info,.payment-reference{font-size:11px}\n.bank-name{font-size:12px}\n.page-note{margin-top:13px;font-size:11px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 25 29\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M2 27V2h21v25M2 10h21M10 2v25M2 18h21\"/></svg>\nFieldwork\n</div>\n<div class=\"practice\">Alder Architecture</div>\n</header>\n<main>\n<p class=\"eyebrow\">Billing / Final review</p>\n<header class=\"review-header\">\n<div>\n<div class=\"title-line\"><h1>Invoice review</h1><span class=\"status\">Draft</span></div>\n<p class=\"intro\">Check the fees and payment details before sending.</p>\n</div>\n<div class=\"actions\">\n<button class=\"primary\" type=\"button\">Send invoice <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M4 10h12m-5-5 5 5-5 5\"/></svg></button>\n<button class=\"secondary\" type=\"button\">Edit invoice</button>\n</div>\n</header>\n\n<div class=\"workspace\">\n<section class=\"invoice\" aria-labelledby=\"invoice-number\">\n<header class=\"invoice-heading\">\n<h2 id=\"invoice-number\">Invoice #1048</h2>\n<span class=\"due\">Due 28 November</span>\n</header>\n<p class=\"project\"><strong>Maya Chen</strong> · Courtyard House</p>\n<table aria-label=\"Invoice line items\">\n<thead><tr><th scope=\"col\">Service</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td class=\"service\">Consulting<span class=\"service-note\">Design advisory · 12 hours × $150</span></td><td>$1800</td></tr>\n<tr><td class=\"service\">Research<span class=\"service-note\">Site &amp; planning review · 4 hours × $100</span></td><td>$400</td></tr>\n</tbody>\n</table>\n<dl class=\"totals\">\n<div class=\"tax\"><dt>Tax</dt><dd>$280</dd></div>\n<div class=\"grand-total\"><dt>Total</dt><dd>$2480</dd></div>\n</dl>\n<p class=\"currency\">USD</p>\n<p class=\"invoice-note\">Professional services for the Courtyard House renovation.</p>\n</section>\n\n<aside class=\"details\" aria-labelledby=\"details-heading\">\n<h2 id=\"details-heading\">Delivery &amp; payment</h2>\n<div class=\"detail-columns\">\n<div class=\"detail-block\">\n<dl>\n<dt>Send to</dt>\n<dd><span class=\"client\">Maya Chen</span><span class=\"email\">maya.chen@example.com</span></dd>\n</dl>\n<dl class=\"reference\">\n<dt>Client’s internal project and purchase order reference</dt>\n<dd>MC–COURTYARD–01</dd>\n</dl>\n</div>\n<section class=\"detail-block\" aria-labelledby=\"payment-heading\">\n<h3 id=\"payment-heading\">Payment details</h3>\n<p class=\"bank-name\">Bank transfer</p>\n<p class=\"bank-info\">Alder Architecture<br>Account •••• 4821<br>Routing 021000021</p>\n<p class=\"payment-reference\"><span class=\"detail-label\">Payment reference</span><br>INV-1048</p>\n</section>\n</div>\n</aside>\n</div>\n<p class=\"page-note\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\"><path d=\"M4 7V5a4 4 0 0 1 8 0v2M3 7h10v7H3z\"/></svg>Draft only. This invoice has not been sent to the client.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-9","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Common. Include client Alex Okafor, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Common</title>\n<style>\n:root{--ink:#282e2b;--muted:#69716b;--line:#dedfd7;--paper:#fff;--ground:#f5f5f0;--accent:#8b4937;--soft:#eee6dd}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--ground);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input{font:inherit}\nbutton,a,input{ -webkit-tap-highlight-color:transparent}\na{color:inherit;text-decoration:none}\nbutton{cursor:pointer}\nbutton:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ae7959;outline-offset:3px}\n.shell{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:100vh}\n.sidebar{border-right:1px solid var(--line);padding:30px 18px;display:flex;flex-direction:column;background:#eeefe8}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1.2px;padding:0 10px}\n.brand svg{width:25px;height:25px;color:var(--accent)}\n.studio{margin:35px 10px 15px;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:650}\nnav{display:grid;gap:5px}\nnav a{padding:12px 14px;border-radius:5px;min-height:46px;color:#5b635c}\nnav a[aria-current]{background:#dde2d7;color:#26372d;font-weight:650}\n.nav-count{float:right;font-size:12px;background:#cbd3c5;padding:1px 7px;border-radius:4px}\n.sidebar-foot{margin-top:auto;padding:40px 10px 0;color:var(--muted);font-size:12px}\n.sidebar-foot strong{display:block;color:var(--ink);font-size:13px}\nmain{min-width:0;max-width:1240px;width:100%;margin:auto;padding:28px 40px 24px}\n.topline{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px;margin-bottom:30px}\n.topline span span{padding:0 8px;color:#a3a89f}\n.topline a{text-decoration:underline;text-underline-offset:3px}\n.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0 0 9px;font-weight:600}\np{margin:0}\n.subtitle{color:var(--muted)}\n.secondary{min-height:44px;padding:10px 16px;background:transparent;border:1px solid #bdc3b8;border-radius:5px;color:var(--ink);white-space:nowrap}\n.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}\n.invoice{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:28px}\n.invoice-top{display:flex;justify-content:space-between;align-items:center;gap:12px}\n.eyebrow{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;color:var(--muted)}\nh2{font-size:23px;font-weight:600;letter-spacing:-.5px;margin:6px 0 0}\n.badge{background:#f3ebd7;color:#796125;border:1px solid #e8dbb8;border-radius:4px;padding:4px 9px;font-size:12px;font-weight:600;white-space:nowrap}\n.dates{display:flex;flex-wrap:wrap;gap:8px 24px;margin:15px 0 24px;font-size:12px;color:var(--muted)}\n.dates strong{font-weight:600;color:var(--ink)}\n.parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:21px;border-top:1px solid var(--line)}\n.label{font-size:11px;color:var(--muted);margin-bottom:5px}\n.parties strong{display:block;font-weight:600}\n.small{font-size:12px;color:var(--muted)}\naddress{font-style:normal;font-size:12px;color:var(--muted);margin-top:3px}\ntable{border-collapse:collapse;width:100%;margin-top:25px;font-size:13px}\ncaption{text-align:left;font-weight:600;font-size:14px;padding-bottom:10px}\nth{color:var(--muted);font-size:11px;font-weight:500;background:#f6f7f3;padding:8px 10px;text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\ntd{padding:13px 10px;border-bottom:1px solid #eceee7;vertical-align:top}\ntd:last-child,th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}\ntd strong{font-weight:600}\ntd .small{font-size:11px;margin-top:3px}\n.totals{margin:14px 0 22px auto;width:230px;max-width:100%;font-size:12px}\n.totals div{display:flex;justify-content:space-between;gap:20px;padding:4px 0}\n.totals dt{color:var(--muted)}\n.totals dd{margin:0;font-variant-numeric:tabular-nums}\n.totals .total{border-top:1px solid var(--line);padding-top:12px;margin-top:7px;font-size:19px;font-weight:650}\n.total dt{color:var(--ink)}\n.payment{border-top:1px solid var(--line);padding-top:17px}\nh3{font-size:14px;font-weight:600;margin:0 0 10px}\n.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;font-size:12px}\n.payment-grid span{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}\n.review{background:#ecefe7;border:1px solid #dce1d5;border-radius:6px;padding:20px}\n.review h3{font-size:16px;margin-bottom:6px}\n.review>p{font-size:12px;color:var(--muted)}\nlabel{display:block;font-size:12px;font-weight:600;margin:22px 0 7px}\ninput{width:100%;min-width:0;min-height:44px;padding:10px;background:white;border:1px solid #bdc5b7;border-radius:4px;color:var(--ink);font-size:12px}\n.field-hint{font-size:11px!important;margin-top:7px!important}\n.attachment{border-top:1px solid #d5dccf;border-bottom:1px solid #d5dccf;padding:16px 0;margin:22px 0 16px;display:flex;gap:10px;align-items:center}\n.file{border:1px solid #bfc8b7;border-radius:3px;font-size:9px;font-weight:700;padding:9px 5px;background:#f7f8f3}\n.attachment strong{font-size:12px;font-weight:600;overflow-wrap:anywhere}\n.attachment small{display:block;color:var(--muted);font-size:11px}\n.review-note{font-size:12px;display:flex;gap:8px;color:#526149}\n.review-note svg{flex:none;margin-top:2px}\n.update{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted);margin:15px 2px}\n.dot{width:5px;height:5px;background:#899680;border-radius:50%;flex:none}\n.sendbar{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:22px;border-top:1px solid var(--line);padding-top:20px}\n.sendbar p{font-size:12px;color:var(--muted);max-width:350px}\n.sendbar strong{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}\n.primary{border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px;min-height:46px;padding:11px 23px;font-weight:600;white-space:nowrap}\n.primary:hover{background:#753c2d}\n@media(min-width:1500px){main{padding-top:40px}}\n@media(max-width:1050px){main{padding:26px 24px}.shell{grid-template-columns:170px minmax(0,1fr)}.workspace{grid-template-columns:minmax(0,1fr) 240px}.invoice{padding:22px}.review{padding:17px}}\n@media(max-width:800px){.shell{display:block}.sidebar{padding:15px 20px 0;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0;font-size:24px}.studio,.sidebar-foot{display:none}nav{display:flex;gap:8px;margin-top:13px}nav a{padding:10px 13px;min-height:44px;border-radius:4px 4px 0 0}nav .less{display:none}.nav-count{margin-left:14px}main{padding:22px 20px}.topline{display:none}.page-head{margin-bottom:20px}.workspace{grid-template-columns:minmax(0,1fr)}.review{padding:20px}.review label{margin-top:16px}.attachment{margin:16px 0}.update{margin-bottom:0}}\n@media(max-width:450px){h1{font-size:27px}.subtitle{font-size:12px;max-width:220px}.page-head{gap:10px}.secondary{padding:9px 12px;font-size:12px}.invoice{padding:20px 16px}h2{font-size:22px}.parties{gap:15px}.parties strong{font-size:13px}.dates{gap:6px 18px;margin-bottom:20px}td,th{padding-left:7px;padding-right:7px}.sendbar{gap:14px;padding:17px 0 3px}.sendbar p{font-size:11px}.primary{padding:12px 17px;font-size:13px;min-height:48px}}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<aside class=\"sidebar\" aria-label=\"Workspace navigation\">\n<a class=\"brand\" href=\"#\" aria-label=\"Common home\"><svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 25V3h22v22H3Zm0-11h22M14 3v22\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg>Common</a>\n<p class=\"studio\">Fieldwork Studio</p>\n<nav aria-label=\"Main\">\n<a class=\"less\" href=\"#\">Overview</a>\n<a href=\"#\">Projects</a>\n<a href=\"#\" aria-current=\"page\">Invoices <span class=\"nav-count\">4</span></a>\n<a href=\"#\">Clients</a>\n<a class=\"less\" href=\"#\">Settings</a>\n</nav>\n<div class=\"sidebar-foot\"><strong>Maya Chen</strong>Studio administrator</div>\n</aside>\n<main>\n<div class=\"topline\"><span>Workspace <span>/</span> Invoices <span>/</span> Review</span><a href=\"#\">Invoice help</a></div>\n<header class=\"page-head\">\n<div><h1>Invoice review</h1><p class=\"subtitle\">Check the scope, fees and payment details before sending.</p></div>\n<button class=\"secondary\" type=\"button\">Edit invoice</button>\n</header>\n<div class=\"workspace\">\n<article class=\"invoice\" aria-labelledby=\"invoice-title\">\n<header class=\"invoice-top\">\n<div><p class=\"eyebrow\">Fieldwork Studio</p><h2 id=\"invoice-title\">Invoice #1048</h2></div>\n<span class=\"badge\">Draft</span>\n</header>\n<div class=\"dates\"><span>Issued 14 November</span><strong>Due 28 November</strong></div>\n<div class=\"parties\">\n<section aria-label=\"Client\"><p class=\"label\">Bill to</p><strong>Alex Okafor</strong><address>18 Birch Lane<br>Portland, OR 97205</address></section>\n<section aria-label=\"Project\"><p class=\"label\">Project</p><strong>Birch Lane Residence</strong><p class=\"small\">FW–024 · Design development</p></section>\n</div>\n<table>\n<caption>Professional services</caption>\n<thead><tr><th scope=\"col\">Service</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td><strong>Consulting</strong><p class=\"small\">Design coordination &amp; client workshops</p></td><td>$1800</td></tr>\n<tr><td><strong>Research</strong><p class=\"small\">Site context &amp; material studies</p></td><td>$400</td></tr>\n</tbody>\n</table>\n<dl class=\"totals\">\n<div><dt>Subtotal</dt><dd>$2200</dd></div>\n<div><dt>Tax</dt><dd>$280</dd></div>\n<div class=\"total\"><dt>Total</dt><dd>$2480</dd></div>\n</dl>\n<section class=\"payment\" aria-labelledby=\"payment-title\">\n<h3 id=\"payment-title\">Payment details</h3>\n<div class=\"payment-grid\">\n<div><span>Method</span>ACH / bank transfer</div>\n<div><span>Account holder</span>Fieldwork Studio LLC</div>\n<div><span>Bank / account</span>First Harbor Bank · •••• 4826</div>\n<div><span>Payment reference</span>Invoice #1048</div>\n</div>\n</section>\n</article>\n<div>\n<section class=\"review\" aria-labelledby=\"delivery-title\">\n<h3 id=\"delivery-title\">Delivery details</h3>\n<p>This draft has not been sent to the client.</p>\n<label for=\"recipient\">Recipient email</label>\n<input id=\"recipient\" type=\"email\" value=\"alex.okafor@example.com\" autocomplete=\"email\">\n<p class=\"field-hint\">Billing contact for Alex Okafor.</p>\n<div class=\"attachment\"><span class=\"file\" aria-hidden=\"true\">PDF</span><div><strong>Invoice-1048.pdf</strong><small>Invoice &amp; payment instructions</small></div></div>\n<div class=\"review-note\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"8\" stroke=\"currentColor\"/><path d=\"m6 10 3 3 5-6\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg><span>Project reference and fee breakdown included.</span></div>\n</section>\n<p class=\"update\"><span class=\"dot\" aria-hidden=\"true\"></span>Updated by Maya Chen · Today, 09:42</p>\n</div>\n</div>\n<footer class=\"sendbar\">\n<p><strong>Ready for Alex’s review?</strong>A PDF and payment details will be included.</p>\n<button class=\"primary\" type=\"button\">Send invoice</button>\n</footer>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-invoice-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Rill. Include client Samira Patel, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Rill</title>\n<style>\n:root{--bg:#f1eee7;--paper:#fffdf8;--ink:#252e29;--muted:#686c63;--line:#d9d9ce;--soft:#e7e9df}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,textarea{font:inherit}\nbutton,input,textarea{border-radius:5px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a0ac91;outline-offset:3px}\n.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:28px;height:32px}\n.workspace{display:flex;align-items:center;gap:12px;font-size:13px}\n.avatar{display:grid;place-items:center;width:32px;height:32px;border:1px solid #c6c9bb;border-radius:50%;font-size:11px;font-weight:600}\nmain{max-width:1160px;margin:auto;padding:34px 28px 48px}\n.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}\nh1{margin:0;font-size:34px;font-weight:550;letter-spacing:-1.2px;line-height:1.2}\n.intro{margin:9px 0 0;color:var(--muted)}\n.status{display:inline-flex;align-items:center;gap:8px;border:1px solid #c9cbbf;border-radius:30px;padding:6px 12px;font-size:12px;white-space:nowrap;color:#575d52;background:#eceee5}\n.status:before{content:\"\";width:7px;height:7px;border:1.5px solid currentColor;border-radius:50%}\n.progress{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:28px 0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.progress li{display:flex;gap:11px;align-items:center;padding:15px 0;color:var(--muted)}\n.progress .current{color:var(--ink)}\n.step{display:grid;place-items:center;width:26px;height:26px;border:1px solid #bfc3b6;border-radius:50%;font-size:12px;flex-shrink:0}\n.current .step{background:var(--ink);color:var(--paper);border-color:var(--ink)}\n.progress strong{display:block;font-size:13px;font-weight:600}\n.progress small{display:block;font-size:11px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}\n.invoice{background:var(--paper);border:1px solid var(--line);box-shadow:0 3px 12px #252e2905;padding:30px 34px}\n.document-brand{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:23px;border-bottom:1px solid var(--line)}\n.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:650;text-transform:uppercase}\n.document-brand span:last-child{font-size:11px;color:var(--muted)}\n.invoice-heading{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-top:23px}\nh2{margin:0;font-size:25px;font-weight:550;letter-spacing:-.7px;line-height:1.25}\n.invoice-heading p{margin:5px 0 0;color:var(--muted);font-size:12px}\n.due{font-size:12px;font-weight:600;white-space:nowrap;padding-top:5px}\n.parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}\n.label{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}\n.parties p{margin:0;font-weight:550}\n.parties small{display:block;margin-top:2px;color:var(--muted);font-size:12px}\ntable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}\ncaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\nthead th{text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:550}\nth:last-child,td:last-child{text-align:right;white-space:nowrap;padding-left:14px}\ntbody td{padding:15px 0;border-bottom:1px solid #e9e8e0;vertical-align:top;font-size:14px}\ntbody td:first-child{font-weight:550}\ntd small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}\ntfoot th{text-align:right;font-weight:400;color:var(--muted)}\ntfoot th,tfoot td{padding-top:10px;font-size:12px}\ntfoot tr:first-child th,tfoot tr:first-child td{padding-top:17px}\ntfoot .total th,tfoot .total td{padding-top:13px;padding-bottom:3px;font-size:21px;color:var(--ink);font-weight:600}\n.payment{border-top:1px solid var(--line);margin-top:23px;padding-top:18px}\n.payment h3{font-size:13px;margin:0 0 3px;font-weight:600}\n.payment>p{margin:0 0 12px;color:var(--muted);font-size:11px}\ndl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}\ndt{font-size:10px;color:var(--muted);margin-bottom:3px}\ndd{margin:0;font-size:12px}\ndd span{display:block;color:var(--muted);font-size:11px;margin-top:2px}\n.delivery{border:1px solid var(--line);background:#f8f7f1;border-radius:6px;overflow:hidden}\n.delivery-header{padding:23px 23px 20px;border-bottom:1px solid var(--line)}\n.delivery h2{font-size:20px;letter-spacing:-.4px;margin-top:8px}\n.delivery-header p{color:var(--muted);font-size:12px;margin:7px 0 0}\nform{padding:22px 23px}\n.field{margin-bottom:18px}\n.field>label{display:block;font-size:12px;font-weight:550;margin-bottom:7px}\n.optional{font-weight:400;color:var(--muted)}\ninput[type=email],textarea{display:block;width:100%;min-width:0;border:1px solid #bfc4b7;background:var(--paper);padding:10px;color:var(--ink);font-size:12px;line-height:1.6}\ntextarea{resize:vertical;min-height:115px}\n.copy{display:flex;align-items:center;gap:9px;font-size:12px;margin-bottom:23px}\ninput[type=checkbox]{margin:0;width:15px;height:15px;accent-color:var(--ink);flex-shrink:0}\n.send{width:100%;min-height:46px;border:1px solid var(--ink);background:var(--ink);color:#fffdf8;display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;font-weight:600}\n.send svg{width:16px;height:16px}\n.send:hover{background:#39463d}\n.delivery-note{margin:12px 0 0;text-align:center;color:var(--muted);font-size:11px}\n.context-note{margin:16px 5px 0;display:flex;gap:9px;color:var(--muted);font-size:12px;line-height:1.6}\n.context-note svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}\n.context-note p{margin:0}\n@media(max-width:760px){\n.topbar{height:60px;padding:0 20px}.workspace{font-size:11px;gap:8px}.avatar{width:27px;height:27px}\nmain{padding:24px 16px 28px}h1{font-size:28px}.page-heading{gap:8px}.status{padding:5px 9px;font-size:11px}\n.intro{font-size:12px;max-width:320px}.progress{margin:21px 0 20px}.progress li{gap:7px;padding:12px 0}.progress strong{font-size:12px}.progress small{font-size:10px}.step{width:23px;height:23px;font-size:11px}\n.layout{grid-template-columns:minmax(0,1fr);gap:20px}.invoice{padding:22px 20px}.document-brand{padding-bottom:17px}.document-brand span:last-child{font-size:10px}.eyebrow{font-size:9px;letter-spacing:1.2px}\n.invoice-heading{margin-top:18px;display:block}h2{font-size:24px}.due{display:block;margin-top:10px;padding:0}.parties{gap:12px;margin:20px 0}.parties p{font-size:13px}.parties small{font-size:11px}\ntbody td{padding:13px 0}td small{font-size:10px}.payment{margin-top:19px}dl{gap:10px}dd{font-size:11px}\n.delivery-header{padding:19px 20px 16px}form{padding:18px 20px}.delivery h2{font-size:20px}.field{margin-bottom:15px}textarea{min-height:95px}.copy{margin-bottom:18px}.context-note{font-size:11px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 29V3h10c7 0 12 4 12 10s-5 10-12 10H9M9 29V9h4c3 0 6 1 6 4s-3 4-6 4H9m7 6 9 6\" stroke=\"currentColor\" stroke-width=\"1.7\"/></svg>\nRill\n</div>\n<div class=\"workspace\"><span>Alder Architecture</span><span class=\"avatar\" aria-label=\"Alder Architecture workspace\">AA</span></div>\n</header>\n<main>\n<div class=\"page-heading\">\n<h1>Invoice review</h1>\n<span class=\"status\">Draft · Not sent</span>\n</div>\n<p class=\"intro\">Review the project fees and payment details before sending.</p>\n<ol class=\"progress\" aria-label=\"Invoice progress\">\n<li><span class=\"step\" aria-hidden=\"true\">✓</span><div><strong>Details</strong><small>Complete</small></div></li>\n<li class=\"current\" aria-current=\"step\"><span class=\"step\" aria-hidden=\"true\">2</span><div><strong>Review</strong><small>Current step</small></div></li>\n<li><span class=\"step\" aria-hidden=\"true\">3</span><div><strong>Send</strong><small>Up next</small></div></li>\n</ol>\n<div class=\"layout\">\n<article class=\"invoice\" aria-labelledby=\"invoice-title\">\n<div class=\"document-brand\"><span class=\"eyebrow\">Alder Architecture</span><span>Client invoice</span></div>\n<header class=\"invoice-heading\">\n<div><h2 id=\"invoice-title\">Invoice #1048</h2><p>Issued 14 November 2024</p></div>\n<span class=\"due\">Due 28 November</span>\n</header>\n<div class=\"parties\">\n<section aria-label=\"Client\"><span class=\"label\">Bill to</span><p>Samira Patel</p><small>Residential client</small></section>\n<section aria-label=\"Project\"><span class=\"label\">Project A-024</span><p>Patel House</p><small>Rear extension · Design development</small></section>\n</div>\n<table>\n<caption>Invoice services and total</caption>\n<thead><tr><th scope=\"col\">Service</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td>Consulting<small>Design development · 12 hrs × $150</small></td><td>$1800</td></tr>\n<tr><td>Research<small>Site &amp; planning review · 4 hrs × $100</small></td><td>$400</td></tr>\n</tbody>\n<tfoot>\n<tr><th scope=\"row\">Subtotal</th><td>$2200</td></tr>\n<tr><th scope=\"row\">Tax</th><td>$280</td></tr>\n<tr class=\"total\"><th scope=\"row\">Total</th><td>$2480</td></tr>\n</tfoot>\n</table>\n<section class=\"payment\" aria-labelledby=\"payment-title\">\n<h3 id=\"payment-title\">Payment details</h3>\n<p>Bank transfer · Payment due within 14 days</p>\n<dl>\n<div><dt>Account holder</dt><dd>Alder Architecture<span>Mercury · Account ending 1042</span></dd></div>\n<div><dt>Payment reference</dt><dd>INV-1048<span>Include with your transfer</span></dd></div>\n</dl>\n</section>\n</article>\n<aside aria-label=\"Invoice delivery\">\n<section class=\"delivery\">\n<header class=\"delivery-header\">\n<span class=\"eyebrow\">Next step</span>\n<h2>Send to client</h2>\n<p>2 line items · 1 recipient</p>\n</header>\n<form>\n<div class=\"field\">\n<label for=\"recipient\">Client email</label>\n<input id=\"recipient\" name=\"recipient\" type=\"email\" value=\"samira.patel@example.com\">\n</div>\n<div class=\"field\">\n<label for=\"message\">Message <span class=\"optional\">(optional)</span></label>\n<textarea id=\"message\" name=\"message\" rows=\"4\">Hi Samira, here are the fees for the current design stage of Patel House. Thank you.</textarea>\n</div>\n<label class=\"copy\" for=\"copy\"><input id=\"copy\" name=\"copy\" type=\"checkbox\" checked>Email me a copy</label>\n<button class=\"send\" type=\"button\">Send invoice<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n<p class=\"delivery-note\">Draft awaiting approval · Nothing sent yet</p>\n</form>\n</section>\n<div class=\"context-note\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M5 2.5h7l3 3v12H5zM12 2.5v4h3M8 10h4m-4 3h4\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\n<p>For the design development stage only. Construction-stage fees are billed separately.</p>\n</div>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for North. Include client Noah Tremblay, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice #1048 — North</title>\n<style>\n:root{--ink:#202b35;--muted:#68737d;--line:#dce1e5;--surface:#f1f3f5;--blue:#2458d3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--surface);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input{font:inherit}\na{color:inherit;text-decoration:none}\nbutton,a,input{outline-offset:4px}\n.shell{min-height:100vh;display:grid;grid-template-columns:204px minmax(0,1fr)}\n.sidebar{padding:30px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#e9edf0}\n.brand{font-size:27px;font-weight:650;letter-spacing:-1.3px;display:flex;align-items:center;gap:10px}\n.brand svg{color:var(--blue);flex:none}\n.practice{font-size:11px;color:var(--muted);margin:6px 0 44px;letter-spacing:.06em}\nnav{display:grid;gap:5px}\nnav a{padding:10px 12px;border-radius:4px;color:#59656f;display:flex;justify-content:space-between}\nnav a[aria-current]{background:#dde5f5;color:var(--blue);font-weight:600}\n.nav-count{font-size:11px;align-self:center}\n.workspace{margin-top:auto;padding-top:40px;font-size:12px;color:var(--muted)}\n.workspace strong{display:block;color:var(--ink);font-weight:500}\nmain{width:100%;max-width:1120px;margin:auto;padding:30px 40px 25px}\n.breadcrumb{font-size:12px;color:var(--muted);display:flex;gap:10px;margin-bottom:23px}\n.breadcrumb span:last-child{color:var(--ink)}\n.page-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:27px}\nh1{font:normal 46px/1.12 Georgia,\"Times New Roman\",serif;letter-spacing:-1.6px;margin:0 0 9px}\n.page-heading p{margin:0;color:var(--muted);font-size:13px}\n.status{display:inline-flex;align-items:center;gap:7px;border:1px solid #cbd2d8;border-radius:20px;padding:5px 11px;font-size:12px;white-space:nowrap}\n.status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#7b8690}\n.review-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(245px,1fr);gap:22px;align-items:start}\n.invoice{background:white;border:1px solid var(--line);padding:27px 29px 21px}\n.invoice-top{display:flex;justify-content:space-between;gap:14px;padding-bottom:23px;border-bottom:1px solid var(--line)}\nh2{font-size:19px;line-height:1.3;letter-spacing:-.4px;margin:0 0 5px;font-weight:600}\n.invoice-top p{margin:0;font-size:12px;color:var(--muted)}\n.due{font-size:12px;text-align:right;white-space:nowrap;padding-top:4px}\n.due span{display:block;color:var(--muted);font-size:11px;margin-top:3px}\n.parties{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 0}\n.eyebrow{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}\n.parties strong{font-weight:550;font-size:14px}\n.parties p:not(.eyebrow){margin:3px 0 0;font-size:12px;color:var(--muted)}\n.project{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:17px}\n.plan{width:82px;height:62px;flex:none}\n.project strong{display:block;font-size:12px;font-weight:550}\n.project p{font-size:11px;color:var(--muted);margin:3px 0 0}\ntable{border-collapse:collapse;width:100%;font-size:13px}\nth{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500;padding:0 0 9px;border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}\ntd{padding:12px 0;border-bottom:1px solid #edf0f2;vertical-align:top}\ntd small{display:block;font-size:11px;color:var(--muted);margin-top:2px}\n.tax td{padding:10px 0;color:var(--muted);font-size:12px}\n.total td{padding:15px 0 0;border:0;font-size:18px;font-weight:600}\n.total td:last-child{color:var(--blue);font-size:23px;letter-spacing:-.6px}\n.invoice-note{margin:17px 0 0;font-size:10px;color:var(--muted)}\n.details{display:grid;gap:18px}\n.panel{border:1px solid var(--line);padding:20px;background:#f8f9fa}\n.panel h2{font-size:14px;letter-spacing:0;margin-bottom:16px}\ndl{margin:0;display:grid;gap:13px}\ndl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}\ndt{color:var(--muted);font-size:12px}\ndd{margin:0;text-align:right;font-size:12px;font-weight:500}\n.bank{border-top:1px solid var(--line);margin:17px 0 0;padding-top:13px;font-size:12px}\n.bank strong{display:block;font-weight:500}\n.bank span{display:block;font-size:11px;color:var(--muted);margin-top:3px}\n.delivery label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\ninput{display:block;width:100%;min-width:0;border:1px solid #c7cfd6;border-radius:3px;padding:10px;background:white;color:var(--ink);font-size:12px}\n.delivery p{margin:9px 0 0;font-size:11px;color:var(--muted);line-height:1.6}\n.delivery .eyebrow{margin-bottom:13px}\n.actions{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);margin-top:25px;padding-top:20px}\n.actions p{margin:0;color:var(--muted);font-size:12px}\n.actions p strong{display:block;font-weight:500;color:var(--ink);margin-bottom:2px}\n.action-buttons{display:flex;align-items:center;gap:18px;flex-shrink:0}\n.edit{font-size:12px;text-decoration:underline;text-underline-offset:4px}\nbutton{border:0;border-radius:4px;background:var(--blue);color:white;padding:12px 20px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:18px;white-space:nowrap}\nbutton:hover{background:#1d48b1}\n.footer-note{font-size:10px;color:var(--muted);margin:15px 0 0}\n@media(min-width:1450px){main{max-width:1120px}}\n@media(max-width:1000px) and (min-width:701px){.shell{grid-template-columns:160px minmax(0,1fr)}.sidebar{padding:26px 15px}main{padding:25px}.review-grid{grid-template-columns:1fr}.details{grid-template-columns:1fr 1fr}.invoice{padding:25px}.page-heading p{max-width:340px}}\n@media(max-width:700px){\n.shell{display:block}.sidebar{padding:13px 20px;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line)}\n.brand{font-size:23px}.brand svg{width:19px;height:23px}.practice,.workspace,nav a:not([aria-current]){display:none}nav a{padding:5px 10px;font-size:12px}.nav-count{margin-left:16px}\nmain{padding:22px 18px}.breadcrumb{margin-bottom:15px;font-size:11px}\n.page-heading{margin-bottom:20px;align-items:flex-start}h1{font-size:36px;letter-spacing:-1px;margin-bottom:7px}.page-heading p{font-size:12px;max-width:235px}.status{margin-top:6px;padding:4px 9px;font-size:11px}\n.review-grid{grid-template-columns:1fr;gap:16px}.invoice{padding:19px 18px 16px}.invoice-top{padding-bottom:16px}h2{font-size:17px}.due{font-size:11px}.due span{font-size:10px}.parties{padding:16px 0}.project{gap:12px;padding:10px 0;margin-bottom:14px}.plan{width:70px;height:53px}\ntd{padding:10px 0}.total td{padding-top:12px}.invoice-note{margin-top:12px}\n.details{gap:16px}.panel{padding:17px}.panel h2{margin-bottom:12px}dl{gap:9px}.bank{margin-top:12px;padding-top:10px}.delivery{padding:0 2px}.delivery .eyebrow{display:none}\n.actions{margin-top:19px;padding-top:16px;flex-wrap:wrap;gap:14px}.actions p{font-size:11px}.action-buttons{width:100%;justify-content:space-between}button{min-width:188px}.footer-note{margin-top:12px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<aside class=\"sidebar\">\n<a class=\"brand\" href=\"#\" aria-label=\"North home\">\n<svg width=\"23\" height=\"27\" viewBox=\"0 0 23 27\" aria-hidden=\"true\"><path d=\"M3 24V4l17 19V3M15 3h5v5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\nNorth\n</a>\n<p class=\"practice\">ARCHITECTURE &amp; INTERIORS</p>\n<nav aria-label=\"Main navigation\">\n<a href=\"#\">Overview</a>\n<a href=\"#\">Projects <span class=\"nav-count\">08</span></a>\n<a href=\"#\">Clients</a>\n<a href=\"#\" aria-current=\"page\">Invoices <span class=\"nav-count\">06</span></a>\n</nav>\n<div class=\"workspace\"><strong>North Studio</strong>Practice workspace</div>\n</aside>\n<main>\n<div class=\"breadcrumb\" aria-label=\"Breadcrumb\"><a href=\"#\">Invoices</a><span aria-hidden=\"true\">/</span><span>Review draft</span></div>\n<header class=\"page-heading\">\n<div><h1>Invoice review</h1><p>A final look at the work, fees and payment details.</p></div>\n<span class=\"status\">Draft</span>\n</header>\n<div class=\"review-grid\">\n<article class=\"invoice\" aria-labelledby=\"invoice-title\">\n<header class=\"invoice-top\">\n<div><h2 id=\"invoice-title\">Invoice #1048</h2><p>Issued 14 November 2024</p></div>\n<div class=\"due\">Due 28 November<span>Payment within 14 days</span></div>\n</header>\n<div class=\"parties\">\n<section><p class=\"eyebrow\">Bill to</p><strong>Noah Tremblay</strong><p>Private residential client</p></section>\n<section><p class=\"eyebrow\">From</p><strong>North Studio</strong><p>Architecture &amp; interiors</p></section>\n</div>\n<div class=\"project\">\n<svg class=\"plan\" viewBox=\"0 0 100 74\" role=\"img\" aria-labelledby=\"plan-title\">\n<title id=\"plan-title\">Ground-floor study: existing rooms in gray, proposed extension outlined in blue</title>\n<path d=\"M7 9h52v56H7zM7 36h52M32 9v27M32 48v17\" fill=\"none\" stroke=\"#9aa5ae\" stroke-width=\"1.5\"/>\n<path d=\"M59 9h33v56H59M59 36h33\" fill=\"none\" stroke=\"#2458d3\" stroke-width=\"2\"/>\n<path d=\"M8 70h83M7 68v4M92 68v4\" stroke=\"#bac3cb\"/>\n<path d=\"M60 10h31v25H60z\" fill=\"#2458d3\" opacity=\".06\"/>\n</svg>\n<div><p class=\"eyebrow\">Project 024 · Tremblay residence</p><strong>02 / Schematic design</strong><p>Ground-floor study &amp; proposed extension</p></div>\n</div>\n<table aria-label=\"Invoice line items and total\">\n<thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr><td>Consulting<small>Design development &amp; client workshop</small></td><td>$1800</td></tr>\n<tr><td>Research<small>Site analysis &amp; material studies</small></td><td>$400</td></tr>\n<tr class=\"tax\"><td>Tax</td><td>$280</td></tr>\n<tr class=\"total\"><td>Total</td><td>$2480</td></tr>\n</tbody>\n</table>\n<p class=\"invoice-note\">All amounts in USD · Fees for services through 14 November.</p>\n</article>\n<aside class=\"details\" aria-label=\"Payment and delivery\">\n<section class=\"panel\">\n<h2>Payment details</h2>\n<dl>\n<div><dt>Method</dt><dd>Bank transfer</dd></div>\n<div><dt>Currency</dt><dd>USD · US dollar</dd></div>\n<div><dt>Reference</dt><dd>INV-1048</dd></div>\n</dl>\n<p class=\"bank\"><strong>North Studio · Account •••• 4820</strong><span>Bank instructions included on the invoice.</span></p>\n</section>\n<section class=\"delivery\">\n<p class=\"eyebrow\">Delivery</p>\n<label for=\"recipient\">Send to</label>\n<input id=\"recipient\" name=\"recipient\" type=\"email\" value=\"noah@tremblay.example\" spellcheck=\"false\">\n<p>Noah will receive a PDF invoice with the project reference and payment instructions.</p>\n</section>\n</aside>\n</div>\n<footer class=\"actions\">\n<p><strong>Not sent yet</strong>Review the details before sharing with your client.</p>\n<div class=\"action-buttons\"><a class=\"edit\" href=\"#\">Edit invoice</a><button type=\"button\">Send invoice <span aria-hidden=\"true\">↗</span></button></div>\n</footer>\n<p class=\"footer-note\">Draft invoices are not included in outstanding balances.</p>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-invoice-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Alder. Include client Leila Haddad, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Alder</title>\n<style>\n:root{--paper:#f8f8f2;--ink:#243e34;--muted:#64746b;--line:#d6ddd3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input{font:inherit}\na{color:inherit;text-decoration:none}\n.topbar{height:80px;border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1160px;height:100%;margin:auto;padding:0 32px;display:flex;align-items:center;gap:32px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:27px;height:30px}\n.workspace{border-left:1px solid var(--line);padding-left:28px;color:var(--muted);font-size:13px}\nnav{margin-left:auto;display:flex;height:100%;gap:30px;align-items:center;font-size:13px}\nnav a{height:100%;display:flex;align-items:center;color:var(--muted);border-bottom:2px solid transparent}\nnav a[aria-current]{color:var(--ink);border-color:var(--ink);font-weight:600}\nmain{max-width:1080px;margin:0 auto;padding:44px 32px 32px}\n.breadcrumb{font-size:12px;color:var(--muted);margin:0 0 16px}\n.breadcrumb span{padding:0 10px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}\nh1{font-size:36px;line-height:1.2;letter-spacing:-1.3px;margin:0;font-weight:600}\n.intro{color:var(--muted);margin:10px 0 30px;font-size:14px}\n.status{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;white-space:nowrap}\n.status::before{content:\"\";height:6px;width:6px;border:1px solid currentColor;border-radius:50%}\n.review{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}\n.invoice{padding:30px 38px 28px 0}\n.invoice-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}\nh2{margin:0;font-size:23px;letter-spacing:-.5px;font-weight:600}\n.due{margin:0;font-size:13px;font-weight:500}\n.client{margin:24px 0 26px;display:flex;justify-content:space-between;gap:20px}\n.eyebrow{display:block;font-size:10px;line-height:1.5;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}\n.client-name{font-size:17px;font-weight:500}\n.issued{text-align:right;font-size:13px}\ntable{border-collapse:collapse;width:100%;font-size:14px}\nth{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1.1px;font-weight:600;padding:0 0 10px;border-bottom:1px solid var(--line)}\nth:last-child,td:last-child{text-align:right;white-space:nowrap;width:90px;padding-left:16px;font-variant-numeric:tabular-nums}\ntd{padding:17px 0;vertical-align:top;border-bottom:1px solid var(--line)}\n.item-name{display:block;font-weight:600;font-size:15px}\n.secondary{display:block;font-size:12px;line-height:1.55;color:var(--muted);max-width:350px;margin-top:3px;overflow-wrap:anywhere}\ntfoot td{padding:12px 0;font-size:13px}\ntfoot .total td{border-bottom:0;padding-top:17px;vertical-align:baseline}\n.total td:first-child{font-size:17px;font-weight:600}\n.total td:last-child{font-size:30px;letter-spacing:-1px;font-weight:600}\n.invoice-note{font-size:12px;color:var(--muted);margin:18px 0 0;max-width:390px}\n.details{border-left:1px solid var(--line);padding:32px 0 28px 30px}\n.details h2{font-size:16px;letter-spacing:0}\ndl{margin:17px 0 25px}\n.detail-row{border-bottom:1px solid var(--line);padding:12px 0;display:flex;justify-content:space-between;gap:16px;font-size:12px}\ndt{color:var(--muted)}\ndd{margin:0;text-align:right;font-weight:500}\n.account-name{display:block}\n.reference{font-variant-numeric:tabular-nums;letter-spacing:.3px}\n.delivery{padding-top:1px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:8px}\ninput{width:100%;min-width:0;background:transparent;border:1px solid #a7b5a8;border-radius:4px;padding:11px 12px;font-size:13px;color:var(--ink)}\ninput:focus{outline:2px solid var(--ink);outline-offset:2px}\n.delivery p{font-size:12px;color:var(--muted);margin:8px 0 0}\n.actions{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0}\n.action-note{font-size:12px;color:var(--muted);margin:0}\n.action-note strong{display:block;color:var(--ink);font-size:13px;font-weight:500;margin-bottom:2px}\n.action-buttons{display:flex;align-items:center;gap:24px}\n.back{font-size:13px}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:4px;padding:12px 20px;font-weight:500;font-size:14px;cursor:pointer;white-space:nowrap}\nbutton svg{width:16px;height:16px}\nbutton:hover{opacity:.9}\nbutton:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n@media(max-width:700px){\n.topbar{height:60px}\n.topbar-inner{padding:0 20px;gap:17px}\n.brand{font-size:23px}\n.brand svg{width:23px;height:26px}\n.workspace{padding-left:17px;font-size:11px}\nnav{gap:0}\nnav a:not([aria-current]){display:none}\nmain{padding:25px 20px 16px}\n.breadcrumb{display:none}\nh1{font-size:28px;letter-spacing:-.9px}\n.status{padding:4px 10px}\n.intro{font-size:13px;margin:9px 0 22px;max-width:280px}\n.review{grid-template-columns:minmax(0,1fr)}\n.invoice{padding:22px 0 20px}\nh2{font-size:21px}\n.due{font-size:12px}\n.client{margin:19px 0 22px}\n.client-name{font-size:16px}\ntd{padding:14px 0}\nth:last-child,td:last-child{width:76px;padding-left:12px}\n.secondary{font-size:11px}\ntfoot .total td{padding-top:13px}\n.total td:last-child{font-size:28px}\n.invoice-note{margin-top:12px;font-size:11px}\n.details{border-left:0;border-top:1px solid var(--line);padding:20px 0}\ndl{margin:7px 0 18px}\n.detail-row{padding:10px 0}\n.account-name{display:inline}\n.delivery p{font-size:11px}\n.actions{align-items:stretch;gap:18px;padding:20px 0 0;flex-direction:column}\n.action-note strong{display:inline;margin-right:5px}\n.action-buttons{justify-content:space-between;gap:15px}\nbutton{padding:12px 18px;flex:1;max-width:210px}\n.back{font-size:12px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<a class=\"brand\" href=\"#\" aria-label=\"Alder home\">\n<svg viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 28 14 4l10 24M8 20h12M14 4v24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\nAlder\n</a>\n<span class=\"workspace\">Field research</span>\n<nav aria-label=\"Main navigation\">\n<a href=\"#fieldwork\">Fieldwork</a>\n<a href=\"#invoices\" aria-current=\"page\">Invoices</a>\n<a href=\"#team\">Team</a>\n</nav>\n</div>\n</header>\n<main>\n<p class=\"breadcrumb\"><a href=\"#invoices\">Invoices</a><span aria-hidden=\"true\">/</span>Review</p>\n<div class=\"page-heading\">\n<h1>Invoice review</h1>\n<span class=\"status\">Draft</span>\n</div>\n<p class=\"intro\">Confirm the fieldwork charges and payment details.</p>\n\n<div class=\"review\">\n<section class=\"invoice\" aria-labelledby=\"invoice-number\">\n<div class=\"invoice-heading\">\n<h2 id=\"invoice-number\">Invoice #1048</h2>\n<p class=\"due\">Due 28 November</p>\n</div>\n<div class=\"client\">\n<div><span class=\"eyebrow\">Billed to</span><div class=\"client-name\">Leila Haddad</div></div>\n<div class=\"issued\"><span class=\"eyebrow\">Issued</span>14 November</div>\n</div>\n<table aria-label=\"Invoice line items and total\">\n<thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"item-name\">Consulting</span><span class=\"secondary\">Field protocol design and interview synthesis</span></td>\n<td>$1800</td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Research</span><span class=\"secondary\">Multi-site field interviews, participant coordination and community follow-up documentation</span></td>\n<td>$400</td>\n</tr>\n</tbody>\n<tfoot>\n<tr><td>Tax</td><td>$280</td></tr>\n<tr class=\"total\"><td>Total</td><td>$2480</td></tr>\n</tfoot>\n</table>\n<p class=\"invoice-note\">November research round · All amounts in USD.</p>\n</section>\n\n<aside class=\"details\" aria-labelledby=\"payment-heading\">\n<h2 id=\"payment-heading\">Payment details</h2>\n<dl>\n<div class=\"detail-row\"><dt>Method</dt><dd>Bank transfer</dd></div>\n<div class=\"detail-row\"><dt>Account</dt><dd><span class=\"account-name\">Alder Research</span> •••• 4820</dd></div>\n<div class=\"detail-row\"><dt>Payment reference</dt><dd class=\"reference\">INV-1048</dd></div>\n</dl>\n<div class=\"delivery\">\n<label for=\"recipient\">Client email</label>\n<input id=\"recipient\" name=\"recipient\" type=\"email\" value=\"leila.haddad@example.com\" spellcheck=\"false\">\n<p>Invoice PDF includes bank transfer instructions for the client’s finance team.</p>\n</div>\n</aside>\n</div>\n\n<footer class=\"actions\">\n<p class=\"action-note\"><strong>Not yet sent</strong>Keep a copy with your fieldwork records.</p>\n<div class=\"action-buttons\">\n<a class=\"back\" href=\"#invoices\">Back to invoices</a>\n<button type=\"button\">Send invoice <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n</div>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Morrow. Include client Jules Martin, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Morrow</title>\n<style>\n:root{--paper:#fffefa;--bg:#f5f4ef;--ink:#252d29;--muted:#6c716b;--line:#dedfd6;--green:#294c3f}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\n.site-header{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}\n.brand-group{display:flex;align-items:center;gap:24px}\n.brand{font-family:Georgia,serif;font-size:29px;letter-spacing:-1.2px}\n.workspace{border-left:1px solid var(--line);padding-left:24px;color:var(--muted);font-size:13px}\n.header-note{font-size:12px;color:var(--muted)}\nmain{max-width:1100px;margin:0 auto;padding:42px 28px 40px}\n.eyebrow{margin:0 0 9px;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}\n.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}\nh1{font-family:Georgia,serif;font-size:40px;font-weight:400;line-height:1.15;letter-spacing:-1.2px;margin:0 0 9px}\n.intro{color:var(--muted);margin:0;font-size:14px}\n.status{display:inline-flex;align-items:center;gap:7px;border:1px solid #d5d8c7;background:#ecefdf;padding:5px 12px;border-radius:20px;font-size:12px;white-space:nowrap}\n.status::before{content:\"\";width:6px;height:6px;background:#76824c;border-radius:50%}\n.review-grid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:24px;align-items:start}\n.invoice{background:var(--paper);border:1px solid var(--line);padding:30px 32px 26px;box-shadow:0 3px 10px #252d2904}\n.document-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:27px}\n.document-head .eyebrow{font-size:9px;letter-spacing:1.4px;margin-bottom:7px}\nh2{margin:0;font-family:Georgia,serif;font-size:27px;font-weight:400;line-height:1.2;letter-spacing:-.6px}\n.due{font-size:12px;padding-top:24px;white-space:nowrap}\n.bill-context{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:27px}\n.label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}\n.value{font-size:14px;font-weight:600}\n.context-note{display:block;font-size:12px;color:var(--muted);margin-top:2px}\ntable{width:100%;border-collapse:collapse;text-align:left}\nth{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:600;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}\nth:last-child,td:last-child{text-align:right}\ntd{vertical-align:top;padding:17px 0;border-bottom:1px solid var(--line)}\n.item-name{display:block;font-weight:600;margin-bottom:3px}\n.item-note{display:block;color:var(--muted);font-size:12px}\n.amount{font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:18px}\n.totals{width:52%;margin:17px 0 0 auto}\n.totals div{display:flex;justify-content:space-between;gap:18px;padding:4px 0;font-size:13px}\n.totals dt,.totals dd{margin:0}\n.totals dd{font-variant-numeric:tabular-nums}\n.totals .grand-total{margin-top:9px;padding-top:13px;border-top:1px solid var(--line);font-size:21px;font-weight:600}\n.currency{margin:12px 0 0;text-align:right;color:var(--muted);font-size:10px;letter-spacing:.3px}\n.details{background:#eaece4;padding:24px}\n.details h2{font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;margin-bottom:22px}\n.detail-section+.detail-section{border-top:1px solid #d5d9ce;margin-top:21px;padding-top:20px}\n.details h3{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}\n.details p{margin:0}\n.email{color:#485c50;font-size:12px;overflow-wrap:anywhere}\n.delivery-note{font-size:12px;color:var(--muted);margin-top:8px!important}\n.payment-method{font-size:13px;font-weight:600;margin-bottom:5px!important}\n.account-name{font-size:12px}\n.bank{font-size:12px;color:var(--muted);margin-top:8px!important}\n.update{border-top:1px solid #d5d9ce;margin-top:22px;padding-top:14px;font-size:11px;color:var(--muted);line-height:1.6}\n.update strong{font-weight:400;color:#51594f}\n.actions{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding-top:21px;border-top:1px solid var(--line)}\n.draft-note{font-size:12px;color:var(--muted);margin:0}\n.send-group{display:flex;align-items:center;gap:22px}\n.hint{font-size:12px;line-height:1.5;color:var(--muted);max-width:190px;margin:0}\n.send{display:flex;align-items:center;justify-content:center;gap:22px;background:var(--green);color:#fff;border:1px solid var(--green);border-radius:3px;padding:13px 20px;font-weight:600;white-space:nowrap;cursor:pointer;min-height:48px}\n.send:hover{background:#203e32}\n.send:focus-visible{outline:3px solid #9dafa2;outline-offset:3px}\n.send svg{width:16px;height:16px;flex-shrink:0}\n@media(max-width:700px){\n.site-header{height:60px;padding:0 20px}\n.brand{font-size:25px}\n.brand-group{gap:16px}\n.workspace{font-size:11px;padding-left:16px}\n.header-note{display:none}\nmain{padding:24px 20px 28px}\n.eyebrow{font-size:9px;margin-bottom:7px}\n.page-heading{margin-bottom:20px;align-items:flex-start;gap:10px}\nh1{font-size:31px;letter-spacing:-.8px;margin-bottom:6px}\n.intro{font-size:12px;max-width:245px}\n.status{font-size:11px;padding:4px 9px;margin-top:5px}\n.review-grid{grid-template-columns:1fr;gap:16px}\n.invoice{padding:20px}\n.document-head{gap:8px;margin-bottom:20px}\nh2{font-size:23px}\n.due{font-size:10px;padding-top:23px}\n.document-head .eyebrow{font-size:8px}\n.bill-context{gap:12px;margin-bottom:20px}\n.label{font-size:10px}\n.value{font-size:13px}\n.context-note{font-size:11px}\ntd{padding:13px 0}\n.item-note{font-size:11px}\n.totals{margin-top:12px;width:65%}\n.totals div{font-size:12px;padding:3px 0}\n.totals .grand-total{font-size:20px;margin-top:7px;padding-top:10px}\n.currency{margin-top:8px}\n.details{padding:18px 20px}\n.details h2{font-size:13px;margin-bottom:15px}\n.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.detail-section+.detail-section{margin:0;padding:0;border:0}\n.details h3{font-size:9px;margin-bottom:7px}\n.details .value{font-size:12px}\n.email,.account-name,.bank,.payment-method,.delivery-note{font-size:11px}\n.delivery-note{margin-top:5px!important}\n.bank{margin-top:5px!important}\n.update{margin-top:13px;padding-top:10px;font-size:10px}\n.update br{display:none}\n.actions{margin-top:18px;padding-top:17px;display:block}\n.draft-note{display:none}\n.send-group{justify-content:space-between;gap:15px}\n.hint{font-size:11px;max-width:155px}\n.send{padding:12px 16px;gap:14px;font-size:13px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n  <div class=\"brand-group\"><span class=\"brand\">Morrow</span><span class=\"workspace\">Field operations</span></div>\n  <span class=\"header-note\">Research, thoughtfully managed.</span>\n</header>\n<main>\n  <p class=\"eyebrow\">Billing / Invoices</p>\n  <div class=\"page-heading\">\n    <div>\n      <h1>Invoice review</h1>\n      <p class=\"intro\">A final check before it goes to your client.</p>\n    </div>\n    <span class=\"status\">Draft</span>\n  </div>\n\n  <div class=\"review-grid\">\n    <article class=\"invoice\" aria-labelledby=\"invoice-number\">\n      <header class=\"document-head\">\n        <div>\n          <p class=\"eyebrow\">Morrow Research</p>\n          <h2 id=\"invoice-number\">Invoice #1048</h2>\n        </div>\n        <span class=\"due\">Due 28 November</span>\n      </header>\n\n      <div class=\"bill-context\">\n        <div><span class=\"label\">Bill to</span><span class=\"value\">Jules Martin</span><span class=\"context-note\">Northfield Studio</span></div>\n        <div><span class=\"label\">Project</span><span class=\"value\">North transect study</span><span class=\"context-note\">November field visit</span></div>\n      </div>\n\n      <table aria-label=\"Invoice line items\">\n        <thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount</th></tr></thead>\n        <tbody>\n          <tr><td><span class=\"item-name\">Consulting</span><span class=\"item-note\">Field planning &amp; synthesis</span><span class=\"item-note\">12 hours × $150</span></td><td class=\"amount\">$1800</td></tr>\n          <tr><td><span class=\"item-name\">Research</span><span class=\"item-note\">Interview coding &amp; field notes</span><span class=\"item-note\">4 hours × $100</span></td><td class=\"amount\">$400</td></tr>\n        </tbody>\n      </table>\n\n      <dl class=\"totals\">\n        <div><dt>Subtotal</dt><dd>$2200</dd></div>\n        <div><dt>Tax</dt><dd>$280</dd></div>\n        <div class=\"grand-total\"><dt>Total</dt><dd>$2480</dd></div>\n      </dl>\n      <p class=\"currency\">All amounts in USD</p>\n    </article>\n\n    <aside class=\"details\" aria-labelledby=\"details-heading\">\n      <h2 id=\"details-heading\">Delivery &amp; payment</h2>\n      <div class=\"detail-columns\">\n        <section class=\"detail-section\">\n          <h3>Recipient</h3>\n          <p class=\"value\">Jules Martin</p>\n          <p class=\"email\">jules@northfield.co</p>\n          <p class=\"delivery-note\">Invoice PDF by email</p>\n        </section>\n        <section class=\"detail-section\">\n          <h3>Payment details</h3>\n          <p class=\"payment-method\">Bank transfer · USD</p>\n          <p class=\"account-name\">Morrow Research LLC</p>\n          <p class=\"bank\">Mercury<br>Account ending 0432</p>\n        </section>\n      </div>\n      <p class=\"update\"><strong>Updated 8 minutes ago</strong><br> by Ada Chen, field coordinator.</p>\n    </aside>\n  </div>\n\n  <footer class=\"actions\">\n    <p class=\"draft-note\">Not yet sent to the client.</p>\n    <div class=\"send-group\">\n      <p class=\"hint\">Includes the invoice PDF and bank transfer details.</p>\n      <button class=\"send\" type=\"button\">Send invoice <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M3 10h13M11 5l5 5-5 5\"/></svg></button>\n    </div>\n  </footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-invoice-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an invoice review screen for Common. Include client Kai Nguyen, Invoice #1048, Due 28 November, line items Consulting $1800, Research $400, tax $280, Total $2480. Include payment details, a draft status and Send invoice button. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Invoice review\", \"Invoice #1048\", \"Due 28 November\", \"Consulting\", \"Research\", \"Total\", \"$2480\", \"Send invoice\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Invoice review · Common</title>\n<style>\n:root{--bg:#f3f0e9;--paper:#fffdf8;--ink:#292d26;--muted:#6c6e63;--line:#deded2;--accent:#293b2d}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input{font:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible{outline:3px solid #a8b891;outline-offset:3px}\n.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px}\n.brand{font-size:25px;font-weight:650;letter-spacing:-1.2px}\n.brand span{color:#777c65}\n.workspace{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}\n.avatar{display:grid;place-items:center;width:30px;height:30px;border:1px solid #cccdbf;border-radius:50%;color:var(--ink);font-size:11px;font-weight:650}\nmain{max-width:1104px;padding:30px 32px 40px;margin:auto}\n.breadcrumb{color:var(--muted);font-size:12px;margin:0 0 12px}\n.breadcrumb span{margin:0 8px;color:#a4a599}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0 0 7px;font-weight:600}\n.intro{margin:0;color:var(--muted)}\n.quiet-button{background:transparent;border:1px solid #c8cbbd;border-radius:6px;padding:9px 14px;color:var(--ink);white-space:nowrap}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:24px;align-items:start}\n.invoice{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:28px 30px}\n.invoice-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}\nh2{font-size:22px;letter-spacing:-.5px;font-weight:600;margin:0 0 5px}\n.due{margin:0;color:var(--muted);font-size:13px}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:#ecebdd;color:#666443;border:1px solid #dedcc7;padding:3px 9px;border-radius:20px;white-space:nowrap}\n.status:before{content:\"\";width:5px;height:5px;background:#89835e;border-radius:50%}\n.context{display:grid;grid-template-columns:1fr 1.65fr;gap:24px;margin:26px 0}\n.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 7px}\n.client{font-size:15px;font-weight:550;margin:0}\n.secondary{font-size:12px;color:var(--muted);margin:3px 0 0}\n.project-name{margin:0;font-size:14px;line-height:1.45;font-weight:500;max-width:265px}\n.fieldwork{display:flex;align-items:center;gap:8px;margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.4}\n.fieldwork svg{flex-shrink:0}\ntable{width:100%;border-collapse:collapse}\nth{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}\nth:last-child,td:last-child{text-align:right;white-space:nowrap;padding-left:16px;font-variant-numeric:tabular-nums}\ntd{padding:15px 0;vertical-align:top;border-bottom:1px solid #eae9df}\n.item{font-weight:550}\n.item-note{display:block;color:var(--muted);font-size:12px;margin-top:3px;font-weight:400;max-width:290px}\n.totals{width:58%;margin:13px 0 23px auto}\n.total-row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:13px;color:var(--muted)}\n.total-row span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}\n.total-row.grand{margin-top:9px;padding-top:13px;border-top:1px solid var(--line);font-size:19px;font-weight:600;color:var(--ink)}\n.payment{border-top:1px solid var(--line);padding-top:17px;display:grid;grid-template-columns:1fr auto;gap:20px}\n.payment p{margin:2px 0;font-size:12px}\n.payment h3{margin:0 0 5px;font-size:12px;font-weight:600}\n.payment .reference{text-align:right;color:var(--muted)}\n.reference strong{display:block;color:var(--ink);font-weight:500}\n.send-panel{padding:23px;background:#e9eadd;border:1px solid #d6dacb;border-radius:9px}\n.send-panel h2{font-size:17px;letter-spacing:-.2px;margin-bottom:6px}\n.send-panel .description{font-size:12px;color:#626959;margin:0 0 20px}\nlabel{display:block;font-size:12px;font-weight:550;margin-bottom:7px}\ninput{width:100%;min-width:0;border:1px solid #bdc3b2;border-radius:5px;background:var(--paper);padding:10px;color:var(--ink);font-size:13px}\n.delivery-note{font-size:11px;color:#626959;margin:8px 0 22px}\n.review-total{border-top:1px solid #ccd1bf;padding-top:17px;margin-top:4px}\n.review-total .amount{font-size:30px;letter-spacing:-1px;line-height:1.25;font-weight:600;margin:3px 0 17px}\n.currency{font-size:11px;letter-spacing:.4px;font-weight:500;color:#626959;margin-left:5px}\n.send{width:100%;background:var(--accent);color:#fffdf5;border:1px solid var(--accent);border-radius:5px;min-height:46px;font-size:14px;font-weight:550}\n.send:hover{background:#354b39}\n.unsent{font-size:11px;text-align:center;color:#626959;margin:10px 0 0}\n.included{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:12px;margin:16px 6px 0}\n.included svg{flex:none;margin-top:2px}\n.included p{margin:0}\n@media(max-width:760px){\n.topbar{height:58px;padding:0 20px}\n.workspace{font-size:12px;gap:9px}\nmain{padding:22px 20px 28px}\n.breadcrumb{margin-bottom:10px}\n.page-heading{margin-bottom:19px;align-items:flex-start;gap:10px}\nh1{font-size:26px}\n.intro{font-size:12px;max-width:220px}\n.quiet-button{font-size:12px;padding:7px 10px;margin-top:2px}\n.layout{grid-template-columns:minmax(0,1fr);gap:16px}\n.invoice{padding:20px}\nh2{font-size:20px}\n.context{gap:16px;grid-template-columns:1fr 1.5fr;margin:22px 0}\n.project-name{font-size:13px}\n.fieldwork{gap:5px;font-size:10px}\n.fieldwork svg{width:37px}\n.client{font-size:14px}\ntd{padding:13px 0}\n.item-note{font-size:11px}\n.totals{width:70%;margin-bottom:18px}\n.payment{gap:12px}\n.payment p{font-size:11px}\n.send-panel{padding:20px}\n.send-panel .description{margin-bottom:14px}\n.delivery-note{margin-bottom:16px}\n.review-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:13px}\n.review-total .amount{font-size:26px;margin:0 0 13px}\n.included{margin-top:12px;font-size:11px}\n}\n@media(max-width:360px){\nmain{padding-left:14px;padding-right:14px}\n.invoice{padding:16px}\n.workspace>span:first-child{display:none}\n.page-heading{flex-wrap:wrap}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\" aria-label=\"Common\">common<span>.</span></div>\n<div class=\"workspace\"><span>Field research workspace</span><span class=\"avatar\" aria-label=\"Alex Morgan\">AM</span></div>\n</header>\n<main>\n<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">Invoices <span aria-hidden=\"true\">/</span> Review</nav>\n<div class=\"page-heading\">\n<div><h1>Invoice review</h1><p class=\"intro\">A final check before it leaves the field desk.</p></div>\n<button class=\"quiet-button\" type=\"button\">Edit invoice</button>\n</div>\n<div class=\"layout\">\n<article class=\"invoice\" aria-labelledby=\"invoice-title\">\n<header class=\"invoice-heading\">\n<div><h2 id=\"invoice-title\">Invoice #1048</h2><p class=\"due\">Due 28 November</p></div>\n<span class=\"status\">Draft</span>\n</header>\n<div class=\"context\">\n<section aria-labelledby=\"bill-to\">\n<h3 class=\"eyebrow\" id=\"bill-to\">Bill to</h3>\n<p class=\"client\">Kai Nguyen</p>\n<p class=\"secondary\">Estuary Field Alliance</p>\n</section>\n<section aria-labelledby=\"project\">\n<h3 class=\"eyebrow\" id=\"project\">Project</h3>\n<p class=\"project-name\">North Estuary shoreline &amp; community mapping</p>\n<figure class=\"fieldwork\">\n<svg width=\"48\" height=\"22\" viewBox=\"0 0 48 22\" role=\"img\" aria-label=\"Three connected survey sites\">\n<path d=\"M5 17L23 5L43 15\" fill=\"none\" stroke=\"#9bA18b\" stroke-width=\"1.5\" stroke-dasharray=\"3 2\"/>\n<g fill=\"#fffdf8\" stroke=\"#59684b\" stroke-width=\"1.5\"><circle cx=\"5\" cy=\"17\" r=\"3\"/><circle cx=\"23\" cy=\"5\" r=\"3\"/><circle cx=\"43\" cy=\"15\" r=\"3\"/></g>\n</svg>\n<figcaption>3 survey sites<br>12–18 November</figcaption>\n</figure>\n</section>\n</div>\n<table aria-label=\"Invoice line items in US dollars\">\n<thead><tr><th scope=\"col\">Description</th><th scope=\"col\">Amount · USD</th></tr></thead>\n<tbody>\n<tr><td><span class=\"item\">Consulting</span><span class=\"item-note\">Fieldwork planning &amp; analysis<br>12 hours × $150</span></td><td>$1800</td></tr>\n<tr><td><span class=\"item\">Research</span><span class=\"item-note\">Site observations &amp; interview synthesis<br>Fixed project fee</span></td><td>$400</td></tr>\n</tbody>\n</table>\n<div class=\"totals\" aria-label=\"Invoice totals\">\n<div class=\"total-row\"><span>Subtotal</span><span>$2200</span></div>\n<div class=\"total-row\"><span>Tax</span><span>$280</span></div>\n<div class=\"total-row grand\"><span>Total</span><span>$2480</span></div>\n</div>\n<section class=\"payment\" aria-labelledby=\"payment-title\">\n<div>\n<h3 id=\"payment-title\">Payment details</h3>\n<p>Bank transfer · USD</p>\n<p class=\"secondary\">Common Field Research · Account ending 4821</p>\n</div>\n<div class=\"reference\"><p>Reference<strong>Invoice #1048</strong></p></div>\n</section>\n</article>\n<aside aria-label=\"Invoice delivery and review\">\n<section class=\"send-panel\" aria-labelledby=\"send-title\">\n<h2 id=\"send-title\">Send to client</h2>\n<p class=\"description\">Share the fieldwork fees and payment details with Kai.</p>\n<label for=\"recipient\">Recipient email</label>\n<input id=\"recipient\" type=\"email\" value=\"kai.nguyen@estuary.org\" spellcheck=\"false\">\n<p class=\"delivery-note\">Invoice PDF and bank details included.</p>\n<div class=\"review-total\">\n<span class=\"eyebrow\">Amount due</span>\n<p class=\"amount\">$2480<span class=\"currency\">USD</span></p>\n</div>\n<button class=\"send\" type=\"button\">Send invoice</button>\n<p class=\"unsent\">Draft only · Not yet sent</p>\n</section>\n<div class=\"included\">\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 1.5h5l3 3v10H4z\" stroke=\"currentColor\"/><path d=\"M9 1.5v3h3M6 8h4M6 10.5h4\" stroke=\"currentColor\"/></svg>\n<p>Client copy includes billing details only. Field notes and participant records stay private.</p>\n</div>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-activity-0","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an activity feed for Alder. Include a native All activity filter, Today with six realistic events including Project update and Comment added, actor names, relative timestamps, one comment excerpt, and a Mark all read button. Distinguish event types with small inline icons or initials. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team activity\", \"Today\", \"Project update\", \"Comment added\", \"All activity\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team activity · Alder</title>\n<style>\n*{box-sizing:border-box}\n:root{--paper:#f5f2ec;--card:#fffdf9;--ink:#25372d;--text:#30362f;--muted:#6c7067;--line:#e2e0d7;--soft:#edf0e8}\nbody{margin:0;background:var(--paper);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,select{font:inherit}\nbutton,select{min-height:40px;border-radius:6px}\nbutton{cursor:pointer}\nbutton:focus-visible,select:focus-visible{outline:3px solid #9baf8b;outline-offset:3px}\n.app-header{height:72px;border-bottom:1px solid var(--line);padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card)}\n.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:23px;font-weight:700;letter-spacing:-1px}\n.brand-mark{display:grid;place-items:center;width:29px;height:32px;border:1.5px solid var(--ink);border-radius:14px 14px 5px 5px;font-size:19px;line-height:1}\n.shop{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500}\n.avatar{display:grid;place-items:center;background:#e8e5db;border:1px solid #d9d7cc;width:32px;height:32px;border-radius:50%;font-size:11px;font-weight:700;color:var(--ink)}\nmain{max-width:888px;margin:38px auto;padding:0 24px}\n.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1.1px;margin:0 0 9px;color:var(--ink);font-weight:650}\n.summary{margin:0;color:var(--muted);font-size:13px}\n.summary strong{color:var(--ink);font-weight:600}\n.primary{background:var(--ink);color:#fffdf9;border:1px solid var(--ink);padding:9px 15px;white-space:nowrap;font-weight:600;box-shadow:0 1px 2px #25372d15}\n.primary:hover{background:#354b3c}\n.feed{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.feed-heading{padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}\nh2{margin:0;font-size:17px;letter-spacing:-.25px;color:var(--ink)}\n.date{font-size:12px;color:var(--muted);margin:2px 0 0}\n.filter{display:flex;align-items:center;gap:9px}\n.filter label{font-size:12px;color:var(--muted)}\nselect{max-width:100%;background:var(--card);border:1px solid #c9cdc1;color:var(--ink);padding:7px 29px 7px 11px;font-size:13px}\n.events{list-style:none;padding:0;margin:0}\n.event{display:flex;gap:13px;padding:17px 22px;position:relative}\n.event+.event{border-top:1px solid var(--line)}\n.event.unread{background:#f8f9f3}\n.event.unread:before{content:\"\";position:absolute;left:0;top:18px;bottom:18px;width:3px;background:#647b55;border-radius:0 2px 2px 0}\n.event-icon{width:32px;height:32px;border:1px solid #e1e3d8;background:var(--soft);border-radius:8px;display:grid;place-items:center;flex-shrink:0;color:#51664a}\n.event-icon.comment{background:#eee9df;border-color:#e4ddcf;color:#746345}\n.event-icon.stock{background:#edece8;border-color:#e1dfd9;color:#66685d}\n.event-icon.booking{background:#e8eeed;border-color:#dce5e2;color:#4c6e64}\n.event-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}\n.event-content{flex:1;min-width:0}\n.event-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 5px}\n.type{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\nh3{font-size:13px;font-weight:650;line-height:1.4;margin:0;color:var(--ink)}\n.badge{font-size:10px;font-weight:600;line-height:1.5;color:#526744;background:#e7ecdf;padding:1px 6px;border-radius:4px}\ntime{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}\n.event p{margin:0;font-size:13px;overflow-wrap:anywhere}\n.actor{font-weight:600;color:var(--ink)}\n.detail{color:var(--muted);font-size:12px!important;margin-top:4px!important}\n.object{font-weight:550;color:#485543}\nblockquote{border-left:2px solid #b9bda9;padding:4px 0 4px 11px;margin:9px 0 0;color:#555b50;font-size:13px;max-width:590px}\n.feed-footer{border-top:1px solid var(--line);padding:12px 22px;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px}\n.page-note{font-size:12px;color:var(--muted);margin:14px 0 0;text-align:center}\n@media(max-width:600px){\n.app-header{height:60px;padding:0 18px}\n.brand{font-size:21px}\n.shop{font-size:11px;gap:8px}\n.avatar{display:none}\nmain{padding:0 16px;margin:25px auto}\n.page-heading{gap:10px;margin-bottom:20px;align-items:flex-start}\nh1{font-size:25px;letter-spacing:-.7px;margin-bottom:7px}\n.summary{font-size:12px;max-width:185px}\n.primary{padding:8px 11px;font-size:12px;min-height:36px;margin-top:1px}\n.feed-heading{padding:14px 13px;gap:10px}\n.filter{display:block}\n.filter label{display:block;font-size:10px;margin-bottom:3px}\nselect{min-height:35px;font-size:12px;padding:5px 23px 5px 8px;width:132px}\nh2{font-size:16px}\n.date{font-size:11px}\n.event{padding:14px 13px;gap:10px}\n.event-icon{width:27px;height:29px;border-radius:6px}\n.event-icon svg{width:15px;height:15px}\n.event-top{gap:6px;margin-bottom:5px}\nh3{font-size:12px}\n.type{gap:5px}\n.badge{font-size:9px;padding:0 4px}\ntime{font-size:10px}\n.event p,blockquote{font-size:12px}\n.detail{font-size:11px!important}\n.feed-footer{padding:11px 13px;font-size:10px}\n.page-note{font-size:11px}\n}\n</style>\n</head>\n<body>\n<header class=\"app-header\">\n<div class=\"brand\"><span class=\"brand-mark\" aria-hidden=\"true\">a</span>Alder</div>\n<div class=\"shop\"><span>Birch Street Bikes</span><span class=\"avatar\" aria-label=\"Sam Wilson\">SW</span></div>\n</header>\n<main id=\"activity\">\n<div class=\"page-heading\">\n<div>\n<h1>Team activity</h1>\n<p class=\"summary\"><strong>3 unread</strong> · 6 updates from your shop</p>\n</div>\n<button class=\"primary\" type=\"button\">Mark all read</button>\n</div>\n\n<section class=\"feed\" aria-labelledby=\"today-heading\">\n<header class=\"feed-heading\">\n<div><h2 id=\"today-heading\">Today</h2><p class=\"date\">Thursday, May 22</p></div>\n<div class=\"filter\">\n<label for=\"activity-filter\">Activity type</label>\n<select id=\"activity-filter\" name=\"activity\">\n<option selected>All activity</option>\n<option>Project updates</option>\n<option>Comments</option>\n<option>Completed tasks</option>\n<option>Inventory updates</option>\n<option>Bookings</option>\n</select>\n</div>\n</header>\n\n<ol class=\"events\">\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 6h6l2 2h8v11H4zM4 6V4h6l2 2h8v2\"/></svg></span>\n<div class=\"event-content\">\n<div class=\"event-top\"><div class=\"type\"><h3>Project update</h3><span class=\"badge\">Unread</span></div><time datetime=\"2025-05-22T10:52\">8 min ago</time></div>\n<p><span class=\"actor\">Maya Chen</span> moved <span class=\"object\">Saturday service queue</span> to Ready for review.</p>\n<p class=\"detail\">4 bikes scheduled · Check the bench assignments before Saturday.</p>\n</div>\n</li>\n\n<li class=\"event unread\">\n<span class=\"event-icon comment\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 4h14v12H9l-5 4V5a1 1 0 0 1 1-1zM8 8h8M8 12h5\"/></svg></span>\n<div class=\"event-content\">\n<div class=\"event-top\"><div class=\"type\"><h3>Comment added</h3><span class=\"badge\">Unread</span></div><time datetime=\"2025-05-22T10:37\">23 min ago</time></div>\n<p><span class=\"actor\">Tom Reyes</span> commented on <span class=\"object\">Trek FX 2 · Brake service</span>.</p>\n<blockquote>“Rear pads are in. I can finish the blue Trek before the 3 pm pickup.”</blockquote>\n</div>\n</li>\n\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8\"/><path d=\"m8 12 3 3 5-6\"/></svg></span>\n<div class=\"event-content\">\n<div class=\"event-top\"><div class=\"type\"><h3>Task completed</h3><span class=\"badge\">Unread</span></div><time datetime=\"2025-05-22T10:18\">42 min ago</time></div>\n<p><span class=\"actor\">Leah Brooks</span> completed <span class=\"object\">Safety check · Nora’s commuter</span>.</p>\n<p class=\"detail\">Brakes and gears checked · Ready for customer pickup</p>\n</div>\n</li>\n\n<li class=\"event\">\n<span class=\"event-icon stock\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"m12 3 8 4v10l-8 4-8-4V7zM4 7l8 4 8-4M12 11v10M8 5l8 4\"/></svg></span>\n<div class=\"event-content\">\n<div class=\"event-top\"><div class=\"type\"><h3>Inventory update</h3></div><time datetime=\"2025-05-22T09:45\">1 hr ago</time></div>\n<p><span class=\"actor\">Maya Chen</span> received <span class=\"object\">24 Shimano brake-pad sets</span>.</p>\n<p class=\"detail\">Restock list · Replacement brake pads for everyday commuters, school-run families and long-wheelbase cargo bikes</p>\n</div>\n</li>\n\n<li class=\"event\">\n<span class=\"event-icon booking\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"15\" rx=\"2\"/><path d=\"M8 3v4M16 3v4M4 10h16M12 13v4M10 15h4\"/></svg></span>\n<div class=\"event-content\">\n<div class=\"event-top\"><div class=\"type\"><h3>Booking added</h3></div><time datetime=\"2025-05-22T09:10\">2 hr ago</time></div>\n<p><span class=\"actor\">Sam Wilson</span> booked <span class=\"object\">Avery’s cargo bike · Annual service</span>.</p>\n<p class=\"detail\">Tomorrow, 9:30 am · 90-minute workshop slot</p>\n</div>\n</li>\n\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 6h6l2 2h8v11H4zM4 6V4h6l2 2h8v2\"/></svg></span>\n<div class=\"event-content\">\n<div class=\"event-top\"><div class=\"type\"><h3>Project update</h3></div><time datetime=\"2025-05-22T08:05\">3 hr ago</time></div>\n<p><span class=\"actor\">Tom Reyes</span> updated <span class=\"object\">Community puncture clinic</span>.</p>\n<p class=\"detail\">Demo wheels prepared · Saturday, 10 am · 8 riders signed up</p>\n</div>\n</li>\n</ol>\n<footer class=\"feed-footer\"><span>All 6 events shown</span><span>Times in your shop’s local time</span></footer>\n</section>\n<p class=\"page-note\">A shared view of the work that keeps your shop rolling.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-activity-2","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an activity feed for Fieldwork. Include a native All activity filter, Today with six realistic events including Project update and Comment added, actor names, relative timestamps, one comment excerpt, and a Mark all read button. Distinguish event types with small inline icons or initials. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team activity\", \"Today\", \"Project update\", \"Comment added\", \"All activity\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team activity · Fieldwork</title>\n<style>\n:root{color-scheme:light;--paper:#f8f7f3;--ink:#292e2b;--muted:#666b66;--line:#dcded6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,select{font:inherit;color:inherit}\nbutton,select{border:1px solid #a8ada5;background:var(--paper);border-radius:6px;min-height:42px}\nbutton{padding:9px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;cursor:pointer}\nbutton:hover,select:hover{background:#eeeee7}\nbutton:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}\nsvg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1080px;margin:auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:750;letter-spacing:-.8px}\n.brand svg{width:27px;height:27px}\n.workspace{font-size:13px;text-align:right}\n.workspace small{display:block;color:var(--muted);font-size:11px}\nmain{max-width:940px;margin:0 auto;padding:42px 32px 32px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:27px}\nh1{font-size:34px;line-height:1.2;letter-spacing:-1.1px;margin:0 0 8px;font-weight:650}\n.intro{margin:0;color:var(--muted)}\n.page-heading button{flex-shrink:0}\n.health{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin-top:14px}\n.health svg{width:14px;height:14px}\n.feed{border:1px solid var(--line);border-radius:9px;overflow:hidden}\n.feed-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 24px;border-bottom:1px solid var(--line)}\nh2{font-size:19px;letter-spacing:-.3px;margin:0 0 2px;font-weight:650}\n.summary{margin:0;color:var(--muted);font-size:12px}\n.filter label{display:block;font-size:11px;font-weight:600;margin-bottom:5px;color:var(--muted)}\nselect{width:164px;padding:8px 30px 8px 11px}\n.events{list-style:none;padding:0;margin:0}\n.event{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:18px 24px}\n.event+.event{border-top:1px solid var(--line)}\n.event-icon{width:32px;height:32px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;margin-top:2px;color:var(--muted)}\n.unread .event-icon{color:var(--ink);border-color:#a8ada5;background:#eeeee7}\n.event-top{display:flex;align-items:center;gap:8px;margin-bottom:3px;min-width:0}\n.event-type{font-size:11px;font-weight:650;letter-spacing:.15px}\n.unread-label{font-size:10px;font-weight:600;display:inline-flex;align-items:center;gap:4px}\n.unread-label::before{content:\"\";width:4px;height:4px;background:currentColor;border-radius:50%}\ntime{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}\nh3{font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.15px;margin:0 0 3px}\n.details{margin:0;color:var(--muted);font-size:12px}\n.details .actor{color:var(--ink);font-weight:500}\n.details b{font-weight:600;color:var(--ink)}\nblockquote{margin:8px 0 0;padding:2px 0 2px 11px;border-left:2px solid #b8bdb4;font-size:13px;color:var(--muted);max-width:590px}\n.feed-footer{border-top:1px solid var(--line);padding:12px 24px;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}\n@media(max-width:600px){\n.header-inner{padding:16px 20px}\n.brand{font-size:20px}\n.workspace{font-size:11px}\n.workspace small{font-size:10px}\nmain{padding:27px 16px 24px}\n.page-heading{display:block;margin-bottom:22px}\nh1{font-size:29px}\n.intro{font-size:13px}\n.health{margin-top:10px}\n.page-heading button{margin-top:18px;min-height:40px;font-size:12px;padding:8px 12px}\n.feed-header{padding:16px}\nselect{width:143px;font-size:12px;min-height:38px}\n.event{padding:16px 14px;grid-template-columns:27px minmax(0,1fr);gap:10px}\n.event-icon{width:27px;height:27px;border-radius:6px}\n.event-icon svg{width:16px;height:16px}\n.event-top{gap:6px;flex-wrap:wrap}\n.event-type{font-size:10px}\n.unread-label{font-size:9px}\ntime{font-size:10px}\nh3{font-size:14px}\n.details{font-size:12px;line-height:1.55}\nblockquote{font-size:12px;margin-top:7px}\n.feed-footer{padding:12px 14px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" aria-hidden=\"true\"><circle cx=\"14\" cy=\"14\" r=\"11\"/><circle cx=\"14\" cy=\"14\" r=\"2\"/><path d=\"M14 3v9m0 4v9M3 14h9m4 0h9M6.2 6.2l6.4 6.4m2.8 2.8 6.4 6.4M6.2 21.8l6.4-6.4m2.8-2.8 6.4-6.4\"/></svg>\nFieldwork\n</div>\n<div class=\"workspace\">Cedar Cycle Works<small>Workshop workspace</small></div>\n</div>\n</header>\n<main id=\"activity\">\n<div class=\"page-heading\">\n<div>\n<h1>Team activity</h1>\n<p class=\"intro\">The latest from your service bench and shop floor.</p>\n<div class=\"health\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"7.5\"/><path d=\"m6.5 10 2.2 2.2 4.8-4.8\"/></svg>\nNo blocked jobs\n</div>\n</div>\n<button type=\"button\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"m2 10 4 4 8-8m-3 8 7-8\"/></svg>\nMark all read\n</button>\n</div>\n\n<section class=\"feed\" aria-labelledby=\"today\">\n<header class=\"feed-header\">\n<div><h2 id=\"today\">Today</h2><p class=\"summary\">6 updates · 2 unread</p></div>\n<div class=\"filter\">\n<label for=\"activity-type\">Activity type</label>\n<select id=\"activity-type\" name=\"activity-type\">\n<option selected>All activity</option>\n<option>Project updates</option>\n<option>Comments</option>\n<option>Workshop tasks</option>\n<option>Bookings &amp; parts</option>\n</select>\n</div>\n</header>\n<ol class=\"events\">\n<li class=\"event unread\">\n<div class=\"event-icon\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><rect x=\"4\" y=\"4\" width=\"12\" height=\"13\" rx=\"2\"/><path d=\"M7 4V2h6v2M7 9h6m-6 4h4\"/></svg>\n</div>\n<article>\n<div class=\"event-top\"><span class=\"event-type\">Project update</span><span class=\"unread-label\">Unread</span><time datetime=\"2025-05-14T10:48\">12 min ago</time></div>\n<h3>Weekend tune-up plan</h3>\n<p class=\"details\"><span class=\"actor\">Maya Chen</span> · <b>Progress:</b> 8 of 12 bikes ready. <b>Next:</b> final safety checks.</p>\n</article>\n</li>\n<li class=\"event unread\">\n<div class=\"event-icon\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M5 15H3V3h14v10H8l-3 4z\"/><path d=\"M6 7h8m-8 3h5\"/></svg>\n</div>\n<article>\n<div class=\"event-top\"><span class=\"event-type\">Comment added</span><span class=\"unread-label\">Unread</span><time datetime=\"2025-05-14T10:35\">25 min ago</time></div>\n<h3>Sam’s commuter · WO-1842</h3>\n<p class=\"details\"><span class=\"actor\">Leo Martinez</span> · Note for the test ride</p>\n<blockquote>“New brake pads are fitted. Please bed them in on the test ride.”</blockquote>\n</article>\n</li>\n<li class=\"event\">\n<div class=\"event-icon\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"7.5\"/><path d=\"m6 10 2.5 2.5L14 7\"/></svg>\n</div>\n<article>\n<div class=\"event-top\"><span class=\"event-type\">Task completed</span><time datetime=\"2025-05-14T10:12\">48 min ago</time></div>\n<h3>Safety check signed off · WO-1838</h3>\n<p class=\"details\"><span class=\"actor\">Rina Patel</span> · <b>Ready for pickup.</b> Customer notified by phone.</p>\n</article>\n</li>\n<li class=\"event\">\n<div class=\"event-icon\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><rect x=\"3\" y=\"4\" width=\"14\" height=\"13\" rx=\"2\"/><path d=\"M6 2v4m8-4v4M3 8h14m-10 4h2m2 0h2\"/></svg>\n</div>\n<article>\n<div class=\"event-top\"><span class=\"event-type\">Booking added</span><time datetime=\"2025-05-14T10:00\">1 hr ago</time></div>\n<h3>Touring bike service · Friday, 9:00 am</h3>\n<p class=\"details\"><span class=\"actor\">Maya Chen</span> · <b>Booked.</b> Full service and rear wheel true for Alex.</p>\n</article>\n</li>\n<li class=\"event\">\n<div class=\"event-icon\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"m3 5 7-3 7 3v10l-7 3-7-3zM3 5l7 3 7-3M10 8v10M6.5 3.5l7 3\"/></svg>\n</div>\n<article>\n<div class=\"event-top\"><span class=\"event-type\">Parts received</span><time datetime=\"2025-05-14T09:00\">2 hr ago</time></div>\n<h3>11-speed chains · PO-0264</h3>\n<p class=\"details\"><span class=\"actor\">Owen Brooks</span> · <b>In stock:</b> 6 chains. Two reserved for open repairs.</p>\n</article>\n</li>\n<li class=\"event\">\n<div class=\"event-icon\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M3 6h13m-4-4 4 4-4 4M17 14H4m4-4-4 4 4 4\"/></svg>\n</div>\n<article>\n<div class=\"event-top\"><span class=\"event-type\">Job assigned</span><time datetime=\"2025-05-14T08:00\">3 hr ago</time></div>\n<h3>Kids’ bike brake adjustment · WO-1840</h3>\n<p class=\"details\"><span class=\"actor\">Maya Chen</span> assigned <span class=\"actor\">Leo Martinez</span> · <b>Next:</b> check cable tension before noon.</p>\n</article>\n</li>\n</ol>\n<footer class=\"feed-footer\"><span>End of today’s activity</span><span>All times local</span></footer>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-activity-3","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an activity feed for Common. Include a native All activity filter, Today with six realistic events including Project update and Comment added, actor names, relative timestamps, one comment excerpt, and a Mark all read button. Distinguish event types with small inline icons or initials. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team activity\", \"Today\", \"Project update\", \"Comment added\", \"All activity\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team activity · Common</title>\n<style>\n:root{--ink:#262e29;--muted:#70766e;--line:#dedfd6;--paper:#f5f4ed;--green:#355c47;--soft:#eaf0e8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,select{font:inherit;color:inherit}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1120px;margin:auto;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{font-size:23px;font-weight:750;letter-spacing:-1px}\n.brand span{color:var(--green)}\n.shop{display:flex;align-items:center;gap:12px}\n.shop-icon{width:32px;height:32px;border:1px solid #c8cdc1;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}\n.shop strong{font-weight:600}.shop small{display:block;color:var(--muted);font-size:11px}\nmain{max-width:1120px;margin:0 auto;padding:32px 0 36px}\n.eyebrow{margin:0 0 6px;text-transform:uppercase;font-size:10px;letter-spacing:1.7px;font-weight:700;color:var(--green)}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:48px;line-height:1.08;letter-spacing:-1.8px;font-weight:400;margin:0}\n.intro{margin:10px 0 26px;color:var(--muted);max-width:620px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:36px;align-items:start}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px}\n.filter{display:flex;align-items:center;gap:10px}\nlabel{font-size:12px;color:var(--muted)}\nselect{background:#fffef9;border:1px solid #cdd0c5;border-radius:5px;padding:9px 30px 9px 11px;max-width:100%}\nbutton{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #cdd0c5;background:transparent;border-radius:5px;padding:9px 12px;font-weight:600;font-size:12px;white-space:nowrap;cursor:pointer}\nbutton:hover{background:var(--soft)}\nbutton:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}\nbutton svg{width:15px;height:15px}\n.day-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--ink)}\nh2{font-size:18px;margin:0;font-weight:650}\n.day-heading p{margin:0;font-size:12px;color:var(--muted)}\n.feed{padding:0;margin:0;list-style:none;border-top:1px solid var(--line)}\n.event{display:flex;gap:13px;padding:17px 0;border-bottom:1px solid var(--line)}\n.event-icon{width:30px;height:30px;border-radius:6px;flex:0 0 30px;display:grid;place-items:center;background:#e8e9e1;color:#646d61}\n.event-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}\n.unread .event-icon{background:var(--soft);color:var(--green)}\n.comment .event-icon{background:#f0e9dd;color:#896740}\n.event-body{flex:1;min-width:0}\n.event-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}\n.event-type{font-size:12px;font-weight:650}\ntime{font-size:11px;color:var(--muted);white-space:nowrap}\n.new{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--green);font-size:10px;font-weight:500}\n.new:before{content:\"\";width:5px;height:5px;border-radius:50%;background:var(--green)}\n.event p{margin:3px 0 0;font-size:13px}\n.actor{font-weight:600}\n.context{color:var(--muted);font-size:12px!important}\nblockquote{margin:8px 0 0;padding:2px 0 2px 11px;border-left:2px solid #c9cbbb;color:#60675d;font-size:12px;line-height:1.55}\naside{border-top:1px solid var(--ink);padding-top:16px}\naside h2{font-family:Georgia,\"Times New Roman\",serif;font-size:23px;font-weight:400;line-height:1.2}\n.snapshot{margin-top:16px;background:#eeeee5;padding:19px;border:1px solid var(--line)}\n.snapshot h3{margin:0 0 16px;font-size:14px;line-height:1.4;font-weight:600}\n.total{font-family:Georgia,\"Times New Roman\",serif;font-size:34px;line-height:1}\n.total span{font-size:19px;color:var(--muted)}\n.caption{margin:5px 0 10px;font-size:12px;color:var(--muted)}\n.progress{display:block;width:100%;height:13px}\n.progress-key{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:5px}\ndl{margin:20px 0 0;padding-top:12px;border-top:1px solid #d4d7cb;font-size:12px}\ndl div{display:flex;justify-content:space-between;gap:12px;margin:7px 0}\ndt{color:var(--muted)}dd{margin:0;font-weight:550}\n.parts-note{margin:17px 0 0;font-size:12px;color:var(--muted);line-height:1.6}\n.parts-note strong{display:block;color:var(--ink);font-size:11px;margin-bottom:3px}\n.feed-note{margin:15px 0 0;font-size:11px;color:var(--muted)}\n@media(max-width:1190px){.header-inner,main{margin-left:32px;margin-right:32px}}\n@media(max-width:700px){\n.header-inner{margin:0;padding:14px 20px}.brand{font-size:21px}.shop{gap:8px}.shop-icon{display:none}.shop strong{font-size:12px}.shop small{font-size:10px}\nmain{margin:0;padding:25px 20px}.eyebrow{font-size:9px}h1{font-size:38px;letter-spacing:-1.3px}.intro{font-size:13px;margin:9px 0 21px;line-height:1.5}\n.layout{grid-template-columns:minmax(0,1fr);gap:28px}.toolbar{gap:8px;padding-bottom:16px}.filter{gap:7px}label{font-size:11px}select{font-size:12px;padding:9px 22px 9px 8px;width:125px}button{padding:10px 9px;font-size:11px;gap:5px}\n.day-heading{padding:12px 0}.day-heading p{font-size:11px}.event{padding:14px 0;gap:10px}.event-top{gap:5px}.event-type{font-size:11px}.new{margin-left:5px;font-size:9px}time{font-size:10px}.event p{font-size:12px}.event-icon{width:27px;height:27px;flex-basis:27px}blockquote{font-size:12px}\naside h2{font-size:22px}.snapshot{margin-top:12px}.snapshot h3{margin-bottom:12px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\">Common<span>.</span></div>\n<div class=\"shop\"><span class=\"shop-icon\" aria-hidden=\"true\">RC</span><div><strong>Rivet Cycle Works</strong><small>Independent shop · Team workspace</small></div></div>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">The daily record</p>\n<h1>Team activity</h1>\n<p class=\"intro\">What’s moving in the shop: service updates, parts arrivals, and notes from the team.</p>\n<div class=\"layout\">\n<section aria-labelledby=\"today-heading\">\n<div class=\"toolbar\">\n<div class=\"filter\">\n<label for=\"activity-filter\">Show</label>\n<select id=\"activity-filter\" name=\"activity\">\n<option>All activity</option>\n<option>Project updates</option>\n<option>Comments</option>\n<option>Work orders</option>\n<option>Stock updates</option>\n<option>Bookings</option>\n<option>Shift handoffs</option>\n</select>\n</div>\n<button type=\"button\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"m3 10 4 4 8-8M11 14l6-6\"/></svg>Mark all read</button>\n</div>\n<div class=\"day-heading\"><h2 id=\"today-heading\">Today</h2><p>6 updates · 2 unread</p></div>\n<ol class=\"feed\" aria-label=\"Today's activity, newest first\">\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M6 4H4v13h12V4h-2M7 2h6v4H7zM7 10h6M7 13h4\"/></svg></span>\n<div class=\"event-body\">\n<div class=\"event-top\"><span class=\"event-type\">Project update<span class=\"new\">New</span></span><time datetime=\"2024-06-12T12:52\">8 min ago</time></div>\n<p><span class=\"actor\">Maya Chen</span> updated Spring tune-up queue.</p>\n<p class=\"context\">18 of 24 bikes serviced. Six still on the bench.</p>\n</div>\n</li>\n<li class=\"event unread comment\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M3 3h14v10H8l-5 4V3zM6 7h8M6 10h5\"/></svg></span>\n<div class=\"event-body\">\n<div class=\"event-top\"><span class=\"event-type\">Comment added<span class=\"new\">New</span></span><time datetime=\"2024-06-12T12:38\">22 min ago</time></div>\n<p><span class=\"actor\">Eli Brooks</span> on WO-1847 · Trek FX 3</p>\n<blockquote>“Rear pads are worn to the line. Waiting on the rider’s approval before fitting a new set.”</blockquote>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"m6 10 3 3 5-6\"/></svg></span>\n<div class=\"event-body\">\n<div class=\"event-top\"><span class=\"event-type\">Work order ready</span><time datetime=\"2024-06-12T12:14\">46 min ago</time></div>\n<p><span class=\"actor\">Jo Patel</span> completed WO-1842 · Specialized Sirrus.</p>\n<p class=\"context\">Ready for collection. Pickup message sent to the rider.</p>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"m3 6 7-3 7 3v9l-7 3-7-3V6zm0 0 7 3 7-3M10 9v9M6.5 4.5l7 3\"/></svg></span>\n<div class=\"event-body\">\n<div class=\"event-top\"><span class=\"event-type\">Stock received</span><time datetime=\"2024-06-12T12:00\">1 hr ago</time></div>\n<p><span class=\"actor\">Noah Reed</span> checked in 12 × 700c inner tubes.</p>\n<p class=\"context\">Presta valves · Restocked in parts drawer B2.</p>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M3 5h14v12H3zM3 8h14M6 3v4M14 3v4M6 11h3M6 14h6\"/></svg></span>\n<div class=\"event-body\">\n<div class=\"event-top\"><span class=\"event-type\">Booking added</span><time datetime=\"2024-06-12T11:00\">2 hr ago</time></div>\n<p><span class=\"actor\">Jo Patel</span> booked a Saturday brake adjustment.</p>\n<p class=\"context\">15 June, 10:30 am · Alex Morgan · 30-minute slot.</p>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M3 6h13m-4-3 4 3-4 3M17 14H4m4-3-4 3 4 3\"/></svg></span>\n<div class=\"event-body\">\n<div class=\"event-top\"><span class=\"event-type\">Shift handoff</span><time datetime=\"2024-06-12T10:00\">3 hr ago</time></div>\n<p><span class=\"actor\">Maya Chen</span> left a note for the afternoon crew.</p>\n<p class=\"context\">Two wheel builds at stand 2. Spokes are sorted and labelled.</p>\n</div>\n</li>\n</ol>\n<p class=\"feed-note\">Wednesday, 12 June · Shop-local time · Newest updates first</p>\n</section>\n<aside aria-labelledby=\"snapshot-heading\">\n<p class=\"eyebrow\">At the workbench</p>\n<h2 id=\"snapshot-heading\">Workshop snapshot</h2>\n<div class=\"snapshot\">\n<p class=\"eyebrow\">Active project</p>\n<h3>Spring tune-up queue</h3>\n<div class=\"total\">18 <span>/ 24</span></div>\n<p class=\"caption\">bikes serviced this week</p>\n<svg class=\"progress\" viewBox=\"0 0 240 12\" role=\"img\" aria-labelledby=\"progress-title\">\n<title id=\"progress-title\">Spring tune-up progress: 18 bikes complete, 6 remaining. 75 percent complete.</title>\n<rect width=\"240\" height=\"12\" rx=\"2\" fill=\"#d5d9cc\"/>\n<rect width=\"180\" height=\"12\" rx=\"2\" fill=\"#355c47\"/>\n<path d=\"M60 0v12M120 0v12M180 0v12\" stroke=\"#eeeee5\" stroke-width=\"2\"/>\n</svg>\n<div class=\"progress-key\"><span>18 complete</span><span>6 remaining</span></div>\n<dl>\n<div><dt>Project lead</dt><dd>Maya Chen</dd></div>\n<div><dt>Next collection</dt><dd>2:30 pm</dd></div>\n<div><dt>Waiting on approval</dt><dd>2 bikes</dd></div>\n</dl>\n</div>\n<p class=\"parts-note\"><strong>Parts to watch</strong>700c tubes are back in stock. Disc brake pads are running low—check the drawer before promising same-day service.</p>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-activity-5","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an activity feed for North. Include a native All activity filter, Today with six realistic events including Project update and Comment added, actor names, relative timestamps, one comment excerpt, and a Mark all read button. Distinguish event types with small inline icons or initials. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team activity\", \"Today\", \"Project update\", \"Comment added\", \"All activity\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team activity · North</title>\n<style>\n:root{color-scheme:light;--bg:#f4f2ed;--paper:#fffefa;--ink:#26352e;--muted:#697169;--line:#e4e4da;--accent:#203f33}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,select{font:inherit}\nbutton,select{outline-offset:4px}\n.topbar{border-bottom:1px solid var(--line);background:var(--paper)}\n.topbar-inner{max-width:1120px;margin:auto;min-height:80px;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.identity,.brand,.profile{display:flex;align-items:center;gap:12px}\n.brand{gap:9px;font-size:23px;font-weight:750;letter-spacing:-1px}\n.brand svg{width:27px;height:27px}\n.workspace{border-left:1px solid #d7d9cf;margin-left:14px;padding-left:25px;color:var(--muted);font-size:13px}\n.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e6e9df;color:var(--accent);font-size:11px;font-weight:700}\n.profile-name{font-size:12px}\n.profile-name small{display:block;color:var(--muted);font-size:11px}\nmain{max-width:944px;margin:48px auto 40px;padding:0 32px}\n.eyebrow{margin:0 0 7px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase}\nh1{margin:0;font-size:34px;line-height:1.2;font-weight:650;letter-spacing:-1.2px}\n.intro{margin:10px 0 28px;color:var(--muted);font-size:15px}\n.feed{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #29352904}\n.toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;border-bottom:1px solid var(--line)}\n.filter{display:flex;align-items:center;gap:10px;flex-shrink:0}\nlabel{font-size:12px;color:var(--muted)}\nselect{max-width:100%;min-height:39px;width:158px;border:1px solid #cdd1c5;border-radius:6px;background:var(--paper);color:var(--ink);padding:7px 28px 7px 11px;font-size:13px}\n.actions{display:flex;align-items:center;gap:14px}\n.hint{max-width:150px;margin:0;color:var(--muted);font-size:11px;line-height:1.5}\nbutton{min-height:40px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fffefa;padding:9px 15px;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}\nbutton:hover{background:#2c5140}\n.day-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 24px 14px}\n.day-title{display:flex;align-items:center;gap:10px}\nh2{font-size:15px;margin:0;font-weight:650}\n.unread-count{padding:2px 7px;border-radius:4px;background:#e9eee5;color:#3f5947;font-size:10px;font-weight:600}\n.updated{color:var(--muted);font-size:11px}\nol{list-style:none;margin:0;padding:0}\n.event{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;margin:0 24px;padding:17px 0;border-bottom:1px solid var(--line)}\n.event:last-child{border-bottom:0;padding-bottom:24px}\n.event-icon{position:relative;display:grid;place-items:center;width:34px;height:34px;background:#efefe7;border:1px solid #e4e5da;border-radius:8px;color:#5b6858}\n.event-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}\n.unread .event-icon{background:#e8eee3;color:#36563d;border-color:#dce5d5}\n.unread .event-icon:after{content:\"\";position:absolute;right:-3px;top:-3px;width:6px;height:6px;border:2px solid var(--paper);border-radius:50%;background:#3e6847}\n.event-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 5px}\nh3{margin:0;color:#636d60;font-size:11px;font-weight:600}\n.unread h3{color:#3e5a40}\n.timestamp{flex-shrink:0;font-size:11px;color:var(--muted)}\n.event p{margin:0;font-size:14px;line-height:1.5}\n.actor{font-weight:650}\n.subject{font-weight:550}\n.detail{display:block;margin-top:4px;color:var(--muted);font-size:12px}\nblockquote{margin:10px 0 0;padding:9px 13px;border-left:2px solid #c9d2bf;background:#f4f5ee;border-radius:0 5px 5px 0;color:#596351;font-size:13px;line-height:1.6}\n.feed-footer{padding:12px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;display:flex;align-items:center;gap:7px}\n.feed-footer svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media(max-width:620px){\n.topbar-inner{min-height:66px;padding:14px 20px}\n.identity{gap:0}.workspace{font-size:11px;line-height:1.4;margin-left:15px;padding-left:15px;max-width:125px}\n.brand{font-size:21px}.brand svg{width:23px;height:23px}\n.profile-name{display:none}.avatar{width:30px;height:30px}\nmain{margin:28px auto;padding:0 16px}\nh1{font-size:29px}.intro{font-size:13px;margin:8px 0 22px}\n.toolbar{padding:16px;gap:16px;align-items:stretch;flex-direction:column}\n.filter{justify-content:space-between}\nselect{width:185px}\n.actions{flex-direction:row-reverse;justify-content:space-between;gap:18px}\n.hint{max-width:170px}\n.day-heading{padding:17px 16px 6px}\n.updated{font-size:10px}\n.event{margin:0 16px;gap:11px;padding:15px 0;grid-template-columns:30px minmax(0,1fr)}\n.event-icon{width:30px;height:30px;border-radius:7px}\n.event p{font-size:13px}\n.event-heading{gap:8px;margin-bottom:4px}\nh3,.timestamp{font-size:10px}\n.detail{font-size:11px}\nblockquote{font-size:12px;padding:8px 10px}\n.feed-footer{padding:12px 16px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"identity\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" aria-hidden=\"true\"><path fill=\"#203f33\" d=\"M14 1 25 25H3L14 1Z\"/><path fill=\"#f4f2ed\" d=\"m14 9 4 10-4-2-4 2 4-10Z\"/></svg>\nNorth\n</div>\n<div class=\"workspace\">Riverside Food Co-op</div>\n</div>\n<div class=\"profile\">\n<div class=\"profile-name\">Maya Chen<small>Co-op coordinator</small></div>\n<span class=\"avatar\" aria-label=\"Maya Chen\">MC</span>\n</div>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">Your workspace</p>\n<h1>Team activity</h1>\n<p class=\"intro\">The latest from the people keeping your co-op growing.</p>\n<section class=\"feed\" aria-label=\"Co-op activity feed\">\n<div class=\"toolbar\">\n<div class=\"filter\">\n<label for=\"activity-filter\">Activity type</label>\n<select id=\"activity-filter\" name=\"activity\">\n<option>All activity</option>\n<option>Project updates</option>\n<option>Comments</option>\n<option>Volunteer shifts</option>\n<option>Deliveries</option>\n<option>Documents</option>\n<option>Membership</option>\n</select>\n</div>\n<div class=\"actions\">\n<p class=\"hint\" id=\"read-hint\">Clears unread dots. Updates stay in your feed.</p>\n<button type=\"button\" aria-describedby=\"read-hint\">Mark all read</button>\n</div>\n</div>\n<div class=\"day-heading\">\n<div class=\"day-title\"><h2>Today</h2><span class=\"unread-count\">3 unread</span></div>\n<span class=\"updated\">Updated 2 min ago</span>\n</div>\n<ol aria-label=\"Today's six updates\">\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M14 4H5v16h14v-9M12 13l1-4 6-6 3 3-6 6-4 1Z\"/></svg></span>\n<div>\n<div class=\"event-heading\"><h3>Project update<span class=\"sr-only\"> · Unread</span></h3><span class=\"timestamp\">8 min ago</span></div>\n<p><span class=\"actor\">Maya Chen</span> updated <span class=\"subject\">Saturday produce market</span>.</p>\n<span class=\"detail\">Volunteer rota confirmed · All 12 shifts covered</span>\n</div>\n</li>\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 15a2 2 0 0 1-2 2H9l-5 4V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10ZM8 8h8M8 12h5\"/></svg></span>\n<div>\n<div class=\"event-heading\"><h3>Comment added<span class=\"sr-only\"> · Unread</span></h3><span class=\"timestamp\">22 min ago</span></div>\n<p><span class=\"actor\">Jonah Reed</span> commented on <span class=\"subject\">Spring pantry drive</span>.</p>\n<blockquote>“We’ve got room for 20 more pantry boxes. Could we add oats and tinned tomatoes to the order?”</blockquote>\n</div>\n</li>\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><circle cx=\"9\" cy=\"7\" r=\"3\"/><path d=\"M3 20v-3a6 6 0 0 1 10-4M15 17l2 2 4-5\"/></svg></span>\n<div>\n<div class=\"event-heading\"><h3>Shift filled<span class=\"sr-only\"> · Unread</span></h3><span class=\"timestamp\">48 min ago</span></div>\n<p><span class=\"actor\">Amira Patel</span> joined the <span class=\"subject\">Tuesday packing crew</span>.</p>\n<span class=\"detail\">9–11 am · All 8 volunteer places filled</span>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"m3 7 9-4 9 4v11l-9 4-9-4V7Zm0 0 9 4 9-4M12 11v11M7 5l9 4\"/></svg></span>\n<div>\n<div class=\"event-heading\"><h3>Delivery received</h3><span class=\"timestamp\">1 hr ago</span></div>\n<p><span class=\"actor\">Leo Santos</span> logged a delivery from <span class=\"subject\">Willow Farm</span>.</p>\n<span class=\"detail\">48 crates of seasonal vegetables · Stock updated</span>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M14 3H5v18h14V8l-5-5Zm0 0v5h5M8 12h8M8 16h6\"/></svg></span>\n<div>\n<div class=\"event-heading\"><h3>Document added</h3><span class=\"timestamp\">2 hr ago</span></div>\n<p><span class=\"actor\">Priya Shah</span> shared <span class=\"subject\">May member meeting notes</span>.</p>\n<span class=\"detail\">Meeting notes · PDF, 240 KB</span>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><circle cx=\"9\" cy=\"7\" r=\"3\"/><path d=\"M3 21v-3a6 6 0 0 1 12 0v3M19 8v6M16 11h6\"/></svg></span>\n<div>\n<div class=\"event-heading\"><h3>Member joined</h3><span class=\"timestamp\">3 hr ago</span></div>\n<p><span class=\"actor\">Eli Brooks</span> welcomed <span class=\"subject\">Nora Ellis</span> to the co-op.</p>\n<span class=\"detail\">New member · Volunteer induction booked</span>\n</div>\n</li>\n</ol>\n<footer class=\"feed-footer\">\n<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><rect x=\"3\" y=\"7\" width=\"10\" height=\"7\" rx=\"1.5\"/><path d=\"M5 7V5a3 3 0 0 1 6 0v2\"/></svg>\nActivity is shared with Riverside Food Co-op members.\n</footer>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-activity-7","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an activity feed for Morrow. Include a native All activity filter, Today with six realistic events including Project update and Comment added, actor names, relative timestamps, one comment excerpt, and a Mark all read button. Distinguish event types with small inline icons or initials. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team activity\", \"Today\", \"Project update\", \"Comment added\", \"All activity\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team activity · Morrow</title>\n<style>\n:root{--paper:#fafbf7;--ink:#244638;--muted:#69796d;--line:#dce3d9;--wash:#edf1e9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,select{font:inherit;color:inherit}\nbutton,a,select{-webkit-tap-highlight-color:transparent}\nbutton{cursor:pointer}\na{color:inherit}\nbutton:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n.shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}\n.sidebar{border-right:1px solid var(--line);padding:30px 22px;display:flex;flex-direction:column;background:#f3f5ee}\n.brand{font-size:27px;font-weight:650;letter-spacing:-1.2px;display:flex;align-items:center;gap:9px}\n.brand svg{width:25px;height:25px}\n.workspace{margin:34px 8px 23px;font-size:13px;font-weight:600;max-width:155px}\n.eyebrow{display:block;font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}\nnav{display:grid;gap:5px}\nnav a,nav button{text-decoration:none;text-align:left;border:0;background:none;padding:11px 12px;border-radius:5px;font-size:13px;display:flex;align-items:center;gap:11px}\nnav [aria-current]{background:var(--ink);color:var(--paper);font-weight:600}\n.nav-icon{width:17px;text-align:center;font-size:16px;line-height:1}\n.profile{margin-top:auto;padding:35px 6px 0;display:flex;gap:10px;align-items:center;font-size:12px}\n.avatar{background:var(--line);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:650;flex-shrink:0}\n.profile small{display:block;color:var(--muted);font-size:11px}\nmain{width:100%;max-width:1000px;margin:0 auto;padding:38px 56px 30px;min-width:0}\n.breadcrumb{font-size:12px;color:var(--muted);margin-bottom:25px}\n.breadcrumb span{padding:0 9px;color:#a1afa2}\nh1{font-size:34px;line-height:1.15;font-weight:600;letter-spacing:-1.1px;margin:0 0 10px}\n.intro{color:var(--muted);margin:0;font-size:14px}\n.pickup{margin:25px 0 24px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px}\n.pickup svg{flex-shrink:0;width:66px;height:30px}\n.pickup p{margin:0;font-size:12px;color:var(--muted)}\n.pickup strong{color:var(--ink);font-weight:600}\n.pickup .next{margin-left:auto;text-align:right;white-space:nowrap}\n.toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}\n.filter label{display:block;font-size:11px;font-weight:600;margin-bottom:6px;color:var(--muted)}\nselect{background:var(--paper);border:1px solid #b7c3b5;border-radius:5px;min-height:40px;width:174px;padding:8px 34px 8px 12px}\n.read-button{border:1px solid #b7c3b5;background:transparent;border-radius:5px;min-height:40px;padding:8px 15px;font-weight:550;font-size:13px;white-space:nowrap}\n.read-button:hover{background:var(--wash)}\n.day{display:flex;align-items:center;gap:12px;margin-bottom:6px}\nh2{font-size:16px;letter-spacing:-.2px;margin:0;font-weight:650}\n.unread-count{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}\n.dot{width:6px;height:6px;border-radius:50%;background:var(--ink);display:inline-block;flex-shrink:0}\n.date{margin-left:auto;font-size:11px;color:var(--muted)}\n.feed{list-style:none;padding:0;margin:0}\n.event{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}\n.event-icon{width:31px;height:31px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}\n.event.unread .event-icon{background:var(--wash);color:var(--ink);border-color:#cbd6c5}\n.event-top{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-bottom:4px}\n.event-type{font-weight:600}\ntime{margin-left:auto;font-size:11px;white-space:nowrap;font-weight:400}\n.event p{font-size:14px;line-height:1.55;margin:0;overflow-wrap:anywhere}\n.event strong{font-weight:620}\n.subject{font-weight:550;text-decoration:underline;text-decoration-color:#becbb8;text-underline-offset:3px}\n.event .detail{font-size:12px;color:var(--muted);margin-top:5px}\nblockquote{margin:11px 0 0;padding:9px 13px;border-left:2px solid #a6b89d;background:var(--wash);font-size:13px;line-height:1.6;color:#49604f}\n.end{font-size:11px;color:var(--muted);margin:21px 0 0;text-align:center}\n@media(min-width:1450px){main{padding-top:52px}}\n@media(max-width:760px){\n.shell{display:block}\n.sidebar{padding:15px 20px 0;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;align-items:center}\n.brand{font-size:24px}\n.brand svg{width:22px;height:22px}\n.workspace{margin:0;max-width:none;text-align:right;font-size:11px;justify-self:end;width:125px;line-height:1.4}\n.workspace .eyebrow{display:none}\nnav{grid-column:1/-1;display:flex;justify-content:space-between;gap:3px;margin-top:15px}\nnav a,nav button{padding:11px 7px;border-radius:4px 4px 0 0;font-size:11px;gap:0;justify-content:center}\n.nav-icon{display:none}\n.profile{display:none}\nmain{padding:24px 20px}\n.breadcrumb{display:none}\nh1{font-size:30px}\n.intro{font-size:13px;max-width:320px}\n.pickup{gap:11px;margin:20px 0}\n.pickup svg{width:55px}\n.pickup .next{display:none}\n.toolbar{gap:12px;margin-bottom:24px}\nselect{width:165px;font-size:13px}\n.read-button{padding:8px 12px;font-size:12px}\n.date{font-size:10px}\n.event{gap:11px;padding:17px 0;grid-template-columns:28px minmax(0,1fr)}\n.event-icon{width:28px;height:28px;font-size:11px}\n.event p{font-size:13px}\n.event-top{font-size:10px}\ntime{font-size:10px}\nblockquote{font-size:12px;padding:9px 11px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<aside class=\"sidebar\" aria-label=\"Workspace navigation\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M5 23V8l9 9 9-9v15M5 8V5m18 3V5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\nMorrow\n</div>\n<div class=\"workspace\"><span class=\"eyebrow\">Your workspace</span>Cedar Street<br>Food Co-op</div>\n<nav aria-label=\"Main\">\n<button type=\"button\"><span class=\"nav-icon\" aria-hidden=\"true\">⌂</span>Overview</button>\n<button type=\"button\"><span class=\"nav-icon\" aria-hidden=\"true\">▤</span>Projects</button>\n<a href=\"#activity\" aria-current=\"page\"><span class=\"nav-icon\" aria-hidden=\"true\">≋</span>Team activity</a>\n<button type=\"button\"><span class=\"nav-icon\" aria-hidden=\"true\">♧</span>Members</button>\n</nav>\n<div class=\"profile\"><span class=\"avatar\">AC</span><div>Alex Chen<small>Co-op coordinator</small></div></div>\n</aside>\n<main id=\"activity\">\n<div class=\"breadcrumb\">Cedar Street Food Co-op <span>/</span> Workspace</div>\n<header>\n<h1>Team activity</h1>\n<p class=\"intro\">The latest from your co-op’s projects, pickups, and people.</p>\n</header>\n<section class=\"pickup\" aria-label=\"Weekly packing progress\">\n<svg viewBox=\"0 0 66 30\" role=\"img\" aria-label=\"Four out of five sections filled: 80 percent packed\">\n<g stroke=\"currentColor\" stroke-width=\"1\">\n<rect x=\"1\" y=\"6\" width=\"10\" height=\"18\" rx=\"1\" fill=\"currentColor\"/>\n<rect x=\"14\" y=\"6\" width=\"10\" height=\"18\" rx=\"1\" fill=\"currentColor\"/>\n<rect x=\"27\" y=\"6\" width=\"10\" height=\"18\" rx=\"1\" fill=\"currentColor\"/>\n<rect x=\"40\" y=\"6\" width=\"10\" height=\"18\" rx=\"1\" fill=\"currentColor\"/>\n<rect x=\"53\" y=\"6\" width=\"10\" height=\"18\" rx=\"1\" fill=\"none\"/>\n</g>\n</svg>\n<p><strong>32 of 40 produce shares packed</strong><br>A little teamwork, a full table.</p>\n<p class=\"next\">Next pickup<br><strong>Saturday · 9 am–12 pm</strong></p>\n</section>\n<div class=\"toolbar\">\n<div class=\"filter\">\n<label for=\"activity-filter\">Activity type</label>\n<select id=\"activity-filter\" name=\"activity\">\n<option>All activity</option>\n<option>Project updates</option>\n<option>Comments</option>\n<option>Volunteer shifts</option>\n<option>Stock received</option>\n<option>New members</option>\n</select>\n</div>\n<button class=\"read-button\" type=\"button\">Mark all read</button>\n</div>\n<section aria-labelledby=\"today\">\n<div class=\"day\">\n<h2 id=\"today\">Today</h2>\n<span class=\"unread-count\"><span class=\"dot\"></span>2 unread</span>\n<span class=\"date\">Thursday, October 24</span>\n</div>\n<ol class=\"feed\">\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\">P</span>\n<div>\n<div class=\"event-top\"><span class=\"event-type\">Project update</span><span class=\"dot\" aria-label=\"Unread\"></span><time datetime=\"2024-10-24T11:52\">8 min ago</time></div>\n<p><strong>Mira Patel</strong> updated <span class=\"subject\">Saturday pantry &amp; produce pickup</span>.</p>\n<p class=\"detail\">Packing list finalized · 8 shares left to pack</p>\n</div>\n</li>\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\">C</span>\n<div>\n<div class=\"event-top\"><span class=\"event-type\">Comment added</span><span class=\"dot\" aria-label=\"Unread\"></span><time datetime=\"2024-10-24T11:37\">23 min ago</time></div>\n<p><strong>Jonah Reyes</strong> commented on <span class=\"subject\">Sliding-scale membership review</span>.</p>\n<blockquote>“Could we hold two low-cost shares for the families referred by Cedar Street Kitchen? I can help with pickup.”</blockquote>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\">V</span>\n<div>\n<div class=\"event-top\"><span class=\"event-type\">Volunteer shift</span><time datetime=\"2024-10-24T11:13\">47 min ago</time></div>\n<p><strong>Leila Thompson</strong> signed up for Saturday’s welcome table.</p>\n<p class=\"detail\">9–11 am · 1 more volunteer needed</p>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\">S</span>\n<div>\n<div class=\"event-top\"><span class=\"event-type\">Stock received</span><time datetime=\"2024-10-24T11:00\">1 hr ago</time></div>\n<p><strong>Rose Okafor</strong> checked in a delivery from <span class=\"subject\">Willowbank Farm</span>.</p>\n<p class=\"detail\">24 bunches of kale · 3 crates of apples</p>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\">P</span>\n<div>\n<div class=\"event-top\"><span class=\"event-type\">Project update</span><time datetime=\"2024-10-24T10:00\">2 hrs ago</time></div>\n<p><strong>Alexandra Moreno-Hernández</strong> moved <span class=\"subject\">Neighborhood fridge restock &amp; surplus sharing</span> to ready for volunteers.</p>\n<p class=\"detail\">Restock route and food-safety checklist attached</p>\n</div>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\">M</span>\n<div>\n<div class=\"event-top\"><span class=\"event-type\">Member joined</span><time datetime=\"2024-10-24T09:00\">3 hrs ago</time></div>\n<p><strong>Samir Haddad</strong> joined the co-op. Welcome to the table!</p>\n</div>\n</li>\n</ol>\n<p class=\"end\">That’s all for today · Thanks for growing this together.</p>\n</section>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-activity-8","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an activity feed for Fieldwork. Include a native All activity filter, Today with six realistic events including Project update and Comment added, actor names, relative timestamps, one comment excerpt, and a Mark all read button. Distinguish event types with small inline icons or initials. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team activity\", \"Today\", \"Project update\", \"Comment added\", \"All activity\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team activity — Fieldwork</title>\n<style>\n:root{color-scheme:light;--ink:#292f2b;--muted:#6c726a;--line:#dedfd6;--paper:#f5f4ef;--green:#345544}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,select{font:inherit}\na{color:inherit}\n.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px}\n.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:650;letter-spacing:-.7px}\n.brand svg{width:24px;height:28px;color:var(--green)}\n.workspace{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:12px}\n.avatar{display:grid;place-items:center;width:30px;height:30px;border:1px solid #cbd0c5;border-radius:50%;color:var(--green);font-size:10px;font-weight:650}\nmain{max-width:1040px;margin:0 auto;padding:34px 32px 28px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}\n.eyebrow{margin:0 0 3px;font-size:10px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}\nh1{font:normal 40px/1.15 Georgia,\"Times New Roman\",serif;letter-spacing:-1.1px;margin:0}\nbutton{border:1px solid #c7ccc1;border-radius:4px;background:transparent;color:var(--green);padding:9px 13px;cursor:pointer;white-space:nowrap;font-size:12px;font-weight:600}\nbutton:hover{background:#e9ece3}\nbutton:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:4px}\n.next-action{display:grid;grid-template-columns:1fr 255px;border:1px solid #d5dbcc;background:#edf0e6;margin-bottom:27px}\n.next-main{padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.next-main h2{font-size:16px;line-height:1.4;margin:3px 0 2px;font-weight:600;letter-spacing:-.2px}\n.next-main p:not(.eyebrow){font-size:12px;color:#616c5b;margin:0}\n.review-link{font-size:12px;font-weight:650;white-space:nowrap;text-decoration:none;border-bottom:1px solid #8f9e88;padding-bottom:2px}\n.context{border-left:1px solid #d5dbcc;padding:17px 20px;display:flex;flex-direction:column;justify-content:center}\n.context strong{font-size:13px;font-weight:600}\n.context span{font-size:12px;color:#616c5b;margin-top:3px}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px}\n.day{display:flex;align-items:baseline;gap:12px}\n.day h2{font:normal 25px/1.2 Georgia,\"Times New Roman\",serif;margin:0}\n.day span{font-size:12px;color:var(--muted)}\n.filter{display:flex;align-items:center;gap:9px}\n.filter label{font-size:12px;color:var(--muted)}\nselect{max-width:100%;padding:7px 27px 7px 10px;min-height:34px;border:1px solid #cdd0c5;border-radius:4px;background:#fffefa;color:var(--ink);font-size:12px}\n.summary{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin:0 0 10px}\n.unread-count{display:flex;align-items:center;gap:6px;color:var(--green)}\n.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}\n.feed{list-style:none;padding:0;margin:0;background:#fffefa;border:1px solid var(--line)}\n.event{display:grid;grid-template-columns:30px minmax(0,1fr);gap:13px;padding:16px 20px;border-bottom:1px solid var(--line)}\n.event:last-child{border-bottom:0}\n.event.unread{background:#fafbf6}\n.event-icon{width:29px;height:29px;display:grid;place-items:center;background:#f0f0e9;border:1px solid #e1e3d9;border-radius:4px;color:#646e60}\n.unread .event-icon{background:#e8eee1;border-color:#d6dfcd;color:var(--green)}\n.event-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}\n.event-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px}\n.event h3{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650;margin:0}\ntime{font-size:11px;color:var(--muted);white-space:nowrap}\n.event p{margin:0;font-size:13px;line-height:1.5}\n.event p strong{font-weight:600}\n.event .secondary{font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}\n.project{color:#4f5c4a}\nblockquote{margin:9px 0 1px;padding:2px 0 2px 12px;border-left:2px solid #cbd5c1;color:#586052;font-size:13px;line-height:1.5;max-width:640px}\n.footer-note{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted);font-size:10px}\n@media(min-width:900px){.event{padding-top:17px;padding-bottom:17px}}\n@media(max-width:600px){\n.topbar{height:58px;padding:0 20px}.workspace .workspace-name{display:none}\nmain{padding:25px 18px 22px}.page-heading{gap:9px;margin-bottom:20px}h1{font-size:31px;letter-spacing:-.8px}\nbutton{padding:8px 10px;font-size:11px}.eyebrow{font-size:9px}\n.next-action{grid-template-columns:1fr;margin-bottom:22px}\n.next-main{padding:14px;gap:12px;align-items:flex-start}.next-main h2{font-size:14px;max-width:205px}.review-link{margin-top:23px;font-size:11px}\n.context{border-left:0;border-top:1px solid #d5dbcc;padding:9px 14px;flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px}\n.context strong,.context span{font-size:10px;margin:0}\n.day{display:block}.day h2{font-size:23px}.day span{font-size:10px}.section-heading{margin-bottom:10px}\n.filter{gap:6px}.filter label{font-size:11px}select{width:124px;font-size:11px;padding-left:8px}\n.event{padding:14px 12px;grid-template-columns:25px minmax(0,1fr);gap:10px}.event-icon{width:25px;height:25px}\n.event-head{gap:7px}.event h3{font-size:11px;gap:6px}time{font-size:10px}\n.event p{font-size:12px}.event .secondary{font-size:11px}blockquote{font-size:12px;padding-left:10px}\n.footer-note{font-size:9px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 24 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 25V3h18M3 9h13M3 16h13M9 3v22\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\nFieldwork\n</div>\n<div class=\"workspace\"><span class=\"workspace-name\">Practice workspace</span><span class=\"avatar\" aria-label=\"Alex Morgan\">AM</span></div>\n</header>\n<main>\n<header class=\"page-heading\">\n<div><p class=\"eyebrow\">Across the practice</p><h1>Team activity</h1></div>\n<button type=\"button\">Mark all read</button>\n</header>\n\n<section class=\"next-action\" aria-labelledby=\"next-title\">\n<div class=\"next-main\">\n<div>\n<p class=\"eyebrow\">Next action · For you</p>\n<h2 id=\"next-title\">Review the revised south elevation</h2>\n<p>Maya’s update is ready for your design review.</p>\n</div>\n<a class=\"review-link\" href=\"#latest-update\">View update <span aria-hidden=\"true\">↗</span></a>\n</div>\n<aside class=\"context\" aria-label=\"Project context\">\n<strong>Hawthorn House</strong>\n<span>Planning · RIBA Stage 3</span>\n</aside>\n</section>\n\n<section aria-labelledby=\"today-title\">\n<div class=\"section-heading\">\n<div class=\"day\"><h2 id=\"today-title\">Today</h2><span>Tuesday, 14 May</span></div>\n<div class=\"filter\">\n<label for=\"activity-filter\">Show</label>\n<select id=\"activity-filter\" name=\"activity\">\n<option>All activity</option>\n<option>Project updates</option>\n<option>Comments</option>\n<option>Drawings &amp; files</option>\n<option>Decisions</option>\n</select>\n</div>\n</div>\n<div class=\"summary\"><span>6 updates across 3 projects</span><span class=\"unread-count\"><span class=\"dot\" aria-hidden=\"true\"></span>2 unread</span></div>\n\n<ol class=\"feed\">\n<li class=\"event unread\" id=\"latest-update\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M4 3h8l4 4v10H4zM12 3v5h4M7 11h6M7 14h4\"/></svg></span>\n<article>\n<div class=\"event-head\"><h3>Project update <span class=\"dot\" role=\"img\" aria-label=\"Unread\"></span></h3><time datetime=\"2024-05-14T10:48\">12 min ago</time></div>\n<p><strong>Maya Patel</strong> revised the south elevation.</p>\n<p class=\"secondary\"><span class=\"project\">Hawthorn House</span> · Planning submission coordination — existing and proposed street-facing elevations</p>\n</article>\n</li>\n<li class=\"event unread\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M3 4h14v10H8l-4 3v-3H3zM6 8h8M6 11h5\"/></svg></span>\n<article>\n<div class=\"event-head\"><h3>Comment added <span class=\"dot\" role=\"img\" aria-label=\"Unread\"></span></h3><time datetime=\"2024-05-14T10:32\">28 min ago</time></div>\n<p><strong>Tom Ellis</strong> commented on A-302 · West elevation.</p>\n<p class=\"secondary\"><span class=\"project\">Hawthorn House</span> · Design review</p>\n<blockquote>“Could we retain the deeper window reveal on the west bay? It gives the brickwork a much clearer edge.”</blockquote>\n</article>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M3 4h14v12H3zM3 12l5-5 4 5M10 10l3-3 4 4M6 16v-3h8v3\"/></svg></span>\n<article>\n<div class=\"event-head\"><h3>Drawing issued</h3><time datetime=\"2024-05-14T10:06\">54 min ago</time></div>\n<p><strong>Elena Rossi</strong> issued A-203 · Ground floor plan, Rev C.</p>\n<p class=\"secondary\"><span class=\"project\">Canal Yard Studios</span> · Issued for consultant coordination</p>\n</article>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M4 13v4h12v-4M10 13V3M6 7l4-4 4 4\"/></svg></span>\n<article>\n<div class=\"event-head\"><h3>File uploaded</h3><time datetime=\"2024-05-14T10:00\">1 hr ago</time></div>\n<p><strong>James Okafor</strong> uploaded the measured survey.</p>\n<p class=\"secondary\"><span class=\"project\">Orchard Lane Extension</span> · Existing conditions · 8 sheets, PDF</p>\n</article>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"m6.5 10 2.5 2.5 4.5-5\"/></svg></span>\n<article>\n<div class=\"event-head\"><h3>Decision recorded</h3><time datetime=\"2024-05-14T09:00\">2 hrs ago</time></div>\n<p><strong>Sarah Chen</strong> approved the lime mortar sample.</p>\n<p class=\"secondary\"><span class=\"project\">Hawthorn House</span> · Materials &amp; finishes · Sample M-04</p>\n</article>\n</li>\n<li class=\"event\">\n<span class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M5 3h10v14H5zM8 7h4M8 10h4M8 13h3M3 6h2M3 10h2M3 14h2\"/></svg></span>\n<article>\n<div class=\"event-head\"><h3>Meeting notes added</h3><time datetime=\"2024-05-14T08:00\">3 hrs ago</time></div>\n<p><strong>Alex Morgan</strong> shared the weekly design team notes.</p>\n<p class=\"secondary\"><span class=\"project\">Canal Yard Studios</span> · Week 20 · 4 actions recorded</p>\n</article>\n</li>\n</ol>\n<div class=\"footer-note\"><span>End of today’s activity</span><span>Times shown in your local time</span></div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-activity-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an activity feed for Alder. Include a native All activity filter, Today with six realistic events including Project update and Comment added, actor names, relative timestamps, one comment excerpt, and a Mark all read button. Distinguish event types with small inline icons or initials. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team activity\", \"Today\", \"Project update\", \"Comment added\", \"All activity\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team activity · Alder</title>\n<style>\n:root{--ink:#24463b;--muted:#6b7c70;--line:#dce3d9;--paper:#fcfdf9;--wash:#f0f4ec}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,select{font:inherit;color:inherit}\na{color:inherit;text-decoration:none}\na:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n.shell{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:100vh}\n.sidebar{background:var(--wash);border-right:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column}\n.brand{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:30px;height:32px}\n.workspace{margin:9px 0 34px;color:var(--muted);font-size:12px}\nnav ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}\nnav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:5px;color:var(--muted)}\nnav a[aria-current]{color:var(--ink);background:#e2eadd;font-weight:600}\n.nav-icon{font-size:16px;width:18px;text-align:center}\n.season{margin-top:auto;padding-top:40px;color:var(--muted);font-size:12px}\n.season strong{display:block;color:var(--ink);font-size:13px;font-weight:550;margin:4px 0}\n.season span{display:inline-block;width:6px;height:6px;background:var(--ink);border-radius:50%;margin-right:6px}\nmain{width:100%;max-width:944px;padding:52px 56px 30px;margin:0 auto;min-width:0}\n.page-header{display:flex;align-items:center;justify-content:space-between;gap:18px}\nh1{margin:0;font-size:32px;line-height:1.2;font-weight:620;letter-spacing:-1px}\n.read-button{border:1px solid #bdcbbd;background:transparent;border-radius:5px;padding:9px 13px;white-space:nowrap;font-size:13px;font-weight:550;display:inline-flex;align-items:center;gap:7px}\n.read-button svg{width:15px;height:15px}\n.intro{color:var(--muted);margin:12px 0 29px}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}\n.filter{display:flex;align-items:center;gap:11px}\nlabel{color:var(--muted);font-size:12px}\nselect{background:var(--paper);border:1px solid #bdcbbd;border-radius:5px;padding:8px 30px 8px 11px;max-width:100%;font-size:13px}\n.unread{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap}\n.dot{width:6px;height:6px;display:inline-block;background:var(--ink);border-radius:50%;flex:none}\n.day-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:24px 0 10px}\nh2{font-size:15px;margin:0;font-weight:650}\n.day-heading p{margin:0;color:var(--muted);font-size:12px}\n.feed{list-style:none;margin:0;padding:0}\n.event{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}\n.event-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:6px;background:var(--wash);margin-top:2px}\n.event-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}\n.event-body{min-width:0;flex:1}\n.event-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}\n.event h3{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;margin:0}\ntime{font-size:11px;white-space:nowrap;color:var(--muted)}\n.description{margin:4px 0 0;font-size:13px;line-height:1.65}\n.description strong{font-weight:600}\n.detail{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.6;overflow-wrap:break-word}\nblockquote{border-left:2px solid #bdcbbd;margin:10px 0 1px;padding:1px 0 1px 12px;font-size:13px;line-height:1.6;color:var(--muted)}\n.feed-footer{margin:18px 0 0;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:14px}\n@media(min-width:1450px){main{padding-top:65px}}\n@media(max-width:760px){\n.shell{display:block}\n.sidebar{padding:15px 20px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;justify-content:space-between;gap:15px}\n.brand{font-size:23px}.brand svg{width:25px;height:27px}\n.workspace{margin:0;font-size:11px}\n.sidebar nav,.season{display:none}\nmain{padding:27px 20px 24px;max-width:640px}\nh1{font-size:27px;letter-spacing:-.8px}\n.page-header{gap:10px}\n.read-button{padding:8px 9px;font-size:11px;gap:5px}\n.read-button svg{width:13px;height:13px}\n.intro{font-size:13px;margin:12px 0 23px;max-width:290px}\n.toolbar{padding:13px 0;gap:10px}\n.filter{gap:8px}label{font-size:11px}select{width:133px;font-size:12px;padding-left:8px}\n.unread{font-size:11px;gap:5px}\n.day-heading{padding-top:21px}\n.event{gap:11px;padding:17px 0}\n.event-icon{width:29px;height:29px}\n.event-icon svg{width:15px;height:15px}\n.event-heading{gap:7px}\n.event h3{font-size:12px;gap:6px}\ntime{font-size:10px}\n.description{font-size:12px}\n.detail{font-size:11px}\nblockquote{font-size:12px;padding-left:10px}\n.feed-footer{font-size:10px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<aside class=\"sidebar\">\n<a class=\"brand\" href=\"#activity\" aria-label=\"Alder home\">\n<svg viewBox=\"0 0 30 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M15 29V6M15 19C7 19 3 14 3 5c8 0 12 5 12 14Zm0-5C15 6 20 2 27 2c0 8-5 12-12 12Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"/></svg>\nAlder\n</a>\n<p class=\"workspace\">Field research workspace</p>\n<nav aria-label=\"Workspace navigation\">\n<ul>\n<li><a href=\"#activity\"><span class=\"nav-icon\" aria-hidden=\"true\">⌂</span>Overview</a></li>\n<li><a href=\"#activity\"><span class=\"nav-icon\" aria-hidden=\"true\">▱</span>Projects</a></li>\n<li><a href=\"#activity\" aria-current=\"page\"><span class=\"nav-icon\" aria-hidden=\"true\">≋</span>Team activity</a></li>\n<li><a href=\"#activity\"><span class=\"nav-icon\" aria-hidden=\"true\">▤</span>Field library</a></li>\n</ul>\n</nav>\n<div class=\"season\">CURRENT SEASON<strong>Spring fieldwork · 2025</strong><span></span>6 active projects</div>\n</aside>\n\n<main id=\"activity\">\n<header>\n<div class=\"page-header\">\n<h1>Team activity</h1>\n<button class=\"read-button\" type=\"button\"><svg viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"m2 9 3 3 7-7M8 11l2 2 6-7\"/></svg>Mark all read</button>\n</div>\n<p class=\"intro\">The latest from your team, in the field and back at base.</p>\n</header>\n\n<div class=\"toolbar\">\n<div class=\"filter\">\n<label for=\"activity-type\">Show</label>\n<select id=\"activity-type\" name=\"activity-type\">\n<option>All activity</option>\n<option>Project updates</option>\n<option>Comments</option>\n<option>Field records</option>\n<option>Team changes</option>\n</select>\n</div>\n<span class=\"unread\"><span class=\"dot\" aria-hidden=\"true\"></span>3 unread</span>\n</div>\n\n<section aria-labelledby=\"today\">\n<div class=\"day-heading\"><h2 id=\"today\">Today</h2><p>Wednesday, 18 June</p></div>\n<ol class=\"feed\">\n<li class=\"event\">\n<div class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M3 5h5l2 2h7v10H3Z\"/><path d=\"M10 10v4m-2-2h4\"/></svg></div>\n<article class=\"event-body\" aria-label=\"Unread project update\">\n<div class=\"event-heading\"><h3>Project update <span class=\"dot\" aria-label=\"Unread\"></span></h3><time datetime=\"2025-06-18T10:48:00\">12 min ago</time></div>\n<p class=\"description\"><strong>Maya Chen</strong> updated North Fork watershed survey.</p>\n<p class=\"detail\">Sampling plan revised · 4 stations ready for deployment</p>\n</article>\n</li>\n\n<li class=\"event\">\n<div class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M3 3h14v10H8l-5 4Z\"/><path d=\"M6 7h8M6 10h5\"/></svg></div>\n<article class=\"event-body\" aria-label=\"Unread comment\">\n<div class=\"event-heading\"><h3>Comment added <span class=\"dot\" aria-label=\"Unread\"></span></h3><time datetime=\"2025-06-18T10:32:00\">28 min ago</time></div>\n<p class=\"description\"><strong>Elias Morgan</strong> commented on Station 04 observations.</p>\n<blockquote>“Water levels are down at Station 04. Let’s resample before the afternoon rain.”</blockquote>\n</article>\n</li>\n\n<li class=\"event\">\n<div class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M5 2h7l4 4v12H5Z\"/><path d=\"M12 2v5h4M8 11h5M8 14h4\"/></svg></div>\n<article class=\"event-body\" aria-label=\"Unread field notes\">\n<div class=\"event-heading\"><h3>Field notes uploaded <span class=\"dot\" aria-label=\"Unread\"></span></h3><time datetime=\"2025-06-18T10:08:00\">52 min ago</time></div>\n<p class=\"description\"><strong>Priya Nair</strong> added 8 observation notes.</p>\n<p class=\"detail\">Site: Upper North Fork riparian corridor — downstream sediment monitoring and seasonal habitat assessment transect</p>\n</article>\n</li>\n\n<li class=\"event\">\n<div class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M7 2h6M8 2v6l-4 7a2 2 0 0 0 2 3h8a2 2 0 0 0 2-3l-4-7V2M6 12h8\"/></svg></div>\n<article class=\"event-body\">\n<div class=\"event-heading\"><h3>Sample log updated</h3><time datetime=\"2025-06-18T09:46:00\">1 hr ago</time></div>\n<p class=\"description\"><strong>Jonah Reed</strong> logged 12 water samples.</p>\n<p class=\"detail\">Cedar Creek · Site 03 · Chain of custody recorded</p>\n</article>\n</li>\n\n<li class=\"event\">\n<div class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><path d=\"M16 8c0 4-6 10-6 10S4 12 4 8a6 6 0 1 1 12 0Z\"/><path d=\"m7 8 2 2 4-4\"/></svg></div>\n<article class=\"event-body\">\n<div class=\"event-heading\"><h3>Site visit completed</h3><time datetime=\"2025-06-18T08:40:00\">2 hr ago</time></div>\n<p class=\"description\"><strong>Lena Ortiz</strong> completed the East Marsh visit.</p>\n<p class=\"detail\">6 observation points verified · Field checklist complete</p>\n</article>\n</li>\n\n<li class=\"event\">\n<div class=\"event-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\"><circle cx=\"8\" cy=\"6\" r=\"3\"/><path d=\"M2 17v-2a6 6 0 0 1 10-4M15 10v6m-3-3h6\"/></svg></div>\n<article class=\"event-body\">\n<div class=\"event-heading\"><h3>Team member added</h3><time datetime=\"2025-06-18T07:55:00\">3 hr ago</time></div>\n<p class=\"description\"><strong>Sam Rivera</strong> added Avery Brooks to the team.</p>\n<p class=\"detail\">Wetland recovery study · Field technician</p>\n</article>\n</li>\n</ol>\n</section>\n<footer class=\"feed-footer\"><span>All 6 events from today</span><span>Times shown in your local timezone</span></footer>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-inventory-0","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Alder. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 2, 12, 1, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview · Alder</title>\n<style>\n:root{color-scheme:light;--paper:#f5f2eb;--surface:#fffdf8;--ink:#24352e;--muted:#6a7067;--line:#dddcd1;--accent:#203e32}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b08b35;outline-offset:3px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1120px;margin:auto;padding:19px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.brand{font-size:25px;font-weight:750;letter-spacing:-1px;line-height:1}\n.brand span{display:inline-block;width:9px;height:9px;background:var(--accent);border-radius:50%;margin-left:3px}\n.shop-label{font-size:12px;color:var(--muted)}\nmain{max-width:1120px;margin:auto;padding:34px 32px}\n.title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:23px}\n.eyebrow{margin:0 0 5px;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}\nh1{font-size:32px;line-height:1.15;letter-spacing:-1px;margin:0;font-weight:650}\n.timestamp{margin:0;color:var(--muted);font-size:12px}\n.alert{background:var(--accent);color:#fffdf8;border-radius:8px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.alert-copy{display:flex;gap:14px;align-items:flex-start}\n.alert-icon{flex-shrink:0;border:1px solid #afbb9d;border-radius:50%;width:25px;height:25px;text-align:center;color:#e9d79f;font-weight:700;line-height:23px;margin-top:2px}\nh2{font-size:17px;line-height:1.4;margin:0 0 3px;font-weight:650}\n.alert p{margin:0;font-size:13px;color:#d8e0d6}\n.primary{background:#f3ecd9;color:var(--accent);border:1px solid #f3ecd9;border-radius:5px;font-weight:650;padding:11px 17px;white-space:nowrap}\n.summary{display:flex;gap:24px;flex-wrap:wrap;margin:15px 0 28px;font-size:13px;color:var(--muted)}\n.summary strong{color:var(--ink);font-weight:650}\n.filters{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:end;margin-bottom:20px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:7px;line-height:1.5}\ninput,select{display:block;width:100%;min-width:0;height:44px;border:1px solid #c8cbbf;border-radius:5px;background:var(--surface);color:var(--ink);padding:10px 12px}\ninput::placeholder{color:#7b8076;opacity:1}\n.search-field{position:relative}\n.search-field svg{position:absolute;left:13px;top:14px;color:var(--muted);pointer-events:none}\n.search-field input{padding-left:39px}\n.table-panel{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\ncol.item{width:43%}col.quantity{width:14%}col.status{width:24%}col.action{width:19%}\nth{text-align:left;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.5px;padding:13px 22px;background:#eeeee5;border-bottom:1px solid var(--line)}\ntd{padding:21px 22px;border-bottom:1px solid var(--line);vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\n.item-name{display:block;font-weight:650;font-size:15px;margin-bottom:3px}\n.item-code{display:block;color:var(--muted);font-size:11px;letter-spacing:.4px}\n.count{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}\n.stock{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;color:#705216}\n.stock::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#a67a24;flex-shrink:0}\n.stock.good{color:#3d6650}.stock.good::before{background:#57795b}\n.restock{border:1px solid #b9c3b6;background:transparent;color:var(--accent);font-size:12px;font-weight:650;border-radius:5px;padding:8px 14px}\n.table-note{padding:12px 22px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);margin:0}\n.footer-note{margin:16px 0 0;font-size:12px;color:var(--muted)}\n@media(max-width:600px){\n.header-inner{padding:17px 16px}.brand{font-size:23px}.shop-label{font-size:11px}\nmain{padding:23px 16px}\n.title-row{display:block;margin-bottom:18px}\nh1{font-size:28px}.eyebrow{font-size:10px}\n.timestamp{margin-top:8px;font-size:11px}\n.alert{padding:16px;display:block}\n.alert-copy{gap:10px}.alert h2{font-size:16px}.alert p{font-size:12px;line-height:1.45}\n.primary{margin-top:13px;width:100%;padding:9px 12px;font-size:13px}\n.summary{gap:15px;margin:12px 0 20px;font-size:11px}\n.filters{grid-template-columns:1fr;gap:12px;margin-bottom:17px}\nlabel{font-size:11px;margin-bottom:5px}\ninput,select{height:40px;font-size:13px;padding:8px 10px}\n.search-field svg{top:12px}\ncol.item{width:37%}col.quantity{width:11%}col.status{width:23%}col.action{width:29%}\nth{font-size:10px;letter-spacing:0;padding:10px 8px}\ntd{padding:16px 8px}\n.item-name{font-size:13px;line-height:1.3;margin-bottom:5px;overflow-wrap:anywhere}\n.item-code{font-size:9px;letter-spacing:.1px}\n.count{font-size:17px}\n.stock{font-size:10px;gap:4px;line-height:1.4}\n.stock::before{width:5px;height:5px}\n.restock{font-size:11px;padding:7px 10px;max-width:100%}\n.table-note{padding:10px 12px;font-size:10px}\n.footer-note{font-size:11px;margin-top:12px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\" aria-label=\"Alder\">Alder<span aria-hidden=\"true\"></span></div>\n<div class=\"shop-label\">Independent bike shop · Inventory</div>\n</div>\n</header>\n<main>\n<div class=\"title-row\">\n<div>\n<p class=\"eyebrow\">FRONT-OF-SHOP GOODS</p>\n<h1>Stock overview</h1>\n</div>\n<p class=\"timestamp\">Updated <time datetime=\"2025-06-18T09:42\">18 Jun 2025 · 09:42</time></p>\n</div>\n\n<section class=\"alert\" aria-labelledby=\"alert-heading\">\n<div class=\"alert-copy\">\n<span class=\"alert-icon\" aria-hidden=\"true\">!</span>\n<div>\n<h2 id=\"alert-heading\">Low stock</h2>\n<p>Top up Canvas tote and Trail bottle before the weekend rides.</p>\n</div>\n</div>\n<button class=\"primary\" type=\"button\">Restock 2 items</button>\n</section>\n\n<div class=\"summary\" aria-label=\"Inventory summary\">\n<span><strong>3</strong> products</span>\n<span><strong>15</strong> on hand</span>\n<span><strong>2</strong> low stock</span>\n</div>\n\n<section class=\"filters\" aria-label=\"Inventory filters\">\n<div>\n<label for=\"search\">Search inventory</label>\n<div class=\"search-field\">\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m15.5 15.5 5 5\"/></svg>\n<input id=\"search\" type=\"search\" placeholder=\"Search name or item code\">\n</div>\n</div>\n<div>\n<label for=\"category\">Category for shop-floor essentials, weekend ride supplies and things riders take home after a tune-up</label>\n<select id=\"category\">\n<option>All categories</option>\n<option>Bags &amp; carry</option>\n<option>Paper goods</option>\n<option>Bottles</option>\n</select>\n</div>\n</section>\n\n<div class=\"table-panel\">\n<table aria-label=\"Shop goods stock levels\">\n<colgroup><col class=\"item\"><col class=\"quantity\"><col class=\"status\"><col class=\"action\"></colgroup>\n<thead><tr><th scope=\"col\">Item / code</th><th scope=\"col\">Qty</th><th scope=\"col\">Stock status</th><th scope=\"col\">Next action</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"item-name\">Canvas tote</span><span class=\"item-code\">AL-TOT-01</span></td>\n<td class=\"count\">2</td>\n<td><span class=\"stock\">Low stock</span></td>\n<td><button class=\"restock\" type=\"button\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Field notebook</span><span class=\"item-code\">AL-NBK-02</span></td>\n<td class=\"count\">12</td>\n<td><span class=\"stock good\">In stock</span></td>\n<td><button class=\"restock\" type=\"button\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Trail bottle</span><span class=\"item-code\">AL-BTL-03</span></td>\n<td class=\"count\">1</td>\n<td><span class=\"stock\">Low stock</span></td>\n<td><button class=\"restock\" type=\"button\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-note\">Low stock: 3 or fewer on hand. Quantities are counted in individual items.</p>\n</div>\n<p class=\"footer-note\">Counts include the shop-floor display and back-room stock.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-3","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Common. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 5, 15, 4, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview · Common</title>\n<style>\n:root{color-scheme:light;--paper:#f6f5ef;--ink:#26352e;--muted:#657068;--line:#dcded5;--green:#304b3c;--amber:#80521b;--wash:#f5ead4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select,a{outline-offset:4px}\nheader{border-bottom:1px solid var(--line)}\n.topbar{max-width:1160px;margin:auto;padding:19px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font:bold 28px/1 Georgia,serif;letter-spacing:-1px}\n.brand span{color:#84917c}\n.shop{text-align:right;font-size:13px;font-weight:600}\n.shop small{display:block;font-size:10px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}\nmain{max-width:1160px;margin:auto;padding:44px 32px 28px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px 40px}\n.eyebrow{margin:0 0 8px;font-size:11px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}\nh1{font:normal 52px/1.08 Georgia,serif;letter-spacing:-1.8px;margin:0 0 12px}\n.lead{margin:0 0 14px;font-size:15px;color:#526056}\n.updated{margin:0;font-size:12px;color:var(--muted)}\n.updated span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#82917b;margin:0 6px 1px 0}\n.rule{border-left:1px solid var(--line);padding:3px 0 0 25px;align-self:center}\n.rule h2{margin:0 0 4px;font-size:13px;font-weight:650}\n.rule p{margin:0;color:var(--muted);font-size:12px}\n.rule svg{width:100%;height:49px;display:block;margin-top:10px}\n.inventory{grid-column:1/-1;min-width:0}\n.alert{display:flex;align-items:center;gap:13px;padding:13px 16px;background:var(--wash);border:1px solid #e5d6b9;border-radius:3px;color:#65491f;margin-bottom:23px}\n.alert svg{flex:none}\n.alert p{margin:0;font-size:13px}\n.alert strong{font-weight:700;margin-right:10px}\n.toolbar{display:flex;align-items:end;gap:16px;margin:0 0 19px}\n.field{display:flex;flex-direction:column;gap:6px}\n.field label{font-size:12px;font-weight:600}\n.search{flex:1;max-width:490px}\n.category{width:220px}\n.input-wrap{position:relative}\n.input-wrap svg{position:absolute;left:13px;top:13px;color:var(--muted);pointer-events:none}\ninput,select{width:100%;min-width:0;height:43px;border:1px solid #bfc5ba;border-radius:3px;color:var(--ink);background:#fffefa}\ninput{padding:10px 12px 10px 39px}\ninput::placeholder{color:#7a8179}\nselect{padding:9px 30px 9px 12px}\n.result-count{margin:0 0 10px auto;color:var(--muted);font-size:12px;white-space:nowrap}\n.table-shell{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fffefa}\ntable{border-collapse:collapse;width:100%;table-layout:fixed;text-align:left}\nth{background:#eeefe8;color:#59645c;font-size:11px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;padding:13px 22px;border-bottom:1px solid var(--line)}\nth:first-child{width:47%}\nth:nth-child(2){width:12%;text-align:right}\nth:nth-child(3){width:24%}\nth:last-child{width:17%;text-align:right}\ntd{padding:24px 22px;border-bottom:1px solid #e7e8e1;vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\n.item-name{display:block;font-size:16px;font-weight:600;margin-bottom:4px}\n.item-detail{font-size:12px;color:var(--muted)}\n.code{font-variant-numeric:tabular-nums;letter-spacing:.3px}\n.quantity{text-align:right;font-size:21px;font-weight:500;font-variant-numeric:tabular-nums}\n.status{display:inline-flex;align-items:center;gap:6px;border-radius:3px;padding:4px 8px;font-size:12px;white-space:nowrap;background:#edf1e9;color:#466041}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.status.low{background:var(--wash);color:var(--amber)}\n.action{text-align:right}\nbutton{cursor:pointer;min-height:36px;border:1px solid var(--green);border-radius:3px;padding:7px 15px;background:var(--green);color:white;font-size:12px;font-weight:600}\nbutton.secondary{background:transparent;color:var(--green);border-color:#c2cbbf}\nbutton:hover{background:#223d2d;color:white}\n.table-footer{display:flex;justify-content:space-between;gap:12px;padding:13px 1px;color:var(--muted);font-size:12px}\n.table-footer strong{font-weight:600;color:var(--ink)}\n.page-note{grid-column:1/-1;margin:0;padding-top:15px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}\n@media(max-width:600px){\n.topbar{padding:17px 18px}.brand{font-size:26px}.shop{font-size:11px}.shop small{font-size:9px}\nmain{padding:25px 16px 20px;grid-template-columns:minmax(0,1fr);gap:21px}\nh1{font-size:39px;letter-spacing:-1.2px;margin-bottom:9px}\n.eyebrow{font-size:10px;margin-bottom:7px}.lead{font-size:13px;margin-bottom:10px}.updated{font-size:11px}\n.inventory{grid-row:2}.rule{grid-row:3;border-left:0;border-top:1px solid var(--line);padding:15px 0 0;display:grid;grid-template-columns:1fr 135px;column-gap:14px}\n.rule h2{font-size:12px}.rule p{font-size:11px}.rule svg{grid-column:2;grid-row:1/3;align-self:center;margin:0;height:43px}\n.alert{padding:10px 11px;gap:10px;margin-bottom:17px;align-items:flex-start}.alert svg{margin-top:2px}\n.alert p{font-size:12px}.alert strong{display:block;margin:0 0 1px}\n.toolbar{gap:10px;margin-bottom:14px;flex-wrap:wrap}.search{flex:1;min-width:0}.category{width:132px}.field label{font-size:11px}\ninput,select{font-size:12px;height:41px}select{padding-left:9px;padding-right:20px}.input-wrap svg{left:10px;top:12px}input{padding-left:33px;padding-right:6px}\n.result-count{display:none}\nth{padding:11px 6px;font-size:9px;letter-spacing:.4px}\nth:first-child{width:38%;padding-left:11px}th:nth-child(2){width:10%}th:nth-child(3){width:25%}th:last-child{width:27%;padding-right:10px}\ntd{padding:18px 6px}td:first-child{padding-left:11px}td:last-child{padding-right:10px}\n.item-name{font-size:13px;line-height:1.3;margin-bottom:5px}.item-detail{font-size:10px}.item-category{display:none}\n.quantity{font-size:18px}\n.status{font-size:10px;padding:4px 5px;gap:4px}.status::before{width:4px;height:4px}\nbutton{font-size:11px;padding:7px 10px;min-height:34px}\n.table-footer{font-size:10px;padding-top:10px;gap:8px}\n.page-note{padding-top:0;border-top:0;font-size:11px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"topbar\">\n<div class=\"brand\">Common<span>.</span></div>\n<div class=\"shop\"><small>Independent bike shop</small>Northside Cycle Co.</div>\n</div>\n</header>\n<main>\n<section aria-labelledby=\"page-title\">\n<p class=\"eyebrow\">Inventory / Shop essentials</p>\n<h1 id=\"page-title\">Stock overview</h1>\n<p class=\"lead\">Everyday extras for the counter and the club run.</p>\n<p class=\"updated\"><span aria-hidden=\"true\"></span>Last updated <time datetime=\"2025-05-14T09:42\">14 May 2025, 09:42</time></p>\n</section>\n\n<aside class=\"rule\" aria-labelledby=\"rule-title\">\n<h2 id=\"rule-title\">A little shelf insurance</h2>\n<p>Restock at 5 units or fewer, before the next weekend rush.</p>\n<svg viewBox=\"0 0 250 49\" role=\"img\" aria-label=\"Low stock range: zero to five units. Above five units is in stock.\">\n<rect x=\"2\" y=\"9\" width=\"80\" height=\"7\" rx=\"2\" fill=\"#d9b777\"/>\n<rect x=\"84\" y=\"9\" width=\"162\" height=\"7\" rx=\"2\" fill=\"#d5ddcf\"/>\n<path d=\"M83 3v20\" stroke=\"#80521b\" stroke-width=\"1.5\"/>\n<g fill=\"#657068\" font-family=\"system-ui,sans-serif\" font-size=\"10\">\n<text x=\"2\" y=\"38\">0</text><text x=\"79\" y=\"38\">5</text><text x=\"232\" y=\"38\">15</text>\n</g>\n</svg>\n</aside>\n\n<section class=\"inventory\" aria-label=\"Inventory list\">\n<div class=\"alert\" role=\"status\">\n<svg width=\"19\" height=\"19\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n<path d=\"M12 3 2.5 20h19L12 3Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n<path d=\"M12 9v5\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"/>\n<circle cx=\"12\" cy=\"17\" r=\"1\" fill=\"currentColor\"/>\n</svg>\n<p><strong>Low stock</strong>2 items are at or below the 5-unit minimum.</p>\n</div>\n\n<form class=\"toolbar\" role=\"search\">\n<div class=\"field search\">\n<label for=\"search\">Search inventory</label>\n<div class=\"input-wrap\">\n<svg width=\"17\" height=\"17\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m13 13 4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n<input type=\"search\" id=\"search\" name=\"search\" placeholder=\"Item name or code\">\n</div>\n</div>\n<div class=\"field category\">\n<label for=\"category\">Category</label>\n<select id=\"category\" name=\"category\">\n<option>All categories</option>\n<option>Bags &amp; carry</option>\n<option>Stationery</option>\n<option>Hydration</option>\n</select>\n</div>\n<p class=\"result-count\">3 items</p>\n</form>\n\n<div class=\"table-shell\">\n<table aria-label=\"Shop essentials stock\">\n<thead><tr><th scope=\"col\">Item</th><th scope=\"col\">Qty</th><th scope=\"col\">Status</th><th scope=\"col\">Action</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"item-name\">Canvas tote</span><span class=\"item-detail\"><span class=\"code\">CM-TOT-01</span><span class=\"item-category\"> · Bags &amp; carry</span></span></td>\n<td class=\"quantity\">5</td>\n<td><span class=\"status low\">Low stock</span></td>\n<td class=\"action\"><button type=\"button\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Field notebook</span><span class=\"item-detail\"><span class=\"code\">CM-NBK-02</span><span class=\"item-category\"> · Stationery</span></span></td>\n<td class=\"quantity\">15</td>\n<td><span class=\"status\">In stock</span></td>\n<td class=\"action\"><button type=\"button\" class=\"secondary\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Trail bottle</span><span class=\"item-detail\"><span class=\"code\">CM-BTL-03</span><span class=\"item-category\"> · Hydration</span></span></td>\n<td class=\"quantity\">4</td>\n<td><span class=\"status low\">Low stock</span></td>\n<td class=\"action\"><button type=\"button\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n</div>\n<div class=\"table-footer\"><span><strong>3 items</strong> · 24 units on hand</span><span>Shop floor + stockroom</span></div>\n</section>\n<p class=\"page-note\">Good to know: quantities include counter displays. Check the stockroom before placing a supplier order.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-4","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Rill. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 6, 16, 5, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview · Rill</title>\n<style>\n:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;color:#263b32;background:#f6f5f0;font-synthesis:none}\n*{box-sizing:border-box}\nbody{margin:0}\nbutton,input,select{font:inherit}\nbutton,input,select{min-height:44px}\nbutton{cursor:pointer}\na{color:inherit}\n.topbar{background:#fff;border-bottom:1px solid #ddd; padding:0 32px}\n.topbar-inner{max-width:1080px;margin:auto;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px;font-size:28px;font-weight:750;letter-spacing:-1.3px}\n.brand svg{width:28px;height:28px;color:#315e47}\n.workspace{font-size:13px;color:#657268;letter-spacing:0;font-weight:450;border-left:1px solid #dce1da;padding-left:20px;margin-left:12px}\n.location{font-size:13px;display:flex;align-items:center;gap:8px}\n.dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#53765b}\nmain{max-width:1080px;margin:0 auto;padding:36px 0 28px}\n.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#6c776e;margin:0 0 9px}\nh1{font-size:34px;line-height:1.15;letter-spacing:-1.1px;margin:0 0 9px;font-weight:650}\n.subtitle{font-size:14px;line-height:1.5;color:#647067;margin:0}\n.updated{text-align:right;font-size:12px;line-height:1.8;color:#69746b;flex-shrink:0}\n.updated time{color:#34483b;font-weight:550;display:block}\n.alert{display:flex;align-items:flex-start;gap:12px;background:#f5edda;border:1px solid #e4d6b3;border-left:3px solid #ad7a2c;padding:15px 18px;margin-bottom:24px}\n.alert svg{flex-shrink:0;width:20px;height:20px;color:#92601b;margin-top:1px}\n.alert h2{font-size:14px;margin:0 0 4px;color:#755020}\n.alert p{font-size:13px;line-height:1.5;margin:0;color:#6b593c}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;margin-bottom:24px}\n.field{min-width:0}\nlabel{display:block;font-size:12px;font-weight:650;margin-bottom:7px}\ninput,select{width:100%;border:1px solid #c7cfc5;border-radius:5px;background:#fff;color:#304335;padding:10px 12px;font-size:14px}\ninput::placeholder{color:#798078;opacity:1}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;left:13px;top:13px;width:18px;height:18px;color:#788278;pointer-events:none}\ninput[type=search]{padding-left:40px}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a7c3a9;outline-offset:3px}\n.inventory{background:#fff;border:1px solid #d5dbd2;border-radius:7px;overflow:hidden}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid #dbe0d7}\n.section-heading h2{font-size:16px;margin:0;font-weight:650}\n.total{font-size:12px;color:#687368}\ntable{border-collapse:collapse;width:100%;table-layout:fixed;text-align:left}\ncol.item{width:61%}col.stock{width:23%}col.action{width:16%}\nthead{background:#fafbf8}\nth{font-size:11px;color:#6b756b;font-weight:650;letter-spacing:.5px;text-transform:uppercase;padding:12px 20px;border-bottom:1px solid #dbe0d7}\nth:last-child{text-align:right}\ntd{padding:18px 20px;border-bottom:1px solid #e3e7df;vertical-align:middle}\n.group th{background:#f1f3ed;padding:11px 20px;text-transform:none;letter-spacing:0;text-align:left}\n.group-title{font-size:12px;font-weight:700;color:#455b47}\n.group-detail{font-size:11px;font-weight:400;color:#697568;margin-left:10px;line-height:1.5;overflow-wrap:anywhere}\n.item-name{font-weight:650;font-size:15px;line-height:1.4;margin-bottom:5px}\n.item-code{font-size:11px;letter-spacing:.5px;color:#748073;font-variant-numeric:tabular-nums}\n.stock-detail{display:flex;align-items:center;gap:13px;flex-wrap:wrap}\n.quantity{font-size:20px;line-height:1.2;font-weight:650;font-variant-numeric:tabular-nums;min-width:48px}\n.quantity small{font-size:11px;color:#748073;font-weight:400}\n.status{font-size:11px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}\n.status::before{content:\"\";width:5px;height:5px;background:currentColor;border-radius:50%}\n.low{color:#94601e}.healthy{color:#4c7054}\n.action-cell{text-align:right}\n.restock{border:1px solid #99ab97;border-radius:5px;color:#31553c;background:#fff;padding:10px 15px;font-size:13px;font-weight:650}\n.restock:hover{background:#f0f4eb;border-color:#537252}\ntr:last-child td{border-bottom:0}\n.note{display:flex;justify-content:space-between;gap:20px;padding:14px 1px;font-size:12px;color:#6e786d;line-height:1.6}\n.note p{margin:0}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media(max-width:1150px){main{margin:0 28px}}\n@media(max-width:600px){\n.topbar{padding:0 16px}.topbar-inner{min-height:58px;gap:12px}.brand{font-size:25px;gap:8px}.brand svg{width:24px;height:24px}.workspace{display:none}.location{font-size:12px}\nmain{margin:0;padding:22px 16px 16px}.page-heading{display:block;margin-bottom:17px}.eyebrow{font-size:10px;margin-bottom:7px}h1{font-size:29px;margin-bottom:7px}.subtitle{font-size:13px}.updated{text-align:left;font-size:11px;margin-top:10px;line-height:1.4}.updated time{display:inline;font-weight:500;margin-left:4px}.updated .count-label{display:none}\n.alert{padding:12px;gap:9px;margin-bottom:18px}.alert h2{font-size:13px;margin-bottom:3px}.alert p{font-size:12px}\n.filters{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;margin-bottom:18px}label{font-size:11px;margin-bottom:6px}input,select{font-size:13px;padding:10px 8px}input[type=search]{padding-left:32px}.search-wrap svg{left:10px;width:16px;top:14px}\n.section-heading{padding:13px 12px}.section-heading h2{font-size:14px}.total{font-size:11px}\ncol.item{width:43%}col.stock{width:28%}col.action{width:29%}\nth{padding:10px 8px;font-size:10px}th:first-child,td:first-child{padding-left:12px}th:last-child,td:last-child{padding-right:12px}\ntd{padding:15px 8px}.group th{padding:9px 12px}.group-title{font-size:11px}.group-detail{display:block;margin:3px 0 0;font-size:10px;line-height:1.5}\n.item-name{font-size:14px}.item-code{font-size:10px;letter-spacing:.2px}.stock-detail{gap:6px;display:flex;flex-direction:column;align-items:flex-start}.quantity{font-size:19px}.quantity small{font-size:10px}.status{font-size:10px;gap:4px}\n.restock{padding:10px 9px;font-size:12px;width:100%;min-width:0}\n.note{display:block;font-size:11px;padding-top:11px}.note p+p{margin-top:4px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M5 22V7c7 0 13 3 13 9M11 22V12c6 0 11 3 12 10\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\"/></svg>\nRill <span class=\"workspace\">Co-op workspace</span>\n</div>\n<div class=\"location\"><span class=\"dot\"></span>Member shop</div>\n</div>\n</header>\n<main id=\"inventory\">\n<div class=\"page-heading\">\n<div>\n<p class=\"eyebrow\">Inventory</p>\n<h1>Stock overview</h1>\n<p class=\"subtitle\">Everyday goods for our members and a little less waste.</p>\n</div>\n<div class=\"updated\">Updated <time datetime=\"2025-05-14T09:42\">14 May 2025, 09:42</time><span class=\"count-label\">Weekly count · Maya L.</span></div>\n</div>\n\n<aside class=\"alert\" aria-labelledby=\"alert-title\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"m12 3 10 18H2L12 3Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"/><path d=\"M12 9v5m0 3v.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/></svg>\n<div><h2 id=\"alert-title\">Low stock</h2><p>Canvas tote and Trail bottle are below the 8-unit restock point. Check the back cupboard before ordering more.</p></div>\n</aside>\n\n<form class=\"filters\" role=\"search\">\n<div class=\"field\">\n<label for=\"search\">Search inventory</label>\n<div class=\"search-wrap\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.7\"/><path d=\"m15.5 15.5 5 5\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"/></svg>\n<input id=\"search\" name=\"search\" type=\"search\" placeholder=\"Name or item code\">\n</div>\n</div>\n<div class=\"field\">\n<label for=\"category\">Category</label>\n<select id=\"category\" name=\"category\">\n<option>All categories</option>\n<option>Reusable essentials</option>\n<option>Stationery</option>\n</select>\n</div>\n</form>\n\n<section class=\"inventory\" aria-labelledby=\"inventory-title\">\n<div class=\"section-heading\">\n<h2 id=\"inventory-title\">Member shop stock</h2>\n<span class=\"total\">3 items · 27 units</span>\n</div>\n<table>\n<caption class=\"sr-only\">Inventory grouped by category, with quantities, stock status and restock actions.</caption>\n<colgroup><col class=\"item\"><col class=\"stock\"><col class=\"action\"></colgroup>\n<thead><tr><th scope=\"col\">Item / code</th><th scope=\"col\">On hand</th><th scope=\"col\">Action</th></tr></thead>\n<tbody>\n<tr class=\"group\"><th colspan=\"3\" scope=\"rowgroup\"><span class=\"group-title\">Reusable essentials</span><span class=\"group-detail\">For member shopping, refill station visits and neighbourhood food-sharing events</span></th></tr>\n<tr>\n<td><div class=\"item-name\">Canvas tote</div><div class=\"item-code\">RIL-TOT-01</div></td>\n<td><div class=\"stock-detail\"><div class=\"quantity\">6 <small>units</small></div><span class=\"status low\">Low stock</span></div></td>\n<td class=\"action-cell\"><button class=\"restock\" type=\"button\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td><div class=\"item-name\">Trail bottle</div><div class=\"item-code\">RIL-BOT-03</div></td>\n<td><div class=\"stock-detail\"><div class=\"quantity\">5 <small>units</small></div><span class=\"status low\">Low stock</span></div></td>\n<td class=\"action-cell\"><button class=\"restock\" type=\"button\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n<tbody>\n<tr class=\"group\"><th colspan=\"3\" scope=\"rowgroup\"><span class=\"group-title\">Stationery</span></th></tr>\n<tr>\n<td><div class=\"item-name\">Field notebook</div><div class=\"item-code\">RIL-NBK-02</div></td>\n<td><div class=\"stock-detail\"><div class=\"quantity\">16 <small>units</small></div><span class=\"status healthy\">In stock</span></div></td>\n<td class=\"action-cell\"><button class=\"restock\" type=\"button\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n</section>\n<footer class=\"note\">\n<p>Counts include the shop shelf and back cupboard.</p>\n<p>Next volunteer stock check: 21 May</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-5","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for North. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 7, 17, 6, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview · North</title>\n<style>\n:root{color-scheme:light;--bg:#f5f3ed;--paper:#fffefa;--ink:#23362e;--muted:#69716a;--line:#dedfd5;--amber:#81551d}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,a,input,select{-webkit-tap-highlight-color:transparent}\nbutton{cursor:pointer}\na{color:inherit;text-decoration:none}\nbutton:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a68749;outline-offset:3px}\n.site-header{border-bottom:1px solid var(--line);background:var(--paper)}\n.header-inner{max-width:1160px;min-height:84px;margin:auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.identity{display:flex;align-items:center;gap:14px}\n.mark{width:31px;height:31px;color:var(--ink)}\n.brand{font-size:27px;font-weight:720;letter-spacing:-1px}\n.coop{margin-left:8px;padding-left:22px;border-left:1px solid var(--line);font-size:13px;color:var(--muted)}\nnav{display:flex;gap:28px;align-self:stretch}\nnav a{display:flex;align-items:center;font-size:14px;color:var(--muted);border-bottom:3px solid transparent;padding-top:3px}\nnav a[aria-current]{color:var(--ink);border-color:var(--ink);font-weight:650}\nmain{max-width:1160px;margin:0 auto;padding:44px 30px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}\n.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:700;color:var(--muted);margin:0 0 7px}\nh1{font-size:36px;line-height:1.15;letter-spacing:-1.2px;margin:0 0 10px;font-weight:650}\n.subtitle{margin:0;color:var(--muted)}\n.primary-action{display:flex;align-items:center;gap:15px}\n.primary{border:1px solid var(--ink);background:var(--ink);color:#fffefa;border-radius:6px;padding:12px 18px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:9px}\n.primary span{font-size:21px;font-weight:400;line-height:1}\n.hint{font-size:12px;line-height:1.5;max-width:125px;margin:0;color:var(--muted)}\n.alert{background:#eee8d9;border:1px solid #ded2b8;border-radius:8px;padding:18px 20px;display:flex;align-items:center;gap:14px;margin-bottom:26px}\n.alert-icon{width:24px;height:24px;flex-shrink:0;color:var(--amber)}\n.alert h2{font-size:15px;margin:0 0 3px;font-weight:700;color:#694719}\n.alert p{margin:0;font-size:14px;color:#6f6047}\n.alert-count{margin-left:auto;border-left:1px solid #d8ccb2;padding-left:22px;white-space:nowrap;font-size:13px;color:#6f6047}\n.alert-count strong{font-size:23px;font-weight:650;color:#694719;margin-right:5px}\n.inventory{background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden}\n.filters{display:grid;grid-template-columns:minmax(220px,1fr) 220px;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line);max-width:100%}\nlabel{display:block;font-size:12px;font-weight:650;margin-bottom:6px}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;left:12px;top:13px;color:var(--muted);pointer-events:none}\ninput,select{width:100%;height:43px;background:var(--paper);color:var(--ink);border:1px solid #cdd1c7;border-radius:5px;min-width:0}\ninput{padding:9px 12px 9px 38px}\ninput::placeholder{color:#848981}\nselect{padding:8px 30px 8px 12px}\ntable{width:100%;border-collapse:collapse;text-align:left}\ncaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\nth{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:650;background:#f8f8f2;padding:13px 24px;border-bottom:1px solid var(--line)}\ntd{padding:24px;border-bottom:1px solid #e8e8e0;vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\n.item-name{font-size:16px;font-weight:650}\n.item-detail{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:9px;align-items:center}\n.code{font-variant-numeric:tabular-nums;letter-spacing:.2px}\n.separator{color:#b0b5ab}\n.quantity{white-space:nowrap}\n.quantity strong{font-size:23px;font-weight:600;letter-spacing:-.6px;font-variant-numeric:tabular-nums}\n.unit{font-size:12px;color:var(--muted);margin-left:5px}\n.mobile-only{display:none}\n.status{display:inline-flex;align-items:center;gap:7px;border-radius:4px;padding:5px 9px;font-size:12px;font-weight:600;white-space:nowrap}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.low{background:#f4ebd8;color:var(--amber)}\n.good{background:#e9eee5;color:#496043}\n.actions{text-align:right}\n.restock{border:1px solid #c9cec3;color:var(--ink);background:transparent;border-radius:5px;padding:8px 16px;font-size:13px;font-weight:650}\n.restock:hover{background:#f0f1e9}\n.inventory-footer{border-top:1px solid var(--line);padding:13px 24px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted)}\n.inventory-footer strong{font-weight:600;color:var(--ink)}\n.recent{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin:18px 2px 0}\n.recent svg{flex-shrink:0}\n.recent strong{font-weight:600;color:#4e5b50}\n@media(max-width:650px){\n.header-inner{min-height:64px;padding:0 20px}\n.brand{font-size:24px}\n.mark{width:25px;height:25px}\n.identity{gap:10px;width:100%}\n.coop{margin-left:auto;padding-left:15px;font-size:12px}\nnav{display:none}\nmain{padding:24px 16px}\n.page-heading{display:block;margin-bottom:20px}\n.eyebrow{font-size:10px;margin-bottom:5px}\nh1{font-size:30px;margin-bottom:7px}\n.subtitle{font-size:13px}\n.primary-action{margin-top:17px;gap:13px}\n.primary{padding:9px 14px;font-size:13px}\n.hint{max-width:160px;font-size:11px}\n.alert{padding:13px 14px;gap:10px;margin-bottom:18px;align-items:flex-start}\n.alert-icon{width:20px;height:20px;margin-top:2px}\n.alert h2{font-size:14px;margin-bottom:2px}\n.alert p{font-size:12px;line-height:1.5}\n.alert-count{display:none}\n.filters{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px;padding:15px 14px}\nlabel{font-size:11px}\ninput,select{font-size:12px;height:40px}\ninput{padding-left:32px;padding-right:6px}\n.search-wrap svg{left:10px;top:12px;width:15px;height:15px}\nselect{padding-left:9px;padding-right:18px}\nthead{display:none}\ntable,tbody{display:block}\ntr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;padding:13px 14px;border-bottom:1px solid #e8e8e0}\ntbody tr:last-child{border-bottom:0}\ntd{display:block;padding:0;border:0}\n.item{grid-column:1;grid-row:1}\n.item-name{font-size:14px}\n.item-detail{font-size:10px;margin-top:2px}\n.category,.separator{display:none}\n.quantity{grid-column:1;grid-row:2;align-self:center}\n.quantity strong{font-size:18px}\n.unit{font-size:11px;margin-left:3px}\n.mobile-only{display:inline}\n.stock{grid-column:2;grid-row:2;align-self:center}\n.status{font-size:11px;padding:3px 7px}\n.actions{grid-column:2;grid-row:1;align-self:center}\n.restock{padding:7px 12px;font-size:12px}\n.inventory-footer{padding:11px 14px;font-size:10px;gap:8px}\n.recent{font-size:11px;line-height:1.5;margin-top:14px;align-items:flex-start;gap:7px}\n.recent svg{margin-top:2px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<a class=\"identity\" href=\"#\" aria-label=\"North community co-op home\">\n<svg class=\"mark\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 26V6l20 20V6M16 3v26\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\"/></svg>\n<span class=\"brand\">North</span><span class=\"coop\">Community co-op</span>\n</a>\n<nav aria-label=\"Main navigation\"><a href=\"#\">Overview</a><a href=\"#inventory\" aria-current=\"page\">Inventory</a><a href=\"#\">Suppliers</a></nav>\n</div>\n</header>\n<main id=\"inventory\">\n<div class=\"page-heading\">\n<div><p class=\"eyebrow\">CO-OP SHOP</p><h1>Stock overview</h1><p class=\"subtitle\">Keep everyday essentials ready for our members.</p></div>\n<div class=\"primary-action\"><button class=\"primary\" type=\"button\"><span aria-hidden=\"true\">+</span>Plan restock</button><p class=\"hint\">Group low-stock items for the next co-op order.</p></div>\n</div>\n<section class=\"alert\" aria-labelledby=\"alert-title\">\n<svg class=\"alert-icon\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M12 7v6m0 3v1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/></svg>\n<div><h2 id=\"alert-title\">Low stock</h2><p>Canvas tote and Trail bottle are below the 10-unit minimum.</p></div>\n<div class=\"alert-count\"><strong>2</strong> items to replenish</div>\n</section>\n<section class=\"inventory\" aria-label=\"Shop inventory\">\n<form class=\"filters\" role=\"search\">\n<div><label for=\"search\">Search inventory</label><div class=\"search-wrap\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m13 13 4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg><input id=\"search\" type=\"search\" placeholder=\"Item name or code\"></div></div>\n<div><label for=\"category\">Category</label><select id=\"category\"><option>All categories</option><option>Reusable bags</option><option>Stationery</option><option>Drinkware</option></select></div>\n</form>\n<table>\n<caption>Co-op shop items, quantities and stock status</caption>\n<thead><tr><th scope=\"col\">Item / code</th><th scope=\"col\">On hand</th><th scope=\"col\">Stock status</th><th scope=\"col\" style=\"text-align:right\">Action</th></tr></thead>\n<tbody>\n<tr>\n<td class=\"item\"><div class=\"item-name\">Canvas tote</div><div class=\"item-detail\"><span class=\"code\">NTH-TOT-001</span><span class=\"separator\">·</span><span class=\"category\">Reusable bags</span></div></td>\n<td class=\"quantity\"><strong>7</strong><span class=\"unit\">units<span class=\"mobile-only\"> on hand</span></span></td>\n<td class=\"stock\"><span class=\"status low\">Low stock</span></td>\n<td class=\"actions\"><button type=\"button\" class=\"restock\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td class=\"item\"><div class=\"item-name\">Field notebook</div><div class=\"item-detail\"><span class=\"code\">NTH-NTB-002</span><span class=\"separator\">·</span><span class=\"category\">Stationery</span></div></td>\n<td class=\"quantity\"><strong>17</strong><span class=\"unit\">units<span class=\"mobile-only\"> on hand</span></span></td>\n<td class=\"stock\"><span class=\"status good\">In stock</span></td>\n<td class=\"actions\"><button type=\"button\" class=\"restock\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<td class=\"item\"><div class=\"item-name\">Trail bottle</div><div class=\"item-detail\"><span class=\"code\">NTH-BTL-003</span><span class=\"separator\">·</span><span class=\"category\">Drinkware</span></div></td>\n<td class=\"quantity\"><strong>6</strong><span class=\"unit\">units<span class=\"mobile-only\"> on hand</span></span></td>\n<td class=\"stock\"><span class=\"status low\">Low stock</span></td>\n<td class=\"actions\"><button type=\"button\" class=\"restock\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n<div class=\"inventory-footer\"><span><strong>3 items</strong> · 30 units on hand</span><span>Updated today, <time datetime=\"2025-05-14T09:42\">9:42 AM</time></span></div>\n</section>\n<p class=\"recent\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 18 18\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.2\"/><path d=\"M9 5v4l2.5 1.5\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg><span><strong>Recent update</strong> · Maya added 4 Field notebooks after the morning delivery.</span></p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-7","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Morrow. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 9, 19, 1, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview · Morrow</title>\n<style>\n:root{--ink:#263e32;--paper:#faf8f1;--wash:#edf0e7;--line:#cdd5c8;--muted:#627163}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit;color:inherit}\nbutton,input,select,a{-webkit-tap-highlight-color:transparent}\nbutton:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1160px;margin:auto;min-height:80px;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-size:26px;font-weight:750;letter-spacing:-1.2px;text-decoration:none;color:inherit}\n.brand span{font-weight:400;font-size:13px;letter-spacing:0;border-left:1px solid var(--line);margin-left:20px;padding-left:20px}\n.co-op{text-align:right;font-size:13px;font-weight:600}\n.co-op span{display:block;color:var(--muted);font-size:12px;font-weight:400}\nmain{max-width:1160px;margin:auto;padding:44px 40px 32px}\n.eyebrow{margin:0 0 8px;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:1.6px}\n.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}\nh1{font-size:38px;line-height:1.15;letter-spacing:-1.3px;margin:0 0 10px;font-weight:650}\n.intro{margin:0;color:var(--muted)}\n.totals{white-space:nowrap;text-align:right;margin:0 0 2px;color:var(--muted);font-size:13px}\n.totals strong{color:var(--ink);font-weight:650}\n.alert{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);border-left:3px solid var(--ink);background:var(--wash);border-radius:4px;padding:18px 22px;margin-bottom:28px}\n.alert h2{font-size:15px;margin:0 0 3px;font-weight:700}\n.alert p{margin:0;font-size:13px}\n.stock-visual{flex:none;text-align:center;min-width:100px}\n.stock-visual svg{display:block;width:94px;height:26px;margin:0 auto 4px}\n.stock-visual span{font-size:11px;color:var(--muted)}\n.toolbar{display:flex;gap:16px;margin-bottom:24px;align-items:flex-end}\n.field{display:flex;flex-direction:column;gap:7px}\n.field label{font-size:12px;font-weight:650}\n.search-field{flex:1;max-width:440px}\n.category-field{width:210px}\ninput,select{width:100%;min-width:0;height:44px;border:1px solid var(--line);border-radius:5px;background:var(--paper);padding:0 12px}\ninput::placeholder{color:var(--muted);opacity:1}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;left:13px;top:14px;width:16px;height:16px;pointer-events:none}\n.search-wrap input{padding-left:38px}\nselect{padding-right:8px}\n.table-panel{border:1px solid var(--line);border-radius:7px;overflow:hidden}\n.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}\n.panel-heading h2{font-size:15px;margin:0;font-weight:650}\n.count{font-size:12px;color:var(--muted)}\ntable{width:100%;border-collapse:collapse;text-align:left}\nthead{background:var(--wash)}\nth{font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:650;padding:12px 20px;color:var(--muted)}\ntd{padding:23px 20px;border-top:1px solid var(--line);vertical-align:middle}\ntbody tr:first-child td{border-top:0}\nth:first-child{width:46%}\nth:nth-child(2){width:15%}\nth:nth-child(3){width:21%}\n.item-name{display:block;font-size:15px;font-weight:650;line-height:1.4}\n.item-detail{display:block;margin-top:5px;color:var(--muted);font-size:12px}\n.item-code{font-variant-numeric:tabular-nums;letter-spacing:.3px}\n.quantity{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}\n.mobile-label{display:none}\n.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}\n.status::before{content:\"\";width:6px;height:6px;border:1px solid var(--ink);border-radius:50%;flex:none}\n.status.low{font-weight:700}\n.status.low::before{background:var(--ink)}\n.action{text-align:right}\nbutton{min-height:36px;border:1px solid var(--line);background:transparent;border-radius:4px;padding:7px 14px;font-size:12px;font-weight:650;cursor:pointer}\nbutton:hover{background:var(--wash);border-color:var(--ink)}\nbutton.priority{background:var(--ink);border-color:var(--ink);color:var(--paper)}\nbutton.priority:hover{opacity:.88}\n.table-footer{display:flex;justify-content:space-between;gap:12px;padding:13px 20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\n.table-footer p{margin:0}\n.page-note{font-size:12px;color:var(--muted);margin:18px 0 0}\n@media(max-width:600px){\n.header-inner{min-height:64px;padding:12px 20px}\n.brand{font-size:24px}\n.brand span{display:none}\n.co-op{font-size:12px}\n.co-op span{font-size:11px}\nmain{padding:24px 20px}\n.eyebrow{font-size:10px;margin-bottom:6px}\n.page-heading{display:block;margin-bottom:20px}\nh1{font-size:30px;letter-spacing:-1px;margin-bottom:6px}\n.intro{font-size:12px}\n.totals{margin:8px 0 0;text-align:left;font-size:12px}\n.alert{padding:12px 13px;gap:12px;margin-bottom:20px}\n.alert h2{font-size:14px}\n.alert p{font-size:12px;line-height:1.5}\n.stock-visual{min-width:67px}\n.stock-visual svg{width:67px;height:23px}\n.stock-visual span{font-size:10px}\n.toolbar{gap:10px;margin-bottom:20px}\n.field{gap:5px}\n.search-field{min-width:0}\n.category-field{width:132px;flex:none}\ninput,select{font-size:12px;height:42px;padding-left:10px}\n.search-wrap input{padding-left:30px}\n.search-wrap svg{left:10px;width:14px}\n.panel-heading{padding:12px 14px}\n.panel-heading h2{font-size:14px}\ntable,tbody{display:block}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) 43px 72px;column-gap:9px;align-items:center;padding:16px 14px;border-top:1px solid var(--line)}\ntbody tr:first-child{border-top:0}\ntd{display:block;border:0;padding:0;min-width:0}\ntd.item{grid-column:1;grid-row:1}\n.item-name{font-size:14px}\n.item-detail{font-size:10px;margin-top:3px}\n.item-detail .category{display:none}\ntd.quantity{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:center;font-size:21px}\n.mobile-label{display:block;font-size:9px;font-weight:400;color:var(--muted);margin-top:1px;white-space:nowrap}\ntd.stock{grid-column:1;grid-row:2;margin-top:6px}\n.status{font-size:11px}\ntd.action{grid-column:3;grid-row:1 / span 2}\nbutton{width:100%;padding:7px 8px;font-size:11px}\n.table-footer{padding:11px 14px;display:block;font-size:10px}\n.table-footer p+p{margin-top:3px}\n.page-note{font-size:11px;margin-top:13px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<a class=\"brand\" href=\"#inventory\">Morrow<span>Co-op workspace</span></a>\n<div class=\"co-op\">Cedar Street<span>Community food co-op</span></div>\n</div>\n</header>\n<main id=\"inventory\">\n<div class=\"page-heading\">\n<div>\n<p class=\"eyebrow\">Member goods · Inventory</p>\n<h1>Stock overview</h1>\n<p class=\"intro\">Everyday essentials for your co-op members.</p>\n</div>\n<p class=\"totals\"><strong>3 items</strong> · <strong>29</strong> units on hand</p>\n</div>\n\n<aside class=\"alert\" aria-labelledby=\"low-stock-heading\">\n<div>\n<h2 id=\"low-stock-heading\">Low stock</h2>\n<p>Trail bottle is down to 1. Reorder for the next member pick-up.</p>\n</div>\n<div class=\"stock-visual\">\n<svg viewBox=\"0 0 94 26\" role=\"img\" aria-label=\"Trail bottle: 1 unit on hand against a minimum of 5\">\n<g stroke=\"currentColor\" stroke-width=\"1\">\n<rect x=\"1\" y=\"3\" width=\"14\" height=\"20\" rx=\"2\" fill=\"currentColor\"/>\n<rect x=\"20\" y=\"3\" width=\"14\" height=\"20\" rx=\"2\" fill=\"none\"/>\n<rect x=\"39\" y=\"3\" width=\"14\" height=\"20\" rx=\"2\" fill=\"none\"/>\n<rect x=\"58\" y=\"3\" width=\"14\" height=\"20\" rx=\"2\" fill=\"none\"/>\n<rect x=\"77\" y=\"3\" width=\"14\" height=\"20\" rx=\"2\" fill=\"none\"/>\n</g>\n</svg>\n<span>1 of 5 minimum</span>\n</div>\n</aside>\n\n<section aria-label=\"Inventory filters\" class=\"toolbar\">\n<div class=\"field search-field\">\n<label for=\"search\">Search inventory</label>\n<div class=\"search-wrap\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"5.5\"/><path d=\"m12 12 5 5\"/></svg>\n<input type=\"search\" id=\"search\" placeholder=\"Item name or code\">\n</div>\n</div>\n<div class=\"field category-field\">\n<label for=\"category\">Category</label>\n<select id=\"category\">\n<option>All categories</option>\n<option>Bags &amp; carry</option>\n<option>Stationery</option>\n<option>Drinkware</option>\n</select>\n</div>\n</section>\n\n<section class=\"table-panel\" aria-labelledby=\"items-heading\">\n<div class=\"panel-heading\">\n<h2 id=\"items-heading\">Member goods</h2>\n<span class=\"count\">3 items</span>\n</div>\n<table aria-label=\"Member goods inventory\">\n<thead>\n<tr><th scope=\"col\">Item</th><th scope=\"col\">On hand</th><th scope=\"col\">Stock status</th><th scope=\"col\" class=\"action\">Action</th></tr>\n</thead>\n<tbody>\n<tr>\n<td class=\"item\"><span class=\"item-name\">Canvas tote</span><span class=\"item-detail\"><span class=\"item-code\">MR-001</span><span class=\"category\"> · Bags &amp; carry</span></span></td>\n<td class=\"quantity\">9<span class=\"mobile-label\">On hand</span></td>\n<td class=\"stock\"><span class=\"status\">In stock</span></td>\n<td class=\"action\"><button type=\"button\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td class=\"item\"><span class=\"item-name\">Field notebook</span><span class=\"item-detail\"><span class=\"item-code\">MR-002</span><span class=\"category\"> · Stationery</span></span></td>\n<td class=\"quantity\">19<span class=\"mobile-label\">On hand</span></td>\n<td class=\"stock\"><span class=\"status\">In stock</span></td>\n<td class=\"action\"><button type=\"button\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<td class=\"item\"><span class=\"item-name\">Trail bottle</span><span class=\"item-detail\"><span class=\"item-code\">MR-003</span><span class=\"category\"> · Drinkware</span></span></td>\n<td class=\"quantity\">1<span class=\"mobile-label\">On hand</span></td>\n<td class=\"stock\"><span class=\"status low\">Low stock</span></td>\n<td class=\"action\"><button type=\"button\" class=\"priority\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-footer\">\n<p>Low stock means fewer than 5 units on hand.</p>\n<p>Updated <time datetime=\"2025-06-18T09:42\">18 Jun 2025, 9:42 am</time></p>\n</div>\n</section>\n<p class=\"page-note\">Member goods only. Pantry and fresh food are tracked separately.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-8","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Fieldwork. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 10, 20, 2, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview — Fieldwork</title>\n<style>\n:root{--ink:#25342e;--muted:#66716a;--line:#d9ded6;--paper:#f7f8f4;--green:#284f3e;--amber:#875026}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #a4bc9b;outline-offset:3px}\nheader{border-bottom:1px solid var(--line);background:#fff}\n.topbar{max-width:1160px;margin:auto;padding:19px 32px;display:flex;align-items:center;gap:32px}\n.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.7px}\n.brand svg{width:25px;height:25px}\n.breadcrumb{color:var(--muted);font-size:12px}\n.breadcrumb span{margin:0 10px;color:#a4aca5}\n.team{margin-left:auto;font-size:12px;color:var(--muted)}\nmain{max-width:1160px;margin:auto;padding:32px}\n.eyebrow{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0 0 5px}\nh1{font:normal 42px/1.15 Georgia,\"Times New Roman\",serif;letter-spacing:-1px;margin:0 0 9px}\n.intro{margin:0;color:var(--muted)}\n.heading{margin-bottom:24px}\n.alert{display:flex;align-items:center;gap:14px;background:#f4eee3;border:1px solid #e1d4bd;padding:16px 20px}\n.alert-icon{width:27px;height:27px;flex:none;color:var(--amber)}\n.alert-copy{flex:1;min-width:0}\n.alert h2{font-size:14px;margin:0 0 2px;color:#74431f}\n.alert p{margin:0;color:#695b49;font-size:13px}\nbutton{border:1px solid #b9c6bc;border-radius:3px;padding:8px 14px;background:#fff;color:var(--green);font-size:13px;font-weight:600;white-space:nowrap;min-height:38px}\nbutton.primary{background:var(--green);color:#fff;border-color:var(--green)}\nbutton:hover{background:#e9efe8}\nbutton.primary:hover{background:#1e4031}\n.summary{display:flex;align-items:center;gap:20px;padding:14px 0 23px;color:var(--muted);font-size:12px}\n.summary strong{color:var(--ink);font-weight:650}\n.updated{margin-left:auto}\n.workspace{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:start}\n.inventory{min-width:0}\n.section-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}\nh2{font-size:16px;font-weight:650;margin:0}\n.section-title span{color:var(--muted);font-size:12px}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:14px;margin-bottom:18px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\ninput,select{display:block;width:100%;min-width:0;height:40px;border:1px solid #bfc8bf;border-radius:3px;background:#fff;color:var(--ink);padding:8px 11px;font-size:13px}\ninput::placeholder{color:#758076}\n.search-field{position:relative}\n.search-field svg{position:absolute;left:11px;top:12px;width:16px;height:16px;color:var(--muted);pointer-events:none}\n.search-field input{padding-left:35px}\ntable{border-collapse:collapse;width:100%;table-layout:fixed;background:#fff;border-top:1px solid var(--line)}\ncol.item{width:43%}col.quantity{width:12%}col.status{width:23%}col.action{width:22%}\nth{text-align:left;color:var(--muted);font-size:11px;font-weight:600;padding:11px 12px;border-bottom:1px solid var(--line)}\ntd{padding:19px 12px;border-bottom:1px solid var(--line);vertical-align:middle}\nth:first-child,td:first-child{padding-left:16px}\nth:last-child,td:last-child{text-align:right;padding-right:16px}\n.item-name{display:block;font-size:14px;font-weight:600}\n.code{display:block;margin-top:4px;font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}\n.quantity-cell{font-variant-numeric:tabular-nums;font-size:18px}\n.stock{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:550;white-space:nowrap}\n.dot{width:5px;height:5px;border-radius:50%;background:#58775a;flex:none}\n.low-row{background:#fcf7ee}\n.low{color:var(--amber)}\n.low .dot{background:#a2662e}\n.table-note{font-size:11px;color:var(--muted);margin:11px 0 0}\n.details{background:#eaf0e8;border-top:2px solid #5a705b;padding:18px 20px}\n.details .eyebrow{font-size:10px;margin-bottom:7px}\n.details h2{font:normal 23px/1.2 Georgia,\"Times New Roman\",serif}\ndl{margin:18px 0 0}\ndt{font-size:11px;line-height:1.55;color:#5e6e60;margin-top:15px}\ndd{margin:3px 0 0;font-size:13px;line-height:1.5}\n.details-note{border-top:1px solid #ccd6c9;padding-top:13px;margin:18px 0 0;font-size:12px;color:#536352}\n@media(max-width:800px){\n.workspace{grid-template-columns:minmax(0,1fr)}\n.details{display:grid;grid-template-columns:1fr 2fr;gap:0 24px}\n.details dl{margin:0;grid-row:span 2}\n.details dt:first-child{margin-top:0}\n.details-note{grid-column:1/-1}\n}\n@media(max-width:480px){\n.topbar{padding:14px 20px;gap:18px}\n.brand{font-size:18px}\n.breadcrumb{font-size:11px}\n.breadcrumb span{margin:0 6px}\n.team{display:none}\nmain{padding:23px 16px}\n.heading{margin-bottom:18px}\nh1{font-size:34px}\n.intro{font-size:12px}\n.alert{padding:13px 12px;gap:9px}\n.alert-icon{width:20px;height:20px}\n.alert p{font-size:11px}\n.alert button{padding:8px 10px}\n.summary{gap:13px;flex-wrap:wrap;padding:11px 0 20px;font-size:11px}\n.updated{margin-left:0;flex-basis:100%;margin-top:-8px}\n.section-title{margin-bottom:11px}\n.filters{grid-template-columns:minmax(0,1fr) 132px;gap:10px;margin-bottom:14px}\ninput,select{font-size:12px}\ncol.item{width:38%}col.quantity{width:10%}col.status{width:23%}col.action{width:29%}\nth{padding:9px 6px;font-size:10px}\ntd{padding:16px 6px}\nth:first-child,td:first-child{padding-left:10px}\nth:last-child,td:last-child{padding-right:10px}\n.item-name{font-size:13px}\n.code{font-size:10px}\n.quantity-cell{font-size:17px}\n.stock{font-size:10px;gap:4px}\ntd button{font-size:12px;padding:7px 9px}\n.workspace{gap:24px}\n.details{padding:16px;display:block}\n.details h2{font-size:22px}\n.details dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:14px}\n.details dt{margin:0}\n.details dd{margin:0}\n.details-note{margin-top:14px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"topbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 24V4h20M4 13h15M13 4v20\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M19 19h5v5h-5z\" fill=\"currentColor\"/></svg>\nFieldwork\n</div>\n<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">Studio<span>/</span><strong>Inventory</strong></nav>\n<div class=\"team\">Practice operations</div>\n</div>\n</header>\n<main id=\"inventory\">\n<div class=\"heading\">\n<p class=\"eyebrow\">Studio resources</p>\n<h1>Stock overview</h1>\n<p class=\"intro\">Shared essentials for studio work and days on site.</p>\n</div>\n\n<section class=\"alert\" aria-labelledby=\"alert-title\">\n<svg class=\"alert-icon\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 3 2 21h20L12 3Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M12 9v5m0 3v1\" stroke=\"currentColor\" stroke-width=\"1.8\"/></svg>\n<div class=\"alert-copy\">\n<h2 id=\"alert-title\">Low stock</h2>\n<p>Trail bottle · 2 left, below the reserve of 5.</p>\n</div>\n<button type=\"button\" class=\"primary\" aria-label=\"Restock Trail bottle\">Restock</button>\n</section>\n\n<div class=\"summary\" aria-label=\"Inventory summary\">\n<span><strong>3</strong> tracked items</span>\n<span><strong>32</strong> units on hand</span>\n<span class=\"updated\">Updated <time datetime=\"2025-06-18T09:42\">18 Jun 2025 · 09:42</time></span>\n</div>\n\n<div class=\"workspace\">\n<section class=\"inventory\" aria-labelledby=\"supplies-title\">\n<div class=\"section-title\">\n<h2 id=\"supplies-title\">Practice supplies</h2>\n<span>All locations</span>\n</div>\n<div class=\"filters\" role=\"search\" aria-label=\"Inventory filters\">\n<div>\n<label for=\"search\">Search inventory</label>\n<div class=\"search-field\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m12 12 5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<input id=\"search\" type=\"search\" placeholder=\"Item name or code\">\n</div>\n</div>\n<div>\n<label for=\"category\">Category</label>\n<select id=\"category\">\n<option>All categories</option>\n<option>Carry goods</option>\n<option>Stationery</option>\n<option>Drinkware</option>\n</select>\n</div>\n</div>\n<table aria-label=\"Practice supplies inventory\" aria-describedby=\"count-note\">\n<colgroup><col class=\"item\"><col class=\"quantity\"><col class=\"status\"><col class=\"action\"></colgroup>\n<thead><tr><th scope=\"col\">Item</th><th scope=\"col\">Qty</th><th scope=\"col\">Status</th><th scope=\"col\">Action</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"item-name\">Canvas tote</span><span class=\"code\">FW-CT-001</span></td>\n<td class=\"quantity-cell\">10</td>\n<td><span class=\"stock\"><span class=\"dot\"></span>In stock</span></td>\n<td><button type=\"button\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Field notebook</span><span class=\"code\">FW-FN-002</span></td>\n<td class=\"quantity-cell\">20</td>\n<td><span class=\"stock\"><span class=\"dot\"></span>In stock</span></td>\n<td><button type=\"button\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr class=\"low-row\">\n<td><span class=\"item-name\">Trail bottle</span><span class=\"code\">FW-TB-003</span></td>\n<td class=\"quantity-cell\">2</td>\n<td><span class=\"stock low\"><span class=\"dot\"></span>Low stock</span></td>\n<td><button type=\"button\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-note\" id=\"count-note\">Quantities reflect the last studio stock check.</p>\n</section>\n\n<aside class=\"details\" aria-labelledby=\"details-title\">\n<div>\n<p class=\"eyebrow\">Stock details</p>\n<h2 id=\"details-title\">Shared, not assigned.</h2>\n</div>\n<dl>\n<dt>Storage location</dt>\n<dd>Materials room · Shelf B2</dd>\n<dt>Default allocation for upcoming site surveys, consultant workshops and client handover meetings</dt>\n<dd>Practice-wide supply pool</dd>\n<dt>Stock steward</dt>\n<dd>Alex Morgan · Studio coordinator</dd>\n</dl>\n<p class=\"details-note\">Keep a reserve of 5 bottles ready for visiting project teams.</p>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-9","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Common. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 2, 21, 3, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview · Common</title>\n<style>\n:root{color-scheme:light;--ink:#26342e;--muted:#68716b;--line:#dce1da;--paper:#fff;--green:#2d4c3c;--amber:#795611}\n*{box-sizing:border-box}\nbody{margin:0;background:#f4f5f0;color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select,a{ -webkit-tap-highlight-color:transparent}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #9cb8a7;outline-offset:3px}\n.topbar{height:76px;background:var(--paper);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1160px;height:100%;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:650;letter-spacing:-1px}\n.mark{width:30px;height:30px;display:grid;place-items:center;background:var(--green);color:white}\n.practice{text-align:right;font-size:13px;font-weight:600}\n.practice small{display:block;font-size:11px;font-weight:400;color:var(--muted)}\nmain{max-width:1160px;margin:0 auto;padding:32px}\n.breadcrumb{margin:0 0 18px;color:var(--muted);font-size:12px}\n.breadcrumb span{padding:0 9px;color:#a3aaa3}\n.intro{display:flex;justify-content:space-between;align-items:center;gap:28px}\nh1{font-size:34px;line-height:1.2;letter-spacing:-1.2px;font-weight:600;margin:0 0 9px}\n.subtitle{margin:0;color:var(--muted)}\n.action-group{display:flex;align-items:center;gap:14px}\n.action-group p{max-width:150px;margin:0;font-size:12px;line-height:1.5;color:var(--muted)}\nbutton{min-height:44px;border-radius:4px;padding:10px 16px;border:1px solid #bcc8bd;background:white;color:var(--green);font-weight:600;white-space:nowrap}\n.primary{display:flex;align-items:center;gap:9px;border-color:var(--green);background:var(--green);color:white}\nbutton:hover{background:#edf2ec}\n.primary:hover{background:#223e2f}\n.summary{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0 20px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.stat{padding-left:26px;border-left:1px solid var(--line)}\n.stat:first-child{padding-left:0;border:0}\n.stat strong{display:block;font-size:26px;line-height:1.15;font-weight:550;letter-spacing:-.6px}\n.stat span{display:block;margin-top:5px;font-size:12px;color:var(--muted)}\n.stat.attention strong{color:var(--amber)}\n.alert{display:flex;gap:12px;align-items:flex-start;background:#f9f1dc;border:1px solid #e8d9ad;border-left:3px solid #b88a2c;padding:14px 16px;margin-bottom:24px;border-radius:3px;color:#684f1c}\n.alert svg{flex:none;margin-top:2px}\n.alert strong{font-weight:650}\n.alert p{margin:2px 0 0;font-size:13px}\n.inventory{border:1px solid var(--line);border-radius:6px;background:white;overflow:hidden}\n.section-heading{padding:20px 22px 0;display:flex;align-items:baseline;justify-content:space-between;gap:12px}\nh2{margin:0;font-size:16px;font-weight:650;letter-spacing:-.2px}\n.timestamp{color:var(--muted);font-size:12px}\n.filters{display:flex;align-items:end;gap:14px;padding:18px 22px 22px}\n.field{display:flex;flex-direction:column;gap:6px;min-width:0}\n.field label{font-size:12px;font-weight:600}\n.search-field{flex:1;max-width:480px}\n.category-field{width:220px}\ninput,select{height:44px;width:100%;min-width:0;background:white;color:var(--ink);border:1px solid #bcc6bd;border-radius:4px;padding:10px 12px}\ninput::placeholder{color:#818a83}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;top:14px;left:12px;color:var(--muted);pointer-events:none}\n.search-wrap input{padding-left:38px}\ntable{width:100%;border-collapse:collapse;text-align:left}\ncaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\nth{padding:11px 22px;background:#f6f7f3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}\ntd{padding:20px 22px;border-bottom:1px solid #e8ebe5;vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\n.item-name{font-weight:600;font-size:14px;display:block}\n.code{display:block;margin-top:4px;font-size:11px;color:var(--muted);letter-spacing:.5px;font-variant-numeric:tabular-nums}\n.category{font-size:13px;color:var(--muted)}\n.quantity{font-size:20px;font-weight:550;font-variant-numeric:tabular-nums}\n.minimum{display:block;font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}\n.badge{display:inline-flex;align-items:center;gap:6px;border-radius:3px;padding:4px 8px;font-size:11px;font-weight:600;white-space:nowrap;background:#edf3eb;color:#426046}\n.badge::before{content:\"\";width:5px;height:5px;border-radius:50%;background:currentColor}\n.badge.low{background:#fbf1d9;color:var(--amber)}\n.actions{text-align:right}\n.actions button{min-width:94px;font-size:12px}\n.mobile-status{display:none}\n.table-note{padding:12px 22px;border-top:1px solid var(--line);background:#fafbf8;color:var(--muted);font-size:11px}\n.recent{display:flex;align-items:center;gap:9px;margin:17px 0 0;font-size:12px;color:var(--muted)}\n.recent svg{flex:none}\n.recent strong{font-weight:600;color:#47574c}\n@media(max-width:700px){\n.topbar{height:64px}.topbar-inner{padding:0 20px}.brand{font-size:22px}.practice{font-size:11px}.practice small{font-size:10px}\nmain{padding:22px 20px}.breadcrumb{display:none}\n.intro{display:block}h1{font-size:29px;margin-bottom:6px}.subtitle{font-size:13px}\n.action-group{margin-top:17px;gap:13px}.action-group p{max-width:150px;font-size:11px}.primary{font-size:12px;padding:10px 13px}\n.summary{margin:22px 0 16px;padding:14px 0}.stat{padding-left:14px}.stat strong{font-size:23px}.stat span{font-size:11px}\n.alert{padding:11px 12px;margin-bottom:18px;gap:9px}.alert p{font-size:12px}\n.section-heading{padding:16px 13px 0;display:block}.timestamp{display:block;margin-top:3px;font-size:10px}\n.filters{padding:14px 13px 16px;gap:10px}.search-field{flex:1.15}.category-field{flex:1;width:auto}\n.field label{font-size:11px}input,select{font-size:12px;padding-left:9px}.search-wrap input{padding-left:30px}.search-wrap svg{left:9px;width:14px}\n.desktop-only{display:none}\nth,td{padding:12px 10px}th{font-size:10px;letter-spacing:.2px}\nth:first-child,td:first-child{padding-left:13px}\nth:last-child,td:last-child{padding-right:13px}\n.item-name{font-size:13px}.code{font-size:10px;margin-top:3px}\n.mobile-status{display:block;margin-top:7px}.badge{font-size:10px;padding:2px 5px;gap:4px}\n.quantity{font-size:19px}.minimum{font-size:10px}\n.actions button{min-width:76px;padding:10px;font-size:11px}\n.table-note{padding:11px 13px;font-size:10px}\n.recent{align-items:flex-start;font-size:11px;line-height:1.6;margin-top:14px}.recent svg{margin-top:3px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M15 4H5v12h10M15 8H9v4h6\" stroke=\"currentColor\" stroke-width=\"1.6\"/></svg></span>Common</div>\n<div class=\"practice\">Northline Architects<small>London studio</small></div>\n</div>\n</header>\n<main>\n<p class=\"breadcrumb\">Studio operations<span>/</span>Inventory</p>\n<section aria-labelledby=\"page-title\">\n<div class=\"intro\">\n<div><h1 id=\"page-title\">Stock overview</h1><p class=\"subtitle\">Studio supplies for site visits, reviews and workshops.</p></div>\n<div class=\"action-group\">\n<button class=\"primary\" type=\"button\"><span aria-hidden=\"true\">+</span> Prepare restock</button>\n<p>Confirm quantities before placing an order.</p>\n</div>\n</div>\n<div class=\"summary\" aria-label=\"Inventory summary\">\n<div class=\"stat\"><strong>3</strong><span>Stocked items</span></div>\n<div class=\"stat\"><strong>26</strong><span>Units on hand</span></div>\n<div class=\"stat attention\"><strong>2</strong><span>Low stock items</span></div>\n</div>\n<aside class=\"alert\" aria-label=\"Low stock alert\">\n<svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M10 2 18 17H2L10 2Z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"/><path d=\"M10 7v4m0 2v1\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<div><strong>Low stock</strong><p>Canvas tote and Trail bottle are below the 5-unit minimum. Restock before the next site visit.</p></div>\n</aside>\n</section>\n<section class=\"inventory\" aria-labelledby=\"inventory-title\">\n<div class=\"section-heading\"><h2 id=\"inventory-title\">Studio inventory</h2><span class=\"timestamp\">Updated <time datetime=\"2025-06-18T09:42\">18 Jun 2025, 09:42</time></span></div>\n<form class=\"filters\" role=\"search\">\n<div class=\"field search-field\">\n<label for=\"search\">Search inventory</label>\n<div class=\"search-wrap\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m13 13 4 4\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg><input id=\"search\" type=\"search\" placeholder=\"Item or code\"></div>\n</div>\n<div class=\"field category-field\"><label for=\"category\">Category</label><select id=\"category\"><option>All categories</option><option>Studio kit</option><option>Stationery</option></select></div>\n</form>\n<table>\n<caption>Studio supplies, quantities, stock status and restock actions</caption>\n<thead><tr><th scope=\"col\">Item</th><th scope=\"col\" class=\"desktop-only\">Category</th><th scope=\"col\">On hand</th><th scope=\"col\" class=\"desktop-only\">Stock status</th><th scope=\"col\" class=\"actions\">Action</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"item-name\">Canvas tote</span><span class=\"code\">CM-TOT-001</span><span class=\"mobile-status\"><span class=\"badge low\">Low stock</span></span></td>\n<td class=\"category desktop-only\">Studio kit</td><td class=\"quantity\">2<span class=\"minimum\">Min. 5</span></td><td class=\"desktop-only\"><span class=\"badge low\">Low stock</span></td><td class=\"actions\"><button type=\"button\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Field notebook</span><span class=\"code\">CM-NBK-002</span><span class=\"mobile-status\"><span class=\"badge\">In stock</span></span></td>\n<td class=\"category desktop-only\">Stationery</td><td class=\"quantity\">21<span class=\"minimum\">Min. 5</span></td><td class=\"desktop-only\"><span class=\"badge\">In stock</span></td><td class=\"actions\"><button type=\"button\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Trail bottle</span><span class=\"code\">CM-BTL-003</span><span class=\"mobile-status\"><span class=\"badge low\">Low stock</span></span></td>\n<td class=\"category desktop-only\">Studio kit</td><td class=\"quantity\">3<span class=\"minimum\">Min. 5</span></td><td class=\"desktop-only\"><span class=\"badge low\">Low stock</span></td><td class=\"actions\"><button type=\"button\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-note\">3 items · Counts cover supplies held in the London studio, excluding project materials.</div>\n</section>\n<p class=\"recent\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\"/><path d=\"M8 4v4l3 2\" stroke=\"currentColor\"/></svg><span><strong>Recent update</strong> · Field notebook +12 units received · M. Chen, 09:42</span></p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Rill. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 3, 22, 4, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview · Rill</title>\n<style>\n:root{--paper:#f5f3ed;--surface:#fffefa;--ink:#272d28;--muted:#696c63;--line:#deded3;--soft:#eeeee6;--amber:#785223}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select,a{outline-offset:4px}\nbutton{cursor:pointer}\nheader{background:var(--surface);border-bottom:1px solid var(--line)}\n.topbar{max-width:1160px;margin:auto;padding:19px 32px;display:flex;align-items:center;gap:34px}\n.brand{display:flex;align-items:center;gap:10px;font:700 29px/1 Georgia,serif;letter-spacing:-1px}\n.brand svg{width:26px;height:26px}\nnav{border-left:1px solid var(--line);padding-left:30px}\nnav a{color:var(--ink);text-decoration:none;font-weight:600}\n.workspace{margin-left:auto;color:var(--muted);font-size:12px}\nmain{max-width:1160px;margin:0 auto;padding:44px 32px}\n.eyebrow{text-transform:uppercase;font-size:11px;font-weight:650;letter-spacing:1.5px;color:var(--muted);margin:0 0 9px}\nh1{font-size:34px;line-height:1.15;letter-spacing:-1.1px;margin:0}\n.intro{margin:12px 0 0;color:var(--muted)}\n.heading{display:flex;justify-content:space-between;align-items:center;gap:20px}\n.tracking{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:5px 9px;white-space:nowrap}\n.tracking svg{width:13px;height:13px}\n.summary{margin:22px 0 25px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}\n.summary strong{font-weight:650;color:var(--ink)}\n.divider{height:13px;border-left:1px solid #c8c9bd}\n.alert{display:flex;align-items:flex-start;gap:12px;background:#f0e9db;border:1px solid #ded1b9;border-radius:7px;padding:15px 18px;margin-bottom:25px}\n.alert-icon{flex:none;width:22px;height:22px;border:1.5px solid var(--amber);border-radius:50%;text-align:center;font-weight:700;color:var(--amber);line-height:19px}\n.alert h2{font-size:14px;margin:0 0 2px}\n.alert p{font-size:13px;color:#655b48;margin:0}\n.alert-count{margin-left:auto;white-space:nowrap;font-size:12px;font-weight:600;color:var(--amber);padding-top:2px}\n.filters{display:grid;grid-template-columns:minmax(200px,1fr) 235px;gap:16px;margin-bottom:20px;max-width:710px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\n.search{position:relative}\n.search svg{position:absolute;left:12px;top:13px;width:17px;height:17px;color:var(--muted);pointer-events:none}\ninput,select{width:100%;min-width:0;height:43px;border:1px solid #c9ccc0;border-radius:5px;background:var(--surface);color:var(--ink)}\ninput{padding:10px 12px 10px 38px}\ninput::placeholder{color:#777b70}\nselect{padding:8px 10px}\n.inventory{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}\ntable{width:100%;border-collapse:collapse;text-align:left}\nth{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600;background:#f7f7f1;padding:13px 22px;border-bottom:1px solid var(--line)}\ntd{padding:21px 22px;border-bottom:1px solid var(--line)}\nth:first-child{width:44%}\nth:last-child{text-align:right}\n.item{display:flex;align-items:center;gap:14px}\n.item-icon{width:44px;height:44px;display:grid;place-items:center;background:var(--soft);border:1px solid #e4e4d9;border-radius:5px;flex:none;color:#626c5c}\n.item-icon svg{width:26px;height:26px}\n.item-name{font-size:15px;font-weight:600}\n.code{display:block;font-size:11px;letter-spacing:.6px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}\n.quantity{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}\n.units{display:none}\n.status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:600}\n.status.low{color:var(--amber)}\n.status svg{width:14px;height:14px;flex:none}\n.status.ok{color:#516449}\n.action{text-align:right}\nbutton{background:var(--ink);color:#fffefa;border:1px solid var(--ink);border-radius:5px;min-height:36px;padding:7px 17px;font-size:12px;font-weight:600}\nbutton.secondary{background:transparent;color:var(--ink);border-color:#c6cabe}\nbutton:hover{background:#424a3f;color:white}\n.table-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 22px;color:var(--muted);font-size:11px}\n.note{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);margin-top:16px}\n.note p{margin:0}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n@media(max-width:600px){\n.topbar{padding:15px 20px;gap:20px}\n.brand{font-size:26px}\n.brand svg{width:23px;height:23px}\nnav{padding-left:20px;font-size:12px}\n.workspace{display:none}\nmain{padding:25px 18px}\n.eyebrow{font-size:10px;margin-bottom:8px}\nh1{font-size:29px}\n.heading{display:block}\n.intro{font-size:12px;margin-top:8px;max-width:290px}\n.tracking{display:none}\n.summary{margin:14px 0 18px;font-size:12px}\n.alert{padding:11px 12px;gap:9px;margin-bottom:18px}\n.alert h2{font-size:13px}\n.alert p{font-size:11px;line-height:1.5}\n.alert-count{display:none}\n.alert-icon{width:19px;height:19px;line-height:16px;font-size:12px}\n.filters{grid-template-columns:minmax(0,1fr) 137px;gap:10px;margin-bottom:16px}\nlabel{font-size:11px;margin-bottom:5px}\ninput,select{font-size:12px;height:40px}\n.search svg{top:12px;left:10px;width:15px}\ninput{padding-left:31px}\ntable,tbody{display:block}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntr{display:grid;grid-template-columns:66px minmax(0,1fr) 86px;gap:5px 8px;padding:15px 14px;border-bottom:1px solid var(--line)}\ntd{display:block;padding:0;border:0}\ntd:first-child{grid-column:1/3;grid-row:1}\n.item{gap:0}\n.item-icon{display:none}\n.item-name{font-size:14px}\n.code{font-size:10px;margin-top:1px}\n.quantity{grid-column:1;grid-row:2;font-size:14px}\n.units{display:inline;font-size:10px;font-weight:400;color:var(--muted)}\ntd.stock{grid-column:2;grid-row:2;align-self:center}\n.status{font-size:10px;gap:4px}\n.status svg{width:12px;height:12px}\n.action{grid-column:3;grid-row:1/3;align-self:center}\nbutton{width:100%;padding:7px 10px;font-size:11px}\n.table-footer{padding:11px 14px;gap:4px;flex-wrap:wrap;font-size:10px}\n.note{display:block;font-size:10px;margin-top:11px}\n.note p+p{margin-top:4px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"topbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M3 24V4h13v8H9v12M16 12h9v12H9M3 16h6\"/></svg>\nRill\n</div>\n<nav aria-label=\"Primary\"><a href=\"#inventory\" aria-current=\"page\">Inventory</a></nav>\n<span class=\"workspace\">Practice operations</span>\n</div>\n</header>\n<main id=\"inventory\">\n<p class=\"eyebrow\">Studio resources</p>\n<div class=\"heading\">\n<div>\n<h1>Stock overview</h1>\n<p class=\"intro\">Essentials for site visits, pin-ups and client handovers.</p>\n</div>\n<span class=\"tracking\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\"><path d=\"M4 2h8v12H4zM6 5h4M6 8h4M6 11h2\"/></svg>Manually tracked</span>\n</div>\n<div class=\"summary\"><span><strong>3</strong> tracked items</span><span class=\"divider\"></span><span><strong>29</strong> units on hand</span></div>\n<aside class=\"alert\" aria-labelledby=\"alert-title\">\n<span class=\"alert-icon\" aria-hidden=\"true\">!</span>\n<div><h2 id=\"alert-title\">Low stock</h2><p>Canvas tote and Trail bottle are below the 5-unit minimum.</p></div>\n<span class=\"alert-count\">2 items to restock</span>\n</aside>\n<form class=\"filters\" role=\"search\">\n<div><label for=\"search\">Search inventory</label><div class=\"search\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\"/><path d=\"m13 13 4 4\"/></svg><input id=\"search\" type=\"search\" placeholder=\"Item name or code\"></div></div>\n<div><label for=\"category\">Category</label><select id=\"category\"><option>All categories</option><option>Studio supplies</option><option>Site essentials</option></select></div>\n</form>\n<section class=\"inventory\" aria-label=\"Inventory items\">\n<table>\n<caption class=\"sr-only\">Studio inventory quantities, stock status and restocking actions</caption>\n<thead><tr><th scope=\"col\">Item / Code</th><th scope=\"col\">Available</th><th scope=\"col\">Stock status</th><th scope=\"col\">Next step</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"item\"><span class=\"item-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><path d=\"M6 10h16l1 15H5L6 10Z\"/><path d=\"M10 12V7a4 4 0 0 1 8 0v5\"/></svg></span><div><span class=\"item-name\">Canvas tote</span><span class=\"code\">RL-CT-001 · Studio supplies</span></div></div></td>\n<td class=\"quantity\">3 <span class=\"units\">units</span></td>\n<td class=\"stock\"><span class=\"status low\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><path d=\"m8 2 6 12H2L8 2Z\"/><path d=\"M8 6v4m0 1v1\"/></svg>Low stock</span></td>\n<td class=\"action\"><button type=\"button\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td><div class=\"item\"><span class=\"item-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><rect x=\"6\" y=\"3\" width=\"17\" height=\"22\" rx=\"1\"/><path d=\"M10 3v22M14 9h5M14 13h5\"/></svg></span><div><span class=\"item-name\">Field notebook</span><span class=\"code\">RL-FN-002 · Studio supplies</span></div></div></td>\n<td class=\"quantity\">22 <span class=\"units\">units</span></td>\n<td class=\"stock\"><span class=\"status ok\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"m5 8 2 2 4-4\"/></svg>In stock</span></td>\n<td class=\"action\"><button class=\"secondary\" type=\"button\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<td><div class=\"item\"><span class=\"item-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><path d=\"M11 3h6v5l3 4v11a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V12l3-4V3ZM11 7h6M8 15h12\"/></svg></span><div><span class=\"item-name\">Trail bottle</span><span class=\"code\">RL-TB-003 · Site essentials</span></div></div></td>\n<td class=\"quantity\">4 <span class=\"units\">units</span></td>\n<td class=\"stock\"><span class=\"status low\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><path d=\"m8 2 6 12H2L8 2Z\"/><path d=\"M8 6v4m0 1v1\"/></svg>Low stock</span></td>\n<td class=\"action\"><button type=\"button\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-footer\"><span>Showing all 3 items</span><span>Updated <time datetime=\"2025-06-18T09:40\">18 Jun 2025 · 09:40</time></span></div>\n</section>\n<div class=\"note\"><p>Restocking contact: Studio coordinator</p><p>Low stock = fewer than 5 units · Manual stock counts</p></div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Alder. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 5, 24, 6, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview — Alder</title>\n<style>\n:root{--paper:#f6f5ef;--ink:#263e34;--muted:#627268;--line:#cbd1c7;--wash:#e9ece3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit;color:inherit}\nbutton,input,select{border:1px solid var(--line);border-radius:3px;background:transparent}\nbutton{cursor:pointer}\nbutton:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}\n.masthead{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}\n.identity{display:flex;align-items:center;gap:14px}\n.mark{width:29px;height:32px}\n.brand{font-size:27px;letter-spacing:-1px;font-weight:650}\n.workspace{border-left:1px solid var(--line);margin-left:12px;padding-left:24px;color:var(--muted)}\n.team{text-align:right;font-size:13px}\n.team span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}\nmain{max-width:1120px;margin:0 auto;padding:45px 28px 32px}\n.eyebrow{margin:0 0 12px;font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}\n.heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:30px}\nh1{font-size:42px;line-height:1.15;letter-spacing:-1.6px;font-weight:550;margin:0 0 12px}\n.intro{color:var(--muted);margin:0;font-size:15px}\n.updated{font-size:12px;text-align:right;flex-shrink:0;color:var(--muted);padding-bottom:2px}\n.updated span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}\n.alert{display:flex;gap:14px;align-items:center;background:var(--wash);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:17px 20px;margin-bottom:29px}\n.alert svg{width:21px;height:21px;flex-shrink:0}\n.alert strong{font-weight:650;margin-right:12px}\n.alert p{margin:0}\n.alert .detail{color:var(--muted)}\n.toolbar{display:flex;align-items:flex-end;gap:18px;margin-bottom:24px}\n.field{display:flex;flex-direction:column;gap:7px}\n.field label{font-size:12px;font-weight:600}\n.search-field{width:360px}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;left:13px;top:13px;width:17px;height:17px;pointer-events:none}\ninput{width:100%;height:44px;padding:10px 12px 10px 40px;min-width:0}\ninput::placeholder{color:var(--muted);opacity:1}\nselect{height:44px;padding:8px 38px 8px 12px;width:220px}\n.total{margin:0 0 11px auto;color:var(--muted);font-size:12px;white-space:nowrap}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\ncol.item{width:49%}col.quantity{width:15%}col.status{width:21%}col.action{width:15%}\nth{text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}\nthead th{padding:0 12px 12px;border-bottom:1px solid var(--ink)}\nth:first-child,td:first-child{padding-left:0}\nth:last-child,td:last-child{padding-right:0;text-align:right}\ntbody td{border-bottom:1px solid var(--line);padding:24px 12px;vertical-align:middle}\n.item-name{font-size:17px;font-weight:600;letter-spacing:-.3px;display:block;margin-bottom:4px}\n.item-code{font-size:11px;letter-spacing:.04em;color:var(--muted);display:block}\n.item-detail{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:7px;max-width:370px;overflow-wrap:anywhere}\n.count{font-size:25px;line-height:1.2;letter-spacing:-.7px;font-variant-numeric:tabular-nums}\n.unit{color:var(--muted);font-size:11px;margin-left:5px}\n.stock{display:inline-flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}\n.dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--ink);flex-shrink:0}\n.ready .dot{background:transparent;border:1px solid var(--ink)}\n.low{border:1px solid var(--line);padding:4px 9px;border-radius:3px;font-weight:550}\n.restock{padding:8px 17px;min-height:38px;border-color:var(--ink);font-size:12px;font-weight:600}\n.table-note{display:flex;justify-content:space-between;gap:25px;color:var(--muted);font-size:11px;padding-top:16px}\n.table-note p{margin:0;max-width:440px}\n.table-note p:last-child{text-align:right}\nfooter{margin-top:50px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted)}\n@media(max-width:650px){\n.masthead{height:67px;padding:0 20px}\n.identity{gap:9px}.brand{font-size:25px}.mark{width:24px}\n.workspace{display:none}.team{font-size:11px}.team span{font-size:9px}\nmain{padding:26px 20px 22px}\n.eyebrow{font-size:10px;margin-bottom:10px}\n.heading{display:block;margin-bottom:22px}\nh1{font-size:32px;letter-spacing:-1px;margin-bottom:8px}\n.intro{font-size:13px;max-width:310px}\n.updated{margin-top:13px;font-size:10px;text-align:left}\n.updated span{display:inline;font-size:10px;letter-spacing:0;text-transform:none;margin-right:6px}\n.alert{padding:13px 12px;gap:11px;margin-bottom:22px;align-items:flex-start}\n.alert svg{margin-top:2px;width:18px;height:18px}\n.alert strong{display:block;font-size:13px;margin:0 0 2px}\n.alert .detail{display:block;font-size:12px;line-height:1.5}\n.toolbar{display:grid;grid-template-columns:minmax(0,1fr) 142px;gap:12px;margin-bottom:20px}\n.search-field{width:auto}.field{min-width:0}.field label{font-size:11px}\ninput,select{font-size:12px;height:42px}\ninput{padding-left:33px;padding-right:8px}\n.search-wrap svg{left:10px;width:15px}\nselect{width:100%;padding-left:9px;padding-right:20px}\n.total{display:none}\ntable,thead,tbody{display:block}\ncolgroup{display:none}\nthead tr{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:16px;border-bottom:1px solid var(--ink)}\nthead th{padding:0 0 10px;border:0;font-size:10px}\nthead th:nth-child(2){text-align:right}\nthead th:nth-child(n+3){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-rows:auto auto auto;column-gap:16px;row-gap:8px;border-bottom:1px solid var(--line);padding:18px 0;align-items:center}\ntbody td{border:0;padding:0}\ntd.product{grid-column:1;grid-row:1/4;align-self:start}\ntd.available{grid-column:2;grid-row:1;text-align:right}\ntd.stock-cell{grid-column:2;grid-row:2;text-align:right}\ntd.actions{grid-column:2;grid-row:3}\n.item-name{font-size:16px;margin-bottom:3px}\n.item-code{font-size:10px}\n.item-detail{font-size:11px;margin-top:6px}\n.count{font-size:23px}.unit{font-size:10px}\n.stock{font-size:10px;gap:5px}.low{padding:3px 7px}\n.restock{width:100%;padding:7px 10px;min-height:36px;font-size:11px}\n.table-note{display:block;font-size:10px;padding-top:13px}\n.table-note p:last-child{text-align:left;margin-top:5px}\nfooter{margin-top:27px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"masthead\">\n<div class=\"identity\">\n<svg class=\"mark\" viewBox=\"0 0 30 34\" fill=\"none\" aria-hidden=\"true\"><path d=\"M15 31V4M15 15C7 15 4 10 4 5c7 0 11 3 11 10ZM15 23c8 0 11-5 11-10-7 0-11 3-11 10Z\" stroke=\"currentColor\" stroke-width=\"1.7\"/></svg>\n<span class=\"brand\">Alder</span>\n<span class=\"workspace\">Field operations</span>\n</div>\n<div class=\"team\"><span>Research team</span>North Coast</div>\n</header>\n<main id=\"inventory\">\n<p class=\"eyebrow\">Equipment register / Inventory</p>\n<div class=\"heading\">\n<div>\n<h1>Stock overview</h1>\n<p class=\"intro\">Keep the team equipped for the next day in the field.</p>\n</div>\n<div class=\"updated\"><span>Last updated</span><time datetime=\"2025-06-18T08:42:00\">18 Jun 2025 · 08:42</time></div>\n</div>\n\n<aside class=\"alert\" aria-label=\"Low stock alert\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 3 22 20H2L12 3Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M12 9v5m0 2v1\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<p><strong>Low stock</strong><span class=\"detail\">2 items are below the field-ready minimum. Check supplies before the next departure.</span></p>\n</aside>\n\n<section aria-label=\"Inventory\">\n<div class=\"toolbar\">\n<div class=\"field search-field\">\n<label for=\"search\">Search inventory</label>\n<div class=\"search-wrap\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m15 15 5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<input id=\"search\" type=\"search\" placeholder=\"Name or item code\">\n</div>\n</div>\n<div class=\"field\">\n<label for=\"category\">Category</label>\n<select id=\"category\">\n<option>All categories</option>\n<option>Carry &amp; storage</option>\n<option>Field notes</option>\n<option>Hydration</option>\n</select>\n</div>\n<p class=\"total\">3 items · 35 units on hand</p>\n</div>\n\n<table aria-label=\"Base camp inventory\" aria-describedby=\"inventory-note\">\n<colgroup><col class=\"item\"><col class=\"quantity\"><col class=\"status\"><col class=\"action\"></colgroup>\n<thead><tr><th scope=\"col\">Item</th><th scope=\"col\">On hand</th><th scope=\"col\">Stock status</th><th scope=\"col\">Action</th></tr></thead>\n<tbody>\n<tr>\n<td class=\"product\"><span class=\"item-name\">Canvas tote</span><span class=\"item-code\">ALD-CT-001 · Carry &amp; storage</span><span class=\"item-detail\">Shared carry equipment for multi-day watershed observation and remote sample collection</span></td>\n<td class=\"available\"><span class=\"count\">5</span><span class=\"unit\">units</span></td>\n<td class=\"stock-cell\"><span class=\"stock low\"><span class=\"dot\"></span>Low stock</span></td>\n<td class=\"actions\"><button class=\"restock\" type=\"button\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td class=\"product\"><span class=\"item-name\">Field notebook</span><span class=\"item-code\">ALD-FN-002 · Field notes</span><span class=\"item-detail\">Weather-resistant · ruled pages</span></td>\n<td class=\"available\"><span class=\"count\">24</span><span class=\"unit\">units</span></td>\n<td class=\"stock-cell\"><span class=\"stock ready\"><span class=\"dot\"></span>Field-ready</span></td>\n<td class=\"actions\"><button class=\"restock\" type=\"button\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<td class=\"product\"><span class=\"item-name\">Trail bottle</span><span class=\"item-code\">ALD-TB-003 · Hydration</span><span class=\"item-detail\">750 ml · stainless steel</span></td>\n<td class=\"available\"><span class=\"count\">6</span><span class=\"unit\">units</span></td>\n<td class=\"stock-cell\"><span class=\"stock low\"><span class=\"dot\"></span>Low stock</span></td>\n<td class=\"actions\"><button class=\"restock\" type=\"button\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-note\" id=\"inventory-note\">\n<p>On-hand counts exclude equipment checked out with field teams.</p>\n<p>Minimum stock: totes &amp; bottles 10 · notebooks 12</p>\n</div>\n</section>\n<footer><span>North Coast · Base camp store</span><span>Equipment register / 03 items</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Morrow. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 6, 25, 7, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview — Morrow</title>\n<style>\n:root{--ink:#25382f;--muted:#6b736c;--line:#dce0d7;--paper:#fafbf7;--green:#344f3d;--warn:#8a4f25;--warn-bg:#f8f0e4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9cae8a;outline-offset:3px}\n.topbar{border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1160px;margin:auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:25px;height:25px}\n.context{margin-left:25px;padding-left:25px;border-left:1px solid var(--line);font-size:12px;color:var(--muted);letter-spacing:.06em}\n.brand-group{display:flex;align-items:center}\n.team{font-size:12px;color:var(--muted)}\n.team strong{color:var(--ink);font-weight:500}\nmain{max-width:1160px;margin:48px auto;padding:0 28px}\n.intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}\n.eyebrow{margin:0 0 8px;font-size:10px;font-weight:650;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}\nh1{font:normal 46px/1.12 Georgia,\"Times New Roman\",serif;letter-spacing:-1.3px;margin:0 0 10px}\n.subtitle{margin:0;color:var(--muted)}\n.action-group{display:flex;align-items:center;gap:14px}\n.hint{max-width:160px;font-size:12px;line-height:1.5;color:var(--muted)}\n.primary{border:1px solid var(--green);border-radius:4px;background:var(--green);color:white;padding:11px 22px;font-weight:600}\n.alert{display:flex;gap:12px;align-items:flex-start;border:1px solid #e6d7c0;background:var(--warn-bg);padding:15px 18px;margin-bottom:24px;border-radius:4px;color:var(--warn)}\n.alert-icon{flex:none;width:20px;height:20px;border:1px solid #b78d60;border-radius:50%;text-align:center;font-size:12px;font-weight:700;margin-top:1px}\n.alert strong{font-weight:650}\n.alert p{margin:2px 0 0;font-size:13px;color:#795f47}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 246px;gap:28px;align-items:start}\n.inventory{min-width:0}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;margin-bottom:20px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\ninput,select{width:100%;min-width:0;height:42px;border:1px solid #cbd2c6;border-radius:4px;background:white;color:var(--ink);padding:9px 12px}\ninput::placeholder{color:#81867e}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;left:12px;top:13px;width:16px;height:16px;color:var(--muted);pointer-events:none}\n.search-wrap input{padding-left:36px}\n.table-wrap{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}\ntable{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}\nth{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--muted);background:#f1f3ed;padding:12px 20px;border-bottom:1px solid var(--line)}\nth:first-child{width:49%}\nth:nth-child(2){width:29%}\nth:last-child{text-align:right;width:22%}\ntd{padding:21px 20px;border-bottom:1px solid #e8ebe4;vertical-align:middle}\ntbody tr:last-child td{border-bottom:0}\n.item-name{display:block;font-weight:600;font-size:15px}\n.code{display:block;margin-top:4px;color:var(--muted);font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em}\n.quantity{font-size:23px;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.5px}\n.units{font-size:11px;color:var(--muted);margin-left:4px;letter-spacing:0}\n.status{display:block;font-size:11px;margin-top:5px;white-space:nowrap}\n.status::before{content:\"\";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:2px}\n.low{color:var(--warn)}\n.healthy{color:#53704c}\ntd:last-child{text-align:right}\n.row-action{border:1px solid #cbd2c6;background:white;color:var(--green);border-radius:4px;padding:7px 12px;font-size:12px;font-weight:600}\n.row-action:hover{background:#f1f3ed}\n.table-note{margin:12px 0 0;font-size:11px;color:var(--muted)}\n.details{background:#eef1e8;border:1px solid #e0e5d8;padding:20px;border-radius:4px}\n.details h2{font:normal 23px/1.2 Georgia,\"Times New Roman\",serif;margin:0 0 18px}\ndl{margin:0}\n.detail-row{padding:10px 0;border-top:1px solid #d8dfd0}\ndt{font-size:11px;color:var(--muted)}\ndd{margin:3px 0 0;font-size:13px;font-weight:550}\n.detail-help{margin:8px 0 16px;font-size:12px;color:var(--muted);line-height:1.6}\n.recent{border-top:1px solid #d8dfd0;padding-top:15px}\n.recent p{margin:0;font-size:12px}\n.recent small{display:block;color:var(--muted);font-size:11px;margin-top:4px}\n.timestamp{margin:20px 0 0;font-size:11px;color:var(--muted)}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media(max-width:760px){\n.topbar-inner{padding:16px 20px}\n.context{display:none}\n.team{font-size:11px}\nmain{margin:26px auto;padding:0 20px}\n.intro{display:block;margin-bottom:20px}\nh1{font-size:36px;margin-bottom:6px}\n.eyebrow{font-size:9px;margin-bottom:6px}\n.subtitle{font-size:12px}\n.action-group{margin-top:17px;gap:12px}\n.primary{padding:9px 19px;font-size:13px}\n.hint{max-width:190px;font-size:11px}\n.alert{padding:12px;gap:10px;margin-bottom:20px}\n.alert p{font-size:12px;line-height:1.5}\n.layout{grid-template-columns:minmax(0,1fr);gap:20px}\n.filters{grid-template-columns:minmax(0,1fr) 132px;gap:10px;margin-bottom:14px}\nlabel{font-size:11px}\ninput,select{font-size:12px;height:39px;padding:8px}\n.search-wrap input{padding-left:29px}\n.search-wrap svg{left:9px;top:12px;width:14px;height:14px}\nth{padding:10px;font-size:10px}\nth:first-child{width:43%}\nth:nth-child(2){width:30%}\nth:last-child{width:27%}\ntd{padding:16px 10px}\n.item-name{font-size:13px;line-height:1.35}\n.code{font-size:9px;margin-top:5px;letter-spacing:0}\n.quantity{font-size:21px}\n.units{font-size:10px;margin-left:3px}\n.status{font-size:10px}\n.row-action{font-size:11px;padding:7px 9px}\n.details{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}\n.details .eyebrow{grid-column:1/-1}\n.details h2{font-size:21px;margin-bottom:12px;grid-column:1/-1}\n.detail-help{margin:0 0 12px;font-size:11px}\n.detail-row{padding:8px 0}\n.recent{grid-column:1/-1;padding-top:12px;margin-top:6px}\n.timestamp{margin-top:14px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand-group\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 23V7l6 8 5-11 5 11 6-8v16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"/></svg>\nMorrow\n</div>\n<span class=\"context\">FIELD OPERATIONS</span>\n</div>\n<div class=\"team\"><strong>North ridge</strong> · Research team</div>\n</div>\n</header>\n<main>\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Inventory / Shared field kit</p>\n<h1>Stock overview</h1>\n<p class=\"subtitle\">Supplies for the work beyond the station.</p>\n</div>\n<div class=\"action-group\">\n<button class=\"primary\" type=\"button\">Restock</button>\n<span class=\"hint\">Start with the two items below the field minimum.</span>\n</div>\n</div>\n\n<section class=\"alert\" aria-label=\"Low stock alert\">\n<span class=\"alert-icon\" aria-hidden=\"true\">!</span>\n<div><strong>Low stock</strong><p>Canvas tote and Trail bottle are below the 10-unit field minimum.</p></div>\n</section>\n\n<div class=\"layout\">\n<section class=\"inventory\" aria-label=\"Inventory items\">\n<form class=\"filters\" role=\"search\">\n<div>\n<label for=\"search\">Search inventory</label>\n<div class=\"search-wrap\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m12 12 5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>\n<input id=\"search\" type=\"search\" placeholder=\"Item or code\">\n</div>\n</div>\n<div>\n<label for=\"category\">Category</label>\n<select id=\"category\">\n<option>All categories</option>\n<option>Carry &amp; storage</option>\n<option>Stationery</option>\n<option>Hydration</option>\n</select>\n</div>\n</form>\n\n<div class=\"table-wrap\">\n<table>\n<caption class=\"sr-only\">Shared field kit inventory, quantities and stock status</caption>\n<thead><tr><th scope=\"col\">Item</th><th scope=\"col\">On hand</th><th scope=\"col\">Action</th></tr></thead>\n<tbody>\n<tr>\n<td><span class=\"item-name\">Canvas tote</span><span class=\"code\">MR-CT-014</span></td>\n<td><span class=\"quantity\">6<span class=\"units\">units</span></span><span class=\"status low\">Low stock</span></td>\n<td><button type=\"button\" class=\"row-action\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Field notebook</span><span class=\"code\">MR-FN-006</span></td>\n<td><span class=\"quantity\">25<span class=\"units\">units</span></span><span class=\"status healthy\">In stock</span></td>\n<td><button type=\"button\" class=\"row-action\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<td><span class=\"item-name\">Trail bottle</span><span class=\"code\">MR-TB-021</span></td>\n<td><span class=\"quantity\">7<span class=\"units\">units</span></span><span class=\"status low\">Low stock</span></td>\n<td><button type=\"button\" class=\"row-action\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n</div>\n<p class=\"table-note\">3 items · Counts include ready-to-use supplies at the station.</p>\n</section>\n\n<aside class=\"details\" aria-labelledby=\"kit-heading\">\n<p class=\"eyebrow\">Field reference</p>\n<h2 id=\"kit-heading\">Before you head out</h2>\n<dl>\n<div class=\"detail-row\"><dt>Minimum per item</dt><dd>10 units</dd></div>\n<div class=\"detail-row\"><dt>Next survey</dt><dd>18 Jun · North ridge</dd></div>\n</dl>\n<p class=\"detail-help\">Keep the minimum on hand so the next team can pack without delay.</p>\n<div class=\"recent\">\n<p><strong>+5 Field notebooks</strong></p>\n<small>Count updated by J. Chen · Today, 08:42</small>\n</div>\n</aside>\n</div>\n<p class=\"timestamp\">Last updated <time datetime=\"2025-06-17T08:42\">17 Jun 2025, 08:42</time> · Station inventory</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-inventory-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an inventory screen for Common. Include search, a category select and a table for Canvas tote, Field notebook and Trail bottle, quantities 8, 27, 2, stock status and Restock buttons. Include a Low stock alert, item codes and an update timestamp. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Stock overview\", \"Low stock\", \"Restock\", \"Canvas tote\", \"Field notebook\", \"Trail bottle\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stock overview · Common</title>\n<style>\n:root{color-scheme:light;--ink:#24362f;--muted:#67716a;--line:#dedfd6;--paper:#fffef9;--ground:#f3f2eb;--accent:#203d32;--amber:#875019}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select{border-radius:6px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9cae8e;outline-offset:3px}\n.site-header{background:var(--paper);border-bottom:1px solid var(--line)}\n.header-inner{max-width:1128px;margin:auto;min-height:78px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-size:25px;font-weight:750;letter-spacing:-1.1px}\n.brand span{color:#8b9778}\n.workspace{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}\n.team-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid #d3d8cb;border-radius:50%;color:var(--accent);font-size:11px;font-weight:700}\n.workspace strong{display:block;color:var(--ink);font-weight:600}\nmain{max-width:1128px;padding:38px 24px 28px;margin:auto}\n.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:25px}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 7px}\nh1{font-size:34px;line-height:1.2;letter-spacing:-1.1px;margin:0 0 8px;font-weight:650}\n.intro{margin:0;color:var(--muted)}\n.updated{text-align:right;font-size:12px;color:var(--muted);flex-shrink:0}\n.updated time{display:block;color:var(--ink);font-size:13px;margin-top:3px}\n.alert{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#eee8d9;border:1px solid #ded3bb;border-left:3px solid var(--amber);border-radius:7px;padding:17px 20px;margin-bottom:24px}\n.alert h2{font-size:14px;margin:0 0 3px;color:#734313}\n.alert p{margin:0;font-size:13px;color:#685c47}\n.stock-meter{flex:0 0 154px;margin:0}\n.stock-meter svg{display:block;width:154px;height:20px}\n.stock-meter figcaption{font-size:11px;color:#685c47;margin-top:4px}\n.inventory{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line)}\n.field label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\ninput,select{width:100%;min-height:42px;background:var(--paper);border:1px solid #c9cec4;color:var(--ink);padding:9px 12px}\ninput::placeholder{color:#7a8179;opacity:1}\nselect{padding-right:30px}\n.table-heading{padding:20px 24px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}\n.table-heading h2{margin:0;font-size:16px;font-weight:650}\n.table-heading p{font-size:12px;color:var(--muted);margin:0}\ntable{border-collapse:collapse;width:100%;text-align:left}\nthead{background:#f5f5ef;color:var(--muted)}\nthead th{font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;padding:11px 24px;border-block:1px solid var(--line)}\ntbody th,tbody td{padding:22px 24px;border-bottom:1px solid #e8e9e1;vertical-align:middle}\ntbody th{width:43%;font-weight:600}\n.item-name{display:block;font-size:15px;line-height:1.4}\n.item-detail{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:5px}\n.code{font-variant-numeric:tabular-nums;letter-spacing:.25px}\n.quantity{font-size:21px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}\n.quantity small{display:none}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;white-space:nowrap}\n.status::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#657f59}\n.status.low{color:var(--amber)}\n.status.low::before{background:#a76c27}\n.action{text-align:right}\n.restock{border:1px solid #bfc8bb;background:transparent;color:var(--accent);font-size:13px;font-weight:600;padding:9px 16px;min-height:38px;white-space:nowrap}\n.restock:hover{background:#eff1e9}\n.restock.priority{background:var(--accent);color:#fffef9;border-color:var(--accent)}\n.restock.priority:hover{background:#315344}\n.inventory-footer{padding:14px 24px;display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted)}\n.page-footer{margin-top:17px;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:baseline}\n.page-footer strong{color:#4c5b4f;font-weight:600}\n@media(max-width:600px){\n.header-inner{min-height:64px;padding:12px 16px}\n.brand{font-size:23px}\n.workspace{font-size:11px;gap:8px}\n.team-mark{width:30px;height:30px;font-size:10px}\nmain{padding:23px 16px}\n.page-heading{display:block;margin-bottom:18px}\n.eyebrow{font-size:10px;margin-bottom:5px}\nh1{font-size:28px;margin-bottom:6px}\n.intro{font-size:13px}\n.updated{font-size:11px;text-align:left;margin-top:12px}\n.updated time{display:inline;font-size:11px;margin-left:5px}\n.alert{padding:12px;margin-bottom:18px;gap:14px;align-items:flex-start}\n.alert h2{font-size:13px}\n.alert p{font-size:12px;line-height:1.45}\n.stock-meter{flex-basis:76px;padding-top:3px}\n.stock-meter svg{width:76px;height:14px}\n.stock-meter figcaption{font-size:10px;line-height:1.4}\n.filters{grid-template-columns:minmax(0,1fr) 132px;padding:15px 14px;gap:10px}\n.field label{font-size:11px;margin-bottom:5px}\ninput,select{font-size:12px;padding:9px;min-height:40px}\nselect{padding-right:20px}\n.table-heading{padding:15px 14px 12px;gap:8px}\n.table-heading h2{font-size:14px}\n.table-heading p{font-size:10px}\ntable,tbody{display:block}\nthead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) 38px 76px;column-gap:10px;padding:15px 14px;border-top:1px solid #e8e9e1;align-items:center}\ntbody th,tbody td{display:block;padding:0;border:0;width:auto}\ntbody th{grid-column:1;grid-row:1}\n.item-name{font-size:14px}\n.item-detail{font-size:10px;margin-top:3px;line-height:1.5}\n.quantity{grid-column:2;grid-row:1 / 3;font-size:20px;text-align:center}\n.quantity small{display:block;font-size:9px;font-weight:400;color:var(--muted);margin-top:4px;white-space:nowrap}\n.stock-cell{grid-column:1;grid-row:2;margin-top:6px}\n.status{font-size:10px;gap:5px}\n.status::before{width:5px;height:5px}\n.action{grid-column:3;grid-row:1 / 3}\n.restock{font-size:12px;padding:8px 10px;width:100%}\n.inventory-footer{padding:11px 14px;border-top:1px solid var(--line);font-size:10px;gap:10px}\n.page-footer{font-size:11px;line-height:1.5;margin-top:13px;display:block}\n.page-footer strong{margin-right:5px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">Common<span>.</span></div>\n<div class=\"workspace\">\n<span class=\"team-mark\" aria-hidden=\"true\">NR</span>\n<div><strong>North Ridge team</strong>Base camp A</div>\n</div>\n</div>\n</header>\n<main id=\"inventory\">\n<section class=\"page-heading\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Field operations / Inventory</p>\n<h1 id=\"page-title\">Stock overview</h1>\n<p class=\"intro\">Shared essentials for your next field visit.</p>\n</div>\n<div class=\"updated\">Last count updated<time datetime=\"2025-06-18T08:40\">18 Jun 2025, 08:40</time></div>\n</section>\n\n<aside class=\"alert\" aria-labelledby=\"alert-title\">\n<div>\n<h2 id=\"alert-title\">Low stock</h2>\n<p>Trail bottle is below the field minimum. Restock before the next survey.</p>\n</div>\n<figure class=\"stock-meter\">\n<svg viewBox=\"0 0 154 20\" role=\"img\" aria-label=\"Trail bottle: 2 available out of a minimum of 5\">\n<rect x=\"0\" y=\"2\" width=\"26\" height=\"16\" rx=\"2\" fill=\"#875019\"/>\n<rect x=\"32\" y=\"2\" width=\"26\" height=\"16\" rx=\"2\" fill=\"#875019\"/>\n<g fill=\"none\" stroke=\"#b9aa8e\">\n<rect x=\"64\" y=\"2\" width=\"26\" height=\"16\" rx=\"2\"/>\n<rect x=\"96\" y=\"2\" width=\"26\" height=\"16\" rx=\"2\"/>\n<rect x=\"128\" y=\"2\" width=\"25\" height=\"16\" rx=\"2\"/>\n</g>\n</svg>\n<figcaption>2 on hand / 5 minimum</figcaption>\n</figure>\n</aside>\n\n<section class=\"inventory\" aria-labelledby=\"supplies-title\">\n<form class=\"filters\" role=\"search\">\n<div class=\"field\">\n<label for=\"search\">Search inventory</label>\n<input id=\"search\" name=\"search\" type=\"search\" placeholder=\"Name or item code\">\n</div>\n<div class=\"field\">\n<label for=\"category\">Category</label>\n<select id=\"category\" name=\"category\">\n<option>All categories</option>\n<option>Carry</option>\n<option>Recording</option>\n<option>Hydration</option>\n</select>\n</div>\n</form>\n<div class=\"table-heading\">\n<h2 id=\"supplies-title\">Field supplies</h2>\n<p>3 items · 37 units on hand</p>\n</div>\n<table aria-labelledby=\"supplies-title\">\n<thead>\n<tr><th scope=\"col\">Item</th><th scope=\"col\">On hand</th><th scope=\"col\">Stock status</th><th scope=\"col\" class=\"action\">Action</th></tr>\n</thead>\n<tbody>\n<tr>\n<th scope=\"row\"><span class=\"item-name\">Canvas tote</span><span class=\"item-detail\"><span class=\"code\">CT-101</span> · Carry</span></th>\n<td class=\"quantity\">8<small>on hand</small></td>\n<td class=\"stock-cell\"><span class=\"status\">In stock</span></td>\n<td class=\"action\"><button type=\"button\" class=\"restock\" aria-label=\"Restock Canvas tote\">Restock</button></td>\n</tr>\n<tr>\n<th scope=\"row\"><span class=\"item-name\">Field notebook</span><span class=\"item-detail\"><span class=\"code\">FN-204</span> · Recording</span></th>\n<td class=\"quantity\">27<small>on hand</small></td>\n<td class=\"stock-cell\"><span class=\"status\">In stock</span></td>\n<td class=\"action\"><button type=\"button\" class=\"restock\" aria-label=\"Restock Field notebook\">Restock</button></td>\n</tr>\n<tr>\n<th scope=\"row\"><span class=\"item-name\">Trail bottle</span><span class=\"item-detail\"><span class=\"code\">TB-310</span> · Hydration</span></th>\n<td class=\"quantity\">2<small>on hand</small></td>\n<td class=\"stock-cell\"><span class=\"status low\">Low stock</span></td>\n<td class=\"action\"><button type=\"button\" class=\"restock priority\" aria-label=\"Restock Trail bottle\">Restock</button></td>\n</tr>\n</tbody>\n</table>\n<div class=\"inventory-footer\"><span>Storage: Base camp A · Supply shelf</span><span>Minimum: 5 per item</span></div>\n</section>\n<footer class=\"page-footer\"><strong>Before heading out</strong><span>Check supplies back in after each survey so the next crew can plan ahead.</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-0","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for Alder. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Maya Chen, response-time cues and an Assign button. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Support queue · Alder</title>\n<style>\n:root{--bg:#f3f0e9;--paper:#fffdf8;--ink:#25382f;--muted:#686b62;--line:#dedfd4;--soft:#eaf0e7;--urgent:#9b3f24}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a98745;outline-offset:3px}\n.topbar{border-bottom:1px solid var(--line);background:var(--paper)}\n.topbar-inner{max-width:1184px;margin:auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:750;letter-spacing:-1px}\n.mark{display:grid;place-items:center;width:31px;height:31px;background:var(--ink);color:var(--paper);border-radius:8px;font:italic 27px Georgia,serif}\n.shop{text-align:right;font-size:13px}\n.shop span{display:block;color:var(--muted);font-size:11px}\nmain{max-width:1184px;margin:0 auto;padding:30px 24px 40px}\n.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0 0 6px}\n.subtitle{margin:0;color:var(--muted)}\n.summary{display:flex;align-items:center;gap:14px;border-left:1px solid #cdd0c4;padding-left:22px}\n.summary strong{font-size:30px;font-weight:600;line-height:1}\n.summary p{margin:0;font-weight:600}\n.summary small{display:block;color:var(--muted);font-size:12px;font-weight:400}\n.workspace{display:grid;grid-template-columns:minmax(340px, .88fr) minmax(0,1.35fr);gap:20px;align-items:start}\n.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0}\n.preview{grid-column:2;grid-row:1}\n.queue{grid-column:1;grid-row:1}\n.next-action{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 24px;background:var(--soft);border-bottom:1px solid #d7dfd2}\n.eyebrow{text-transform:uppercase;letter-spacing:1.2px;font-size:10px;font-weight:750;margin:0 0 3px;color:var(--muted)}\n.next-action p:last-child{margin:0;font-size:15px;font-weight:600}\n.assign{border:0;border-radius:6px;background:var(--ink);color:white;font-weight:650;padding:10px 22px;flex-shrink:0}\n.ticket-heading{padding:24px 24px 20px;border-bottom:1px solid var(--line)}\n.subject-line{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:8px 0 12px}\nh2{margin:0;font-size:24px;line-height:1.25;letter-spacing:-.6px}\n.badge{font-size:11px;line-height:1.5;padding:3px 8px;border-radius:4px;font-weight:700;display:inline-block}\n.urgent{color:var(--urgent);background:#f7e8dd}\n.timing{margin:0;font-size:12px;color:var(--muted)}\n.timing strong{color:var(--urgent);font-weight:600}\n.message{padding:23px 24px}\n.sender{display:flex;align-items:center;gap:10px;margin-bottom:20px}\n.avatar{width:36px;height:36px;display:grid;place-items:center;background:#eae5d9;border-radius:50%;font-size:12px;font-weight:650;flex-shrink:0}\n.sender-info{min-width:0;flex:1}\n.sender-info strong{display:block;font-size:13px}\n.sender-info span{color:var(--muted);font-size:11px;overflow-wrap:anywhere}\ntime{font-size:11px;color:var(--muted);white-space:nowrap}\n.message-copy{font-size:15px;line-height:1.7}\n.message-copy p{margin:0 0 14px}\n.message-copy p:last-child{margin-bottom:0}\n.context{margin:0 24px 24px;padding:16px;background:#f5f3ed;border-radius:7px}\n.context dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}\ndt{font-size:11px;color:var(--muted);margin-bottom:3px}\ndd{margin:0;font-size:12px;font-weight:600;overflow-wrap:anywhere}\n.note{border-top:1px solid var(--line);margin:14px 0 0;padding-top:12px;color:var(--muted);font-size:12px}\n.note strong{color:var(--ink);font-weight:600}\n.queue-head{padding:18px 18px 16px;border-bottom:1px solid var(--line)}\n.queue-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}\n.queue-title h2{font-size:15px;letter-spacing:0}\n.queue-title span{font-size:11px;color:var(--muted)}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:10px}\n.field{min-width:0}\nlabel{display:block;font-size:11px;font-weight:600;margin-bottom:5px}\ninput,select{width:100%;min-width:0;height:38px;border:1px solid #c8cbbf;border-radius:5px;background:var(--paper);color:var(--ink);padding:8px 10px;font-size:12px}\ninput::placeholder{color:#777b70}\n.ticket-list{list-style:none;padding:0;margin:0}\n.ticket-list li+li{border-top:1px solid var(--line)}\n.ticket{display:block;text-align:left;width:100%;padding:15px 18px;border:0;background:transparent;color:var(--ink)}\n.ticket:hover{background:#f3f4ed}\n.ticket.selected{background:var(--soft);box-shadow:inset 3px 0 var(--ink)}\n.row-top,.row-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}\n.row-top{font-size:11px;color:var(--muted);margin-bottom:4px}\n.ticket-subject{display:block;font-size:14px;line-height:1.4;font-weight:650;margin-bottom:5px}\n.row-bottom{font-size:11px;color:var(--muted)}\n.ticket-detail{display:block;margin:2px 0 7px;font-size:11px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}\n.owner{display:flex;align-items:center;gap:5px}\n.dot{width:5px;height:5px;border-radius:50%;background:#74866c;display:inline-block}\n.unassigned{color:#6e6247}\n.queue-foot{border-top:1px solid var(--line);padding:11px 18px;font-size:11px;color:var(--muted)}\n@media(max-width:760px){\n.topbar-inner{padding:13px 16px}.shop span{display:none}.shop{font-size:11px}\nmain{padding:22px 16px 28px}\n.page-heading{display:block;margin-bottom:18px}h1{font-size:28px}.subtitle{font-size:12px}\n.summary{margin-top:17px;border-left:0;padding:0;gap:10px}\n.summary strong{font-size:23px}.summary p{font-size:12px}.summary small{display:inline;margin-left:8px;font-size:11px}\n.workspace{display:flex;flex-direction:column;gap:18px}.panel{width:100%}\n.next-action{padding:14px 16px}.next-action p:last-child{font-size:14px}\n.assign{padding:9px 20px}.ticket-heading{padding:17px 16px}h2{font-size:22px}\n.message{padding:18px 16px}.sender{margin-bottom:15px}.message-copy{font-size:14px;line-height:1.6}\n.context{margin:0 16px 16px;padding:13px}\n.queue-head{padding:16px}.ticket{padding:13px 16px}.summary small{white-space:nowrap}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\">a</span>Alder</div>\n<div class=\"shop\">Spoke &amp; Spanner<span>Independent bike shop</span></div>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<h1>Support queue</h1>\n<p class=\"subtitle\">Keep customers rolling. Start with the next reply.</p>\n</div>\n<div class=\"summary\" aria-label=\"Open tickets summary\">\n<strong>5</strong>\n<p>Open tickets<small>1 urgent · 2 unassigned</small></p>\n</div>\n</div>\n<div class=\"workspace\">\n<article class=\"panel preview\" aria-labelledby=\"preview-title\">\n<div class=\"next-action\">\n<div><p class=\"eyebrow\">Next action</p><p>Give this ticket an owner</p></div>\n<button class=\"assign\" type=\"button\">Assign</button>\n</div>\n<header class=\"ticket-heading\">\n<p class=\"eyebrow\">Ticket #1048 · Email · Unassigned</p>\n<div class=\"subject-line\"><h2 id=\"preview-title\">Payment question</h2><span class=\"badge urgent\">Urgent</span></div>\n<p class=\"timing\">Waiting 18 min <span aria-hidden=\"true\">·</span> <strong>First reply due in 12 min</strong></p>\n</header>\n<section class=\"message\" aria-label=\"Customer message\">\n<div class=\"sender\">\n<span class=\"avatar\" aria-hidden=\"true\">MC</span>\n<div class=\"sender-info\"><strong>Maya Chen</strong><span>maya.chen@example.com</span></div>\n<time datetime=\"2025-05-14T10:12\">10:12 am</time>\n</div>\n<div class=\"message-copy\">\n<p>Hi team,</p>\n<p>I’m picking up my commuter bike at noon. I paid a $40 deposit when I booked the tune-up, but the payment link is still asking for the full $129.</p>\n<p>Could you check that the deposit is applied before I pay? I’ll be on my lunch break, so I’m hoping to get everything sorted before I come in.</p>\n<p>Thanks!<br>Maya</p>\n</div>\n</section>\n<aside class=\"context\" aria-label=\"Shop context\">\n<dl>\n<div><dt>Related work order</dt><dd>#WO-1842 · City tune-up</dd></div>\n<div><dt>Customer pickup</dt><dd>Today, noon</dd></div>\n</dl>\n<p class=\"note\"><strong>Before replying:</strong> Check the deposit on the work order and confirm the remaining balance.</p>\n</aside>\n</article>\n<section class=\"panel queue\" aria-labelledby=\"queue-title\">\n<div class=\"queue-head\">\n<div class=\"queue-title\"><h2 id=\"queue-title\">All open tickets</h2><span>Oldest urgent first</span></div>\n<form class=\"filters\" role=\"search\">\n<div class=\"field\"><label for=\"ticket-search\">Search tickets</label><input id=\"ticket-search\" type=\"search\" placeholder=\"Name or subject\"></div>\n<div class=\"field\"><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>All assignees</option><option>Unassigned</option><option>Lena Ortiz</option><option>Theo Park</option></select></div>\n</form>\n</div>\n<ol class=\"ticket-list\">\n<li>\n<button type=\"button\" class=\"ticket selected\" aria-pressed=\"true\">\n<span class=\"row-top\"><span>Maya Chen</span><span>Waiting 18 min</span></span>\n<span class=\"ticket-subject\">Payment question</span>\n<span class=\"row-bottom\"><span class=\"unassigned\">Unassigned</span><span class=\"badge urgent\">Urgent</span></span>\n</button>\n</li>\n<li>\n<button type=\"button\" class=\"ticket\" aria-pressed=\"false\">\n<span class=\"row-top\"><span>Ben Carter</span><span>Waiting 24 min</span></span>\n<span class=\"ticket-subject\">Is my bike ready?</span>\n<span class=\"row-bottom\"><span class=\"owner\"><i class=\"dot\" aria-hidden=\"true\"></i>Lena Ortiz</span><span>#1047</span></span>\n</button>\n</li>\n<li>\n<button type=\"button\" class=\"ticket\" aria-pressed=\"false\">\n<span class=\"row-top\"><span>Elliot Brooks</span><span>Waiting 41 min</span></span>\n<span class=\"ticket-subject\">Can we move my service booking?</span>\n<span class=\"ticket-detail\">Longtail cargo bike safety check before the neighborhood school’s Saturday morning ride</span>\n<span class=\"row-bottom\"><span class=\"owner\"><i class=\"dot\" aria-hidden=\"true\"></i>Theo Park</span><span>#1046</span></span>\n</button>\n</li>\n<li>\n<button type=\"button\" class=\"ticket\" aria-pressed=\"false\">\n<span class=\"row-top\"><span>Sofia Rivera</span><span>Waiting 1 hr</span></span>\n<span class=\"ticket-subject\">Tubeless setup for my gravel bike</span>\n<span class=\"row-bottom\"><span class=\"unassigned\">Unassigned</span><span>#1045</span></span>\n</button>\n</li>\n<li>\n<button type=\"button\" class=\"ticket\" aria-pressed=\"false\">\n<span class=\"row-top\"><span>Jo Williams</span><span>Waiting 2 hr</span></span>\n<span class=\"ticket-subject\">Do you stock kids’ helmets?</span>\n<span class=\"row-bottom\"><span class=\"owner\"><i class=\"dot\" aria-hidden=\"true\"></i>Lena Ortiz</span><span>#1044</span></span>\n</button>\n</li>\n</ol>\n<div class=\"queue-foot\">5 of 5 open tickets · All times in shop local time</div>\n</section>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-1","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for Morrow. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Alex Okafor, response-time cues and an Assign button. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Support queue · Morrow</title>\n<style>\n:root{--ink:#202a3a;--muted:#687486;--line:#dfe5ec;--accent:#315dd6;--wash:#edf2ff}\n*{box-sizing:border-box}\nbody{margin:0;background:#f3f5f8;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,a,input,select{outline-offset:4px}\nbutton{cursor:pointer}\n.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px}\n.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:750;letter-spacing:-.7px}\n.logo{width:30px;height:30px;background:var(--accent);border-radius:8px;display:grid;place-items:center;color:#fff}\n.shop{display:flex;align-items:center;gap:12px;color:var(--muted)}\n.avatar{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#e9edf3;color:#465269;font-size:12px;font-weight:700}\nmain{max-width:1200px;margin:32px auto;padding:0 24px}\n.overview{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:28px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0 0 8px}\np{margin:0}\n.subtle{color:var(--muted)}\n.metrics{display:flex;gap:32px;margin:0}\n.metrics div{min-width:88px}\n.metrics dt{font-size:12px;color:var(--muted);margin-bottom:3px}\n.metrics dd{font-size:25px;line-height:1.25;font-weight:650;margin:0;letter-spacing:-.6px}\n.workspace{display:grid;grid-template-columns:minmax(320px, .9fr) minmax(0,1.5fr);gap:20px;align-items:start}\n.panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.filters{padding:18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) 138px;gap:12px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\ninput,select{width:100%;min-width:0;height:39px;border:1px solid #cbd3df;border-radius:6px;background:#fff;color:var(--ink);padding:0 10px}\ninput::placeholder{color:#7a8595}\n.list-heading{display:flex;justify-content:space-between;gap:8px;padding:12px 18px;background:#fafbfd;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}\n.list-heading strong{color:var(--ink);font-weight:600}\n.tickets{list-style:none;margin:0;padding:0}\n.tickets li+li{border-top:1px solid var(--line)}\n.ticket{display:block;text-decoration:none;color:inherit;width:100%;border:0;border-left:3px solid transparent;background:#fff;padding:17px 17px 16px;text-align:left}\n.ticket:hover{background:#f7f9fc}\n.ticket.selected{background:var(--wash);border-left-color:var(--accent)}\n.ticket-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}\n.ticket-title{font-size:14px;font-weight:650}\n.ticket-name{color:#526074;font-size:13px}\n.ticket-meta{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:11px;color:var(--muted)}\n.badge{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;font-weight:650;padding:3px 7px;border-radius:4px;background:var(--wash);color:var(--accent)}\n.badge.urgent{background:var(--accent);color:#fff}\n.wait{font-size:11px;white-space:nowrap;color:var(--muted)}\n.queue-footer{padding:12px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}\n.detail-head{padding:24px 26px 20px;border-bottom:1px solid var(--line)}\n.eyebrow{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}\nh2{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:0 0 14px}\n.response{font-size:12px;color:var(--accent);display:flex;align-items:center;gap:6px}\n.response svg{flex-shrink:0}\n.ownership{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}\n.assign-group{display:flex;align-items:center;gap:12px}\n.primary{background:var(--accent);color:white;border:1px solid var(--accent);border-radius:6px;padding:9px 18px;font-weight:600}\n.primary:hover{background:#254cba}\n.hint{font-size:11px;color:var(--muted);max-width:140px;line-height:1.45}\n.owner{font-size:12px;color:var(--muted)}\n.message{padding:22px 26px}\n.sender{display:flex;align-items:center;gap:10px;margin-bottom:17px}\n.sender-info{flex:1;min-width:0}\n.sender strong{font-size:13px}\n.sender small{display:block;color:var(--muted);font-size:11px}\n.sender time{align-self:flex-start;font-size:11px;color:var(--muted);padding-top:2px;white-space:nowrap}\n.message-copy{font-size:14px;line-height:1.7;color:#354257}\n.message-copy p+p{margin-top:12px}\n.job{margin:0 26px 22px;border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.job-title{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:#f7f9fb;font-size:12px}\n.job-title strong{font-weight:650}\n.status{font-size:10px;color:#526074;display:flex;align-items:center;gap:5px}\n.dot{height:5px;width:5px;border-radius:50%;background:#65758a}\ntable{width:100%;border-collapse:collapse;font-size:12px}\nth,td{text-align:left;vertical-align:top;padding:7px 14px}\nth{font-weight:400;color:var(--muted);width:84px}\ntr:first-child th,tr:first-child td{padding-top:12px}\ntr:last-child th,tr:last-child td{padding-bottom:12px}\n.activity{display:flex;gap:8px;align-items:center;padding:14px 26px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);background:#fafbfd}\n.activity strong{font-weight:500;color:#465269}\n@media(max-width:860px){\n.workspace{grid-template-columns:1fr}\n.overview{align-items:flex-start}\n.metrics{gap:20px}\n.ticket{padding:12px 17px}\n.ticket-meta{margin-top:3px}\n}\n@media(max-width:520px){\n.topbar{height:62px;padding:0 16px}\n.brand{font-size:20px}\n.shop{font-size:11px;gap:8px}\n.shop .avatar{width:29px;height:29px;font-size:10px}\nmain{margin:24px auto;padding:0 16px}\n.overview{display:block;margin-bottom:20px}\nh1{font-size:28px}\n.overview>div>p{font-size:13px}\n.metrics{margin-top:22px;justify-content:space-between;gap:12px}\n.metrics div{min-width:0}\n.metrics dd{font-size:23px}\n.metrics dt{font-size:11px}\n.workspace{gap:16px}\n.filters{padding:14px;gap:10px;grid-template-columns:minmax(0,1fr) 132px}\n.list-heading{padding:10px 16px}\n.ticket{padding:12px 14px}\n.detail-head{padding:20px}\nh2{font-size:24px}\n.message{padding:20px}\n.job{margin:0 20px 20px}\n.job-title{align-items:flex-start;flex-direction:column;gap:5px}\n.ownership{gap:10px}\n.assign-group{gap:9px}\n.hint{max-width:110px;font-size:10px}\n.primary{padding:9px 14px}\n.activity{padding:14px 20px;align-items:flex-start}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\"><span class=\"logo\" aria-hidden=\"true\"><svg width=\"20\" height=\"18\" viewBox=\"0 0 20 18\" fill=\"none\"><path d=\"M2 14V5l4 5 4-7 4 7 4-5v9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></span>Morrow</div>\n<div class=\"shop\"><span>Canal Street Cycles</span><span class=\"avatar\" aria-label=\"Mia Patel\">MP</span></div>\n</header>\n<main>\n<section class=\"overview\" aria-labelledby=\"queue-title\">\n<div><h1 id=\"queue-title\">Support queue</h1><p class=\"subtle\">A clear path from customer question to next ride.</p></div>\n<dl class=\"metrics\">\n<div><dt>Open tickets</dt><dd>5</dd></div>\n<div><dt>Unassigned</dt><dd>3</dd></div>\n<div><dt>Oldest wait</dt><dd>1h 42m</dd></div>\n</dl>\n</section>\n<div class=\"workspace\">\n<section class=\"panel\" aria-label=\"Open ticket list\">\n<form class=\"filters\" role=\"search\">\n<div><label for=\"search\">Search tickets</label><input id=\"search\" type=\"search\" placeholder=\"Name, subject or job\"></div>\n<div><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>All assignees</option><option>Unassigned</option><option>Mia Patel</option><option>Ben Harris</option></select></div>\n</form>\n<div class=\"list-heading\"><strong>All open · 5</strong><span>Newest first</span></div>\n<ul class=\"tickets\">\n<li><a class=\"ticket selected\" href=\"#ticket-preview\" aria-current=\"true\">\n<div class=\"ticket-top\"><span class=\"ticket-title\">Payment question</span><span class=\"badge urgent\">Urgent</span></div>\n<div class=\"ticket-name\">Alex Okafor</div>\n<div class=\"ticket-meta\"><span>Unassigned · Email</span><span>Waiting 12m</span></div>\n</a></li>\n<li><button class=\"ticket\" type=\"button\">\n<span class=\"ticket-top\"><span class=\"ticket-title\">Brake service availability</span><span class=\"wait\">28m</span></span>\n<span class=\"ticket-name\">Jamie Reed</span>\n<span class=\"ticket-meta\"><span>Unassigned · Website</span><span>Reply in 1h 32m</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\">\n<span class=\"ticket-top\"><span class=\"ticket-title\">Is my bike ready?</span><span class=\"wait\">46m</span></span>\n<span class=\"ticket-name\">Priya Shah</span>\n<span class=\"ticket-meta\"><span>Mia Patel · Email</span><span>Reply in 1h 14m</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\">\n<span class=\"ticket-top\"><span class=\"ticket-title\">Tubeless tyre options</span><span class=\"wait\">1h</span></span>\n<span class=\"ticket-name\">Morgan Lewis</span>\n<span class=\"ticket-meta\"><span>Ben Harris · Website</span><span>Reply in 1h</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\">\n<span class=\"ticket-top\"><span class=\"ticket-title\">Reschedule my tune-up</span><span class=\"wait\">1h 42m</span></span>\n<span class=\"ticket-name\">Sam Chen</span>\n<span class=\"ticket-meta\"><span>Unassigned · Email</span><span>Reply in 18m</span></span>\n</button></li>\n</ul>\n<div class=\"queue-footer\">Response targets use shop opening hours, 9am–6pm.</div>\n</section>\n<article class=\"panel\" id=\"ticket-preview\" aria-labelledby=\"ticket-title\">\n<header class=\"detail-head\">\n<div class=\"eyebrow\"><span>Ticket #1048</span><span aria-hidden=\"true\">/</span><span>Email</span><span class=\"badge\">Urgent</span></div>\n<h2 id=\"ticket-title\">Payment question</h2>\n<p class=\"response\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M8 4v4l2.5 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>First reply due in 18m <span class=\"subtle\">· Waiting 12m</span></p>\n<div class=\"ownership\"><span class=\"owner\">Unassigned</span><div class=\"assign-group\"><p class=\"hint\">Take ownership before replying.</p><button class=\"primary\" type=\"button\">Assign</button></div></div>\n</header>\n<section class=\"message\" aria-label=\"Customer message\">\n<div class=\"sender\"><span class=\"avatar\">AO</span><div class=\"sender-info\"><strong>Alex Okafor</strong><small>To Canal Street Cycles</small></div><time datetime=\"2024-05-14T10:36\">10:36am</time></div>\n<div class=\"message-copy\">\n<p>Hi team,</p>\n<p>I paid £85 for my Trek’s tune-up this morning, but my banking app is showing the payment twice. Could you check whether I’ve been charged twice?</p>\n<p>I’m planning to collect the bike after work, around 5:30. Just wanted to get this sorted before I pop in.</p>\n<p>Thanks,<br>Alex</p>\n</div>\n</section>\n<section class=\"job\" aria-labelledby=\"job-heading\">\n<div class=\"job-title\"><strong id=\"job-heading\">Workshop job · WS-2841</strong><span class=\"status\"><span class=\"dot\" aria-hidden=\"true\"></span>Ready for collection</span></div>\n<table aria-label=\"Related workshop job\">\n<tbody>\n<tr><th scope=\"row\">Bike</th><td>Trek FX 3 · Matte black</td></tr>\n<tr><th scope=\"row\">Work</th><td>Tune-up &amp; rear brake pads</td></tr>\n<tr><th scope=\"row\">Payment</th><td>£85.00 received · Card ending 4821</td></tr>\n</tbody>\n</table>\n</section>\n<footer class=\"activity\"><span aria-hidden=\"true\">↳</span><p><strong>Mia linked workshop job WS-2841</strong> · 10:42am</p></footer>\n</article>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-2","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for Fieldwork. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Samira Patel, response-time cues and an Assign button. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Support queue · Fieldwork</title>\n<style>\n:root{color-scheme:light;--ink:#292a26;--paper:#f8f7f3;--muted:#6d6e66;--line:#dcdcd3;--wash:#eeeee7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit;color:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}\n.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:750;letter-spacing:-.6px}\n.brand svg{width:28px;height:28px}\n.shop{text-align:right;font-weight:600}\n.shop small{display:block;color:var(--muted);font-size:12px;font-weight:400}\nmain{max-width:1240px;margin:auto;padding:35px 32px 40px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}\nh1,h2,h3,p{margin:0}\nh1{font-size:32px;letter-spacing:-1.1px;line-height:1.2;font-weight:650}\n.subtitle{margin-top:8px;color:var(--muted)}\n.queue-note{font-size:12px;color:var(--muted);white-space:nowrap}\n.workspace{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fffefa}\n.toolbar{display:grid;grid-template-columns:1fr 280px 185px;gap:20px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}\n.queue-title{display:flex;align-items:center;gap:10px}\nh2{font-size:17px;font-weight:650;letter-spacing:-.25px}\n.count{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:25px;border:1px solid var(--line);border-radius:5px;font-size:13px;font-weight:600}\n.queue-summary{font-size:12px;color:var(--muted);margin-top:4px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:5px}\ninput,select{width:100%;height:40px;border:1px solid #c9cac0;border-radius:5px;background:transparent;padding:0 11px;min-width:0}\ninput::placeholder{color:var(--muted);opacity:1}\n.search{position:relative}\n.search svg{position:absolute;left:11px;top:12px;width:16px;height:16px;color:var(--muted);pointer-events:none}\n.search input{padding-left:35px}\n.columns{display:grid;grid-template-columns:39% 61%}\n.ticket-list{border-right:1px solid var(--line);min-width:0}\n.list-heading{padding:11px 20px;font-size:11px;letter-spacing:.65px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}\nol{padding:0;margin:0;list-style:none}\nli+li{border-top:1px solid var(--line)}\n.ticket{display:block;text-align:left;width:100%;background:none;border:0;border-left:3px solid transparent;padding:17px 18px}\n.ticket[aria-current=\"true\"]{background:var(--wash);border-left-color:var(--ink)}\n.ticket-top,.ticket-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.customer{font-size:12px;color:var(--muted)}\n.age{font-size:11px;color:var(--muted);white-space:nowrap}\n.subject{display:block;font-size:15px;font-weight:650;line-height:1.4;margin:4px 0 9px;letter-spacing:-.15px}\n.ticket-bottom{font-size:11px;gap:5px;flex-wrap:wrap}\n.status{color:var(--muted)}\n.urgent{display:inline-block;background:var(--ink);color:var(--paper);font-size:10px;font-weight:650;letter-spacing:.2px;padding:2px 6px;border-radius:3px;margin-right:5px}\n.due{font-weight:550}\n.detail{padding:27px 30px 28px;min-width:0}\n.detail-top{display:flex;align-items:center;justify-content:space-between;gap:15px}\n.eyebrow{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}\n.assign{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:5px;font-weight:600;padding:9px 19px;min-height:40px}\n.detail h2{font-size:27px;letter-spacing:-.7px;margin:15px 0 8px;line-height:1.25}\n.detail-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--muted)}\n.detail-status .urgent{margin:0}\n.response{display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;margin:22px 0}\n.response svg{width:18px;height:18px;flex:none;margin-top:2px}\n.response strong{display:block;font-size:13px;font-weight:600}\n.response small{display:block;color:var(--muted);font-size:12px;margin-top:2px}\n.sender{display:flex;align-items:center;gap:10px;margin-bottom:18px}\n.avatar{width:35px;height:35px;border:1px solid #c9cac0;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}\n.sender-name{font-weight:600;font-size:13px}\n.sender-email{font-size:11px;color:var(--muted);overflow-wrap:anywhere}\n.sender time{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}\n.message{font-size:14px;line-height:1.7}\n.message p+p{margin-top:12px}\n.attachment{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:7px 10px;margin-top:18px;font-size:11px;max-width:100%;overflow-wrap:anywhere}\n.attachment svg{width:14px;height:14px;flex:none}\n.attachment span{color:var(--muted)}\n.next{margin-top:25px;background:var(--wash);border-radius:5px;padding:15px 17px}\n.next h3{font-size:12px;margin-bottom:4px}\n.next p{font-size:12px;color:var(--muted);line-height:1.6}\n.service{font-size:11px;color:var(--muted);margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}\n@media(min-width:1000px){.ticket{min-height:111px}}\n@media(max-width:800px){\n.toolbar{grid-template-columns:1fr 1fr;gap:15px}\n.queue-overview{grid-column:1/-1}\n.columns{grid-template-columns:43% 57%}\n.detail{padding:23px 20px}\n.ticket{padding:15px 12px}\n.sender{flex-wrap:wrap}.sender time{margin-left:0}\n}\n@media(max-width:600px){\n.topbar{height:64px;padding:0 18px;gap:12px}\n.brand{font-size:18px}.brand svg{width:25px;height:25px}\n.shop{font-size:12px}.shop small{font-size:10px}\nmain{padding:25px 16px}\n.page-heading{display:block;margin-bottom:20px}\nh1{font-size:29px}.subtitle{font-size:13px}\n.queue-note{margin-top:12px;font-size:11px}\n.toolbar{padding:16px;gap:13px}\n.queue-overview{display:flex;align-items:center;justify-content:space-between;gap:10px}\n.queue-summary{margin:0;font-size:11px}\nh2{font-size:16px}\n.columns{display:block}\n.ticket-list{border-right:0;border-bottom:1px solid var(--line)}\n.list-heading{padding:8px 16px;font-size:10px}\n.ticket{padding:11px 14px}\n.subject{font-size:14px;margin:2px 0 5px}\n.customer{font-size:11px}\n.detail{padding:22px 18px}\n.detail h2{font-size:25px}\n.sender time{margin-left:auto}\n.response{margin:18px 0}\n.message{font-size:13px}\n.next{margin-top:20px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" aria-hidden=\"true\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"currentColor\"/><path d=\"M8 20V8h13M8 13h10M13 20V8\" fill=\"none\" stroke=\"#f8f7f3\" stroke-width=\"2\"/></svg>\nFieldwork\n</div>\n<div class=\"shop\">Milepost Cycles<small>Independent bike shop</small></div>\n</header>\n<main>\n<header class=\"page-heading\">\n<div><h1>Support queue</h1><p class=\"subtitle\">A clear path from customer question to next ride.</p></div>\n<p class=\"queue-note\">Today, 14 May · <time datetime=\"09:45\">9:45 AM</time></p>\n</header>\n<section class=\"workspace\" aria-labelledby=\"open-tickets\">\n<div class=\"toolbar\">\n<div class=\"queue-overview\">\n<div class=\"queue-title\"><h2 id=\"open-tickets\">Open tickets</h2><span class=\"count\">5</span></div>\n<p class=\"queue-summary\">1 urgent · 2 unassigned</p>\n</div>\n<div>\n<label for=\"search\">Search tickets</label>\n<div class=\"search\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\"/><path d=\"m13 13 4 4\"/></svg>\n<input id=\"search\" type=\"search\" placeholder=\"Name or subject\">\n</div>\n</div>\n<div><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>Anyone</option><option>Unassigned</option><option>Jules</option><option>Maya</option></select></div>\n</div>\n<div class=\"columns\">\n<section class=\"ticket-list\" aria-label=\"Open ticket list\">\n<div class=\"list-heading\">Priority first</div>\n<ol>\n<li><button class=\"ticket\" type=\"button\" aria-current=\"true\">\n<span class=\"ticket-top\"><span class=\"customer\">Samira Patel</span><span class=\"age\">18m ago</span></span>\n<span class=\"subject\">Payment question</span>\n<span class=\"ticket-bottom\"><span><span class=\"urgent\">Urgent</span><span class=\"due\">Reply in 15m</span></span><span class=\"status\">New · Unassigned</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\">\n<span class=\"ticket-top\"><span class=\"customer\">Owen Brooks</span><span class=\"age\">24m ago</span></span>\n<span class=\"subject\">Brake rub after service</span>\n<span class=\"ticket-bottom\"><span class=\"due\">Reply in 1h</span><span class=\"status\">In progress · Jules</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\">\n<span class=\"ticket-top\"><span class=\"customer\">Leo Martinez</span><span class=\"age\">43m ago</span></span>\n<span class=\"subject\">Saturday pickup time</span>\n<span class=\"ticket-bottom\"><span class=\"due\">Reply in 2h</span><span class=\"status\">New · Unassigned</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\">\n<span class=\"ticket-top\"><span class=\"customer\">Erin Chen</span><span class=\"age\">1h ago</span></span>\n<span class=\"subject\">Tubeless setup advice</span>\n<span class=\"ticket-bottom\"><span class=\"due\">Reply in 3h</span><span class=\"status\">In progress · Maya</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\">\n<span class=\"ticket-top\"><span class=\"customer\">Nora Wilson</span><span class=\"age\">2h ago</span></span>\n<span class=\"subject\">Special-order tire arrival</span>\n<span class=\"ticket-bottom\"><span class=\"due\">Reply in 4h</span><span class=\"status\">In progress · Jules</span></span>\n</button></li>\n</ol>\n</section>\n<article class=\"detail\" aria-labelledby=\"ticket-title\">\n<div class=\"detail-top\"><p class=\"eyebrow\">Ticket #1048 · Email</p><button class=\"assign\" type=\"button\">Assign</button></div>\n<h2 id=\"ticket-title\">Payment question</h2>\n<div class=\"detail-status\"><span class=\"urgent\">Urgent</span><span>Awaiting first reply · Unassigned</span></div>\n<div class=\"response\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"7.5\"/><path d=\"M10 5v5l3 2\"/></svg>\n<div><strong>First reply due in 15 min</strong><small>Respond by 10:00 AM today</small></div>\n</div>\n<div class=\"sender\">\n<div class=\"avatar\" aria-hidden=\"true\">SP</div>\n<div><p class=\"sender-name\">Samira Patel</p><p class=\"sender-email\">samira.patel@example.com</p></div>\n<time datetime=\"09:27\">9:27 AM</time>\n</div>\n<div class=\"message\">\n<p>Hi Milepost team,</p>\n<p>I picked up my commuter bike after its tune-up yesterday. The gears feel great, thank you!</p>\n<p>I’ve just checked my banking app and can see two £85 payments to the shop. One says pending and the other has gone through. Could you check whether I’ve been charged twice?</p>\n<p>I’ve attached a screenshot. I’m keeping an eye on my budget this week, so I’d really appreciate a quick update.</p>\n<p>Thanks,<br>Samira</p>\n</div>\n<div class=\"attachment\">\n<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\"><path d=\"m6 8 4-4a2 2 0 0 1 3 3l-6 6a3 3 0 0 1-4-4l6-6M5 10l5-5\"/></svg>\nbank-transactions.png <span>· 182 KB</span>\n</div>\n<div class=\"next\"><h3>Next step · Assign an owner</h3><p>Check the card terminal receipt for a duplicate charge or pending authorization before replying to Samira.</p></div>\n<p class=\"service\">Related job WO-2716 · Commuter tune-up · £85.00 · Collected yesterday</p>\n</article>\n</div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-5","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for North. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Jules Martin, response-time cues and an Assign button. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Support queue · North</title>\n<style>\n:root{--bg:#f5f3ee;--paper:#fffefa;--ink:#25372e;--muted:#6b7068;--line:#dedfd5;--soft:#ecefe6;--red:#994331;--redbg:#f7e9e2}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit}\nbutton,a,input,select{outline-offset:4px}\nbutton{cursor:pointer}\nheader.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:var(--paper)}\n.brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:750;letter-spacing:-1px}\n.mark{width:29px;height:29px;background:var(--ink);color:var(--paper);display:grid;place-items:center;border-radius:7px;font-size:20px;letter-spacing:0}\n.workspace{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}\n.avatar{border-radius:50%;background:#e4e7da;width:32px;height:32px;display:grid;place-items:center;color:var(--ink);font-size:11px;font-weight:700}\nmain{max-width:1200px;padding:30px 24px 36px;margin:auto}\n.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:20px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0 0 7px}\np{margin:0}\n.subtle{color:var(--muted)}\n.updated{font-size:12px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:7px}\n.dot{width:6px;height:6px;border-radius:50%;background:#78896d;display:inline-block;flex-shrink:0}\n.summary{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:17px 0;margin-bottom:23px}\n.metric{padding:0 24px;border-right:1px solid var(--line)}\n.metric:last-child{border:0}\n.metric dt{font-size:12px;color:var(--muted);margin-bottom:3px}\n.metric dd{margin:0;font-size:27px;line-height:1.2;font-weight:650;letter-spacing:-.7px}\n.metric dd span{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:9px}\n.filters{display:flex;gap:16px;align-items:end;margin-bottom:20px}\n.field{display:flex;flex-direction:column;gap:6px;min-width:0}\n.field label{font-size:12px;font-weight:600}\n.search{flex:1}\n.searchbox{position:relative}\n.searchbox svg{position:absolute;left:13px;top:13px;color:var(--muted)}\ninput,select{border:1px solid #cdd1c5;background:var(--paper);height:42px;border-radius:6px;color:var(--ink);width:100%}\ninput{padding:0 12px 0 39px}\ninput::placeholder{color:#81847c}\nselect{padding:0 36px 0 12px;min-width:205px}\n.queue{display:grid;grid-template-columns:minmax(310px,39%) minmax(0,1fr);border:1px solid #d6d9cd;border-radius:10px;overflow:hidden;background:var(--paper)}\n.ticket-list{border-right:1px solid var(--line)}\n.list-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}\nh2{font-size:14px;margin:0;font-weight:650}\n.count{background:var(--soft);border-radius:5px;padding:1px 7px;font-size:12px}\nul{list-style:none;padding:0;margin:0}\n.ticket{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:16px 20px;color:var(--ink);display:block;min-height:92px}\n.ticket:hover{background:#f4f5ee}\n.ticket.selected{background:#edf0e6;box-shadow:inset 3px 0 var(--ink)}\n.ticket-top,.ticket-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.ticket-title{font-weight:650;font-size:14px}\n.ticket-bottom{margin-top:9px;font-size:12px;color:var(--muted)}\n.badge{display:inline-block;font-size:10px;font-weight:700;border-radius:4px;padding:2px 6px;line-height:1.5;white-space:nowrap;background:var(--redbg);color:var(--red)}\n.due{color:var(--red);font-weight:600}\n.list-footer{padding:13px 20px;font-size:11px;color:var(--muted)}\n.preview{min-width:0;display:flex;flex-direction:column}\n.preview-head{padding:22px 26px 19px}\n.eyebrow{font-size:11px;color:var(--muted);display:flex;gap:9px;align-items:center;margin-bottom:10px}\n.preview h2{font-size:24px;line-height:1.25;letter-spacing:-.5px;margin-bottom:5px}\n.assignment{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 26px;background:#f8f8f2;border-block:1px solid var(--line)}\n.assign-copy strong{font-size:12px;font-weight:650;display:block;margin-bottom:2px}\n.assign-copy p{font-size:12px;color:var(--muted)}\n.primary{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:white;border:1px solid var(--ink);border-radius:6px;padding:10px 16px;font-weight:600;flex-shrink:0}\n.primary:hover{background:#344c3d}\n.response{margin:18px 26px 0;display:flex;gap:10px;align-items:center;font-size:12px;color:var(--red)}\n.response svg{flex-shrink:0}\n.response small{display:block;color:var(--muted);font-size:11px;margin-top:1px}\n.message{padding:23px 26px 21px}\n.sender{display:flex;gap:10px;align-items:center;margin-bottom:15px}\n.sender .avatar{width:35px;height:35px;background:#eee7da}\n.sender-name{font-size:13px;font-weight:650}\n.sender-meta{font-size:11px;color:var(--muted)}\n.message-body{font-size:14px;line-height:1.65;color:#454b42}\n.message-body p+p{margin-top:12px}\n.member{display:flex;flex-wrap:wrap;gap:5px 15px;border-top:1px solid var(--line);padding-top:13px;margin-top:18px;font-size:11px;color:var(--muted)}\n.member strong{color:var(--ink);font-weight:500}\n.activity{margin-top:auto;padding:13px 26px;background:#f9f8f3;border-top:1px solid var(--line);color:var(--muted);font-size:11px}\n@media(max-width:650px){\nheader.topbar{height:60px;padding:0 18px}.brand{font-size:23px}.workspace{gap:10px;font-size:11px}.workspace .workspace-label{max-width:110px;text-align:right;line-height:1.3}\nmain{padding:23px 16px}.heading{display:block;margin-bottom:18px}h1{font-size:27px}.heading>div>p{font-size:13px}.updated{margin-top:10px;font-size:11px}\n.summary{padding:14px 0;margin:0 0 18px}.metric{padding:0 12px}.metric dt{font-size:11px;line-height:1.3;min-height:28px}.metric dd{font-size:25px}.metric dd span{display:none}\n.filters{gap:10px;margin-bottom:16px;flex-wrap:wrap}.search{flex-basis:100%}.assignee{width:100%}select{min-width:0}\n.queue{grid-template-columns:minmax(0,1fr)}.ticket-list{border-right:0;border-bottom:1px solid #cdd1c5}.list-heading{padding:13px 16px}\n.ticket{padding:12px 16px;min-height:77px}.ticket-bottom{margin-top:6px}.ticket-title{font-size:13px}.ticket-bottom{font-size:11px}.list-footer{padding:10px 16px}\n.preview-head{padding:21px 18px 17px}.preview h2{font-size:23px}.assignment{padding:14px 18px;gap:12px}.assign-copy p{max-width:200px;line-height:1.4}.primary{padding:10px 13px}\n.response{margin:17px 18px 0}.message{padding:20px 18px}.activity{padding:12px 18px}.message-body{font-size:13px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\">n</span>North</div>\n<div class=\"workspace\"><span class=\"workspace-label\">Maple Street Co-op</span><span class=\"avatar\" aria-label=\"Alex Morgan\">AM</span></div>\n</header>\n<main>\n<div class=\"heading\">\n<div><h1>Support queue</h1><p class=\"subtle\">A little care for every member, order and weekly share.</p></div>\n<p class=\"updated\"><span class=\"dot\"></span>Queue updated 2 min ago</p>\n</div>\n<dl class=\"summary\" aria-label=\"Queue summary\">\n<div class=\"metric\"><dt>Open tickets</dt><dd>12 <span>across the co-op</span></dd></div>\n<div class=\"metric\"><dt>Unassigned</dt><dd>5 <span>ready for a teammate</span></dd></div>\n<div class=\"metric\"><dt>Due within an hour</dt><dd>2 <span>need a first reply</span></dd></div>\n</dl>\n<div class=\"filters\" role=\"search\" aria-label=\"Search and filter tickets\">\n<div class=\"field search\"><label for=\"search\">Search tickets</label><div class=\"searchbox\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 5 5\"/></svg><input id=\"search\" type=\"search\" placeholder=\"Search by member, subject or ticket number\"></div></div>\n<div class=\"field assignee\"><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>All assignees</option>Unassigned</option>Alex Morgan (you)</option>Sam Rivera</option>Robin Lee</option></select></div>\n</div>\n<section class=\"queue\" aria-label=\"Tickets and selected preview\">\n<section class=\"ticket-list\" aria-labelledby=\"list-title\">\n<div class=\"list-heading\"><h2 id=\"list-title\">Awaiting a reply</h2><span class=\"count\">5</span></div>\n<ul>\n<li><button class=\"ticket selected\" type=\"button\" aria-pressed=\"true\"><span class=\"ticket-top\"><span class=\"ticket-title\">Payment question</span><span class=\"badge\">Urgent</span></span><span class=\"ticket-bottom\"><span>Jules Martin · 27m ago</span><span class=\"due\">18m to reply</span></span></button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\"><span class=\"ticket-top\"><span class=\"ticket-title\">Missing carrots in my share</span></span><span class=\"ticket-bottom\"><span>Anika Rao · 18m ago</span><span>42m to reply</span></span></button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\"><span class=\"ticket-top\"><span class=\"ticket-title\">Changing my pickup day</span></span><span class=\"ticket-bottom\"><span>Ben Walker · 15m ago</span><span>1h 20m to reply</span></span></button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\"><span class=\"ticket-top\"><span class=\"ticket-title\">Household membership</span></span><span class=\"ticket-bottom\"><span>Lila Chen · 9m ago</span><span>2h to reply</span></span></button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\"><span class=\"ticket-top\"><span class=\"ticket-title\">Store credit balance</span></span><span class=\"ticket-bottom\"><span>Theo Brooks · 4m ago</span><span>3h to reply</span></span></button></li>\n</ul>\n<p class=\"list-footer\">5 awaiting a reply · 7 more tickets in progress</p>\n</section>\n<article class=\"preview\" aria-labelledby=\"preview-title\">\n<div class=\"preview-head\">\n<div class=\"eyebrow\"><span>#1048</span><span> / </span><span>Payments</span><span class=\"badge\">Urgent</span></div>\n<h2 id=\"preview-title\">Payment question</h2>\n<p class=\"subtle\">Weekly produce share · Email</p>\n</div>\n<div class=\"assignment\">\n<div class=\"assign-copy\"><strong>Unassigned</strong><p>Assign to yourself to take care of Jules.</p></div>\n<button class=\"primary\" type=\"button\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"7\" r=\"3\"/><path d=\"M3 21v-3a6 6 0 0 1 12 0v3m4-12v8m-4-4h8\"/></svg>Assign</button>\n</div>\n<div class=\"response\">\n<svg width=\"19\" height=\"19\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 6v6l4 2\"/></svg>\n<div><strong>First reply due in 18 min</strong><small>Due at 10:30 AM · 45-minute urgent response target</small></div>\n</div>\n<div class=\"message\">\n<div class=\"sender\"><span class=\"avatar\" aria-hidden=\"true\">JM</span><div><p class=\"sender-name\">Jules Martin</p><p class=\"sender-meta\">jules.martin@example.com · Today, 9:45 AM</p></div></div>\n<div class=\"message-body\">\n<p>Hi North team,</p>\n<p>I picked up my produce share yesterday and noticed two charges of $38.50 on my bank statement. I only collected one box, so I’m wondering if my payment went through twice.</p>\n<p>Could you check before my next share is charged? We’re keeping a close eye on our grocery budget this month. Happy to send the receipt if that helps.</p>\n<p>Thanks for looking into it,<br>Jules</p>\n</div>\n<div class=\"member\"><span><strong>Member since 2022</strong></span><span>Weekly produce share</span><span>Friday pickup</span></div>\n</div>\n<p class=\"activity\">9:48 AM · Sam moved this ticket from General to Payments.</p>\n</article>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-7","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for Morrow. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Kai Nguyen, response-time cues and an Assign button. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Support queue · Morrow</title>\n<style>\n:root{--ink:#243f35;--muted:#63746b;--line:#d7dfd7;--paper:#fcfdf9;--wash:#f1f4ed;--selected:#e8eee3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--wash);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit;color:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #819780;outline-offset:3px}\nheader.site{background:var(--paper);border-bottom:1px solid var(--line)}\n.topbar{max-width:1200px;margin:auto;min-height:72px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:22px}\n.wordmark{font-size:25px;font-weight:750;letter-spacing:-1.2px}\n.coop{border-left:1px solid var(--line);padding-left:22px;font-size:13px}\n.subtle{color:var(--muted)}\n.hours{font-size:12px;color:var(--muted)}\nmain{max-width:1200px;margin:auto;padding:30px 28px 40px}\n.heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}\n.eyebrow{font-size:11px;letter-spacing:.11em;font-weight:700;text-transform:uppercase;color:var(--muted);margin:0 0 5px}\nh1{font-size:32px;line-height:1.15;letter-spacing:-1px;margin:0}\n.date{font-size:12px;text-align:right;color:var(--muted);margin:0}\n.summary{display:flex;align-items:center;gap:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin-bottom:22px}\n.metric{display:flex;align-items:baseline;gap:9px}\n.metric strong{font-size:25px;font-weight:650;letter-spacing:-.7px}\n.metric span{font-size:13px}\n.metric:first-child{padding-right:30px;border-right:1px solid var(--line)}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:16px;margin-bottom:20px}\nlabel{display:block;font-size:12px;font-weight:650;margin-bottom:6px}\ninput,select{width:100%;height:42px;background:var(--paper);border:1px solid #b9c7bb;border-radius:5px;padding:8px 12px;min-width:0}\ninput::placeholder{color:var(--muted)}\n.board{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden}\n.queue{border-right:1px solid var(--line);min-width:0}\n.queue-heading{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}\nh2{font-size:14px;margin:0;font-weight:650}\n.count{font-size:12px;color:var(--muted)}\n.tickets{margin:0;padding:0;list-style:none}\n.tickets li+li{border-top:1px solid var(--line)}\n.ticket{display:block;width:100%;border:0;border-left:3px solid transparent;background:transparent;text-align:left;padding:17px 17px 17px 16px}\n.ticket:hover{background:var(--wash)}\n.ticket[aria-pressed=\"true\"]{background:var(--selected);border-left-color:var(--ink)}\n.ticket-title{display:block;font-size:15px;font-weight:650;line-height:1.35;margin-bottom:5px}\n.customer{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-bottom:10px}\n.ticket-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 10px;font-size:11px}\n.due{font-weight:650}\n.pill{display:inline-block;border-radius:4px;background:var(--ink);color:var(--paper);font-size:10px;font-weight:650;padding:2px 6px;margin-right:6px;vertical-align:1px}\n.preview{padding:23px 26px;min-width:0}\n.preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px}\n.reference{font-size:12px;color:var(--muted)}\n.assign{border:1px solid var(--ink);border-radius:5px;background:var(--ink);color:var(--paper);padding:8px 17px;font-weight:650;font-size:13px;white-space:nowrap}\n.assign:hover{background:#385346}\n.preview h2{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:0 0 10px}\n.ticket-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;margin-bottom:21px}\n.ticket-status .pill{margin:0}\n.response{border-bottom:1px solid var(--line);padding-bottom:18px;font-size:12px}\n.response strong{font-weight:650}\n.response span{color:var(--muted)}\n.sender{display:flex;align-items:center;gap:10px;margin-top:20px}\n.avatar{width:34px;height:34px;flex-shrink:0;background:var(--selected);border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}\n.sender-name{font-weight:650;font-size:13px}\n.sender-note{font-size:11px;color:var(--muted)}\ntime{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}\n.message{font-size:14px;line-height:1.65;margin:17px 0 21px}\n.message p{margin:0 0 12px}\n.message p:last-child{margin:0}\n.order{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;display:flex;justify-content:space-between;gap:12px;font-size:12px}\n.order strong{display:block;font-weight:650}\n.order .amount{text-align:right}\n.guide{display:flex;align-items:center;gap:14px;margin:20px 0 0;padding:13px;background:var(--wash);border-radius:5px}\n.guide svg{width:64px;height:52px;flex-shrink:0}\n.guide figcaption{font-size:12px;line-height:1.5;color:var(--muted)}\n.guide strong{display:block;color:var(--ink);margin-bottom:3px;font-weight:650}\n.queue-note{border-top:1px solid var(--line);margin:0;padding:14px 20px;font-size:11px;color:var(--muted)}\n@media(max-width:650px){\n.topbar{padding:13px 18px;min-height:62px}.brand{gap:13px}.wordmark{font-size:23px}.coop{padding-left:13px;font-size:11px;max-width:150px}.hours{display:none}\nmain{padding:23px 16px 26px}.heading{margin-bottom:19px;align-items:start}h1{font-size:28px}.date{font-size:10px;padding-top:3px;max-width:78px}.eyebrow{font-size:10px}\n.summary{gap:15px;padding:13px 0;margin-bottom:18px;justify-content:space-between}.metric{display:block}.metric strong{font-size:23px;display:block;line-height:1.2}.metric span{font-size:11px}.metric:first-child{padding-right:19px}\n.filters{grid-template-columns:minmax(0,1fr) 135px;gap:10px;margin-bottom:17px}input,select{padding:8px;font-size:12px}label{font-size:11px}\n.board{grid-template-columns:1fr}.queue{border-right:0}.queue-heading{padding:12px 14px}.ticket{padding:12px 12px 12px 11px}.ticket-title{font-size:14px;margin-bottom:3px}.customer{font-size:11px;margin-bottom:6px}.ticket-meta{font-size:10px}.queue-note{padding:10px 14px}\n.preview{padding:20px 17px;border-top:1px solid var(--line)}.preview h2{font-size:24px}.preview-top{margin-bottom:16px}.reference{font-size:11px}.guide{gap:10px;padding:11px}.message{font-size:13px}\n}\n</style>\n</head>\n<body>\n<header class=\"site\">\n<div class=\"topbar\">\n<div class=\"brand\"><span class=\"wordmark\">morrow</span><span class=\"coop\">Cedar Street Food Co-op</span></div>\n<span class=\"hours\">Member support · 8am–6pm</span>\n</div>\n</header>\n<main>\n<div class=\"heading\">\n<div><p class=\"eyebrow\">Member services</p><h1>Support queue</h1></div>\n<p class=\"date\">Wednesday, May 14<br>9:34am local time</p>\n</div>\n<section class=\"summary\" aria-label=\"Queue summary\">\n<div class=\"metric\"><strong>5</strong><span>Open tickets</span></div>\n<div class=\"metric\"><strong>2</strong><span>Unassigned</span></div>\n<div class=\"metric\"><strong>8m</strong><span>Next reply due</span></div>\n</section>\n<form class=\"filters\" role=\"search\">\n<div><label for=\"search\">Search tickets</label><input id=\"search\" type=\"search\" placeholder=\"Name, topic or ticket number\"></div>\n<div><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>All assignees</option><option>Unassigned</option><option>Mina Patel</option><option>Jordan Ellis</option></select></div>\n</form>\n<div class=\"board\">\n<section class=\"queue\" aria-labelledby=\"queue-title\">\n<div class=\"queue-heading\"><h2 id=\"queue-title\">All open tickets</h2><span class=\"count\">5 tickets</span></div>\n<ol class=\"tickets\">\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"true\" aria-controls=\"ticket-preview\">\n<span class=\"ticket-title\">Payment question</span>\n<span class=\"customer\">Kai Nguyen · Waiting 22m</span>\n<span class=\"ticket-meta\"><span><span class=\"pill\">Urgent</span><span class=\"due\">Reply in 8m</span></span><span class=\"subtle\">Unassigned</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Pickup window for Saturday</span>\n<span class=\"customer\">Sofia Bennett-Ramírez · Waiting 46m</span>\n<span class=\"ticket-meta\"><span class=\"due\">Reply in 14m</span><span class=\"subtle\">Mina Patel</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Membership share installment plan</span>\n<span class=\"customer\">Eastbank Neighborhood Community Kitchen · Waiting 1h</span>\n<span class=\"ticket-meta\"><span>Reply in 2h</span><span class=\"subtle\">Jordan Ellis</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Missing rainbow chard in our box</span>\n<span class=\"customer\">Eleanor &amp; Thomas Whitfield · Waiting 18m</span>\n<span class=\"ticket-meta\"><span>Reply in 42m</span><span class=\"subtle\">Mina Patel</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Update household pickup contact</span>\n<span class=\"customer\">Jules Park · Waiting 7m</span>\n<span class=\"ticket-meta\"><span>Reply in 53m</span><span class=\"subtle\">Unassigned</span></span>\n</button></li>\n</ol>\n<p class=\"queue-note\">Sorted by next reply due · Urgent replies targeted within 30 minutes.</p>\n</section>\n<article class=\"preview\" id=\"ticket-preview\" aria-labelledby=\"preview-title\">\n<div class=\"preview-top\"><span class=\"reference\">#1048 · Orders &amp; payments</span><button class=\"assign\" type=\"button\">Assign</button></div>\n<h2 id=\"preview-title\">Payment question</h2>\n<div class=\"ticket-status\"><span class=\"pill\">Urgent</span><span>Open</span><span class=\"subtle\">·</span><span class=\"subtle\">Unassigned</span></div>\n<div class=\"response\"><strong>First reply due in 8m</strong><span> · By 9:42am</span></div>\n<div class=\"sender\">\n<span class=\"avatar\" aria-hidden=\"true\">KN</span>\n<div><div class=\"sender-name\">Kai Nguyen</div><div class=\"sender-note\">Co-op member since 2022 · Email</div></div>\n<time datetime=\"2025-05-14T09:12\">9:12am</time>\n</div>\n<div class=\"message\">\n<p>Hi Morrow team,</p>\n<p>I picked up our weekly produce box this morning, but my bank is showing two payments of $42.60. One says “pending” and the other looks complete.</p>\n<p>Could you check whether I’ve been charged twice? We’re keeping a close eye on our grocery budget this week, so I’d really appreciate knowing when the extra amount will be available again.</p>\n<p>Thanks for your help,<br>Kai</p>\n</div>\n<div class=\"order\" aria-label=\"Related order\">\n<div><strong>Order #CO-2814</strong><span class=\"subtle\">Weekly produce box · Collected today</span></div>\n<div class=\"amount\"><strong>$42.60</strong><span class=\"subtle\">Card payment</span></div>\n</div>\n<figure class=\"guide\">\n<svg viewBox=\"0 0 64 52\" role=\"img\" aria-label=\"A pending hold is separate from a completed payment\">\n<rect x=\"1\" y=\"2\" width=\"62\" height=\"19\" rx=\"3\" fill=\"none\" stroke=\"#63746b\" stroke-dasharray=\"3 3\"/>\n<text x=\"32\" y=\"15\" text-anchor=\"middle\" fill=\"#63746b\" font-family=\"system-ui,sans-serif\" font-size=\"9\">PENDING</text>\n<rect x=\"1\" y=\"30\" width=\"62\" height=\"20\" rx=\"3\" fill=\"#243f35\"/>\n<text x=\"32\" y=\"44\" text-anchor=\"middle\" fill=\"#fcfdf9\" font-family=\"system-ui,sans-serif\" font-size=\"9\">PAID</text>\n</svg>\n<figcaption><strong>Check for a pending card hold</strong>A hold can appear beside a completed payment. Assign this ticket to verify the payment record before replying.</figcaption>\n</figure>\n</article>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-8","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for Fieldwork. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Maya Chen, response-time cues and an Assign button. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Support queue · Fieldwork</title>\n<style>\n:root{--paper:#f7f6f2;--white:#fffefa;--ink:#242c27;--muted:#697168;--line:#dcded5;--green:#304f40;--soft:#edf1e9;--rust:#9b432e;--pink:#faeee7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9eb8a2;outline-offset:3px}\nheader{height:76px;border-bottom:1px solid var(--line);padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:650;letter-spacing:-1px}\n.mark{width:27px;height:27px;border:1px solid var(--green);display:grid;place-items:center;font:20px Georgia,serif;color:var(--green)}\n.workspace{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px}\n.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e7e8df;font-size:11px;color:var(--ink);font-weight:600}\nmain{max-width:1190px;margin:auto;padding:34px 30px 28px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}\n.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 5px}\nh1{font-size:34px;font-weight:550;line-height:1.2;letter-spacing:-1.2px;margin:0}\n.subtitle{color:var(--muted);margin:8px 0 0}\n.summary{border-left:1px solid var(--line);padding-left:24px;min-width:180px}\n.summary-line{display:flex;align-items:baseline;gap:18px}\n.summary strong{font-size:30px;line-height:1.2;font-weight:500;letter-spacing:-1px}\n.summary p{margin:3px 0 0;font-size:12px;color:var(--muted)}\n.layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:start}\n.preview{background:var(--white);border:1px solid var(--line)}\n.next-action{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--soft)}\n.next-action p{margin:0}\n.next-action strong{font-size:13px;font-weight:600}\n.next-action .hint{font-size:12px;color:var(--muted);margin-top:2px}\n.assign{border:1px solid var(--green);background:var(--green);color:white;border-radius:3px;padding:9px 21px;font-weight:600;flex-shrink:0}\n.message{padding:25px 26px 23px}\n.ticket-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}\nh2{margin:0;font-size:25px;line-height:1.25;font-weight:550;letter-spacing:-.6px}\n.badge{display:inline-block;font-size:10px;font-weight:650;line-height:1.5;padding:2px 7px;border-radius:3px;background:var(--pink);color:var(--rust)}\n.reference{color:var(--muted);font-size:11px;margin:7px 0 24px}\n.sender{display:flex;align-items:center;gap:11px;margin-bottom:20px}\n.sender .avatar{width:36px;height:36px;background:#e8e8dd}\n.sender strong{font-size:13px;font-weight:600}\n.sender p{margin:1px 0 0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}\n.customer-copy{font-size:14px;line-height:1.7}\n.customer-copy p{margin:0 0 15px}\n.customer-copy p:last-child{margin-bottom:0}\n.details{background:#f1f2ec;border-top:1px solid var(--line);padding:17px 26px 19px}\n.details h3{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}\ndl{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:0}\ndt{font-size:11px;color:var(--muted);margin-bottom:2px}\ndd{font-size:12px;margin:0;overflow-wrap:anywhere}\n.due{color:var(--rust)}\n.queue{min-width:0}\n.queue-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;gap:12px}\n.queue h2{font-size:18px;letter-spacing:-.3px}\n.queue-heading span{color:var(--muted);font-size:11px}\n.filters{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px;margin-bottom:17px}\nlabel{display:block;font-size:11px;font-weight:600;margin-bottom:5px}\ninput,select{width:100%;min-width:0;min-height:38px;border:1px solid #cdd1c6;border-radius:3px;background:var(--white);color:var(--ink);padding:8px 10px;font-size:12px}\ninput::placeholder{color:#7a8078}\n.tickets{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}\n.tickets li{border-bottom:1px solid var(--line)}\n.ticket{display:block;text-align:left;width:100%;border:0;background:transparent;padding:15px 13px;color:var(--ink);border-left:3px solid transparent;border-radius:0}\n.ticket[aria-pressed=\"true\"]{background:#e9eee5;border-left-color:var(--green)}\n.ticket-top,.ticket-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:10px}\n.ticket-title{font-size:13px;font-weight:600;line-height:1.4}\n.ticket .badge{flex-shrink:0}\n.ticket-project{display:block;margin:4px 0 7px;font-size:11px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}\n.ticket-bottom{font-size:10px;color:var(--muted)}\n.ticket-bottom span:last-child{text-align:right}\n.ticket-bottom .due{font-weight:600}\n.queue-note{font-size:11px;color:var(--muted);margin:13px 2px 0}\nfooter{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}\n@media(max-width:700px){\nheader{height:62px;padding:0 20px}\n.brand{font-size:21px}\n.workspace .practice{display:none}\nmain{padding:25px 18px 22px}\n.page-heading{align-items:flex-start;gap:14px;margin-bottom:21px;flex-wrap:wrap}\nh1{font-size:29px}\n.subtitle{font-size:12px}\n.summary{width:100%;min-width:0;border-left:0;border-top:1px solid var(--line);padding:12px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px}\n.summary-line{gap:10px;font-size:12px}\n.summary strong{font-size:22px}\n.summary p{margin:0;font-size:11px}\n.layout{grid-template-columns:minmax(0,1fr);gap:27px}\n.next-action{padding:14px 17px}\n.next-action strong{font-size:12px}\n.next-action .hint{font-size:11px}\n.assign{padding:8px 16px}\n.message{padding:20px 18px}\nh2{font-size:24px}\n.reference{margin-bottom:19px}\n.customer-copy{font-size:13px;line-height:1.65}\n.customer-copy p{margin-bottom:13px}\n.details{padding:15px 18px}\ndl{gap:12px 15px}\n.queue-heading{margin-bottom:13px}\n.ticket{padding:13px 11px}\nfooter{font-size:10px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\">F</span>Fieldwork</div>\n<div class=\"workspace\"><span class=\"practice\">Studio Alder / Practice workspace</span><span class=\"avatar\" aria-label=\"Alex Morgan\">AM</span></div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div>\n<p class=\"eyebrow\">Practice operations</p>\n<h1>Support queue</h1>\n<p class=\"subtitle\">A clear desk for client questions.</p>\n</div>\n<section class=\"summary\" aria-label=\"Queue summary\">\n<div class=\"summary-line\"><span>Open tickets</span><strong>05</strong></div>\n<p>1 urgent · 2 unassigned</p>\n</section>\n</div>\n<div class=\"layout\">\n<article class=\"preview\" aria-labelledby=\"ticket-title\">\n<div class=\"next-action\">\n<div><p class=\"eyebrow\">Next action</p><p><strong>Assign an owner</strong></p><p class=\"hint\">First reply due in 18 min</p></div>\n<button class=\"assign\" type=\"button\">Assign</button>\n</div>\n<div class=\"message\">\n<div class=\"ticket-heading\"><h2 id=\"ticket-title\">Payment question</h2><span class=\"badge\">Urgent</span></div>\n<p class=\"reference\">#FW-1048 · Billing · Received today, 10:42 am</p>\n<div class=\"sender\">\n<span class=\"avatar\" aria-hidden=\"true\">MC</span>\n<div><strong>Maya Chen</strong><p>Studio Alder · maya.chen@studioalder.example</p></div>\n</div>\n<div class=\"customer-copy\">\n<p>Hi Fieldwork team,</p>\n<p>I’m reconciling this month’s project costs for Oak House. Our client approved the Stage 3 invoice yesterday, but their £2,450 payment is still showing as pending in Fieldwork.</p>\n<p>Could you confirm whether it’s been received? I’d like to avoid sending a second reminder before our client meeting at 2 pm.</p>\n<p>Thanks,<br>Maya</p>\n</div>\n</div>\n<section class=\"details\" aria-labelledby=\"details-title\">\n<h3 id=\"details-title\">At a glance</h3>\n<dl>\n<div><dt>Project</dt><dd>Oak House · Stage 3</dd></div>\n<div><dt>Invoice</dt><dd>ALD-2024-038 · £2,450</dd></div>\n<div><dt>Assignee</dt><dd>Unassigned</dd></div>\n<div><dt>First response</dt><dd class=\"due\">Due today, 11:42 am</dd></div>\n</dl>\n</section>\n</article>\n<section class=\"queue\" aria-labelledby=\"queue-title\">\n<div class=\"queue-heading\"><h2 id=\"queue-title\">All open tickets</h2><span>Oldest first</span></div>\n<form class=\"filters\" role=\"search\">\n<div><label for=\"search\">Search tickets</label><input id=\"search\" type=\"search\" placeholder=\"Name, project or subject\"></div>\n<div><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>All assignees</option><option>Unassigned</option><option>Alex Morgan</option><option>Priya Shah</option></select></div>\n</form>\n<ol class=\"tickets\">\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"true\">\n<span class=\"ticket-top\"><span class=\"ticket-title\">Payment question</span><span class=\"badge\">Urgent</span></span>\n<span class=\"ticket-project\">Maya Chen · Oak House</span>\n<span class=\"ticket-bottom\"><span>Unassigned · 42 min ago</span><span class=\"due\">Due in 18 min</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Drawing set won’t upload</span>\n<span class=\"ticket-project\">Jonas Reed · Mill Lane Studios</span>\n<span class=\"ticket-bottom\"><span>Priya Shah · 31 min ago</span><span>Due in 29 min</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Add our structural engineer</span>\n<span class=\"ticket-project\">Sofia Patel · Riverside Arts Centre — planning submission and multidisciplinary consultant coordination</span>\n<span class=\"ticket-bottom\"><span>Unassigned · 24 min ago</span><span>Due in 36 min</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Update the site visit schedule</span>\n<span class=\"ticket-project\">Theo Williams · Orchard Mews</span>\n<span class=\"ticket-bottom\"><span>Alex Morgan · 16 min ago</span><span>Due in 44 min</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Receipt for planning application fee</span>\n<span class=\"ticket-project\">Emma Clarke · Westfield House</span>\n<span class=\"ticket-bottom\"><span>Priya Shah · 8 min ago</span><span>Due in 52 min</span></span>\n</button></li>\n</ol>\n<p class=\"queue-note\">Showing all 5 open tickets · First-response target: 1 hour</p>\n</section>\n</div>\n<footer><span>Fieldwork / Client support</span><span>Tuesday, 18 June · 11:24 am</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for Rill. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Samira Patel, response-time cues and an Assign button. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Support queue · Rill</title>\n<style>\n:root{color-scheme:light;--bg:#f4f2ed;--paper:#fffefa;--ink:#28332b;--muted:#6c7068;--line:#dedfd6;--soft:#eeeee6}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton{cursor:pointer}\n.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px}\n.brand{display:flex;align-items:center;gap:11px;font-size:25px;font-weight:650;letter-spacing:-1px}\n.mark{width:29px;height:29px;background:var(--ink);display:grid;place-items:center;border-radius:6px}\n.workspace{border-left:1px solid #c8cbc1;margin-left:15px;padding-left:24px;font-size:13px;letter-spacing:0;font-weight:400;color:var(--muted)}\n.agent{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}\n.avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#e4e5db;color:var(--ink);font-size:11px;font-weight:650;flex-shrink:0}\nmain{max-width:1200px;margin:auto;padding:30px 30px 24px}\n.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:25px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0 0 7px;font-weight:600}\np{margin:0}\n.subtitle,.muted{color:var(--muted)}\n.summary{display:flex;align-items:center;gap:15px;flex-shrink:0}\n.summary-number{font-size:39px;line-height:1;font-weight:500;letter-spacing:-2px}\n.summary strong{display:block;font-size:13px;font-weight:600}\n.summary small{color:var(--muted);font-size:12px}\n.toolbar{display:flex;align-items:end;gap:16px;margin-bottom:20px}\n.field{display:flex;flex-direction:column;gap:6px}\n.field label{font-size:12px;font-weight:600}\n.search-field{width:350px}\ninput,select{height:40px;border:1px solid #c9ccc1;border-radius:6px;background:var(--paper);color:var(--ink);padding:0 12px;min-width:0;width:100%}\ninput::placeholder{color:#85877e}\nselect{width:190px;padding-right:30px}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8f9c80;outline-offset:3px}\n.snapshot{margin-left:auto;padding-bottom:10px;color:var(--muted);font-size:12px}\n.queue{display:grid;grid-template-columns:minmax(310px,0.9fr) minmax(0,1.45fr);gap:20px;align-items:stretch}\n.panel{border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden;min-width:0}\n.list-heading{display:flex;justify-content:space-between;align-items:center;padding:16px 19px;border-bottom:1px solid var(--line)}\nh2,h3{margin:0;font-weight:600}\n.list-heading h2{font-size:13px}\n.list-heading span{font-size:11px;color:var(--muted)}\n.ticket-list{list-style:none;padding:0;margin:0}\n.ticket-list li+li{border-top:1px solid var(--line)}\n.ticket{display:block;width:100%;text-align:left;border:0;border-left:3px solid transparent;background:none;padding:14px 17px;color:var(--ink)}\n.ticket[aria-pressed=\"true\"]{border-left-color:var(--ink);background:#eeefe6}\n.ticket:hover{background:#f1f2eb}\n.ticket-top,.ticket-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.ticket-title{font-weight:600;font-size:14px}\n.ticket-context{display:block;color:var(--muted);font-size:12px;margin:4px 0 7px}\n.ticket-bottom{font-size:11px}\n.due{color:#7a512b}\n.pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;line-height:1.5;font-weight:650;padding:2px 7px;border-radius:4px;white-space:nowrap;background:#f0dfcb;color:#734620}\n.progress-status{color:#61695c}\n.detail{padding:22px 25px}\n.detail-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:10px}\n.detail h2{font-size:25px;line-height:1.25;letter-spacing:-.6px}\n.detail-status{display:flex;gap:9px;align-items:center;margin-top:9px;font-size:12px}\n.status-dot{font-size:15px}\n.owner-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;margin:18px 0}\n.owner{display:flex;gap:10px;align-items:center}\n.owner .avatar{background:transparent;border:1px dashed #b3b8a9;font-size:17px}\n.owner small{display:block;color:var(--muted);font-size:11px}\n.owner strong{font-size:12px;font-weight:500}\n.primary{background:var(--ink);color:#fffefa;border:1px solid var(--ink);border-radius:6px;padding:8px 18px;font-weight:600;font-size:13px}\n.response{margin-bottom:20px}\n.response-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:6px}\n.response-head strong{font-weight:600}\nprogress{display:block;appearance:none;width:100%;height:4px;border:0;background:#e8e7df;border-radius:3px;overflow:hidden}\nprogress::-webkit-progress-bar{background:#e8e7df}\nprogress::-webkit-progress-value{background:#8e7955}\nprogress::-moz-progress-bar{background:#8e7955}\n.response label{display:block;font-size:10px;color:var(--muted);margin-top:5px}\n.message-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}\n.message-header strong{font-size:13px;font-weight:600}\n.message-header small{display:block;font-size:11px;color:var(--muted)}\n.message-header time{margin-left:auto;font-size:11px;color:var(--muted)}\n.message-body{font-size:13px;line-height:1.65}\n.message-body p+p{margin-top:10px}\n.next-step{margin-top:19px;border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:#f6f5ef}\n.next-step h3{font-size:11px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}\n.next-step p{font-size:12px;color:#5e655a}\nfooter{margin-top:15px;color:var(--muted);font-size:11px}\n@media(max-width:700px){\n.topbar{height:60px;padding:0 20px}\n.workspace{margin-left:8px;padding-left:13px;font-size:11px}\n.agent{display:none}\nmain{padding:23px 16px}\n.page-heading{display:block;margin-bottom:20px}\nh1{font-size:28px}\n.subtitle{font-size:12px;max-width:310px}\n.summary{margin-top:19px;padding-top:15px;border-top:1px solid var(--line)}\n.summary-number{font-size:32px}\n.toolbar{display:grid;grid-template-columns:minmax(0,1fr) 135px;gap:10px;margin-bottom:15px}\n.search-field,select{width:100%}\n.snapshot{grid-column:1/-1;margin:0;padding:0;font-size:11px}\n.queue{display:flex;flex-direction:column;gap:18px}\n.detail{order:-1;padding:19px}\n.detail h2{font-size:24px}\n.response-head{font-size:11px}\n.message-header{gap:8px}\n.message-header time{font-size:10px}\n.ticket{padding:13px 16px}\nfooter{font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\"><svg width=\"19\" height=\"20\" viewBox=\"0 0 19 20\" fill=\"none\"><path d=\"M4 18V3h6a4 4 0 0 1 0 8H4m6 0 5 7\" stroke=\"#fffefa\" stroke-width=\"2\"/></svg></span>Rill<span class=\"workspace\">Practice support</span></div>\n<div class=\"agent\">Support team <span class=\"avatar\">AL</span></div>\n</header>\n<main>\n<div class=\"page-heading\">\n<div><h1>Support queue</h1><p class=\"subtitle\">Project, account and billing support for architecture teams.</p></div>\n<section class=\"summary\" aria-label=\"Open tickets summary\">\n<span class=\"summary-number\">5</span><div><strong>Open tickets</strong><small>3 need a reply · 2 in progress</small></div>\n</section>\n</div>\n<div class=\"toolbar\" role=\"search\" aria-label=\"Filter tickets\">\n<div class=\"field search-field\"><label for=\"search\">Search tickets</label><input id=\"search\" type=\"search\" placeholder=\"Name, project or ticket number\"></div>\n<div class=\"field\"><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>All assignees</option><option>Unassigned</option><option>Alex Lee</option><option>Jamie Brooks</option></select></div>\n<p class=\"snapshot\">Queue snapshot · Today, 09:48</p>\n</div>\n<div class=\"queue\">\n<section class=\"panel\" aria-labelledby=\"tickets-heading\">\n<div class=\"list-heading\"><h2 id=\"tickets-heading\">All open tickets <span> / 5</span></h2><span>Response due first</span></div>\n<ul class=\"ticket-list\">\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"true\"><span class=\"ticket-top\"><span class=\"ticket-title\">Payment question</span><span class=\"pill\">! Urgent</span></span><span class=\"ticket-context\">Samira Patel · Northline Architecture</span><span class=\"ticket-bottom\"><span>Needs reply</span><span class=\"due\">Due in 12 min</span></span></button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\"><span class=\"ticket-top\"><span class=\"ticket-title\">Model upload failed</span></span><span class=\"ticket-context\">Noah Ellis · Civic Library</span><span class=\"ticket-bottom\"><span>Needs reply</span><span>Due in 38 min</span></span></button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\"><span class=\"ticket-top\"><span class=\"ticket-title\">Export drawing register</span></span><span class=\"ticket-context\">Theo Chen · Westbrook Studio</span><span class=\"ticket-bottom\"><span>Needs reply</span><span>Due in 1 hr 12 min</span></span></button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\"><span class=\"ticket-top\"><span class=\"ticket-title\">Add a project collaborator</span></span><span class=\"ticket-context\">Eva Morgan · Orchard Mews</span><span class=\"ticket-bottom\"><span class=\"progress-status\">↻ In progress · Alex</span><span>Updated 24 min ago</span></span></button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\"><span class=\"ticket-top\"><span class=\"ticket-title\">Update billing address</span></span><span class=\"ticket-context\">Freya Ross · Ross &amp; Partners</span><span class=\"ticket-bottom\"><span class=\"progress-status\">↻ In progress · Jamie</span><span>Updated 1 hr ago</span></span></button></li>\n</ul>\n</section>\n<article class=\"panel detail\" aria-labelledby=\"preview-title\">\n<div class=\"detail-top\"><span>Ticket #1048 · Billing</span><span>Ticket preview</span></div>\n<h2 id=\"preview-title\">Payment question</h2>\n<div class=\"detail-status\"><span class=\"pill\">! Urgent</span><span>Needs reply · No response sent</span></div>\n<div class=\"owner-row\"><div class=\"owner\"><span class=\"avatar\" aria-hidden=\"true\">–</span><div><small>Assignee</small><strong>Unassigned</strong></div></div><button class=\"primary\" type=\"button\">Assign</button></div>\n<div class=\"response\">\n<div class=\"response-head\"><strong>First response due in 12 min</strong><span>1-hour target</span></div>\n<progress id=\"response-window\" value=\"48\" max=\"60\">48 of 60 minutes</progress>\n<label for=\"response-window\">48 of 60 minutes elapsed · Awaiting first reply</label>\n</div>\n<section aria-label=\"Customer message\">\n<div class=\"message-header\"><span class=\"avatar\" aria-hidden=\"true\">SP</span><div><strong>Samira Patel</strong><small>Studio principal · Northline Architecture</small></div><time datetime=\"2024-05-14T09:00\">Today, 09:00</time></div>\n<div class=\"message-body\">\n<p>Hi Rill team,</p>\n<p>Our accounts team spotted two £240 charges for our Studio plan this morning. We’re closing out Kingsley House and need to reconcile the practice card before Friday.</p>\n<p>Could you check whether the second payment is a duplicate and send over the correct VAT invoice?</p>\n<p>Thanks,<br>Samira</p>\n</div>\n</section>\n<aside class=\"next-step\"><h3>Next step</h3><p>Assign an owner to review the charges and acknowledge Samira’s question before the response window closes.</p></aside>\n</article>\n</div>\n<footer>Response times count during support hours · Monday–Friday, 09:00–18:00 UK time</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for Morrow. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Jules Martin, response-time cues and an Assign button. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Support queue — Morrow</title>\n<style>\n:root{--ink:#26352f;--muted:#69736b;--line:#dce0d7;--paper:#fafbf7;--green:#304f3e;--soft:#edf1e8;--rust:#924b34}\n*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9cb49a;outline-offset:3px}\n.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px}.brand{font:bold 29px Georgia,serif;letter-spacing:-1px}.brand span{font:12px system-ui,sans-serif;letter-spacing:0;margin-left:22px;color:var(--muted)}.team{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:10px}.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e5eadf;color:var(--green);font-size:11px;font-weight:650}\nmain{max-width:1240px;margin:auto;padding:32px 40px 24px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}h1{font:normal 38px/1.15 Georgia,serif;letter-spacing:-1px;margin:0 0 8px}.sub{margin:0;color:var(--muted);font-size:13px}.summary{display:flex;gap:28px;margin:0}.summary>div{padding-left:22px;border-left:1px solid var(--line)}.summary dt{font-size:11px;color:var(--muted);margin-bottom:3px}.summary dd{margin:0;font-size:22px;font-variant-numeric:tabular-nums}.summary .urgent-count{color:var(--rust)}.summary dd small{font-size:12px}\n.workspace{display:grid;grid-template-columns:minmax(320px,39%) minmax(0,1fr);border:1px solid var(--line);border-radius:5px;overflow:hidden;background:white}.queue{border-right:1px solid var(--line)}.filters{padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 138px;gap:12px;background:#f5f6f1;border-bottom:1px solid var(--line)}label{display:block;font-size:11px;font-weight:600;margin-bottom:5px;color:#526056}input,select{width:100%;min-width:0;height:36px;border:1px solid #cbd2c7;border-radius:3px;background:#fff;color:var(--ink);padding:0 9px}input::placeholder{color:#7a837c}.list-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;color:var(--muted);font-size:11px}.list-head h2{font-size:11px;font-weight:500;margin:0}.tickets{list-style:none;margin:0;padding:0}.tickets li+li{border-top:1px solid #e8ebe3}.ticket{display:block;width:100%;text-align:left;border:0;background:white;padding:17px 18px;color:var(--ink);position:relative}.ticket[aria-pressed=true]{background:var(--soft);box-shadow:inset 3px 0 var(--green)}.ticket:hover{background:#f2f4ed}.ticket-top,.ticket-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.ticket-title{font-size:14px;font-weight:600}.badge{display:inline-block;background:#f5e5dc;color:var(--rust);padding:2px 7px;border-radius:3px;font-size:10px;font-weight:650;line-height:1.5}.customer{display:block;color:var(--muted);font-size:12px;margin:5px 0 7px}.ticket-foot{font-size:10px;color:var(--muted)}.due{color:#48644b}.due.soon{color:var(--rust);font-weight:600}\n.preview{display:flex;flex-direction:column;min-width:0;background:#fcfcf9}.preview-head{padding:24px 28px 20px;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}.title-line{display:flex;align-items:center;gap:12px}.title-line h2{font:normal 29px/1.2 Georgia,serif;letter-spacing:-.5px;margin:0}.response{display:flex;align-items:center;gap:7px;color:var(--rust);font-size:11px;margin:12px 0 0}.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}.message{padding:23px 28px 20px}.sender{display:flex;align-items:center;gap:10px;margin-bottom:18px}.sender .avatar{width:36px;height:36px;background:#e8e7db}.sender strong{display:block;font-size:13px}.sender small{display:block;color:var(--muted);font-size:11px}.sender time{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}.body-copy{font-size:14px;line-height:1.65}.body-copy p{margin:0 0 13px}.body-copy p:last-child{margin-bottom:0}.attachment{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:3px;background:white;padding:7px 10px;margin-top:18px;font-size:11px}.file-type{font-size:9px;font-weight:700;color:var(--muted);border-right:1px solid var(--line);padding-right:9px}.attachment small{color:var(--muted)}.detail-area{margin:0 28px 22px;background:#f0f2eb;border:1px solid #e3e6dc;padding:13px 15px}.detail-area h3{margin:0 0 9px;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:500}.details{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin:0}.details dt{font-size:10px;color:var(--muted)}.details dd{font-size:12px;margin:1px 0 0}.action-bar{margin-top:auto;border-top:1px solid var(--line);padding:17px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}.action-bar p{font-size:11px;color:var(--muted);max-width:290px;margin:0}.action-bar strong{display:block;color:var(--ink);font-size:12px;margin-bottom:2px}.primary{border:1px solid var(--green);border-radius:3px;background:var(--green);color:white;font-weight:600;padding:9px 23px;flex:none}.update{font-size:10px;color:var(--muted);margin:12px 0 0;text-align:right}\n@media(max-width:760px){.topbar{height:58px;padding:0 18px}.brand{font-size:26px}.brand span{display:none}.team{font-size:11px}main{padding:23px 16px 20px}.page-head{display:block;margin-bottom:20px}h1{font-size:32px}.sub{font-size:12px}.summary{margin-top:20px;gap:0;justify-content:space-between}.summary>div{padding-left:14px;flex:1}.summary>div:first-child{padding-left:0;border:0}.summary dt{font-size:10px}.summary dd{font-size:21px}.workspace{grid-template-columns:1fr}.queue{border-right:0;border-bottom:1px solid var(--line)}.filters{padding:13px;grid-template-columns:minmax(0,1fr) 132px;gap:9px}.list-head{padding:9px 14px}.ticket{padding:11px 14px}.customer{margin:3px 0 4px;font-size:11px}.ticket-title{font-size:13px}.preview-head{padding:20px 18px 16px}.title-line h2{font-size:27px}.message{padding:18px}.sender{margin-bottom:14px}.body-copy{font-size:13px;line-height:1.6}.detail-area{margin:0 18px 18px;padding:12px}.action-bar{padding:15px 18px;gap:14px}.action-bar p{font-size:10px}.primary{padding:9px 20px}.update{text-align:left;font-size:10px}}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\">morrow<span>Field research, connected.</span></div>\n<div class=\"team\">Research operations <span class=\"avatar\" aria-label=\"Alex Kim\">AK</span></div>\n</header>\n<main>\n<div class=\"page-head\">\n<div><h1>Support queue</h1><p class=\"sub\">Keep field teams moving, wherever the work takes them.</p></div>\n<dl class=\"summary\">\n<div><dt>Open tickets</dt><dd>5</dd></div>\n<div><dt>Needs priority</dt><dd class=\"urgent-count\">1 <small>urgent</small></dd></div>\n<div><dt>Next reply due</dt><dd>22<small> min</small></dd></div>\n</dl>\n</div>\n<div class=\"workspace\">\n<section class=\"queue\" aria-label=\"Open ticket list\">\n<form class=\"filters\" role=\"search\">\n<div><label for=\"search\">Search tickets</label><input id=\"search\" type=\"search\" placeholder=\"Name, topic or ticket ID\"></div>\n<div><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>All assignees</option>Unassigned</option>Alex Kim</option>Priya Shah</option>Sam Ellis</option></select></div>\n</form>\n<div class=\"list-head\"><h2>5 open tickets</h2><span>Newest first</span></div>\n<ul class=\"tickets\">\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"true\">\n<span class=\"ticket-top\"><span class=\"ticket-title\">Payment question</span><span class=\"badge\">Urgent</span></span>\n<span class=\"customer\">Jules Martin · Cairngorms survey</span>\n<span class=\"ticket-foot\"><span>18 min ago · Unassigned</span><span class=\"due soon\">Reply in 22 min</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">GPS track won’t upload</span>\n<span class=\"customer\">Amina Okafor · Wetland mapping</span>\n<span class=\"ticket-foot\"><span>42 min ago · Alex Kim</span><span class=\"due\">Reply in 1 hr</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Spare battery request</span>\n<span class=\"customer\">Theo Chen · Coast transect</span>\n<span class=\"ticket-foot\"><span>1 hr ago · Sam Ellis</span><span class=\"due\">Reply in 2 hr</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Participant consent form</span>\n<span class=\"customer\">Sofia Reyes · Urban canopy study</span>\n<span class=\"ticket-foot\"><span>2 hr ago · Priya Shah</span><span class=\"due\">Reply in 3 hr</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"ticket-title\">Sync conflict on plot 12</span>\n<span class=\"customer\">Noah Williams · Soil baseline</span>\n<span class=\"ticket-foot\"><span>3 hr ago · Unassigned</span><span class=\"due\">Reply in 5 hr</span></span>\n</button></li>\n</ul>\n</section>\n<article class=\"preview\" aria-labelledby=\"ticket-heading\">\n<header class=\"preview-head\">\n<p class=\"eyebrow\">MR-2048 / Field expenses</p>\n<div class=\"title-line\"><h2 id=\"ticket-heading\">Payment question</h2><span class=\"badge\">Urgent</span></div>\n<p class=\"response\"><span class=\"dot\"></span>First reply due in 22 min · No response yet</p>\n</header>\n<section class=\"message\" aria-label=\"Customer message\">\n<div class=\"sender\"><span class=\"avatar\" aria-hidden=\"true\">JM</span><div><strong>Jules Martin</strong><small>Field researcher · via email</small></div><time datetime=\"2024-06-18T09:42:00+01:00\">09:42 BST</time></div>\n<div class=\"body-copy\">\n<p>Hi team,</p>\n<p>I paid £186.40 for two replacement recorder batteries before we left for the Cairngorms survey. The expense is still showing as pending, although I uploaded the receipt last week.</p>\n<p>We head back into the field tomorrow and I need to cover the next supply run. Could you check whether the reimbursement has been approved, and when it should reach my account?</p>\n<p>I’ve attached the receipt again. Thanks for your help!<br>Jules</p>\n</div>\n<div class=\"attachment\"><span class=\"file-type\">PDF</span><span>Battery receipt.pdf <small>· 148 KB</small></span></div>\n</section>\n<aside class=\"detail-area\" aria-labelledby=\"details-heading\">\n<h3 id=\"details-heading\">Field context</h3>\n<dl class=\"details\">\n<div><dt>Project</dt><dd>Cairngorms acoustic survey</dd></div>\n<div><dt>Next field visit</dt><dd>Tomorrow, 07:00 BST</dd></div>\n<div><dt>Expense reference</dt><dd>EXP-0816 · £186.40</dd></div>\n<div><dt>Category</dt><dd>Equipment reimbursement</dd></div>\n</dl>\n</aside>\n<footer class=\"action-bar\">\n<p><strong>Unassigned</strong>Assign to a teammate in field expenses to keep the reply on track.</p>\n<button class=\"primary\" type=\"button\">Assign</button>\n</footer>\n</article>\n</div>\n<p class=\"update\">Latest update · 09:42 BST — Jules added a receipt.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-support-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a support queue for Fieldwork. Include Open tickets summary, search, an assignee filter, a list of five tickets, one Urgent ticket titled Payment question, a preview with realistic customer copy from Emilia Santos, response-time cues and an Assign button. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Support queue\", \"Open tickets\", \"Urgent\", \"Assign\", \"Payment question\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>Support queue · Fieldwork</title>\n<style>\n*{box-sizing:border-box}body{margin:0;background:#f4f5f2;color:#24342c;font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #78a594;outline-offset:3px}.appbar{height:68px;background:#fff;border-bottom:1px solid #dfe4dd;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:750;letter-spacing:-.6px}.brand svg{width:30px;height:30px}.workspace{border-left:1px solid #dfe4dd;padding-left:22px;margin-left:12px;color:#69756d;font-size:13px;font-weight:400;letter-spacing:0}.team{display:flex;align-items:center;gap:10px;font-size:13px}.avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:#e7eee8;color:#355a46;font-size:12px;font-weight:700}main{max-width:1256px;margin:auto;padding:28px 32px 40px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}h1{font-size:28px;line-height:1.2;letter-spacing:-.8px;margin:0 0 7px}p{margin:0}.muted{color:#69756d}.date{text-align:right;font-size:12px;line-height:1.7}.date strong{display:block;font-size:13px;font-weight:500}.toolbar{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;padding:18px 20px;background:#fff;border:1px solid #dfe4dd;border-radius:10px 10px 0 0}label{display:block;font-size:12px;font-weight:650;margin-bottom:6px}input,select{width:100%;height:44px;border:1px solid #cbd3ca;border-radius:6px;background:#fff;color:#24342c;padding:0 12px;min-width:0}input::placeholder{color:#788279}.panels{display:grid;grid-template-columns:370px minmax(0,1fr);background:#fff;border:1px solid #dfe4dd;border-top:0;border-radius:0 0 10px 10px;overflow:hidden}.queue{border-right:1px solid #dfe4dd}.queue-heading{padding:18px 20px 16px;border-bottom:1px solid #e5e8e2}.queue-heading h2{font-size:16px;display:flex;align-items:center;gap:9px;margin:0 0 4px}.count{font-size:12px;background:#eaf0e9;color:#3b5947;border-radius:5px;padding:1px 7px}.queue-heading p{font-size:12px;color:#69756d}.tickets{list-style:none;padding:0;margin:0}.tickets li+li{border-top:1px solid #e5e8e2}.ticket{width:100%;text-align:left;border:0;border-left:3px solid transparent;background:#fff;padding:16px 17px;color:inherit;display:block;min-height:111px}.ticket:hover{background:#f6f8f4}.ticket.selected{background:#edf3ec;border-left-color:#38654c}.line{display:flex;align-items:center;justify-content:space-between;gap:10px}.subject{font-size:14px;font-weight:650;line-height:1.35}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:4px;padding:2px 7px;white-space:nowrap;font-size:11px;font-weight:650}.urgent{color:#9b412c;background:#f9eae3}.ticket-person{display:block;color:#536257;font-size:12px;margin-top:7px}.ticket-foot{font-size:11px;color:#727d73;margin-top:5px}.due{color:#9b4d31;font-weight:600}.preview{min-width:0}.preview-head{padding:22px 26px 18px}.ticket-number{font-size:12px;color:#748075;letter-spacing:.3px}.preview h2{font-size:23px;letter-spacing:-.5px;margin:10px 0 8px;line-height:1.25}.status{font-size:12px;color:#657166;display:inline-flex;align-items:center;gap:6px}.status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#889486}.assignment{margin-top:20px;padding-top:16px;border-top:1px solid #e5e8e2;display:flex;align-items:center;justify-content:space-between;gap:12px}.assignment small{display:block;color:#69756d;font-size:11px}.assignment strong{font-size:13px;font-weight:550}.primary{background:#254f3b;color:#fff;border:1px solid #254f3b;border-radius:6px;min-height:44px;padding:0 18px;font-weight:600}.primary:hover{background:#183f2c}.sla{margin:0 26px 20px;padding:11px 13px;border:1px solid #ecdfcd;border-radius:6px;background:#fcf8ef;color:#72502c;font-size:12px}.sla strong{display:block;font-weight:650}.sla span{display:block;font-size:11px;color:#8b7357;margin-top:2px}.context{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin:0;padding:0 26px 20px}.context dt{color:#748075;font-size:11px;margin-bottom:3px}.context dd{margin:0;font-size:12px;font-weight:550}.message{border-top:1px solid #e5e8e2;padding:22px 26px}.sender{display:flex;align-items:center;gap:10px;margin-bottom:17px}.sender-info{flex:1;min-width:0}.sender-info strong{display:block;font-size:13px}.sender-info span{font-size:11px;color:#748075}.sender time{font-size:11px;color:#748075;align-self:flex-start;padding-top:2px}.message-body{font-size:14px;line-height:1.7;color:#3f4c43}.message-body p+p{margin-top:12px}.related{border-top:1px solid #e5e8e2;padding:18px 26px 22px;background:#fafbf8}.related h3{font-size:12px;margin:0 0 12px;font-weight:650}.empty{display:flex;align-items:flex-start;gap:11px}.empty svg{flex-shrink:0;color:#8c998b;margin-top:2px}.empty strong{font-size:12px;font-weight:550;display:block;color:#5b695d}.empty p{font-size:12px;color:#7a857b;margin-top:3px;max-width:440px}\n@media(min-width:1100px){.panels{grid-template-columns:390px minmax(0,1fr)}}\n@media(max-width:700px){.appbar{padding:0 18px;height:60px}.workspace,.team-name{display:none}main{padding:22px 16px 28px}.page-heading{align-items:flex-start;margin-bottom:20px}.page-heading p{font-size:12px;max-width:230px}.date{display:none}h1{font-size:26px}.toolbar{grid-template-columns:1fr;gap:12px;padding:16px}.panels{grid-template-columns:minmax(0,1fr)}.queue{border-right:0;border-bottom:1px solid #cbd3ca}.queue-heading{padding:16px}.ticket{padding:13px 13px;min-height:100px}.preview-head{padding:22px 18px 18px}.sla{margin:0 18px 18px}.context{padding:0 18px 20px;gap:12px}.message{padding:20px 18px}.related{padding:18px}.preview h2{font-size:22px}.message-body{font-size:14px}}\n</style>\n</head>\n<body>\n<header class=\"appbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 30 30\" aria-hidden=\"true\"><rect width=\"30\" height=\"30\" rx=\"7\" fill=\"#254f3b\"/><path d=\"M8 22V8h14M8 15h11M14 22V8\" fill=\"none\" stroke=\"#edf3e6\" stroke-width=\"2\"/></svg>\nFieldwork <span class=\"workspace\">Research operations</span>\n</div>\n<div class=\"team\"><span class=\"team-name\">East coast team</span><span class=\"avatar\" aria-label=\"East coast team\">EC</span></div>\n</header>\n<main>\n<header class=\"page-heading\">\n<div><h1>Support queue</h1><p class=\"muted\">Keep field teams moving, one question at a time.</p></div>\n<p class=\"date muted\"><strong>Monday, 16 June</strong>10:42 · All times BST</p>\n</header>\n<div class=\"toolbar\" role=\"search\" aria-label=\"Filter support tickets\">\n<div><label for=\"search\">Search tickets</label><input id=\"search\" type=\"search\" placeholder=\"Search name, ticket or study\"></div>\n<div><label for=\"assignee\">Assignee</label><select id=\"assignee\"><option>All assignees</option><option>Unassigned</option><option>Nora Patel</option><option>James Wu</option><option>You</option></select></div>\n</div>\n<div class=\"panels\">\n<section class=\"queue\" aria-labelledby=\"queue-title\">\n<header class=\"queue-heading\"><h2 id=\"queue-title\">Open tickets <span class=\"count\">5</span></h2><p>1 urgent · 2 unassigned</p></header>\n<ol class=\"tickets\">\n<li><button class=\"ticket selected\" type=\"button\" aria-pressed=\"true\">\n<span class=\"line\"><span class=\"subject\">Payment question</span><span class=\"badge urgent\">Urgent</span></span>\n<span class=\"ticket-person\">Emilia Santos · Coastal access study</span>\n<span class=\"line ticket-foot\"><span>Unassigned · 18m waiting</span><span class=\"due\">Reply in 12m</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"line\"><span class=\"subject\">GPS point won't save</span></span>\n<span class=\"ticket-person\">Mateo Lewis · Ridge transect survey</span>\n<span class=\"line ticket-foot\"><span>Nora Patel · 9m waiting</span><span>Reply in 51m</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"subject\">Change to pickup location</span>\n<span class=\"ticket-person\">Amina Yusuf · Coastal access study</span>\n<span class=\"line ticket-foot\"><span>James Wu · 32m waiting</span><span>Reply in 1h 28m</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"subject\">Consent form translation</span>\n<span class=\"ticket-person\">Noah Kim · Community water study</span>\n<span class=\"line ticket-foot\"><span>Nora Patel · 1h waiting</span><span>Reply in 1h 54m</span></span>\n</button></li>\n<li><button class=\"ticket\" type=\"button\" aria-pressed=\"false\">\n<span class=\"subject\">Uploading recorder files</span>\n<span class=\"ticket-person\">Priya Shah · Riparian habitat study</span>\n<span class=\"line ticket-foot\"><span>Unassigned · 2h waiting</span><span>Reply in 2h 5m</span></span>\n</button></li>\n</ol>\n</section>\n<article class=\"preview\" aria-labelledby=\"preview-title\">\n<header class=\"preview-head\">\n<div class=\"line\"><span class=\"ticket-number\">FW-1048 · Payment &amp; expenses</span><span class=\"badge urgent\">Urgent</span></div>\n<h2 id=\"preview-title\">Payment question</h2>\n<span class=\"status\">Awaiting first reply</span>\n<div class=\"assignment\"><div><small>Assignee</small><strong>Unassigned</strong></div><button class=\"primary\" type=\"button\">Assign</button></div>\n</header>\n<div class=\"sla\"><strong>First response due in 12 min</strong><span>Waiting 18 min · Urgent tickets have a 30-minute response target.</span></div>\n<dl class=\"context\"><div><dt>Study</dt><dd>Coastal access · Round 2</dd></div><div><dt>Field area</dt><dd>North shoreline</dd></div></dl>\n<section class=\"message\" aria-label=\"Message from Emilia Santos\">\n<header class=\"sender\"><span class=\"avatar\">ES</span><div class=\"sender-info\"><strong>Emilia Santos</strong><span>Field researcher · via email</span></div><time datetime=\"2025-06-16T10:24:00+01:00\">10:24</time></header>\n<div class=\"message-body\">\n<p>Hi team,</p>\n<p>I completed the three shoreline interviews on Friday and uploaded the consent forms, but my £85 fieldwork payment still shows as pending. Is there anything else you need from me to release it?</p>\n<p>I’m heading back out tomorrow morning. Could you also confirm whether the bus fares are included, or if I should submit those separately?</p>\n<p>Thanks,<br>Emilia</p>\n</div>\n</section>\n<section class=\"related\" aria-labelledby=\"related-title\">\n<h3 id=\"related-title\">Related field reports</h3>\n<div class=\"empty\">\n<svg width=\"25\" height=\"28\" viewBox=\"0 0 25 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M5 2h10l6 6v18H5V2Z\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M15 2v7h6M9 14h8M9 18h6\" stroke=\"currentColor\" stroke-width=\"1.4\"/></svg>\n<div><strong>No field reports linked</strong><p>This payment query has no linked site visit or incident report. Related reports will appear here when added to the ticket.</p></div>\n</div>\n</section>\n</article>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-events-0","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Alder. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events · Alder</title>\n<style>\n:root{color-scheme:light;--paper:#f4f1e9;--card:#fcfaf5;--ink:#203c32;--muted:#62685f;--line:#d4d6ca}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton,select{font:inherit}\nbutton,select{outline-offset:4px}\nbutton:focus-visible,select:focus-visible{outline:3px solid #9a612e}\n.shell{width:min(1100px,calc(100% - 80px));margin-inline:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:13px}\n.brand svg{width:46px;height:32px;flex:none}\n.wordmark{font-size:29px;font-weight:800;letter-spacing:-1.5px}\n.shop-note{font-size:13px;color:var(--muted);text-align:right}\n.shop-note strong{display:block;color:var(--ink);font-weight:600}\nmain{padding-top:43px;padding-bottom:36px}\n.eyebrow{margin:0 0 10px;font-size:11px;font-weight:750;letter-spacing:1.7px;text-transform:uppercase}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:54px;font-weight:400;line-height:1.1;letter-spacing:-1.8px;margin:0 0 14px}\n.intro{color:var(--muted);max-width:600px;margin:0;font-size:16px}\n.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:29px 0 27px;padding:19px 23px;background:#eaece2;border:1px solid var(--line);border-radius:4px}\n.filter-field{width:365px;max-width:100%}\nlabel{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-bottom:7px;max-width:320px}\nselect{display:block;width:100%;min-height:43px;border:1px solid #8d998b;border-radius:3px;padding:8px 36px 8px 12px;background:var(--card);color:var(--ink);font-weight:600}\n.summary{margin:0;text-align:right;font-size:13px;color:var(--muted)}\n.summary strong{display:block;font-size:16px;color:var(--ink);font-weight:650;margin-bottom:2px}\n.list-heading{display:grid;grid-template-columns:84px 1fr 180px;gap:24px;padding:0 24px 10px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}\n.list-heading span:last-child{text-align:center}\n.events{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--card)}\n.event{display:grid;grid-template-columns:84px minmax(0,1fr) 180px;gap:24px;align-items:start;padding:25px 24px}\n.event+.event{border-top:1px solid var(--line)}\n.date{display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--line);padding-right:24px;text-align:center}\n.month{font-size:10px;letter-spacing:1.5px;font-weight:750}\n.day{font-family:Georgia,\"Times New Roman\",serif;font-size:38px;line-height:1.2}\n.weekday{font-size:11px;color:var(--muted)}\nh2{margin:0 0 5px;font-size:23px;font-weight:650;line-height:1.25;letter-spacing:-.5px}\n.details{margin:0 0 9px;font-size:12px;color:var(--muted)}\n.details time{color:var(--ink);font-weight:650}\n.separator{padding:0 7px;color:#a1a694}\n.description{margin:0;font-size:13px;line-height:1.6;max-width:530px}\n.action{padding-top:2px;text-align:center}\nbutton{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:44px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:#fffdf6;padding:10px 15px;font-size:13px;font-weight:650;cursor:pointer}\nbutton:hover{background:#304f41}\nbutton span{font-size:18px;line-height:1}\n.availability{display:block;margin-top:9px;font-size:11px;color:var(--muted)}\n.open{color:#345e43}\n.dot{display:inline-block;width:6px;height:6px;background:#52764b;border-radius:50%;margin-right:5px;vertical-align:1px}\n.sold button{background:transparent;color:var(--ink)}\n.sold button:hover{background:#eaece2}\n.sold-label{display:inline-block;background:#e8e2d7;color:#594d40;font-weight:650;border-radius:3px;padding:2px 7px;margin-right:4px}\nfooter{display:flex;justify-content:space-between;gap:24px;margin-top:21px;color:var(--muted);font-size:11px}\nfooter p{margin:0}\n@media(max-width:700px){\n.shell{width:calc(100% - 36px)}\n.header-inner{min-height:72px;gap:12px}\n.wordmark{font-size:26px}\n.brand{gap:8px}\n.brand svg{width:36px}\n.shop-note{font-size:10px;max-width:130px}\nmain{padding-top:27px}\n.eyebrow{font-size:10px;margin-bottom:8px}\nh1{font-size:39px;letter-spacing:-1.3px;margin-bottom:10px}\n.intro{font-size:14px;line-height:1.5}\n.filter-bar{margin:22px 0 20px;padding:14px;display:block}\n.filter-field{width:100%}\nlabel{font-size:11px;max-width:275px}\n.summary{margin-top:11px;text-align:left;font-size:11px}\n.summary strong{display:inline;font-size:11px;margin:0 6px 0 0}\n.list-heading{display:none}\n.event{grid-template-columns:49px minmax(0,1fr);gap:10px 13px;padding:19px 15px}\n.date{grid-row:1 / 3;padding-right:12px}\n.day{font-size:31px}\n.month{font-size:9px}\n.weekday{font-size:10px}\nh2{font-size:20px}\n.details{font-size:11px;margin-bottom:7px}\n.details .separator{display:none}\n.details .venue{display:block;margin-top:2px}\n.description{font-size:12px;line-height:1.5}\n.action{grid-column:2;display:flex;align-items:center;gap:12px;padding-top:3px;text-align:left}\nbutton{width:auto;min-width:123px;min-height:40px;padding:8px 11px;gap:13px;font-size:12px;flex:none}\n.availability{font-size:10px;margin:0;line-height:1.5}\n.sold-label{display:block;width:fit-content;margin:0 0 2px}\nfooter{display:block;font-size:10px;margin-top:16px}\nfooter p+p{margin-top:5px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"shell header-inner\">\n<div class=\"brand\" aria-label=\"Alder\">\n<svg viewBox=\"0 0 58 38\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n<circle cx=\"12\" cy=\"26\" r=\"10\"/><circle cx=\"46\" cy=\"26\" r=\"10\"/>\n<path d=\"m12 26 10-18 12 18H12l9-15h17l8 15M34 26l7-23h7M17 8h11\"/>\n</svg>\n<span class=\"wordmark\">alder</span>\n</div>\n<div class=\"shop-note\"><strong>Your independent bike shop</strong>18 Mill Lane · Northside</div>\n</div>\n</header>\n<main class=\"shell\">\n<p class=\"eyebrow\">Good bikes. Good company.</p>\n<h1>Upcoming events</h1>\n<p class=\"intro\">Learn a new skill, take the scenic route, or hear a good story. Small gatherings for our cycling community — everyone’s welcome.</p>\n\n<section class=\"filter-bar\" aria-label=\"Event month and availability\">\n<div class=\"filter-field\">\n<label for=\"month\">Choose the month for in-shop events and neighbourhood meet-ups</label>\n<select id=\"month\" name=\"month\">\n<option selected>September 2026</option>\n<option>October 2026</option>\n<option>November 2026</option>\n</select>\n</div>\n<p class=\"summary\"><strong>3 events this month</strong>2 with availability · All experience levels</p>\n</section>\n\n<div class=\"list-heading\" aria-hidden=\"true\"><span>Date</span><span>At Alder &amp; around the neighbourhood</span><span>Come along</span></div>\n<section class=\"events\" aria-label=\"September events\">\n<article class=\"event\">\n<time class=\"date\" datetime=\"2026-09-12\"><span class=\"month\">SEP</span><span class=\"day\">12</span><span class=\"weekday\">Saturday</span></time>\n<div>\n<h2>Design workshop</h2>\n<p class=\"details\"><time datetime=\"2026-09-12T10:00\">10:00–12:00</time><span class=\"separator\">/</span><span class=\"venue\">Alder workshop · 18 Mill Lane</span></p>\n<p class=\"description\">Sketch a frame bag for your everyday ride. Bring your bike or its measurements; we’ll provide templates, materials and tea.</p>\n</div>\n<div class=\"action\">\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event <span aria-hidden=\"true\">↗</span></button>\n<span class=\"availability open\"><span class=\"dot\" aria-hidden=\"true\"></span>6 of 12 spaces left · £15</span>\n</div>\n</article>\n\n<article class=\"event\">\n<time class=\"date\" datetime=\"2026-09-20\"><span class=\"month\">SEP</span><span class=\"day\">20</span><span class=\"weekday\">Sunday</span></time>\n<div>\n<h2>Community walk</h2>\n<p class=\"details\"><time datetime=\"2026-09-20T10:30\">10:30–11:30</time><span class=\"separator\">/</span><span class=\"venue\">Meet at Alder’s front door</span></p>\n<p class=\"description\">Leave the bikes parked and explore our riverside routes on foot. An easy, step-free 3 km loop with the shop team. Dogs welcome.</p>\n</div>\n<div class=\"action\">\n<button type=\"button\" aria-label=\"View event: Community walk\">View event <span aria-hidden=\"true\">↗</span></button>\n<span class=\"availability open\"><span class=\"dot\" aria-hidden=\"true\"></span>Free drop-in · No booking</span>\n</div>\n</article>\n\n<article class=\"event sold\">\n<time class=\"date\" datetime=\"2026-09-24\"><span class=\"month\">SEP</span><span class=\"day\">24</span><span class=\"weekday\">Thursday</span></time>\n<div>\n<h2>Evening talk</h2>\n<p class=\"details\"><time datetime=\"2026-09-24T18:30\">18:30–20:00</time><span class=\"separator\">/</span><span class=\"venue\">Alder shop floor · 18 Mill Lane</span></p>\n<p class=\"description\">A first overnighter, without the fancy kit. Local rider Jo shares a two-day bikepacking route, a simple packing list and lessons from the road.</p>\n</div>\n<div class=\"action\">\n<button type=\"button\" aria-label=\"View event: Evening talk\">View event <span aria-hidden=\"true\">↗</span></button>\n<span class=\"availability\"><span class=\"sold-label\">Sold out</span>24 of 24 booked</span>\n</div>\n</article>\n</section>\n<footer>\n<p>All times local. Bike parking outside the shop.</p>\n<p>Access questions? Call Alder on 01632 960 184.</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-events-2","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Fieldwork. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — Fieldwork</title>\n<style>\n:root{--paper:#f6f4ec;--ink:#242b26;--line:#c9ccc2}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\nbutton,select{font:inherit;color:inherit}\nbutton:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\n.wrap{width:min(1120px,calc(100% - 80px));margin:auto}\n.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink)}\n.brand{display:flex;align-items:center;gap:10px;font-size:27px;font-weight:750;letter-spacing:-1.2px}\n.brand svg{width:30px;height:30px}\n.shop-note{text-align:right;font-size:12px;line-height:1.6}\n.shop-note span{display:block;opacity:.65}\n.intro{padding:40px 0 30px}\n.eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}\nh1{margin:0;font:normal 60px/1.08 Georgia,'Times New Roman',serif;letter-spacing:-2px}\n.intro>p:last-child{margin:16px 0 0;opacity:.75;font-size:16px}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}\n.summary{margin:0;font-size:14px}\n.summary strong{font-weight:700}\n.programme{display:block;font-size:12px;opacity:.65;margin-top:3px}\n.filter{display:flex;align-items:center;gap:12px}\n.filter label{font-size:12px;font-weight:700}\nselect{min-width:164px;padding:9px 32px 9px 12px;border:1px solid var(--ink);border-radius:0;background:var(--paper)}\n.event{display:grid;grid-template-columns:66px minmax(0,1fr) 158px 126px;gap:26px;align-items:center;padding:27px 0;border-bottom:1px solid var(--line)}\n.date{align-self:start;display:flex;flex-direction:column;line-height:1.2;padding-top:3px}\n.date strong{font-size:37px;font-weight:400;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}\n.date span{font-size:10px;font-weight:700;letter-spacing:1px;margin-top:6px;text-transform:uppercase}\nh2{margin:0 0 5px;font:normal 27px/1.2 Georgia,'Times New Roman',serif;letter-spacing:-.5px}\n.schedule{margin:0;font-size:13px;font-weight:700}\n.venue{margin:2px 0 8px;font-size:12px;opacity:.75}\n.description{margin:0;max-width:470px;font-size:13px;line-height:1.55;opacity:.8}\n.availability{align-self:center}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}\n.status::before{content:\"\";width:6px;height:6px;border:1px solid var(--ink);border-radius:50%}\n.sold .status{border:1px solid var(--ink);padding:2px 7px}\n.sold .status::before{content:\"×\";width:auto;height:auto;border:0;line-height:1;font-size:14px}\nmeter{display:block;appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:10px 0 6px;background:var(--line);border:0;border-radius:0}\nmeter::-webkit-meter-bar{background:var(--line);border:0;border-radius:0}\nmeter::-webkit-meter-optimum-value{background:var(--ink);border-radius:0}\nmeter::-moz-meter-bar{background:var(--ink)}\n.capacity{display:block;font-size:11px;opacity:.65}\n.action{text-align:right}\nbutton{display:inline-flex;justify-content:center;align-items:center;gap:14px;width:126px;min-height:43px;padding:10px 12px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;cursor:pointer}\nbutton:hover{background:var(--paper);color:var(--ink)}\n.sold button{background:transparent;color:var(--ink)}\n.action small{display:block;margin-top:7px;font-size:10px;line-height:1.4;opacity:.7}\nfooter{display:flex;justify-content:space-between;gap:20px;padding:21px 0 30px;font-size:11px;opacity:.7}\nfooter p{margin:0}\n@media(min-width:1400px){.intro{padding-top:52px}.event{padding:32px 0}}\n@media(max-width:760px){\n.wrap{width:calc(100% - 40px)}\n.site-header{height:72px}\n.brand{font-size:25px}\n.shop-note{font-size:10px}\n.shop-note span{display:none}\n.intro{padding:28px 0 24px}\nh1{font-size:44px;letter-spacing:-1.5px}\n.intro>p:last-child{font-size:14px;max-width:310px;margin-top:12px}\n.toolbar{align-items:stretch;gap:17px;flex-direction:column;padding:16px 0}\n.filter{justify-content:space-between}\nselect{width:190px;max-width:75%;min-height:42px}\n.event{grid-template-columns:minmax(0,1fr) 126px;gap:13px 20px;padding:22px 0}\n.date{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:9px;padding:0}\n.date strong{font-size:22px;letter-spacing:-.5px}\n.date span{font-size:10px;margin:0}\n.details{grid-column:1/-1}\nh2{font-size:27px}\n.venue{margin-bottom:7px}\n.description{font-size:13px}\n.availability{grid-column:1}\n.action{grid-column:2}\nmeter{max-width:150px;margin-top:8px}\nfooter{flex-direction:column;gap:5px;padding-top:18px}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header class=\"site-header\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"16\" cy=\"16\" r=\"13\"/><circle cx=\"16\" cy=\"16\" r=\"3\"/><path d=\"M16 3v10m0 6v10M3 16h10m6 0h10M7 7l7 7m4 4 7 7M7 25l7-7m4-4 7-7\"/></svg>\nFieldwork\n</div>\n<div class=\"shop-note\">Independent bike shop · Bristol<span>Good bikes. Shared knowledge.</span></div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<p class=\"eyebrow\">In the shop &amp; around the neighbourhood</p>\n<h1 id=\"page-title\">Upcoming events</h1>\n<p>Hands-on sessions and good company, on and off the bike.</p>\n</section>\n<div class=\"toolbar\">\n<p class=\"summary\"><strong>3 events</strong> · 2 with places available<span class=\"programme\">July programme confirmed</span></p>\n<form class=\"filter\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option value=\"all\">All upcoming months</option>\n<option value=\"2026-07\" selected>July 2026</option>\n<option value=\"2026-08\">August 2026</option>\n</select>\n</form>\n</div>\n<section aria-label=\"July 2026 events\">\n<article class=\"event\" aria-labelledby=\"design-title\">\n<time class=\"date\" datetime=\"2026-07-11\"><strong>11</strong><span>Sat · Jul</span></time>\n<div class=\"details\">\n<h2 id=\"design-title\">Design workshop</h2>\n<p class=\"schedule\"><time datetime=\"2026-07-11T10:00:00+01:00\">10:00</time>–<time datetime=\"2026-07-11T12:00:00+01:00\">12:00</time> · £15 · Materials included</p>\n<p class=\"venue\">Fieldwork workshop, Bristol</p>\n<p class=\"description\">Design a better everyday bike bag. Explore fit and fixings, then make a paper prototype with our team. No experience needed.</p>\n</div>\n<div class=\"availability\">\n<span class=\"status\">4 places left</span>\n<meter min=\"0\" max=\"12\" value=\"8\" aria-label=\"8 of 12 places booked\">8 of 12</meter>\n<span class=\"capacity\">8 of 12 places booked</span>\n</div>\n<div class=\"action\"><button type=\"button\" aria-label=\"View event: Design workshop\">View event <span aria-hidden=\"true\">↗</span></button></div>\n</article>\n<article class=\"event\" aria-labelledby=\"walk-title\">\n<time class=\"date\" datetime=\"2026-07-18\"><strong>18</strong><span>Sat · Jul</span></time>\n<div class=\"details\">\n<h2 id=\"walk-title\">Community walk</h2>\n<p class=\"schedule\"><time datetime=\"2026-07-18T09:30:00+01:00\">09:30</time>–<time datetime=\"2026-07-18T11:00:00+01:00\">11:00</time> · Free · 2 km, easy pace</p>\n<p class=\"venue\">Meet outside Fieldwork, Bristol</p>\n<p class=\"description\">Explore the harbour on foot and spot better links for local bike journeys. Mostly level paths; bring comfortable shoes, not your bike.</p>\n</div>\n<div class=\"availability\">\n<span class=\"status\">12 places left</span>\n<meter min=\"0\" max=\"20\" value=\"8\" aria-label=\"8 of 20 places booked\">8 of 20</meter>\n<span class=\"capacity\">8 of 20 places booked</span>\n</div>\n<div class=\"action\"><button type=\"button\" aria-label=\"View event: Community walk\">View event <span aria-hidden=\"true\">↗</span></button></div>\n</article>\n<article class=\"event sold\" aria-labelledby=\"talk-title\">\n<time class=\"date\" datetime=\"2026-07-23\"><strong>23</strong><span>Thu · Jul</span></time>\n<div class=\"details\">\n<h2 id=\"talk-title\">Evening talk</h2>\n<p class=\"schedule\"><time datetime=\"2026-07-23T18:30:00+01:00\">18:30</time>–<time datetime=\"2026-07-23T20:00:00+01:00\">20:00</time> · £5 · Tea included</p>\n<p class=\"venue\">Fieldwork shop floor, Bristol</p>\n<p class=\"description\">Your first overnight ride, without the fancy kit. Local rider Jo Ellis shares packing tips, nearby routes and lessons from the road. Q&amp;A to follow.</p>\n</div>\n<div class=\"availability\">\n<span class=\"status\">Sold out</span>\n<meter min=\"0\" max=\"24\" value=\"24\" aria-label=\"24 of 24 places booked\">24 of 24</meter>\n<span class=\"capacity\">24 of 24 places booked</span>\n</div>\n<div class=\"action\">\n<button type=\"button\" aria-label=\"View event: Evening talk\">View event <span aria-hidden=\"true\">↗</span></button>\n<small>Waiting list available</small>\n</div>\n</article>\n</section>\n</main>\n<footer>\n<p>All times BST. Shop events have step-free access.</p>\n<p>Questions or access needs? Come and chat with us in the shop.</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-events-3","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Common. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — Common</title>\n<style>\n:root{--paper:#f7f6f0;--ink:#263b30;--muted:#61685f;--line:#d4d8cd;--panel:#ebeee4;--rust:#8b442c}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\nbutton,select{font:inherit}\n.shell{max-width:1248px;margin:auto;padding:0 48px}\n.site-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 0;border-bottom:1px solid var(--ink)}\n.brand{font-size:35px;font-weight:750;letter-spacing:-2px;line-height:1}\n.brand small{display:block;margin-top:9px;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}\n.header-note{text-align:right;font-size:12px;color:var(--muted)}\n.header-note strong{display:block;color:var(--ink);font-weight:500}\n.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:49px 0 35px}\n.eyebrow{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}\nh1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:64px;letter-spacing:-2.6px;line-height:1.06;margin:0 0 17px}\n.lead{margin:0;color:var(--muted);max-width:540px;font-size:16px}\n.filter{flex:0 0 205px}\nlabel{display:block;font-size:12px;font-weight:700;margin-bottom:7px}\nselect{width:100%;min-height:44px;padding:9px 34px 9px 12px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink)}\nselect:focus-visible,button:focus-visible{outline:3px solid #9baf7a;outline-offset:3px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 246px;gap:36px;align-items:start;padding-bottom:45px}\n.list-caption{display:flex;justify-content:space-between;gap:12px;padding:0 0 12px;border-bottom:2px solid var(--ink);font-size:11px;letter-spacing:.7px;text-transform:uppercase}\n.list-caption span:last-child{color:var(--muted)}\n.events{list-style:none;padding:0;margin:0}\n.event{display:grid;grid-template-columns:49px minmax(0,1fr) 120px;gap:18px;padding:26px 0 27px;border-bottom:1px solid var(--line)}\n.date{display:block;text-align:center;line-height:1.2;padding-top:3px}\n.date span{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase}\n.date b{display:block;font-family:Georgia,'Times New Roman',serif;font-size:34px;font-weight:400;margin:3px 0}\nh2{font-family:Georgia,'Times New Roman',serif;font-size:27px;line-height:1.15;font-weight:400;letter-spacing:-.6px;margin:0 0 9px}\n.meta{font-size:12px;line-height:1.7;margin:0 0 10px}\n.meta strong{font-weight:600}\n.description{font-size:14px;color:var(--muted);margin:0;line-height:1.55}\n.actions{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:3px}\n.availability{text-align:right;font-size:11px;line-height:1.6}\n.availability strong{display:block;font-size:12px;font-weight:600;white-space:nowrap}\n.availability strong::before{content:\"\";display:inline-block;width:6px;height:6px;background:#5c7746;border-radius:50%;margin-right:6px;vertical-align:1px}\n.availability span{color:var(--muted)}\n.availability.sold strong{color:var(--rust)}\n.availability.sold strong::before{background:var(--rust)}\nbutton{min-height:39px;padding:8px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}\nbutton:hover{background:var(--ink);color:var(--paper)}\naside{background:var(--panel);padding:22px;margin-top:0}\naside h2{font-size:24px;margin-bottom:13px}\naside p{font-size:12px;margin:0 0 16px}\naside .eyebrow{font-size:10px;margin-bottom:13px}\n.detail{border-top:1px solid #cbd1c2;padding-top:16px;margin-top:18px}\n.detail h3{font-size:12px;margin:0 0 6px}\naddress{font-style:normal;font-size:12px;line-height:1.7}\n.route{display:block;width:100%;height:auto;margin:12px 0 10px}\n.route-note{color:var(--muted);font-size:11px;margin-bottom:0}\nfooter{display:flex;justify-content:space-between;gap:18px;padding:19px 0 28px;border-top:1px solid var(--ink);font-size:11px;color:var(--muted)}\n@media(min-width:1400px){.intro{padding-top:60px}}\n@media(max-width:900px){\n.shell{padding:0 28px}.layout{grid-template-columns:minmax(0,1fr);gap:28px}\naside{display:grid;grid-template-columns:1fr 1fr;gap:24px}\naside .detail{margin:0}.walk-detail{grid-column:2;grid-row:1 / span 2}\nh1{font-size:56px}\n}\n@media(max-width:540px){\n.shell{padding:0 20px}.site-header{padding:20px 0}.brand{font-size:31px}\n.brand small{font-size:8px;letter-spacing:1.2px}.header-note{font-size:10px;max-width:116px}\n.intro{display:block;padding:29px 0 24px}.eyebrow{font-size:10px;margin-bottom:11px}\nh1{font-size:44px;letter-spacing:-1.8px;margin-bottom:13px}.lead{font-size:14px;line-height:1.55}\n.filter{display:flex;align-items:center;gap:18px;margin-top:23px}.filter label{margin:0;flex:1}\n.filter select{width:205px;font-size:14px;min-height:42px}\n.list-caption{font-size:10px}.event{grid-template-columns:38px minmax(0,1fr);gap:12px 15px;padding:23px 0}\n.date b{font-size:30px}.date span{font-size:9px}\nh2{font-size:25px}.meta{font-size:12px;margin-bottom:8px}.description{font-size:13px}\n.actions{grid-column:2;flex-direction:row;align-items:center;gap:10px;padding-top:0}\n.availability{text-align:left;font-size:10px}.availability strong{font-size:11px}\nbutton{padding:8px 12px;font-size:12px}\n.layout{padding-bottom:28px;gap:28px}\naside{display:block;padding:20px}aside .detail{margin-top:17px}\n.route{max-width:260px;margin:14px auto}\nfooter{font-size:10px;align-items:flex-start}footer span:last-child{text-align:right;max-width:145px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"site-header\">\n<div class=\"brand\">common.<small>Bikes, repairs &amp; good company</small></div>\n<div class=\"header-note\"><strong>Your independent bike shop</strong>Bristol · Est. 2018</div>\n</header>\n<main>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">In the workshop. Around the neighbourhood.</p>\n<h1 id=\"page-title\">Upcoming events</h1>\n<p class=\"lead\">Make something, stretch your legs, hear a new idea. A little time off the bike, with people who love to ride.</p>\n</div>\n<form class=\"filter\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option selected>September 2026</option>\n<option>October 2026</option>\n<option>November 2026</option>\n</select>\n</form>\n</section>\n<div class=\"layout\">\n<section aria-label=\"September events\">\n<div class=\"list-caption\"><span>September · 3 events</span><span>All times BST</span></div>\n<ol class=\"events\">\n<li>\n<article class=\"event\" aria-labelledby=\"design-title\">\n<time class=\"date\" datetime=\"2026-09-05\"><span>Sat</span><b>05</b><span>Sep</span></time>\n<div>\n<h2 id=\"design-title\">Design workshop</h2>\n<p class=\"meta\"><strong>10:00–12:00</strong> · Common workshop<br>£12 · Materials included</p>\n<p class=\"description\">Design and cut reflective decals for your frame or mudguards. Bring an idea, not your bike. All tools provided; beginners welcome.</p>\n</div>\n<div class=\"actions\">\n<div class=\"availability\"><strong>4 places left</strong><span>12 places total</span></div>\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event</button>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\" aria-labelledby=\"walk-title\">\n<time class=\"date\" datetime=\"2026-09-12\"><span>Sat</span><b>12</b><span>Sep</span></time>\n<div>\n<h2 id=\"walk-title\">Community walk</h2>\n<p class=\"meta\"><strong>09:00–10:00</strong> · Meet outside Common<br>Free · Booking required</p>\n<p class=\"description\">Leave the bikes behind for a gentle riverside loop. Swap local route tips, meet the shop team and finish back at Common for a cuppa.</p>\n</div>\n<div class=\"actions\">\n<div class=\"availability\"><strong>11 places left</strong><span>20 places total</span></div>\n<button type=\"button\" aria-label=\"View event: Community walk\">View event</button>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\" aria-labelledby=\"talk-title\">\n<time class=\"date\" datetime=\"2026-09-24\"><span>Thu</span><b>24</b><span>Sep</span></time>\n<div>\n<h2 id=\"talk-title\">Evening talk</h2>\n<p class=\"meta\"><strong>18:30–20:00</strong> · Common shop floor<br>£5 · Tea and a snack included</p>\n<p class=\"description\">Small adventures, everyday bikes. Local rider Jo Ellis shares a weekend touring kit that fits on a commuter, followed by questions.</p>\n</div>\n<div class=\"actions\">\n<div class=\"availability sold\"><strong>Sold out</strong><span>30 of 30 booked</span></div>\n<button type=\"button\" aria-label=\"View event: Evening talk\">View event</button>\n</div>\n</article>\n</li>\n</ol>\n</section>\n<aside aria-labelledby=\"details-title\">\n<div>\n<p class=\"eyebrow\">A few practical things</p>\n<h2 id=\"details-title\">Come as you are.</h2>\n<p>No club kit or cycling experience needed. Everyone’s welcome, whether you ride daily or are just getting started.</p>\n<div class=\"detail\">\n<h3>Find Common</h3>\n<address>24 Riverside Road<br>Bristol</address>\n<p class=\"route-note\">Arrive 10 minutes early. Bike stands out front; step-free entrance at the side.</p>\n</div>\n</div>\n<div class=\"detail walk-detail\">\n<h3>The community walk</h3>\n<svg class=\"route\" viewBox=\"0 0 220 108\" role=\"img\" aria-labelledby=\"route-title route-desc\">\n<title id=\"route-title\">A loop from Common to the riverside and back</title>\n<desc id=\"route-desc\">The two-and-a-half-kilometre walk starts and ends at Common, via the riverside path. This is a route diagram, not a street map.</desc>\n<path d=\"M28 72 C28 27 62 22 109 22 H180 Q199 22 199 45 V61 Q199 78 175 78 H28\" fill=\"none\" stroke=\"#7b8871\" stroke-width=\"2\" stroke-dasharray=\"4 4\"/>\n<path d=\"M104 17 l7 5 -7 5\" fill=\"none\" stroke=\"#263b30\" stroke-width=\"2\"/>\n<circle cx=\"28\" cy=\"76\" r=\"6\" fill=\"#263b30\"/>\n<circle cx=\"190\" cy=\"28\" r=\"4\" fill=\"#f7f6f0\" stroke=\"#263b30\" stroke-width=\"2\"/>\n<g fill=\"#263b30\" font-family=\"Arial, sans-serif\" font-size=\"10\">\n<text x=\"11\" y=\"100\">Common</text>\n<text x=\"136\" y=\"12\">Riverside</text>\n<text x=\"85\" y=\"58\" font-size=\"15\" font-family=\"Georgia, serif\">2.5 km</text>\n</g>\n</svg>\n<p>About 50 minutes at an easy pace, with time to stop. Mostly paved, with a short gravel section.</p>\n<p class=\"route-note\">Route diagram, not to scale. Full access and weather details are on the event page.</p>\n</div>\n</aside>\n</div>\n</main>\n<footer><span>Common · A good place to start.</span><span>Booking required for all events, including free ones.</span></footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-events-4","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Rill. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events · Rill</title>\n<style>\n:root{color-scheme:light;--ink:#253d33;--muted:#627068;--line:#d7ddd3;--paper:#f8f9f3;--green:#244b38}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton,select{font:inherit}\nbutton:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #be841e;outline-offset:4px}\nheader{background:var(--green);color:#f7f9ef}\n.header-inner{max-width:1104px;margin:auto;min-height:82px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.identity{display:flex;align-items:center;gap:19px}\n.wordmark{font-size:37px;line-height:1;font-weight:750;letter-spacing:-2px}\n.brand-note{font-size:12px;line-height:1.4;border-left:1px solid #678272;padding-left:19px;max-width:145px}\nnav a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;font-weight:600;border-bottom:2px solid #dce8b7}\nmain{max-width:1104px;margin:auto;padding:44px 28px 28px}\n.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:32px}\n.eyebrow{margin:0 0 8px;color:var(--green);font-size:11px;font-weight:750;letter-spacing:1.7px;text-transform:uppercase}\nh1{font-size:44px;line-height:1.12;letter-spacing:-1.6px;margin:0 0 14px;font-weight:700}\n.lede{margin:0;max-width:540px;color:var(--muted);font-size:16px}\n.filter{flex:0 0 224px}\n.filter label{display:block;margin-bottom:7px;font-size:13px;font-weight:650}\nselect{width:100%;min-height:46px;border:1px solid #95a396;border-radius:4px;background:#fff;color:var(--ink);padding:10px 34px 10px 12px}\n.calendar{border-top:2px solid var(--green)}\n.month-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:#eaf0e4;border-bottom:1px solid var(--line)}\n.month-heading h2{margin:0;font-size:16px;font-weight:700}\n.month-heading p{margin:0;font-size:12px;color:var(--muted)}\n.events{list-style:none;margin:0;padding:0}\n.events>li{border-bottom:1px solid var(--line)}\n.event{display:grid;grid-template-columns:66px minmax(0,1fr) 164px;column-gap:24px;padding:27px 16px}\n.date{display:flex;flex-direction:column;align-items:flex-start;padding-top:2px}\n.date .day{font-size:34px;line-height:1;font-weight:650;letter-spacing:-1px}\n.date .month{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:1px;margin-top:5px}\n.date .weekday{font-size:12px;color:var(--muted);margin-top:2px}\n.event-kind{font-size:10px;font-weight:750;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 3px}\nh3{font-size:23px;line-height:1.25;letter-spacing:-.5px;margin:0 0 9px}\n.details{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;margin:0 0 5px;font-weight:600}\n.venue{margin:0 0 9px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}\n.venue strong{font-weight:600;color:var(--ink)}\n.description{margin:0;max-width:600px;font-size:14px;line-height:1.55;color:#536359}\n.booking{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:13px}\n.availability{font-size:12px;font-weight:650;line-height:1.4}\n.status{display:flex;align-items:center;gap:6px}\n.dot{height:6px;width:6px;border-radius:50%;background:#527543;flex:none}\n.availability small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:3px}\n.sold .dot{background:#96713e}\n.sold .status{color:#785422}\nbutton{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;min-width:148px;padding:10px 13px;border:1px solid var(--green);border-radius:4px;background:var(--green);color:#fff;font-size:13px;font-weight:650;cursor:pointer}\nbutton:hover{background:#346047}\nbutton span{font-size:18px;line-height:1;font-weight:400}\n.sold button{background:transparent;color:var(--green)}\n.sold button:hover{background:#eaf0e4}\n.welcome{display:flex;justify-content:space-between;gap:30px;padding:22px 16px;color:var(--muted);font-size:13px}\n.welcome p{margin:0;max-width:590px}\n.welcome strong{display:block;color:var(--ink);font-size:14px;font-weight:650;margin-bottom:3px}\n.welcome .access{max-width:290px}\nfooter{max-width:1104px;margin:8px auto 0;padding:20px 28px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted)}\n@media(max-width:650px){\n.header-inner{min-height:72px;padding:13px 20px;gap:12px}\n.wordmark{font-size:33px}\n.identity{gap:13px}\n.brand-note{padding-left:13px;font-size:10px;max-width:116px}\nnav a{font-size:13px}\nmain{padding:28px 20px 12px}\n.intro{display:block;margin-bottom:22px}\nh1{font-size:34px;letter-spacing:-1px;margin-bottom:10px}\n.lede{font-size:14px}\n.filter{display:flex;align-items:center;gap:15px;margin-top:21px}\n.filter label{flex:none;margin:0;font-size:12px}\n.filter select{min-width:0;flex:1;font-size:13px}\n.month-heading{padding:12px 0}\n.month-heading h2{font-size:14px}\n.month-heading p{font-size:11px}\n.event{grid-template-columns:40px minmax(0,1fr);gap:16px 14px;padding:23px 0}\n.date .day{font-size:29px}\n.date .month{font-size:10px}\nh3{font-size:21px;margin-bottom:8px}\n.event-kind{font-size:9px}\n.details{font-size:12px;gap:3px 10px}\n.venue{font-size:12px;margin-bottom:8px}\n.description{font-size:13px}\n.booking{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}\nbutton{min-width:120px;padding:10px;font-size:12px;gap:10px}\n.availability{font-size:11px}\n.availability small{font-size:10px}\n.welcome{display:block;padding:20px 0;font-size:12px}\n.welcome .access{max-width:none;margin-top:12px}\nfooter{padding:18px 20px 24px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"header-inner\">\n    <div class=\"identity\">\n      <span class=\"wordmark\">Rill</span>\n      <span class=\"brand-note\">Your neighbourhood<br>food co-op</span>\n    </div>\n    <nav aria-label=\"Main navigation\"><a href=\"#events\" aria-current=\"page\">Events</a></nav>\n  </div>\n</header>\n<main id=\"events\">\n  <div class=\"intro\">\n    <div>\n      <p class=\"eyebrow\">Grow something together</p>\n      <h1>Upcoming events</h1>\n      <p class=\"lede\">Learn a skill, meet your neighbours and get closer to the food we share. Members and non-members welcome.</p>\n    </div>\n    <div class=\"filter\">\n      <label for=\"month\">Filter by month</label>\n      <select id=\"month\" name=\"month\">\n        <option selected>October 2026</option>\n        <option>November 2026</option>\n        <option>December 2026</option>\n      </select>\n    </div>\n  </div>\n  <section class=\"calendar\" aria-labelledby=\"month-title\">\n    <div class=\"month-heading\">\n      <h2 id=\"month-title\">October 2026</h2>\n      <p>3 events · All times local</p>\n    </div>\n    <ol class=\"events\">\n      <li>\n        <article class=\"event\" aria-labelledby=\"workshop-title\">\n          <time class=\"date\" datetime=\"2026-10-10\"><span class=\"day\">10</span><span class=\"month\">Oct</span><span class=\"weekday\">Sat</span></time>\n          <div>\n            <p class=\"event-kind\">Make &amp; improve</p>\n            <h3 id=\"workshop-title\">Design workshop</h3>\n            <p class=\"details\"><span>10:00–12:00</span><span>£5 · Materials included</span></p>\n            <p class=\"venue\"><strong>Venue:</strong> Rill community kitchen</p>\n            <p class=\"description\">Help shape clearer shelf labels and a friendlier refill station. Bring your ideas; no design experience needed.</p>\n          </div>\n          <div class=\"booking\">\n            <div class=\"availability\"><span class=\"status\"><span class=\"dot\"></span>6 places left</span><small>18 places in total</small></div>\n            <button type=\"button\" aria-label=\"View event: Design workshop\">View event <span aria-hidden=\"true\">→</span></button>\n          </div>\n        </article>\n      </li>\n      <li>\n        <article class=\"event\" aria-labelledby=\"walk-title\">\n          <time class=\"date\" datetime=\"2026-10-17\"><span class=\"day\">17</span><span class=\"month\">Oct</span><span class=\"weekday\">Sat</span></time>\n          <div>\n            <p class=\"event-kind\">Out in the neighbourhood</p>\n            <h3 id=\"walk-title\">Community walk</h3>\n            <p class=\"details\"><span>09:30–11:00</span><span>Free</span></p>\n            <p class=\"venue\"><strong>Meeting point:</strong> Co-op entrance beside the community noticeboard and returnable-container drop-off</p>\n            <p class=\"description\">Walk to our nearby growing plots with the volunteer team. An easy 2 km route; bring sturdy shoes and a water bottle.</p>\n          </div>\n          <div class=\"booking\">\n            <div class=\"availability\"><span class=\"status\"><span class=\"dot\"></span>12 places left</span><small>24 places in total</small></div>\n            <button type=\"button\" aria-label=\"View event: Community walk\">View event <span aria-hidden=\"true\">→</span></button>\n          </div>\n        </article>\n      </li>\n      <li>\n        <article class=\"event sold\" aria-labelledby=\"talk-title\">\n          <time class=\"date\" datetime=\"2026-10-22\"><span class=\"day\">22</span><span class=\"month\">Oct</span><span class=\"weekday\">Thu</span></time>\n          <div>\n            <p class=\"event-kind\">Food for thought</p>\n            <h3 id=\"talk-title\">Evening talk</h3>\n            <p class=\"details\"><span>18:30–20:00</span><span>Free · Tea included</span></p>\n            <p class=\"venue\"><strong>Venue:</strong> Rill upstairs meeting room</p>\n            <p class=\"description\">Meet two of our local growers for a conversation about fair food prices, seasonal eating and reducing waste. Questions welcome.</p>\n          </div>\n          <div class=\"booking\">\n            <div class=\"availability\"><span class=\"status\"><span class=\"dot\"></span>Sold out</span><small>All 40 places booked</small></div>\n            <button type=\"button\" aria-label=\"View event: Evening talk\">View event <span aria-hidden=\"true\">→</span></button>\n          </div>\n        </article>\n      </li>\n    </ol>\n  </section>\n  <aside class=\"welcome\" aria-label=\"Good to know\">\n    <p><strong>You don’t need to be a member.</strong>Our events are a good way to get to know the co-op. Come on your own or bring a neighbour.</p>\n    <p class=\"access\">Questions about access or taking part? Ask at the co-op desk before booking.</p>\n  </aside>\n</main>\n<footer><span>Rill · Neighbour-owned. Neighbour-powered.</span><span>Good food, shared.</span></footer>\n</body>\n</html>"}]}
{"id":"sft-events-5","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for North. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — North</title>\n<style>\n:root{color-scheme:light;--paper:#f4f1e9;--card:#fffdf8;--ink:#253d31;--text:#343d36;--muted:#667064;--line:#dadcd0;--soft:#e8eddf}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton,select{font:inherit}\nbutton,select,a{touch-action:manipulation}\nbutton:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #a57a37;outline-offset:4px}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1120px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:17px;color:var(--ink)}\n.wordmark{font-size:32px;line-height:1;font-weight:800;letter-spacing:-1.8px}\n.brand-description{font-size:12px;line-height:1.4;border-left:1px solid #bbc3b6;padding-left:17px}\n.header-note{margin:0;font-size:13px;color:var(--muted)}\nmain{max-width:1120px;margin:0 auto;padding:42px 32px 28px}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:34px}\n.eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}\nh1{font-size:44px;line-height:1.12;letter-spacing:-1.7px;color:var(--ink);margin:0 0 14px;font-weight:650}\n.lead{margin:0;max-width:560px;font-size:16px;color:var(--muted)}\n.filter{flex-shrink:0;width:212px}\n.filter label{display:block;font-size:13px;font-weight:650;margin-bottom:7px}\nselect{width:100%;min-height:46px;padding:10px 12px;border:1px solid #aeb6a8;border-radius:5px;color:var(--ink);background:var(--card)}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}\n.section-heading h2{font-size:17px;font-weight:650;margin:0;color:var(--ink)}\n.count{font-size:13px;color:var(--muted)}\n.events{display:grid;gap:12px}\n.event{display:grid;grid-template-columns:64px minmax(0,1fr) 172px;gap:24px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:8px}\n.date{display:flex;flex-direction:column;align-items:center;align-self:start;color:var(--ink);padding:7px 0 9px;border-top:3px solid var(--ink);border-bottom:1px solid var(--line)}\n.date .month{font-size:10px;font-weight:750;letter-spacing:1.5px}\n.date .day{font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-1px}\n.date .weekday{font-size:11px;color:var(--muted)}\n.event h3{margin:0 0 7px;font-size:23px;line-height:1.2;letter-spacing:-.5px;color:var(--ink);font-weight:650}\n.metadata{font-size:13px;font-weight:550;color:var(--text);margin:0 0 9px}\n.metadata span{display:inline-block}\n.separator{padding:0 6px;color:#89917f}\n.description{font-size:14px;line-height:1.55;margin:0;color:var(--muted);max-width:580px}\n.booking{display:flex;flex-direction:column;align-items:flex-end;justify-content:center}\n.availability{text-align:right;margin-bottom:13px}\n.badge{display:inline-block;padding:3px 9px;border-radius:4px;background:var(--soft);color:var(--ink);font-size:12px;font-weight:700}\n.badge.sold{background:#ece7de;color:#64594a}\n.capacity{display:block;margin-top:4px;font-size:11px;color:var(--muted)}\n.action{text-align:right}\nbutton{border:1px solid var(--ink);background:var(--ink);color:#fffdf8;border-radius:5px;min-height:42px;padding:9px 15px;font-size:13px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;gap:23px}\nbutton:hover{background:#354f40}\nbutton svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}\n.hint{display:block;font-size:10px;color:var(--muted);margin-top:5px}\n.bottom-note{display:flex;justify-content:space-between;gap:32px;padding-top:21px;font-size:12px;color:var(--muted)}\n.bottom-note p{margin:0}\n.welcome{max-width:510px}\n.welcome strong{color:var(--ink);font-weight:650}\n.update{font-size:11px;max-width:270px;text-align:right}\n.update time{color:var(--text)}\n@media(max-width:700px){\n.header-inner{padding:19px 20px;gap:12px}\n.wordmark{font-size:30px}\n.brand{gap:13px}\n.brand-description{font-size:11px;padding-left:13px}\n.header-note{display:none}\nmain{padding:29px 20px 24px}\n.intro{display:block;margin-bottom:25px}\nh1{font-size:36px;letter-spacing:-1.2px}\n.eyebrow{font-size:10px;margin-bottom:9px}\n.lead{font-size:15px;line-height:1.55}\n.filter{margin-top:23px;width:100%}\n.filter label{font-size:12px}\nselect{min-height:46px}\n.section-heading h2{font-size:16px}\n.count{font-size:12px}\n.event{grid-template-columns:43px minmax(0,1fr);gap:15px;padding:19px 17px}\n.date{padding-top:6px}\n.date .day{font-size:29px}\n.date .month{font-size:9px;letter-spacing:1px}\n.date .weekday{font-size:10px}\n.event h3{font-size:21px;margin-bottom:8px}\n.metadata{font-size:12px;line-height:1.6;margin-bottom:8px}\n.metadata span{display:block}\n.metadata .separator{display:none}\n.description{font-size:13px;line-height:1.6}\n.booking{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:15px}\n.availability{text-align:left;margin:0}\n.capacity{font-size:11px}\nbutton{min-height:42px;gap:17px;padding:9px 13px}\n.hint{font-size:10px}\n.bottom-note{display:block;padding-top:22px}\n.update{margin-top:15px!important;max-width:none;text-align:left}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<span class=\"wordmark\">North.</span>\n<span class=\"brand-description\">Your community<br>food co-op</span>\n</div>\n<p class=\"header-note\">Good food. Shared locally.</p>\n</div>\n</header>\n<main>\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Around our table</p>\n<h1>Upcoming events</h1>\n<p class=\"lead\">Meet your neighbours, share useful skills and help shape the co-op. There’s a place for everyone.</p>\n</div>\n<div class=\"filter\">\n<label for=\"month\">Filter by month</label>\n<select id=\"month\" name=\"month\">\n<option value=\"2026-09\" selected>September 2026</option>\n<option value=\"2026-10\">October 2026</option>\n<option value=\"2026-11\">November 2026</option>\n</select>\n</div>\n</div>\n\n<section aria-labelledby=\"month-heading\">\n<div class=\"section-heading\">\n<h2 id=\"month-heading\">September 2026</h2>\n<span class=\"count\">3 events</span>\n</div>\n<div class=\"events\">\n<article class=\"event\" aria-labelledby=\"design-title\">\n<time class=\"date\" datetime=\"2026-09-12\"><span class=\"month\">SEP</span><span class=\"day\">12</span><span class=\"weekday\">Sat</span></time>\n<div>\n<h3 id=\"design-title\">Design workshop</h3>\n<p class=\"metadata\"><span><time datetime=\"2026-09-12T10:00\">10:00</time>–<time datetime=\"2026-09-12T12:00\">12:00</time></span><span class=\"separator\" aria-hidden=\"true\">·</span><span>Co-op kitchen, 14 Mill Lane</span></p>\n<p class=\"description\">Help make our shop easier to navigate. Sketch clearer shelf signs and seasonal produce displays over tea. No design experience needed.</p>\n</div>\n<div class=\"booking\">\n<div class=\"availability\"><span class=\"badge\">8 places left</span><span class=\"capacity\">16 places · £5 for materials</span></div>\n<div class=\"action\">\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M3 10h13M10 4l6 6-6 6\"/></svg></button>\n<span class=\"hint\">Booking &amp; access details</span>\n</div>\n</div>\n</article>\n\n<article class=\"event\" aria-labelledby=\"walk-title\">\n<time class=\"date\" datetime=\"2026-09-19\"><span class=\"month\">SEP</span><span class=\"day\">19</span><span class=\"weekday\">Sat</span></time>\n<div>\n<h3 id=\"walk-title\">Community walk</h3>\n<p class=\"metadata\"><span><time datetime=\"2026-09-19T10:30\">10:30</time>–<time datetime=\"2026-09-19T12:00\">12:00</time></span><span class=\"separator\" aria-hidden=\"true\">·</span><span>Meet outside the co-op, 14 Mill Lane</span></p>\n<p class=\"description\">Follow a gentle 2 km route to Riverside Gardens and meet the growers behind our greens. Bring comfy shoes; children are welcome.</p>\n</div>\n<div class=\"booking\">\n<div class=\"availability\"><span class=\"badge\">14 places left</span><span class=\"capacity\">24 places · Free</span></div>\n<div class=\"action\">\n<button type=\"button\" aria-label=\"View event: Community walk\">View event <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M3 10h13M10 4l6 6-6 6\"/></svg></button>\n<span class=\"hint\">Route &amp; booking details</span>\n</div>\n</div>\n</article>\n\n<article class=\"event\" aria-labelledby=\"talk-title\">\n<time class=\"date\" datetime=\"2026-09-24\"><span class=\"month\">SEP</span><span class=\"day\">24</span><span class=\"weekday\">Thu</span></time>\n<div>\n<h3 id=\"talk-title\">Evening talk</h3>\n<p class=\"metadata\"><span><time datetime=\"2026-09-24T18:30\">18:30</time>–<time datetime=\"2026-09-24T20:00\">20:00</time></span><span class=\"separator\" aria-hidden=\"true\">·</span><span>Co-op kitchen, 14 Mill Lane</span></p>\n<p class=\"description\">Less waste, more supper. Local cook Maya Patel shares ways to use the whole harvest, followed by questions and a taste of seasonal soup.</p>\n</div>\n<div class=\"booking\">\n<div class=\"availability\"><span class=\"badge sold\">Sold out</span><span class=\"capacity\">32 of 32 places booked · Free</span></div>\n<div class=\"action\">\n<button type=\"button\" aria-label=\"View event: Evening talk, sold out\">View event <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M3 10h13M10 4l6 6-6 6\"/></svg></button>\n<span class=\"hint\">Event &amp; access details</span>\n</div>\n</div>\n</article>\n</div>\n</section>\n\n<footer class=\"bottom-note\">\n<p class=\"welcome\"><strong>Not a member? You’re welcome too.</strong><br>Our events are open to the whole neighbourhood. Check each event for access information and what to bring.</p>\n<p class=\"update\">Updated <time datetime=\"2026-09-02\">2 September</time><br>4 extra workshop places added.</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-events-6","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Alder. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events · Alder</title>\n<style>\n:root{--bg:#f2f4f7;--paper:#fff;--ink:#242d3b;--muted:#616d7d;--line:#dce1e8;--accent:#3158bd}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,select{font:inherit}\nbutton:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}\nheader{background:var(--paper);border-bottom:1px solid var(--line)}\n.header-inner{max-width:1160px;margin:auto;padding:21px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:11px}\n.brand svg{color:var(--accent);flex-shrink:0}\n.wordmark{font-size:28px;letter-spacing:-1.1px;font-weight:750;line-height:1}\n.brand-note{border-left:1px solid var(--line);margin-left:10px;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.4}\n.header-note{font-size:13px;color:var(--muted)}\nmain{max-width:1160px;margin:auto;padding:39px 28px 32px}\n.eyebrow{margin:0 0 7px;font-size:11px;font-weight:750;letter-spacing:1.7px;color:var(--accent);text-transform:uppercase}\nh1{font-size:40px;line-height:1.15;letter-spacing:-1.4px;margin:0 0 12px;font-weight:700}\n.intro{margin:0;color:var(--muted);font-size:16px;max-width:650px}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:29px 0 18px}\n.summary{display:flex;align-items:center;gap:13px;flex-wrap:wrap}\n.count{font-size:14px;font-weight:650}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}\n.status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#7e8997}\n.filter{display:flex;align-items:center;gap:10px}\n.filter label{font-size:13px;font-weight:600}\nselect{color:var(--ink);background:var(--paper);border:1px solid #bdc6d2;border-radius:6px;padding:9px 34px 9px 12px;min-height:42px;max-width:100%}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 246px;gap:24px;align-items:start}\n.events{display:grid;gap:13px;list-style:none;margin:0;padding:0}\n.event{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:23px;display:grid;grid-template-columns:54px minmax(0,1fr) 112px;gap:19px;align-items:start}\n.date{display:flex;flex-direction:column;text-align:center;border-top:3px solid var(--accent);padding-top:8px;font-variant-numeric:tabular-nums}\n.date .day{font-size:11px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:1px}\n.date .number{font-size:30px;font-weight:650;line-height:1.2;letter-spacing:-1px}\n.date .month{font-size:11px;font-weight:650;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}\nh2{font-size:21px;letter-spacing:-.5px;line-height:1.3;margin:0 0 8px;font-weight:680}\n.details{font-size:13px;line-height:1.65;margin:0}\n.venue{color:var(--muted);display:block}\n.description{font-size:14px;color:var(--muted);margin:10px 0 0;line-height:1.5}\n.booking{display:flex;flex-direction:column;align-items:stretch;gap:11px;padding-top:3px}\n.availability{font-size:12px;font-weight:600;color:var(--accent);text-align:center;line-height:1.5}\n.availability small{display:block;color:var(--muted);font-size:11px;font-weight:400}\n.sold-out{align-self:center;background:#eef0f3;border:1px solid #e1e5eb;color:#596575;padding:3px 11px;border-radius:4px;font-size:12px;font-weight:600}\nbutton{border:1px solid var(--accent);border-radius:5px;background:var(--accent);color:white;font-size:13px;font-weight:650;padding:10px 12px;min-height:41px;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#25479f}\n.booking-note{margin:0;text-align:center;font-size:11px;color:var(--muted)}\n.secondary{background:#e9edf2;border:1px solid var(--line);border-radius:9px;padding:22px}\n.secondary h2{font-size:17px;letter-spacing:-.2px;margin-bottom:24px}\n.empty-icon{color:#8290a3;display:block;margin-bottom:12px}\n.secondary h3{font-size:14px;line-height:1.4;margin:0 0 8px;font-weight:650}\n.secondary p{font-size:13px;color:var(--muted);line-height:1.65;margin:0}\n.secondary .idea{border-top:1px solid #d3dae4;margin-top:24px;padding-top:18px}\n.idea strong{display:block;color:var(--ink);font-size:13px;margin-bottom:5px;font-weight:600}\nfooter{margin-top:20px;color:var(--muted);font-size:12px}\n@media(min-width:1100px){.event{min-height:181px}}\n@media(max-width:950px){.layout{grid-template-columns:minmax(0,1fr)}.secondary{display:grid;grid-template-columns:160px minmax(0,1fr) minmax(0,1fr);gap:22px}.secondary h2{margin:0}.empty-icon{display:none}.secondary .idea{margin:0;border-top:0;border-left:1px solid #d3dae4;padding:0 0 0 22px}}\n@media(max-width:600px){.header-inner{padding:18px 20px}.brand-note{margin-left:3px;padding-left:13px;font-size:11px;max-width:122px}.header-note{display:none}.wordmark{font-size:25px}.brand svg{width:27px;height:30px}main{padding:28px 20px}h1{font-size:32px;letter-spacing:-1px}.intro{font-size:14px;line-height:1.6}.toolbar{align-items:flex-start;gap:14px;margin-top:24px}.summary{display:block;padding-top:1px}.count{display:block}.status{margin-top:5px;font-size:11px}.filter{display:block;flex-shrink:0}.filter label{display:block;font-size:11px;margin-bottom:4px}select{font-size:12px;min-height:39px;padding:8px 24px 8px 9px;width:147px}.event{padding:18px 16px;grid-template-columns:43px minmax(0,1fr);gap:15px}.date .number{font-size:28px}h2{font-size:20px}.description{font-size:13px;margin-top:8px}.booking{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) 108px;align-items:center;gap:8px;padding-top:0}.availability{text-align:left;font-size:12px}.sold-out{justify-self:start}.booking-note{grid-column:1/-1;text-align:left}.secondary{display:block;padding:20px;margin-top:4px}.secondary h2{margin-bottom:16px}.secondary .idea{margin-top:18px;border-left:0;border-top:1px solid #d3dae4;padding:15px 0 0}footer{font-size:11px;line-height:1.6}}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg width=\"32\" height=\"36\" viewBox=\"0 0 32 36\" fill=\"none\" aria-hidden=\"true\"><path d=\"M16 32V15M16 23C5 23 3 15 3 7c9 0 13 6 13 16ZM16 16C16 7 21 3 29 3c0 9-4 13-13 13Z\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n<span class=\"wordmark\">Alder</span>\n<span class=\"brand-note\">Your community<br>food co-op</span>\n</div>\n<span class=\"header-note\">Member-owned. Everyone welcome.</span>\n</div>\n</header>\n<main>\n<div class=\"eyebrow\">Gather, learn &amp; share</div>\n<h1>Upcoming events</h1>\n<p class=\"intro\">Good food brings us together. Make something, meet your neighbours and get to know your co-op.</p>\n\n<div class=\"toolbar\">\n<div class=\"summary\">\n<span class=\"count\">3 events in October</span>\n<span class=\"status\">Schedule confirmed</span>\n</div>\n<div class=\"filter\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option value=\"2026-10\" selected>October 2026</option>\n<option value=\"2026-11\">November 2026</option>\n<option value=\"2026-12\">December 2026</option>\n</select>\n</div>\n</div>\n\n<div class=\"layout\">\n<section aria-label=\"October 2026 events\">\n<ul class=\"events\">\n<li>\n<article class=\"event\">\n<time class=\"date\" datetime=\"2026-10-10\" aria-label=\"Saturday, 10 October 2026\"><span class=\"day\">Sat</span><span class=\"number\">10</span><span class=\"month\">Oct</span></time>\n<div>\n<h2>Design workshop</h2>\n<p class=\"details\"><time datetime=\"2026-10-10T10:00\">10:00 am</time> – <time datetime=\"2026-10-10T12:00\">12:00 pm</time><span class=\"venue\">Workshop room · Alder Co-op</span></p>\n<p class=\"description\">Help shape our refill corner. Sketch clearer shelf signs and share ideas over tea. No design experience needed.</p>\n</div>\n<div class=\"booking\">\n<div class=\"availability\">8 places left<small>16 places total · Free</small></div>\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event</button>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\">\n<time class=\"date\" datetime=\"2026-10-18\" aria-label=\"Sunday, 18 October 2026\"><span class=\"day\">Sun</span><span class=\"number\">18</span><span class=\"month\">Oct</span></time>\n<div>\n<h2>Community walk</h2>\n<p class=\"details\"><time datetime=\"2026-10-18T09:30\">9:30 am</time> – <time datetime=\"2026-10-18T11:00\">11:00 am</time><span class=\"venue\">Meet at the Alder Co-op entrance</span></p>\n<p class=\"description\">Take a gentle 2 km loop to our neighbourhood growing spaces. Step-free route; bring a water bottle and weather-ready layers.</p>\n</div>\n<div class=\"booking\">\n<div class=\"availability\">12 places left<small>24 places total · Free</small></div>\n<button type=\"button\" aria-label=\"View event: Community walk\">View event</button>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\">\n<time class=\"date\" datetime=\"2026-10-22\" aria-label=\"Thursday, 22 October 2026\"><span class=\"day\">Thu</span><span class=\"number\">22</span><span class=\"month\">Oct</span></time>\n<div>\n<h2>Evening talk</h2>\n<p class=\"details\"><time datetime=\"2026-10-22T18:00\">6:00 pm</time> – <time datetime=\"2026-10-22T19:30\">7:30 pm</time><span class=\"venue\">Community room · Alder Co-op</span></p>\n<p class=\"description\">Meet two local growers to explore seasonal eating, fair prices and healthier soil. Includes time for your questions.</p>\n</div>\n<div class=\"booking\">\n<span class=\"sold-out\">Sold out</span>\n<button type=\"button\" aria-label=\"View event: Evening talk\">View event</button>\n<p class=\"booking-note\">All 40 places filled</p>\n</div>\n</article>\n</li>\n</ul>\n</section>\n\n<aside class=\"secondary\" aria-labelledby=\"volunteer-heading\">\n<h2 id=\"volunteer-heading\">Volunteer sessions</h2>\n<div>\n<svg class=\"empty-icon\" width=\"31\" height=\"31\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><rect x=\"5\" y=\"7\" width=\"22\" height=\"21\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M10 4v6M22 4v6M5 14h22M12 21h8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n<h3>No sessions scheduled</h3>\n<p>Our next packing and garden shifts are still being planned. Dates will appear here once the volunteer team confirms them.</p>\n</div>\n<div class=\"idea\">\n<strong>Have an event idea?</strong>\n<p>Speak to the team at the co-op desk. We'd love to hear what you'd like to learn or share.</p>\n</div>\n</aside>\n</div>\n<footer>All times local. Events are open to members and neighbours; you don't need to be a member to join.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-events-7","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Morrow. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events · Morrow</title>\n<style>\n:root{--paper:#f5f4eb;--ink:#254b3c;--muted:#5e7064;--line:#cbd1c3;--wash:#e7eadf}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;-webkit-font-smoothing:antialiased}\n.wrap{width:min(1120px,calc(100% - 96px));margin:auto}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:19px}\n.wordmark{font:600 36px/1 Georgia,serif;letter-spacing:-1.7px}\n.brand-note{border-left:1px solid var(--line);padding-left:19px;font-size:11px;line-height:1.5;letter-spacing:1.4px;text-transform:uppercase}\n.header-note{font-size:13px;color:var(--muted);margin:0}\n.intro{padding:49px 0 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 14px}\nh1{font-size:clamp(38px,5vw,62px);line-height:1.04;letter-spacing:-2.8px;font-weight:550;margin:0 0 17px}\n.lead{max-width:565px;margin:0;font-size:17px;line-height:1.55;color:var(--muted)}\n.filter{flex:0 0 205px;padding-bottom:3px}\nlabel{display:block;font-size:12px;font-weight:650;margin-bottom:8px}\nselect{width:100%;min-height:46px;padding:10px 34px 10px 13px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:inherit;font-size:14px}\nselect:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}\n.list-heading{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--ink);font-size:12px}\n.list-heading p{margin:0}\n.list-heading p:last-child{color:var(--muted)}\n.event{display:grid;grid-template-columns:66px minmax(0,1fr) 160px;gap:28px;padding:27px 0 28px;border-bottom:1px solid var(--line)}\n.date{padding-top:2px;text-align:left}\n.month{display:block;text-transform:uppercase;letter-spacing:1.3px;font-size:11px;font-weight:650}\n.day{display:block;font-size:38px;letter-spacing:-1.6px;line-height:1.18;font-weight:500;font-variant-numeric:tabular-nums}\n.weekday{display:block;font-size:12px;color:var(--muted);margin-top:3px}\nh2{font-size:26px;line-height:1.2;letter-spacing:-.7px;font-weight:600;margin:0 0 10px}\n.details{font-size:13px;line-height:1.6;margin:0;color:var(--muted)}\n.details time{font-weight:650;color:var(--ink)}\n.venue{display:block}\n.description{font-size:15px;line-height:1.55;max-width:59ch;margin:10px 0 0}\n.event-actions{padding-top:3px;display:flex;flex-direction:column;align-items:flex-start;gap:21px}\n.availability{font-size:13px;line-height:1.45}\n.availability strong{display:flex;align-items:center;gap:7px;font-weight:650}\n.dot{width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}\n.sold .dot{background:transparent;border:1px solid var(--ink)}\n.availability small{display:block;font-size:12px;color:var(--muted);margin-top:3px}\nbutton{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:43px;min-width:143px;padding:10px 13px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:600 13px/1.3 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;cursor:pointer}\nbutton:hover{background:var(--wash)}\n.arrow{font-size:18px;line-height:1;font-weight:400}\n.route{display:flex;align-items:center;gap:11px;margin-top:12px;color:var(--muted);font-size:12px;line-height:1.4}\n.route svg{width:57px;height:28px;flex:none;color:var(--ink)}\n.visit-note{display:flex;gap:30px;align-items:baseline;padding:25px 0 33px}\n.visit-note h2{font-size:14px;letter-spacing:0;white-space:nowrap;margin:0}\n.visit-note p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}\n@media(min-width:1100px){.description{max-width:62ch}}\n@media(max-width:700px){\n.wrap{width:calc(100% - 40px)}\n.header-inner{min-height:76px;gap:12px}\n.wordmark{font-size:31px}\n.brand{gap:13px}\n.brand-note{padding-left:13px;font-size:9px;letter-spacing:1px}\n.header-note{display:none}\n.intro{display:block;padding:32px 0 23px}\n.eyebrow{font-size:10px;margin-bottom:13px}\nh1{font-size:41px;letter-spacing:-1.9px;line-height:1.08;margin-bottom:14px}\n.lead{font-size:15px;line-height:1.55}\n.filter{display:flex;align-items:center;gap:17px;margin-top:23px;padding:0}\nlabel{margin:0;flex:none}\nselect{min-width:0;flex:1;min-height:44px}\n.list-heading{font-size:11px;padding:12px 0}\n.event{grid-template-columns:43px minmax(0,1fr);column-gap:17px;row-gap:17px;padding:23px 0}\n.day{font-size:32px;letter-spacing:-1px}\n.month{font-size:10px}\n.weekday{font-size:11px}\nh2{font-size:23px;letter-spacing:-.6px;margin-bottom:9px}\n.details{font-size:12px;line-height:1.65}\n.description{font-size:14px;line-height:1.55;margin-top:9px}\n.event-actions{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:0}\n.availability{font-size:12px}\n.availability small{font-size:11px}\nbutton{min-width:113px;min-height:42px;gap:8px;padding:9px 10px;font-size:12px}\n.route{font-size:11px;gap:8px;margin-top:11px}\n.route svg{width:45px}\n.visit-note{display:block;padding:24px 0 30px}\n.visit-note h2{margin-bottom:7px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n  <div class=\"wrap header-inner\">\n    <div class=\"brand\" aria-label=\"Morrow food co-op\">\n      <span class=\"wordmark\">Morrow</span>\n      <span class=\"brand-note\">Community<br>food co-op</span>\n    </div>\n    <p class=\"header-note\">Owned by members. Open to everyone.</p>\n  </div>\n</header>\n\n<main class=\"wrap\">\n  <section class=\"intro\" aria-labelledby=\"page-title\">\n    <div>\n      <p class=\"eyebrow\">Around the co-op</p>\n      <h1 id=\"page-title\">Upcoming events</h1>\n      <p class=\"lead\">Make something useful, get outside, or pull up a chair. Small gatherings rooted in good food and our neighbourhood.</p>\n    </div>\n    <div class=\"filter\">\n      <label for=\"month\">Month</label>\n      <select id=\"month\" name=\"month\">\n        <option value=\"2026-06\" selected>June 2026</option>\n        <option value=\"2026-07\">July 2026</option>\n        <option value=\"2026-08\">August 2026</option>\n      </select>\n    </div>\n  </section>\n\n  <section aria-label=\"June 2026 events\">\n    <div class=\"list-heading\">\n      <p>June 2026 <span aria-hidden=\"true\">/</span> 3 events</p>\n      <p>Members &amp; neighbours welcome</p>\n    </div>\n\n    <article class=\"event\" aria-labelledby=\"design-title\">\n      <time class=\"date\" datetime=\"2026-06-06\" aria-label=\"Saturday, 6 June 2026\">\n        <span class=\"month\">Jun</span><span class=\"day\">06</span><span class=\"weekday\">Sat</span>\n      </time>\n      <div>\n        <h2 id=\"design-title\">Design workshop</h2>\n        <p class=\"details\">\n          <time datetime=\"2026-06-06T10:00\">10:00–12:00</time> · Free, materials included\n          <span class=\"venue\">Upstairs making room, Morrow Food Co-op</span>\n        </p>\n        <p class=\"description\">Help shape clearer shelf signs for our refill pantry. Bring ideas, not experience; we’ll supply the materials.</p>\n      </div>\n      <div class=\"event-actions\">\n        <div class=\"availability\">\n          <strong><span class=\"dot\" aria-hidden=\"true\"></span>8 places left</strong>\n          <small>20 places in total</small>\n        </div>\n        <button type=\"button\" aria-label=\"View event: Design workshop\">View event <span class=\"arrow\" aria-hidden=\"true\">↗</span></button>\n      </div>\n    </article>\n\n    <article class=\"event\" aria-labelledby=\"walk-title\">\n      <time class=\"date\" datetime=\"2026-06-14\" aria-label=\"Sunday, 14 June 2026\">\n        <span class=\"month\">Jun</span><span class=\"day\">14</span><span class=\"weekday\">Sun</span>\n      </time>\n      <div>\n        <h2 id=\"walk-title\">Community walk</h2>\n        <p class=\"details\">\n          <time datetime=\"2026-06-14T09:00\">09:00–10:30</time> · Free\n          <span class=\"venue\">Meet at Morrow’s main entrance</span>\n        </p>\n        <p class=\"description\">Meet your neighbours on a gentle walk to Riverside Community Garden, with a stop to hear what’s growing.</p>\n        <div class=\"route\">\n          <svg viewBox=\"0 0 57 28\" role=\"img\" aria-label=\"Loop route returning to the co-op\">\n            <path d=\"M8 20C-2 3 23 0 30 8S59 4 51 19C45 30 22 23 8 20Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-dasharray=\"3 2\"/>\n            <circle cx=\"8\" cy=\"20\" r=\"3.5\" fill=\"currentColor\"/>\n            <path d=\"m28 5 3 4-5 1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/>\n          </svg>\n          <span>2.4 km loop · mostly level · back at the co-op</span>\n        </div>\n      </div>\n      <div class=\"event-actions\">\n        <div class=\"availability\">\n          <strong><span class=\"dot\" aria-hidden=\"true\"></span>12 places left</strong>\n          <small>25 places in total</small>\n        </div>\n        <button type=\"button\" aria-label=\"View event: Community walk\">View event <span class=\"arrow\" aria-hidden=\"true\">↗</span></button>\n      </div>\n    </article>\n\n    <article class=\"event sold\" aria-labelledby=\"talk-title\">\n      <time class=\"date\" datetime=\"2026-06-18\" aria-label=\"Thursday, 18 June 2026\">\n        <span class=\"month\">Jun</span><span class=\"day\">18</span><span class=\"weekday\">Thu</span>\n      </time>\n      <div>\n        <h2 id=\"talk-title\">Evening talk</h2>\n        <p class=\"details\">\n          <time datetime=\"2026-06-18T18:00\">18:00–19:30</time> · Pay what you can\n          <span class=\"venue\">The long table, Morrow Food Co-op</span>\n        </p>\n        <p class=\"description\">Who gets to grow our food? Local growers share practical ways to build a fairer food system, followed by questions and a pot of tea.</p>\n      </div>\n      <div class=\"event-actions\">\n        <div class=\"availability\">\n          <strong><span class=\"dot\" aria-hidden=\"true\"></span>Sold out</strong>\n          <small>All 30 places booked</small>\n        </div>\n        <button type=\"button\" aria-label=\"View event: Evening talk\">View event <span class=\"arrow\" aria-hidden=\"true\">↗</span></button>\n      </div>\n    </article>\n  </section>\n\n  <aside class=\"visit-note\" aria-labelledby=\"visit-title\">\n    <h2 id=\"visit-title\">A little planning goes a long way.</h2>\n    <p>Our shop is step-free; the making room is upstairs. Ask our shop team about access or bringing children.</p>\n  </aside>\n</main>\n</body>\n</html>"}]}
{"id":"sft-events-8","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Fieldwork. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — Fieldwork</title>\n<style>\n:root{--paper:#f7f6f1;--ink:#252d28;--muted:#61685f;--line:#d8dcd1;--green:#354c3d;--wash:#eeefe7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\n.wrap{max-width:1144px;margin:auto;padding:0 36px}\n.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}\n.brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:700;letter-spacing:-1px}\n.mark{width:24px;height:27px;border:1.5px solid var(--green);position:relative}\n.mark:after{content:\"\";position:absolute;inset:6px -6px -6px 6px;border:1.5px solid var(--green);background:var(--paper)}\n.practice{font-size:12px;color:var(--muted)}\nmain{padding-top:35px}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:27px}\n.eyebrow{margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green)}\nh1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:46px;line-height:1.1;letter-spacing:-1.6px;margin:0 0 13px}\n.intro-copy{max-width:585px;margin:0;color:var(--muted);font-size:14px}\n.filter{flex:0 0 210px}\nlabel{display:block;font-size:12px;font-weight:700;margin-bottom:6px}\nselect{width:100%;min-height:43px;padding:9px 35px 9px 12px;border:1px solid #aeb6a9;border-radius:0;background:var(--paper);color:var(--ink);font:inherit;font-size:14px}\n.summary{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-top:1px solid var(--ink);font-size:12px;color:var(--muted)}\n.summary strong{color:var(--ink);font-weight:500}\n.events{border-bottom:1px solid var(--line)}\n.event{padding:23px 0;border-top:1px solid var(--line)}\n.event-top{display:flex;align-items:center;justify-content:space-between;gap:24px}\n.event-title{min-width:0}\n.event .eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:4px}\nh2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:29px;line-height:1.2;margin:0;letter-spacing:-.5px}\nbutton{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;flex-shrink:0;min-height:42px;min-width:140px;padding:10px 15px;border:1px solid var(--green);border-radius:0;background:var(--green);color:white;font:inherit;font-size:13px;cursor:pointer}\nbutton span{font-size:18px;line-height:1}\nbutton:hover{background:#273c2e}\nbutton:focus-visible,select:focus-visible{outline:3px solid #9cae73;outline-offset:3px}\n.event.sold button{background:transparent;color:var(--green)}\n.event.sold button:hover{background:var(--wash)}\n.description{font-size:14px;color:var(--muted);margin:9px 0 16px;max-width:760px}\n.details{display:grid;grid-template-columns:1.05fr 1.4fr .8fr;background:var(--wash);margin:0;padding:12px 16px;gap:20px}\n.details>div{min-width:0}\ndt{font-size:10px;line-height:1.4;color:var(--muted);margin-bottom:4px;font-weight:500}\ndd{margin:0;font-size:12px;line-height:1.6}\ndd time{font-weight:700}\n.time{font-weight:400;white-space:nowrap}\n.place{font-weight:700}\n.status{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--green)}\n.status:before{content:\"\";width:5px;height:5px;flex-shrink:0;border-radius:50%;background:#5b7546}\n.sold .status{color:#795c42}\n.sold .status:before{background:#95734f}\n.minor{display:block;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:28px;padding:21px 0 28px;font-size:11px;color:var(--muted)}\nfooter p{margin:0}\nfooter strong{font-weight:500;color:var(--ink)}\n@media(min-width:850px){.details>div+div{border-left:1px solid var(--line);padding-left:20px}}\n@media(max-width:600px){\n.wrap{padding:0 20px}\n.site-header{height:72px;gap:20px}\n.brand{font-size:23px}\n.practice{max-width:115px;text-align:right;font-size:10px;line-height:1.5}\nmain{padding-top:26px}\n.intro{display:block;margin-bottom:18px}\nh1{font-size:36px;letter-spacing:-1px;margin-bottom:12px}\n.intro-copy{font-size:13px;line-height:1.55}\n.filter{margin-top:20px;display:flex;align-items:center;gap:16px}\nlabel{margin:0;font-size:12px}\nselect{flex:1;min-width:0;width:auto;min-height:40px}\n.summary{font-size:11px}\n.event{padding:20px 0}\n.event-top{gap:12px}\nh2{font-size:23px;letter-spacing:-.6px}\n.event .eyebrow{font-size:9px;letter-spacing:.7px}\nbutton{min-width:104px;padding:9px 10px;gap:9px;font-size:11px;min-height:39px}\nbutton span{font-size:15px}\n.description{font-size:12px;margin:11px 0 13px;line-height:1.6}\n.details{grid-template-columns:1fr 1fr;gap:12px 16px;padding:12px}\n.details>div:nth-child(2){grid-column:1/-1;grid-row:2;border-top:1px solid var(--line);padding-top:10px}\n.details>div:nth-child(3){grid-column:2;grid-row:1}\ndt{font-size:10px}\ndd{font-size:11px}\n.minor{font-size:11px}\nfooter{display:block;font-size:10px;padding-top:18px}\nfooter p+p{margin-top:8px}\n}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n<header class=\"site-header\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\"></span>Fieldwork</div>\n<div class=\"practice\">Architecture &amp; shared places</div>\n</header>\n<main id=\"events\">\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Public programme / 2026</p>\n<h1>Upcoming events</h1>\n<p class=\"intro-copy\">A closer look at the places we share. Join our practice for hands-on workshops, neighbourhood walks and conversations about architecture.</p>\n</div>\n<form class=\"filter\" aria-label=\"Event month filter\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option value=\"all\">All upcoming</option>\n<option value=\"2026-09\">September 2026</option>\n<option value=\"2026-10\">October 2026</option>\n</select>\n</form>\n</div>\n<div class=\"summary\"><strong>3 events · September—October</strong><span>All times BST</span></div>\n<section class=\"events\" aria-label=\"Event listings\">\n<article class=\"event\">\n<div class=\"event-top\">\n<div class=\"event-title\">\n<p class=\"eyebrow\">01 / Next gathering</p>\n<h2>Design workshop</h2>\n</div>\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event <span aria-hidden=\"true\">↗</span></button>\n</div>\n<p class=\"description\">Explore how a small public space could work harder for its neighbourhood. Sketch, build quick models and test ideas with our architects. No design experience needed.</p>\n<dl class=\"details\">\n<div><dt>Date &amp; time</dt><dd><time datetime=\"2026-09-12\">Sat 12 September</time><span class=\"minor time\">10:00–13:00</span></dd></div>\n<div><dt>Venue</dt><dd><span class=\"place\">Fieldwork Studio</span><span class=\"minor\">24 Ashwin Street, London E8</span></dd></div>\n<div><dt>Availability</dt><dd><span class=\"status\">6 places left</span><span class=\"minor\">18 places · £15, materials included</span></dd></div>\n</dl>\n</article>\n<article class=\"event\">\n<div class=\"event-top\">\n<div class=\"event-title\">\n<p class=\"eyebrow\">02 / On foot</p>\n<h2>Community walk</h2>\n</div>\n<button type=\"button\" aria-label=\"View event: Community walk\">View event <span aria-hidden=\"true\">↗</span></button>\n</div>\n<p class=\"description\">Read the neighbourhood through its thresholds, courtyards and everyday routes. Share what works, what is missing and where change might begin. A gentle 2 km route.</p>\n<dl class=\"details\">\n<div><dt>Date &amp; time</dt><dd><time datetime=\"2026-09-19\">Sat 19 September</time><span class=\"minor time\">10:30–12:00</span></dd></div>\n<div><dt>Meeting point for the walk, including the step-free route departure</dt><dd><span class=\"place\">Dalston Eastern Curve Garden</span><span class=\"minor\">Main gate, 13 Dalston Lane, London E8</span></dd></div>\n<div><dt>Availability</dt><dd><span class=\"status\">12 places left</span><span class=\"minor\">24 places · Free, booking required</span></dd></div>\n</dl>\n</article>\n<article class=\"event sold\">\n<div class=\"event-top\">\n<div class=\"event-title\">\n<p class=\"eyebrow\">03 / In conversation</p>\n<h2>Evening talk</h2>\n</div>\n<button type=\"button\" aria-label=\"View event: Evening talk, sold out\">View event <span aria-hidden=\"true\">↗</span></button>\n</div>\n<p class=\"description\">What should we keep? Our project team and a local conservation architect discuss reuse, embodied carbon and the life of existing buildings, followed by audience questions.</p>\n<dl class=\"details\">\n<div><dt>Date &amp; time</dt><dd><time datetime=\"2026-10-08\">Thu 8 October</time><span class=\"minor time\">18:30–20:00</span></dd></div>\n<div><dt>Venue</dt><dd><span class=\"place\">Fieldwork Studio · Project room</span><span class=\"minor\">24 Ashwin Street, London E8</span></dd></div>\n<div><dt>Availability</dt><dd><span class=\"status\">Sold out</span><span class=\"minor\">60 of 60 places booked · Free</span></dd></div>\n</dl>\n</article>\n</section>\n</main>\n<footer>\n<p><strong>Everyone is welcome.</strong> Access information and arrival details are included with each event.</p>\n<p>Fieldwork / Public programme</p>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-events-9","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Common. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — Common</title>\n<style>\n:root{--paper:#f6f5f0;--ink:#252923;--muted:#62675e;--line:#d8dcd1;--accent:#743c2e;--soft:#e9ece3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5}\na{color:inherit;text-decoration:none}\nbutton,select{font:inherit}\nbutton,a,select{-webkit-tap-highlight-color:transparent}\nbutton:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #aa743e;outline-offset:4px}\n.shell{max-width:1168px;margin:auto;padding:0 32px}\nheader{border-bottom:1px solid var(--line)}\n.masthead{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.identity{display:flex;align-items:center;gap:25px}\n.wordmark{font-size:29px;font-weight:700;letter-spacing:-1.5px}\n.wordmark::after{content:\"\";display:inline-block;width:7px;height:7px;background:var(--accent);margin-left:4px}\n.identity p{font-size:12px;line-height:1.4;color:var(--muted);margin:0;padding-left:25px;border-left:1px solid var(--line)}\nnav{display:flex;align-items:center;gap:30px;font-size:14px}\nnav a{min-height:44px;display:flex;align-items:center}\nnav a[aria-current]{color:var(--accent);text-decoration:underline;text-underline-offset:7px}\nmain{padding-top:48px}\n.eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--accent);margin:0 0 12px}\n.intro{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:32px}\nh1{font-size:54px;line-height:1.05;font-weight:500;letter-spacing:-2px;margin:0 0 18px}\n.lede{max-width:570px;color:var(--muted);font-size:17px;line-height:1.5;margin:0}\n.programme-note{font-size:12px;text-align:right;white-space:nowrap;color:var(--muted);margin:0 0 4px}\n.programme-note strong{display:block;font-weight:500;color:var(--ink);font-size:14px;margin-bottom:3px}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--ink)}\n.filter{display:flex;align-items:center;gap:14px}\nlabel{font-size:13px;font-weight:700}\nselect{min-height:44px;min-width:190px;max-width:100%;background:transparent;border:1px solid #a9afa2;border-radius:0;color:var(--ink);padding:9px 35px 9px 12px}\n.result-count{margin:0;font-size:13px;color:var(--muted)}\n.events{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}\n.event{display:grid;grid-template-columns:72px minmax(0,1fr) 270px;gap:26px;align-items:center;padding:27px 0;border-bottom:1px solid var(--line)}\n.date{align-self:start;display:flex;flex-direction:column;border-right:1px solid var(--line);line-height:1}\n.date strong{font-size:37px;font-weight:400;letter-spacing:-1px}\n.date span{font-size:11px;letter-spacing:1px;margin-top:8px;text-transform:uppercase}\n.date small{font-size:11px;color:var(--muted);margin-top:7px}\n.category{font-size:10px;letter-spacing:1.25px;text-transform:uppercase;color:var(--muted);margin:0 0 5px}\nh2{font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.5px;margin:0 0 8px}\n.description{margin:0 0 12px;max-width:530px;font-size:14px;color:var(--muted)}\n.meta{display:flex;flex-wrap:wrap;gap:3px 16px;font-size:12px;line-height:1.5}\n.meta span{display:inline-flex;align-items:center;gap:6px}\n.meta svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}\n.booking{display:flex;align-items:center;justify-content:space-between;gap:12px}\n.availability{font-size:12px;font-weight:700;margin:0 0 5px;display:flex;align-items:center;gap:6px}\n.dot{width:6px;height:6px;border-radius:50%;background:#536747;flex:none}\n.hint{font-size:11px;line-height:1.45;color:var(--muted);margin:0;max-width:120px}\nbutton{min-height:44px;padding:11px 16px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;cursor:pointer;white-space:nowrap;font-size:13px}\nbutton:hover{background:#41483b}\n.sold .availability{color:var(--accent)}\n.sold .dot{background:transparent;border:1px solid var(--accent);width:7px;height:7px}\n.sold button{background:transparent;color:var(--ink);border-color:#a9afa2}\n.sold button:hover{background:var(--soft)}\n.practical{margin-top:32px;padding:23px 25px;background:var(--soft);display:grid;grid-template-columns:180px 1fr;gap:24px}\n.practical h2{font-size:18px;letter-spacing:-.2px;margin:0}\n.practical .sub{font-size:12px;color:var(--muted);margin:5px 0 0}\ndl{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0}\ndt{font-size:12px;font-weight:700;margin-bottom:5px}\ndd{margin:0;font-size:12px;color:var(--muted);line-height:1.55}\nfooter{display:flex;justify-content:space-between;gap:16px;padding:22px 0 30px;font-size:11px;color:var(--muted)}\nfooter p{margin:0}\n@media(max-width:800px){\n.event{grid-template-columns:60px minmax(0,1fr);gap:16px 20px}\n.booking{grid-column:2;justify-content:space-between}\n.hint{max-width:none}\n.practical{grid-template-columns:1fr}\n.programme-note{display:none}\n}\n@media(max-width:500px){\n.shell{padding:0 20px}\n.masthead{min-height:75px;gap:12px}\n.wordmark{font-size:26px}\n.identity p{display:none}\nnav{gap:18px;font-size:12px}\nmain{padding-top:30px}\n.eyebrow{font-size:10px;margin-bottom:11px}\n.intro{margin-bottom:25px}\nh1{font-size:38px;letter-spacing:-1.5px;margin-bottom:14px}\n.lede{font-size:15px}\n.toolbar{padding:14px 0;gap:10px}\n.filter{gap:10px}\nselect{min-width:160px;width:160px;font-size:13px}\n.result-count{font-size:12px;white-space:nowrap}\n.event{grid-template-columns:43px minmax(0,1fr);gap:15px;padding:23px 0}\n.date strong{font-size:30px}\n.date span{font-size:10px;letter-spacing:.5px}\n.date small{font-size:10px}\nh2{font-size:22px}\n.description{font-size:13px;margin-bottom:10px}\n.meta{display:grid;gap:5px;font-size:12px}\n.booking{gap:10px}\n.availability{font-size:11px}\n.hint{font-size:11px;max-width:128px}\nbutton{padding:11px 13px;font-size:12px;min-height:44px}\n.practical{margin-top:24px;padding:20px;gap:18px}\ndl{grid-template-columns:1fr;gap:15px}\ndt{margin-bottom:3px}\nfooter{flex-direction:column;gap:6px;padding-top:18px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"shell masthead\">\n<div class=\"identity\"><a class=\"wordmark\" href=\"#\" aria-label=\"Common home\">Common</a><p>Architecture<br>&amp; place</p></div>\n<nav aria-label=\"Main navigation\"><a href=\"#events\" aria-current=\"page\">Events</a><a href=\"#visit\">Plan your visit</a></nav>\n</div>\n</header>\n<main class=\"shell\" id=\"events\">\n<p class=\"eyebrow\">The open programme / Autumn 2026</p>\n<div class=\"intro\">\n<div><h1>Upcoming events</h1><p class=\"lede\">Make, walk and exchange ideas with Common. A programme for neighbours, designers and anyone curious about the built environment.</p></div>\n<p class=\"programme-note\"><strong>Open to everyone</strong>No architecture experience needed.</p>\n</div>\n<section aria-label=\"Event programme\">\n<div class=\"toolbar\">\n<div class=\"filter\"><label for=\"month\">Month</label><select id=\"month\" name=\"month\"><option selected>October 2026</option><option>November 2026</option><option>December 2026</option></select></div>\n<p class=\"result-count\">3 events</p>\n</div>\n<ol class=\"events\">\n<li class=\"event\">\n<time class=\"date\" datetime=\"2026-10-08\"><strong>08</strong><span>Oct 2026</span><small>Thursday</small></time>\n<div>\n<p class=\"category\">Making / In the studio</p>\n<h2>Design workshop</h2>\n<p class=\"description\">Explore adaptable housing through quick models and shared drawings. Work with our architects to test how a single room can change over time.</p>\n<div class=\"meta\"><span><svg aria-hidden=\"true\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M8 4v4l3 2\"/></svg>18:00–20:00</span><span>Common studio · Clerkenwell</span></div>\n</div>\n<div class=\"booking\"><div><p class=\"availability\"><span class=\"dot\"></span>12 of 24 places</p><p class=\"hint\">Free. All materials provided.</p></div><button type=\"button\" aria-label=\"View event: Design workshop\">View event</button></div>\n</li>\n<li class=\"event\">\n<time class=\"date\" datetime=\"2026-10-17\"><strong>17</strong><span>Oct 2026</span><small>Saturday</small></time>\n<div>\n<p class=\"category\">Walking / In the neighbourhood</p>\n<h2>Community walk</h2>\n<p class=\"description\">Look closely at Clerkenwell’s shared spaces, from small courtyards to busy street corners. Bring your observations to help shape our local research.</p>\n<div class=\"meta\"><span><svg aria-hidden=\"true\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M8 4v4l3 2\"/></svg>10:00–12:00</span><span>Meet at St James’s Church garden</span></div>\n</div>\n<div class=\"booking\"><div><p class=\"availability\"><span class=\"dot\"></span>8 of 20 places</p><p class=\"hint\">Free. A gentle 2 km route.</p></div><button type=\"button\" aria-label=\"View event: Community walk\">View event</button></div>\n</li>\n<li class=\"event sold\">\n<time class=\"date\" datetime=\"2026-10-22\"><strong>22</strong><span>Oct 2026</span><small>Thursday</small></time>\n<div>\n<p class=\"category\">Conversation / After hours</p>\n<h2>Evening talk</h2>\n<p class=\"description\">What makes a building worth keeping? Our project team discusses the practical choices behind reuse, with examples from recent retrofit work.</p>\n<div class=\"meta\"><span><svg aria-hidden=\"true\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M8 4v4l3 2\"/></svg>18:30–20:00</span><span>Common studio · Clerkenwell</span></div>\n</div>\n<div class=\"booking\"><div><p class=\"availability\"><span class=\"dot\"></span>Sold out · 40 places</p><p class=\"hint\">Free. No door tickets available.</p></div><button type=\"button\" aria-label=\"View event: Evening talk, sold out\">View event</button></div>\n</li>\n</ol>\n</section>\n<section class=\"practical\" id=\"visit\" aria-labelledby=\"visit-title\">\n<div><h2 id=\"visit-title\">Before you join</h2><p class=\"sub\">A few practical details.</p></div>\n<dl>\n<div><dt>Getting here</dt><dd>Common studio, 24 Clerkenwell Close, London EC1R 0AT. A 7-minute walk from Farringdon.</dd></div>\n<div><dt>Access &amp; arrival</dt><dd>Step-free studio entrance and accessible WC. Doors open 15 minutes before each studio event.</dd></div>\n<div><dt>Coming with a team?</dt><dd>Reserve a place for each person. Share any access requirements when booking. All times are London local time.</dd></div>\n</dl>\n</section>\n<footer><p>Updated <time datetime=\"2026-09-29\">29 September</time> · Community walk route confirmed.</p><p>Common — Architecture &amp; place</p></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-events-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Rill. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — Rill</title>\n<style>\n:root{--paper:#f5f2eb;--surface:#fcfaf6;--ink:#26322c;--muted:#62675f;--line:#d8d8cd}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\na{color:inherit}\nbutton,select{font:inherit}\nbutton:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #806543;outline-offset:4px}\n.site-header{max-width:1160px;margin:auto;padding:20px 28px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}\n.brand{font-family:Georgia,serif;font-size:36px;line-height:1;text-decoration:none;letter-spacing:-2px}\n.practice{font-size:12px;line-height:1.4;border-left:1px solid var(--line);padding-left:24px}\n.header-note{margin-left:auto;font-size:12px;color:var(--muted)}\nmain{max-width:1160px;margin:auto;padding:32px 28px 24px}\n.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:28px}\n.eyebrow{margin:0 0 7px;text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:700}\nh1{font:normal 48px/1.12 Georgia,serif;letter-spacing:-1.5px;margin:0}\n.intro-copy{max-width:370px;margin:0;color:var(--muted);line-height:1.65}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}\n.summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap}\n.summary strong{font-size:14px}\n.confirmed{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:16px}\n.filter{display:flex;gap:12px;align-items:center}\n.filter label{font-size:12px;font-weight:700}\nselect{min-height:42px;min-width:160px;border:1px solid #b8beb3;border-radius:3px;background:var(--surface);color:var(--ink);padding:8px 30px 8px 12px}\n.event-list{padding:0;margin:0;list-style:none;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}\n.event-list>li+li{border-top:1px solid var(--line)}\n.event{display:grid;grid-template-columns:76px minmax(0,1fr) 210px;gap:26px;padding:24px}\n.date{border-right:1px solid var(--line);font-size:11px;line-height:1.4}\n.date span{display:block}\n.date .day{font:normal 38px/1.1 Georgia,serif;letter-spacing:-1px}\n.date .month{font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-top:3px}\n.date .weekday{color:var(--muted);margin-top:8px}\n.event-type{margin:0 0 3px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}\nh2{font:normal 26px/1.2 Georgia,serif;margin:0 0 8px;letter-spacing:-.4px}\n.description{max-width:570px;margin:0 0 13px;color:var(--muted);font-size:13px;line-height:1.55}\ndl{display:grid;grid-template-columns:40px 1fr;gap:3px 8px;font-size:12px;margin:0}\ndt{color:var(--muted)}\ndd{margin:0}\n.availability{display:flex;flex-direction:column;align-items:stretch;border-left:1px solid var(--line);padding-left:24px}\n.status{margin:0 0 3px;font-weight:700;font-size:12px}\n.status::before{content:\"\";display:inline-block;width:6px;height:6px;background:currentColor;border-radius:50%;margin:0 6px 1px 0}\n.sold .status{align-self:flex-start;background:var(--ink);color:var(--surface);padding:2px 7px;border-radius:2px;margin-bottom:4px}\n.sold .status::before{display:none}\n.capacity{font-size:11px;color:var(--muted)}\nprogress{display:block;width:100%;height:4px;border:0;border-radius:0;background:#e2e3da;margin:6px 0 15px;accent-color:var(--ink)}\nprogress::-webkit-progress-bar{background:#e2e3da}\nprogress::-webkit-progress-value{background:var(--ink)}\nprogress::-moz-progress-bar{background:var(--ink)}\nbutton{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--surface);padding:8px 12px;cursor:pointer;font-weight:700;font-size:12px}\nbutton:hover{background:#3d4a41}\n.sold button{background:transparent;color:var(--ink)}\n.sold button:hover{background:#eeeee5}\n.next-step{font-size:10px;color:var(--muted);margin:6px 0 0}\n.visit-note{display:flex;justify-content:space-between;gap:24px;font-size:11px;color:var(--muted);margin-top:18px}\n.visit-note p{margin:0}\n.visit-note strong{font-weight:700;color:var(--ink)}\n@media(max-width:700px){\n.site-header{padding:18px 20px;gap:18px}\n.practice{padding-left:18px}\n.header-note{display:none}\nmain{padding:26px 20px 24px}\n.intro{display:block;margin-bottom:23px}\nh1{font-size:39px;letter-spacing:-1.2px}\n.intro-copy{font-size:13px;margin-top:13px;max-width:440px}\n.toolbar{align-items:flex-end;gap:12px}\n.summary{display:block}\n.summary strong{display:block;font-size:13px}\n.confirmed{display:block;border:0;padding:0;margin-top:3px;font-size:10px}\n.filter{display:block}\n.filter label{display:block;font-size:11px;margin-bottom:4px}\nselect{min-width:146px;width:146px;padding-left:9px;font-size:12px}\n.event{grid-template-columns:49px minmax(0,1fr);gap:0 17px;padding:20px 16px}\n.date{grid-column:1;grid-row:1 / 3}\n.date .day{font-size:32px}\n.date .month{font-size:10px}\n.date .weekday{font-size:10px}\nh2{font-size:24px}\n.description{font-size:12px;margin-bottom:12px}\ndl{font-size:11px;grid-template-columns:33px minmax(0,1fr);gap:4px 7px}\n.availability{grid-column:2;border-left:0;border-top:1px solid var(--line);padding:13px 0 0;margin-top:16px}\nprogress{margin-bottom:12px}\n.next-step{font-size:11px}\n.visit-note{display:block;line-height:1.7}\n.visit-note p+p{margin-top:7px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<a class=\"brand\" href=\"#events\" aria-label=\"Rill events\">Rill</a>\n<div class=\"practice\">Architecture practice<br>London</div>\n<span class=\"header-note\">Studio programme · 2026</span>\n</header>\n<main id=\"events\">\n<section aria-labelledby=\"page-title\">\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Open studio, open conversation</p>\n<h1 id=\"page-title\">Upcoming events</h1>\n</div>\n<p class=\"intro-copy\">Explore the built environment with us. Workshops, neighbourhood walks and conversations for practitioners, neighbours and curious minds.</p>\n</div>\n<div class=\"toolbar\">\n<div class=\"summary\">\n<strong>3 events · June 2026</strong>\n<span class=\"confirmed\">✓ Programme confirmed</span>\n</div>\n<div class=\"filter\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option value=\"2026-06\" selected>June 2026</option>\n<option value=\"2026-07\">July 2026</option>\n<option value=\"2026-08\">August 2026</option>\n</select>\n</div>\n</div>\n<ol class=\"event-list\">\n<li>\n<article class=\"event\" aria-labelledby=\"workshop\">\n<time class=\"date\" datetime=\"2026-06-12\"><span class=\"day\">12</span><span class=\"month\">Jun</span><span class=\"weekday\">Friday</span></time>\n<div>\n<p class=\"event-type\">Hands-on · £15</p>\n<h2 id=\"workshop\">Design workshop</h2>\n<p class=\"description\">Explore reuse through a small-scale material study. Work with reclaimed samples and our architects; no design experience needed.</p>\n<dl><dt>Time</dt><dd>14:00–17:00</dd><dt>Venue</dt><dd>Rill studio, 24 Wharf Road, N1</dd></dl>\n</div>\n<div class=\"availability\">\n<p class=\"status\">8 places available</p>\n<label class=\"capacity\" for=\"workshop-capacity\">12 of 20 places booked</label>\n<progress id=\"workshop-capacity\" value=\"12\" max=\"20\">12 of 20</progress>\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event <span aria-hidden=\"true\">↗</span></button>\n<p class=\"next-step\">Materials included · Booking required</p>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\" aria-labelledby=\"walk\">\n<time class=\"date\" datetime=\"2026-06-20\"><span class=\"day\">20</span><span class=\"month\">Jun</span><span class=\"weekday\">Saturday</span></time>\n<div>\n<p class=\"event-type\">Guided walk · Free</p>\n<h2 id=\"walk\">Community walk</h2>\n<p class=\"description\">Trace the changing edges of the Regent’s Canal. Discuss housing, shared space and the details that make a neighbourhood work.</p>\n<dl><dt>Time</dt><dd>10:00–11:30</dd><dt>Venue</dt><dd>Meet at City Road Basin, N1</dd></dl>\n</div>\n<div class=\"availability\">\n<p class=\"status\">18 places available</p>\n<label class=\"capacity\" for=\"walk-capacity\">12 of 30 places booked</label>\n<progress id=\"walk-capacity\" value=\"12\" max=\"30\">12 of 30</progress>\n<button type=\"button\" aria-label=\"View event: Community walk\">View event <span aria-hidden=\"true\">↗</span></button>\n<p class=\"next-step\">2 km route · Registration required</p>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event sold\" aria-labelledby=\"talk\">\n<time class=\"date\" datetime=\"2026-06-25\"><span class=\"day\">25</span><span class=\"month\">Jun</span><span class=\"weekday\">Thursday</span></time>\n<div>\n<p class=\"event-type\">Talk &amp; discussion · Free</p>\n<h2 id=\"talk\">Evening talk</h2>\n<p class=\"description\">What should we keep? Join Rill’s project team for a conversation on adaptive reuse, embodied carbon and building with what exists.</p>\n<dl><dt>Time</dt><dd>18:30–20:00</dd><dt>Venue</dt><dd>Rill studio, 24 Wharf Road, N1</dd></dl>\n</div>\n<div class=\"availability\">\n<p class=\"status\">Sold out</p>\n<label class=\"capacity\" for=\"talk-capacity\">60 of 60 places booked</label>\n<progress id=\"talk-capacity\" value=\"60\" max=\"60\">60 of 60</progress>\n<button type=\"button\" aria-label=\"View event: Evening talk\">View event <span aria-hidden=\"true\">↗</span></button>\n<p class=\"next-step\">Waitlist details on the event page</p>\n</div>\n</article>\n</li>\n</ol>\n<footer class=\"visit-note\">\n<p><strong>Planning your visit</strong> · All times are local to London.</p>\n<p>View an event for booking, route and access details.</p>\n</footer>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-events-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for North. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — North</title>\n<style>\n:root{--paper:#f0f2f3;--ink:#20292f;--muted:#59656d;--line:#cbd2d6;--accent:#234dc4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\n.wrap{width:min(1160px,calc(100% - 80px));margin:auto}\nheader{border-bottom:1px solid var(--line)}\n.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.wordmark{font-size:34px;font-weight:800;letter-spacing:-2px;line-height:1}\n.practice{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}\n.practice span{display:block;text-align:right}\n.hero{padding:44px 0 36px;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end}\n.eyebrow{margin:0 0 14px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:66px;font-weight:400;letter-spacing:-2.7px;line-height:1.05}\n.intro{max-width:390px;margin:0 0 2px;font-size:16px;line-height:1.6;color:var(--muted)}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-top:1px solid var(--line)}\n.result-count{margin:0;font-size:13px;color:var(--muted)}\n.result-count strong{color:var(--ink);font-weight:600}\n.filter{display:flex;align-items:center;gap:14px}\nlabel{font-size:13px;font-weight:600}\nselect{min-height:42px;width:184px;padding:9px 12px;border:1px solid #9ca8b0;border-radius:0;background:transparent;color:var(--ink);font:14px Arial,Helvetica,sans-serif}\nselect:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}\n.events{border-top:2px solid var(--ink)}\n.event{display:grid;grid-template-columns:80px minmax(0,1fr) 210px 126px;gap:26px;align-items:center;padding:25px 0;border-bottom:1px solid var(--line)}\n.date{align-self:start;padding-top:1px}\n.date .day{display:block;font-size:36px;line-height:1;letter-spacing:-1.5px}\n.date .month{display:block;margin-top:8px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}\n.event-type{margin:0 0 7px;font-size:10px;line-height:1.4;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}\nh2{margin:0 0 9px;font-size:24px;line-height:1.15;letter-spacing:-.65px;font-weight:600}\n.description{max-width:440px;margin:0;font-size:14px;line-height:1.55;color:var(--muted)}\n.details{font-size:13px;line-height:1.5}\n.time{margin:0 0 4px;font-weight:600}\n.venue{margin:0;color:var(--muted)}\n.availability{display:flex;align-items:center;gap:7px;margin:12px 0 0;font-size:12px;color:var(--accent);font-weight:600}\n.dot{width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}\n.sold-out{color:var(--muted)}\n.sold-out .dot{background:transparent;border:1px solid currentColor}\nbutton{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:11px 13px;border:1px solid var(--accent);border-radius:0;background:transparent;color:var(--accent);font:600 12px Arial,Helvetica,sans-serif;cursor:pointer;white-space:nowrap}\nbutton:hover{background:var(--accent);color:white}\nbutton span{font-size:17px;font-weight:400}\n.visit{display:grid;grid-template-columns:140px 1fr 1fr;gap:28px;align-items:center;padding:28px 0 32px}\n.visit svg{display:block;width:140px;height:80px}\nh3{margin:0 0 7px;font-size:12px;font-weight:700}\n.visit p{margin:0;font-size:12px;line-height:1.65;color:var(--muted)}\n.visit .address{color:var(--ink)}\nfooter{border-top:1px solid var(--line);padding:18px 0 22px}\n.footer-inner{display:flex;justify-content:space-between;gap:18px;color:var(--muted);font-size:11px}\n@media(min-width:1400px){.hero{padding-top:56px;padding-bottom:46px}.event{padding:30px 0}}\n@media(max-width:760px){\n.wrap{width:calc(100% - 40px)}\n.header-inner{min-height:72px;gap:15px}\n.wordmark{font-size:30px}\n.practice{font-size:11px}\n.hero{display:block;padding:31px 0 26px}\n.eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:13px}\nh1{font-size:46px;letter-spacing:-2px}\n.intro{margin-top:18px;font-size:14px;line-height:1.6;max-width:none}\n.toolbar{gap:12px;padding:15px 0}\n.result-count{font-size:12px;max-width:92px;line-height:1.6}\n.filter{gap:8px}\nlabel{font-size:12px}\nselect{width:158px;font-size:12px;padding:9px 7px}\n.event{grid-template-columns:49px minmax(0,1fr);gap:14px 17px;padding:24px 0}\n.date{grid-row:1 / 4}\n.date .day{font-size:31px}\n.date .month{font-size:9px;letter-spacing:.5px;line-height:1.5}\n.event-type{font-size:9px}\nh2{font-size:23px}\n.description{font-size:13px;line-height:1.55}\n.details{grid-column:2;font-size:12px}\n.time{margin-bottom:2px}\n.availability{margin-top:7px}\n.event button{grid-column:2;justify-self:start;min-width:127px}\n.visit{grid-template-columns:90px minmax(0,1fr);gap:18px;padding:25px 0}\n.visit svg{width:90px;height:auto}\n.visit .access{grid-column:2}\n.footer-inner{font-size:10px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background-color .15s,color .15s}}\n</style>\n</head>\n<body>\n<header>\n<div class=\"wrap header-inner\">\n<div class=\"wordmark\" aria-label=\"North\">north.</div>\n<p class=\"practice\">Architecture &amp; public life<span>London · Public programme</span></p>\n</div>\n</header>\n<main class=\"wrap\" id=\"events\">\n<section class=\"hero\" aria-labelledby=\"page-title\">\n<div>\n<p class=\"eyebrow\">Open studio / Autumn 2026</p>\n<h1 id=\"page-title\">Upcoming events</h1>\n</div>\n<p class=\"intro\">A closer look at the places we share. Join North for hands-on design, neighbourhood walks and conversations about the future of our built environment.</p>\n</section>\n\n<div class=\"toolbar\">\n<p class=\"result-count\"><strong>3 events</strong> in September</p>\n<div class=\"filter\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option selected>September 2026</option>\n<option>October 2026</option>\n<option>November 2026</option>\n</select>\n</div>\n</div>\n\n<section class=\"events\" aria-label=\"September 2026 events\">\n<article class=\"event\" aria-labelledby=\"workshop-title\">\n<time class=\"date\" datetime=\"2026-09-12\"><span class=\"day\">12</span><span class=\"month\">Sep · Sat</span></time>\n<div>\n<p class=\"event-type\">Hands-on session · £12</p>\n<h2 id=\"workshop-title\">Design workshop</h2>\n<p class=\"description\">Explore how a small urban site could be reused through sketching and model-making. Materials provided; no design experience needed.</p>\n</div>\n<div class=\"details\">\n<p class=\"time\">10:00–13:00</p>\n<p class=\"venue\">North studio<br>14 North Road, London N7</p>\n<p class=\"availability\"><span class=\"dot\" aria-hidden=\"true\"></span>6 of 16 places left</p>\n</div>\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event <span aria-hidden=\"true\">↗</span></button>\n</article>\n\n<article class=\"event\" aria-labelledby=\"walk-title\">\n<time class=\"date\" datetime=\"2026-09-19\"><span class=\"day\">19</span><span class=\"month\">Sep · Sat</span></time>\n<div>\n<p class=\"event-type\">Guided walk · Free</p>\n<h2 id=\"walk-title\">Community walk</h2>\n<p class=\"description\">Read the neighbourhood through its streets, thresholds and shared spaces. A 2 km walk with the North team, with time to stop and discuss.</p>\n</div>\n<div class=\"details\">\n<p class=\"time\">11:00–12:30</p>\n<p class=\"venue\">Meet at North studio courtyard<br>14 North Road, London N7</p>\n<p class=\"availability\"><span class=\"dot\" aria-hidden=\"true\"></span>8 of 24 places left</p>\n</div>\n<button type=\"button\" aria-label=\"View event: Community walk\">View event <span aria-hidden=\"true\">↗</span></button>\n</article>\n\n<article class=\"event\" aria-labelledby=\"talk-title\">\n<time class=\"date\" datetime=\"2026-09-24\"><span class=\"day\">24</span><span class=\"month\">Sep · Thu</span></time>\n<div>\n<p class=\"event-type\">Talk &amp; questions · Free</p>\n<h2 id=\"talk-title\">Evening talk</h2>\n<p class=\"description\">How can existing buildings do more? Join our architects for a conversation on retrofit, reuse and the long life of a building, followed by questions.</p>\n</div>\n<div class=\"details\">\n<p class=\"time\">18:30–20:00</p>\n<p class=\"venue\">North studio<br>14 North Road, London N7</p>\n<p class=\"availability sold-out\"><span class=\"dot\" aria-hidden=\"true\"></span>Sold out · 40 places filled</p>\n</div>\n<button type=\"button\" aria-label=\"View event: Evening talk, sold out\">View event <span aria-hidden=\"true\">↗</span></button>\n</article>\n</section>\n\n<aside class=\"visit\" aria-label=\"Planning your visit\">\n<svg viewBox=\"0 0 140 80\" role=\"img\" aria-labelledby=\"plan-title\">\n<title id=\"plan-title\">Entrance route: North Road, through the courtyard, into the studio</title>\n<g fill=\"none\" stroke=\"#8a979f\" stroke-width=\"1\">\n<path d=\"M12 9H67V51H12Z\" stroke-dasharray=\"3 3\"/>\n<path d=\"M74 51H130V9H74V27M74 40V51\"/>\n<path d=\"M5 66H135\"/>\n</g>\n<g fill=\"#59656d\" font-family=\"Arial, sans-serif\" font-size=\"7\">\n<text x=\"20\" y=\"20\">COURTYARD</text>\n<text x=\"87\" y=\"24\">STUDIO</text>\n<text x=\"74\" y=\"77\">NORTH ROAD</text>\n</g>\n<path d=\"M29 65V34H94M88 29L94 34L88 39\" fill=\"none\" stroke=\"#234dc4\" stroke-width=\"2\"/>\n<circle cx=\"29\" cy=\"65\" r=\"3\" fill=\"#234dc4\"/>\n</svg>\n<div>\n<h3>Find the studio</h3>\n<p class=\"address\">14 North Road, London N7</p>\n<p>Enter through the courtyard from North Road.<br>All events begin here. Times shown are local.</p>\n</div>\n<div class=\"access\">\n<h3>A place for everyone</h3>\n<p>The studio has step-free access and an accessible WC. For access questions or walk route details, contact events@north.studio.</p>\n</div>\n</aside>\n</main>\n<footer>\n<div class=\"wrap footer-inner\"><span>North — Architecture practice</span><span>Spaces for everyday life.</span></div>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-events-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Alder. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — Alder</title>\n<style>\n:root{--ink:#263e33;--paper:#f7f6ef;--muted:#617267;--line:#cdd3c8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}\n.shell{max-width:1200px;margin:auto;padding:0 48px}\nheader{min-height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}\n.brand{display:flex;align-items:center;gap:12px;font-size:30px;font-weight:700;letter-spacing:-1.3px}\n.brand svg{width:27px;height:34px}\n.workspace{font-size:13px;letter-spacing:.02em;color:var(--muted)}\nmain{padding-top:54px}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px}\n.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin:0 0 14px}\nh1{font-size:52px;font-weight:500;letter-spacing:-2.3px;line-height:1.06;margin:0 0 17px}\n.lead{font-size:16px;line-height:1.6;max-width:530px;margin:0;color:var(--muted)}\n.season{font-size:12px;line-height:1.7;text-align:right;white-space:nowrap;padding-bottom:4px}\n.season strong{display:block;font-weight:500;font-size:28px;letter-spacing:-1px}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--ink)}\n.filter{display:flex;gap:14px;align-items:center}\nlabel{font-size:13px;font-weight:700}\nselect{font:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:0;padding:10px 36px 10px 12px;min-height:42px;max-width:100%}\n.result{font-size:12px;color:var(--muted);margin:0}\n.events{list-style:none;padding:0;margin:0}\n.event{display:grid;grid-template-columns:80px minmax(0,1fr) 166px;gap:30px;padding:30px 0;border-bottom:1px solid var(--line)}\n.date{display:block;text-align:left;border-right:1px solid var(--line);padding-right:20px;align-self:start}\n.day{display:block;font-size:38px;line-height:1;letter-spacing:-1.5px;font-weight:500}\n.month{display:block;margin-top:9px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}\nh2{font-size:25px;line-height:1.2;font-weight:500;letter-spacing:-.6px;margin:0 0 10px}\n.description{font-size:14px;line-height:1.6;max-width:570px;margin:0 0 20px;color:var(--muted)}\ndl{display:grid;grid-template-columns:145px minmax(0,1fr);gap:20px;margin:0}\ndt{font-size:11px;line-height:1.45;color:var(--muted);margin-bottom:5px}\ndd{font-size:13px;line-height:1.5;margin:0}\n.booking{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:22px}\n.availability{font-size:13px;line-height:1.5;margin:2px 0 0}\n.availability span{display:block;font-size:11px;color:var(--muted);margin-top:3px}\n.status{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;border:1px solid var(--ink);padding:3px 7px;margin:0 0 5px}\nbutton{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:43px;width:100%;border:1px solid var(--ink);border-radius:0;padding:11px 14px;background:var(--ink);color:var(--paper);font:inherit;font-size:13px;text-align:left;cursor:pointer}\nbutton svg{width:16px;height:16px;flex-shrink:0}\nbutton:hover{background:var(--paper);color:var(--ink)}\nbutton:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\nfooter{display:flex;justify-content:space-between;gap:20px;padding:22px 0 36px;font-size:11px;line-height:1.6;color:var(--muted)}\n@media(max-width:700px){\n.shell{padding:0 22px}\nheader{min-height:77px;gap:14px}\n.brand{font-size:27px}\n.workspace{font-size:11px;text-align:right;max-width:105px;line-height:1.5}\nmain{padding-top:32px}\n.intro{display:block;margin-bottom:25px}\n.eyebrow{font-size:10px;margin-bottom:12px}\nh1{font-size:37px;letter-spacing:-1.5px}\n.lead{font-size:14px;line-height:1.55}\n.season{display:none}\n.toolbar{padding:15px 0;gap:12px}\n.filter{gap:10px;min-width:0}\nselect{font-size:13px;width:145px;padding-left:9px}\n.result{font-size:11px;max-width:60px;text-align:right}\n.event{grid-template-columns:44px minmax(0,1fr);gap:0 16px;padding:25px 0}\n.date{padding-right:9px}\n.day{font-size:30px}\n.month{font-size:10px;margin-top:7px;letter-spacing:.06em}\nh2{font-size:22px;margin-bottom:8px}\n.description{font-size:13px;line-height:1.55;margin-bottom:15px}\ndl{grid-template-columns:1fr;gap:12px}\ndt{font-size:11px;margin-bottom:3px}\ndd{font-size:12px}\n.booking{grid-column:2;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:18px}\n.availability{font-size:12px;margin:0}\n.availability span{font-size:10px}\nbutton{width:auto;flex-shrink:0;font-size:12px;padding:10px;gap:10px}\n.status{font-size:10px;padding:2px 6px}\nfooter{display:block;font-size:11px;padding-top:18px}\nfooter span{display:block;margin-bottom:6px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header>\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 36\" fill=\"none\" aria-hidden=\"true\"><path d=\"M14 34V6M14 22C5 22 2 17 2 10c8 0 12 4 12 12ZM14 15C14 7 18 2 26 2c0 8-4 13-12 13Z\" stroke=\"currentColor\" stroke-width=\"1.8\"/></svg>\nAlder\n</div>\n<div class=\"workspace\">Field research<br>Team calendar</div>\n</header>\n\n<main>\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Methods · People · Place</p>\n<h1>Upcoming events</h1>\n<p class=\"lead\">Time together beyond the fieldwork. Build practical skills, explore the study area and compare what you’re learning.</p>\n</div>\n<div class=\"season\"><strong>Autumn 2026</strong>October – November</div>\n</div>\n\n<section aria-label=\"Event listing\">\n<div class=\"toolbar\">\n<div class=\"filter\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option value=\"all\">All upcoming</option>\n<option value=\"2026-10\">October 2026</option>\n<option value=\"2026-11\">November 2026</option>\n</select>\n</div>\n<p class=\"result\">3 upcoming events</p>\n</div>\n\n<ol class=\"events\">\n<li>\n<article class=\"event\" aria-labelledby=\"workshop-title\">\n<time class=\"date\" datetime=\"2026-10-08\"><span class=\"day\">08</span><span class=\"month\">Oct ’26</span></time>\n<div>\n<h2 id=\"workshop-title\">Design workshop</h2>\n<p class=\"description\">Turn early observations into a testable interview guide. Bring one research question and a page of field notes.</p>\n<dl>\n<div><dt>Date &amp; time</dt><dd>Thu 8 October<br>09:30–12:00</dd></div>\n<div><dt>Venue</dt><dd>Alder field station<br>Studio 2 · Step-free access</dd></div>\n</dl>\n</div>\n<div class=\"booking\">\n<p class=\"availability\">6 places available<span>12 of 18 places booked</span></p>\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></button>\n</div>\n</article>\n</li>\n\n<li>\n<article class=\"event\" aria-labelledby=\"walk-title\">\n<time class=\"date\" datetime=\"2026-10-17\"><span class=\"day\">17</span><span class=\"month\">Oct ’26</span></time>\n<div>\n<h2 id=\"walk-title\">Community walk</h2>\n<p class=\"description\">Walk the riverside study area with local residents. Practise listening, map everyday routes and note questions for follow-up.</p>\n<dl>\n<div><dt>Date &amp; time</dt><dd>Sat 17 October<br>10:00–11:30</dd></div>\n<div><dt>Meeting point for participants carrying shared field-recording equipment</dt><dd>Riverside library · North entrance<br>2 km route · Bring waterproofs</dd></div>\n</dl>\n</div>\n<div class=\"booking\">\n<p class=\"availability\">8 places available<span>8 of 16 places booked</span></p>\n<button type=\"button\" aria-label=\"View event: Community walk\">View event <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></button>\n</div>\n</article>\n</li>\n\n<li>\n<article class=\"event\" aria-labelledby=\"talk-title\">\n<time class=\"date\" datetime=\"2026-11-04\"><span class=\"day\">04</span><span class=\"month\">Nov ’26</span></time>\n<div>\n<h2 id=\"talk-title\">Evening talk</h2>\n<p class=\"description\">Researcher Maya Patel shares ways to return findings to communities. A short talk followed by questions and team discussion.</p>\n<dl>\n<div><dt>Date &amp; time</dt><dd>Wed 4 November<br>18:00–19:15</dd></div>\n<div><dt>Venue</dt><dd>Alder field station<br>Forum · Hearing loop available</dd></div>\n</dl>\n</div>\n<div class=\"booking\">\n<div><p class=\"status\">Sold out</p><p class=\"availability\">40 of 40 places booked<span>No walk-in places available</span></p></div>\n<button type=\"button\" aria-label=\"View event: Evening talk\">View event <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg></button>\n</div>\n</article>\n</li>\n</ol>\n</section>\n</main>\n<footer>\n<span>All times are local to the Alder field station.</span>\n<span>Questions about access? Contact your field coordinator.</span>\n</footer>\n</div>\n</body>\n</html>"}]}
{"id":"sft-events-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Morrow. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — Morrow</title>\n<style>\n:root{--paper:#f6f5f0;--ink:#28392f;--muted:#69716a;--line:#d9ddd4;--soft:#e9eee5;--rust:#86543e}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,select{font:inherit}\nbutton:focus-visible,select:focus-visible{outline:3px solid #b58c43;outline-offset:4px}\n.shell{max-width:1160px;margin:auto;padding:0 32px}\n.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}\n.identity{display:flex;align-items:center;gap:20px}\n.wordmark{font-family:Georgia,serif;font-size:34px;font-weight:bold;letter-spacing:-1.5px;line-height:1}\n.brand-note{border-left:1px solid var(--line);padding-left:20px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.6}\n.header-note{font-size:12px;color:var(--muted)}\nmain{padding:46px 0 48px}\n.eyebrow{margin:0 0 12px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}\nh1{margin:0;font-family:Georgia,serif;font-size:54px;font-weight:400;letter-spacing:-1.8px;line-height:1.1}\n.intro{max-width:560px;margin:18px 0 32px;color:var(--muted);font-size:16px;line-height:1.65}\n.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:28px}\n.list-summary{margin:0;font-size:13px;color:var(--muted)}\n.list-summary strong{color:var(--ink);font-weight:600}\n.filter{display:flex;align-items:center;gap:12px}\n.filter label{font-size:12px;font-weight:600}\nselect{max-width:100%;min-height:40px;min-width:168px;border:1px solid #b9c1b5;border-radius:3px;background:var(--paper);color:var(--ink);padding:8px 32px 8px 12px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 238px;gap:48px;align-items:start}\n.events{list-style:none;padding:0;margin:0}\n.event{display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px;padding:25px 0;border-bottom:1px solid var(--line)}\n.events li:first-child .event{padding-top:0}\n.date{text-align:center;padding-top:3px}\n.date span{display:block}\n.month{font-size:10px;letter-spacing:.15em;font-weight:700}\n.day{font-family:Georgia,serif;font-size:38px;line-height:1.2}\n.weekday{font-size:11px;color:var(--muted)}\n.event-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}\nh2{margin:0;font-family:Georgia,serif;font-size:27px;line-height:1.2;font-weight:400;letter-spacing:-.5px}\n.status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--soft);border-radius:3px;font-size:10px;font-weight:600;white-space:nowrap}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:#587448}\n.status.sold{background:#eee7e0;color:var(--rust)}\n.status.sold::before{background:var(--rust)}\n.meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;font-size:12px;font-weight:500}\n.venue{color:var(--muted);font-weight:400}\n.description{margin:12px 0 17px;font-size:13px;line-height:1.65;color:#566157;max-width:560px}\n.actions{display:flex;align-items:center;gap:14px}\nbutton{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:39px;padding:8px 12px;border:1px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}\nbutton:hover{background:var(--soft)}\n.arrow{font-size:17px;line-height:1;font-weight:400}\n.hint{max-width:150px;font-size:11px;line-height:1.45;color:var(--muted)}\n.details{background:#eceee7;padding:22px;border-top:3px solid var(--ink)}\n.details .eyebrow{font-size:9px;margin-bottom:9px}\n.details h2{font-size:24px}\ndl{margin:23px 0 0}\ndl>div{padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid #d3d8cc}\ndt{font-size:11px;font-weight:650;margin-bottom:5px}\ndd{margin:0;font-size:12px;line-height:1.65;color:#5b655b}\n.update{font-size:11px;line-height:1.6;color:#5b655b}\n.update strong{display:block;color:var(--ink);font-size:10px;margin-bottom:5px;letter-spacing:.04em}\n.update p{margin:0}\n.update time{display:block;margin-top:7px;font-size:10px;color:var(--muted)}\n.page-footer{display:flex;justify-content:space-between;gap:20px;padding-top:24px;color:var(--muted);font-size:10px;letter-spacing:.03em}\n@media(max-width:800px){\n.layout{grid-template-columns:minmax(0,1fr);gap:28px}\n.details{display:grid;grid-template-columns:1fr 1.6fr;gap:0 25px}\ndl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}\ndl>div{margin:0}\n.update{grid-column:1/-1;border-top:1px solid #d3d8cc;padding-top:14px;margin-top:4px}\n.update strong,.update time{display:inline;margin-right:8px}\n.update p{display:inline}\n}\n@media(max-width:480px){\n.shell{padding:0 20px}\n.site-header{padding:21px 0}\n.identity{gap:14px}\n.wordmark{font-size:31px}\n.brand-note{padding-left:14px;font-size:9px}\n.header-note{display:none}\nmain{padding:30px 0}\nh1{font-size:40px;letter-spacing:-1.3px}\n.intro{font-size:14px;margin:14px 0 24px;line-height:1.6}\n.toolbar{gap:12px;padding:13px 0;margin-bottom:23px}\n.list-summary{font-size:11px}\n.list-summary span{display:block}\n.filter{gap:8px}\n.filter label{font-size:11px}\nselect{min-width:137px;width:137px;font-size:12px;padding-left:9px}\n.event{grid-template-columns:41px minmax(0,1fr);gap:15px;padding:23px 0}\n.day{font-size:34px}\nh2{font-size:25px}\n.event-heading{gap:8px}\n.status{font-size:9px;padding:3px 7px}\n.meta{display:block;margin-top:10px;font-size:11px}\n.venue{display:block;margin-top:3px}\n.description{font-size:12px;margin:10px 0 14px}\n.actions{gap:10px}\nbutton{gap:12px;padding:8px 10px;font-size:11px}\n.hint{font-size:10px;max-width:115px}\n.details{display:block;padding:20px}\n.details h2{font-size:23px}\ndl{margin-top:19px;gap:18px}\n.update{margin-top:17px}\n.page-footer{font-size:9px;padding-top:20px}\n}\n</style>\n</head>\n<body>\n<div class=\"shell\">\n<header class=\"site-header\">\n<div class=\"identity\">\n<span class=\"wordmark\">Morrow</span>\n<span class=\"brand-note\">Research, together<br>London field team</span>\n</div>\n<span class=\"header-note\">The field programme · 2026</span>\n</header>\n<main>\n<p class=\"eyebrow\">Meet / observe / exchange</p>\n<h1>Upcoming events</h1>\n<p class=\"intro\">Gather to compare notes, learn from neighbours and make sense of what we find in the field.</p>\n<div class=\"toolbar\">\n<p class=\"list-summary\"><strong>3 events</strong><span> · June 2026</span></p>\n<div class=\"filter\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option value=\"2026-06\" selected>June 2026</option>\n<option value=\"2026-07\">July 2026</option>\n<option value=\"2026-08\">August 2026</option>\n</select>\n</div>\n</div>\n<div class=\"layout\">\n<section aria-label=\"June events\">\n<ol class=\"events\">\n<li>\n<article class=\"event\" aria-labelledby=\"design-title\">\n<time class=\"date\" datetime=\"2026-06-18\" aria-label=\"Thursday, 18 June 2026\"><span class=\"month\">JUN</span><span class=\"day\">18</span><span class=\"weekday\">Thu</span></time>\n<div>\n<div class=\"event-heading\">\n<h2 id=\"design-title\">Design workshop</h2>\n<span class=\"status\">6 places left</span>\n</div>\n<p class=\"meta\"><span><time datetime=\"2026-06-18T10:00:00+01:00\">10:00</time>–<time datetime=\"2026-06-18T12:30:00+01:00\">12:30</time></span><span class=\"venue\">Studio 02, Morrow House</span></p>\n<p class=\"description\">Turn recent observations into a shared journey map. Bring one anonymised field note and a question you’re still working through.</p>\n<div class=\"actions\"><button type=\"button\" aria-label=\"View event: Design workshop\">View event <span class=\"arrow\" aria-hidden=\"true\">↗</span></button><span class=\"hint\">See the agenda and what to bring.</span></div>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\" aria-labelledby=\"walk-title\">\n<time class=\"date\" datetime=\"2026-06-20\" aria-label=\"Saturday, 20 June 2026\"><span class=\"month\">JUN</span><span class=\"day\">20</span><span class=\"weekday\">Sat</span></time>\n<div>\n<div class=\"event-heading\">\n<h2 id=\"walk-title\">Community walk</h2>\n<span class=\"status\">10 places left</span>\n</div>\n<p class=\"meta\"><span><time datetime=\"2026-06-20T09:30:00+01:00\">09:30</time>–<time datetime=\"2026-06-20T11:00:00+01:00\">11:00</time></span><span class=\"venue\">East gate, Regent’s Canal</span></p>\n<p class=\"description\">Walk with local stewards and test our observation prompts along the canal. An easy-paced, step-free route with time to stop and listen.</p>\n<div class=\"actions\"><button type=\"button\" aria-label=\"View event: Community walk\">View event <span class=\"arrow\" aria-hidden=\"true\">↗</span></button><span class=\"hint\">Check the route and meeting point.</span></div>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\" aria-labelledby=\"talk-title\">\n<time class=\"date\" datetime=\"2026-06-24\" aria-label=\"Wednesday, 24 June 2026\"><span class=\"month\">JUN</span><span class=\"day\">24</span><span class=\"weekday\">Wed</span></time>\n<div>\n<div class=\"event-heading\">\n<h2 id=\"talk-title\">Evening talk</h2>\n<span class=\"status sold\">Sold out · 40 / 40</span>\n</div>\n<p class=\"meta\"><span><time datetime=\"2026-06-24T18:00:00+01:00\">18:00</time>–<time datetime=\"2026-06-24T19:15:00+01:00\">19:15</time></span><span class=\"venue\">Reading Room, Morrow House</span></p>\n<p class=\"description\">A conversation on consent, trust and returning findings to the people who shared them. With researcher Dr Leila Shah, followed by questions.</p>\n<div class=\"actions\"><button type=\"button\" aria-label=\"View event: Evening talk\">View event <span class=\"arrow\" aria-hidden=\"true\">↗</span></button><span class=\"hint\">Fully booked; session details still available.</span></div>\n</div>\n</article>\n</li>\n</ol>\n</section>\n<aside class=\"details\" aria-labelledby=\"details-title\">\n<div>\n<p class=\"eyebrow\">Before you head out</p>\n<h2 id=\"details-title\">Field details</h2>\n</div>\n<dl>\n<div><dt>Local time</dt><dd>All times are London time: BST (UTC+1).</dd></div>\n<div><dt>Access &amp; arrival</dt><dd>Open an event for access notes, the exact meeting point and any kit to bring.</dd></div>\n</dl>\n<div class=\"update\">\n<strong>Latest update</strong>\n<p>Evening talk is now fully booked.</p>\n<time datetime=\"2026-06-12T09:40:00+01:00\">12 Jun · 09:40 BST</time>\n</div>\n</aside>\n</div>\n<footer class=\"page-footer\"><span>Morrow · Field research programme</span><span>Learning starts with listening.</span></footer>\n</main>\n</div>\n</body>\n</html>"}]}
{"id":"sft-events-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create an events listing for Common. Include Design workshop, Community walk and Evening talk with dates, times, venue, short useful descriptions, capacity or availability, a native month filter and View event buttons. Include one sold-out state. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Upcoming events\", \"Design workshop\", \"Community walk\", \"Evening talk\", \"View event\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Upcoming events — Common</title>\n<style>\n:root{--paper:#f5f2ea;--ink:#243b32;--muted:#61675f;--line:#d5d7cb;--wash:#e8eadf}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nheader,main,footer{width:min(1120px,calc(100% - 80px));margin-inline:auto}\nheader{min-height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);gap:20px}\n.brand{font-size:30px;font-weight:750;letter-spacing:-1.5px}\n.brand span{display:inline-block;width:10px;height:10px;margin-left:3px;background:var(--ink)}\n.team{font-size:12px;color:var(--muted);text-align:right}\n.team strong{display:block;color:var(--ink);font-weight:600}\n.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:46px 0 32px}\n.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.7px;margin:0 0 10px}\nh1{font-size:48px;line-height:1.08;font-weight:600;letter-spacing:-2px;margin:0}\n.intro>p{max-width:345px;margin:0 0 3px;color:var(--muted);font-size:15px}\n.filters{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.month{display:flex;align-items:center;gap:15px}\nlabel{font-size:13px;font-weight:650}\nselect{font:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid #8c9688;border-radius:3px;min-height:42px;padding:8px 34px 8px 12px;max-width:100%}\n.summary{font-size:12px;color:var(--muted);text-align:right}\n.summary strong{color:var(--ink);font-weight:600}\n.events{list-style:none;padding:0;margin:0}\n.event{display:grid;grid-template-columns:78px minmax(0,1fr) 160px;gap:28px;padding:30px 0;border-bottom:1px solid var(--line)}\n.date{padding-top:2px;border-right:1px solid var(--line);font-variant-numeric:tabular-nums}\n.date strong{display:block;font-size:36px;font-weight:500;line-height:1;letter-spacing:-1.5px}\n.date span{display:block;margin-top:8px;font-size:11px;letter-spacing:1px;text-transform:uppercase}\nh2{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.65px;margin:0 0 8px}\n.details{font-size:13px;margin:0 0 10px}\n.details time{font-weight:650}\n.venue{color:var(--muted);margin-left:12px}\n.description{max-width:590px;margin:0;color:var(--muted);font-size:14px;line-height:1.55}\n.action{display:flex;align-items:stretch;flex-direction:column;justify-content:space-between;gap:20px;padding:2px 0}\n.availability{font-size:12px;line-height:1.5}\n.availability strong{display:block;font-weight:650}\n.availability small{font-size:11px;color:var(--muted)}\n.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);margin:0 7px 1px 0}\n.sold{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.25px;border:1px solid #9a9d91;padding:2px 8px;border-radius:3px;margin-bottom:3px}\nbutton{font:inherit;font-size:13px;font-weight:600;min-height:42px;padding:10px 15px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--paper);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;white-space:nowrap}\nbutton:hover{background:#354e42}\nbutton:focus-visible,select:focus-visible{outline:3px solid #9a6b36;outline-offset:4px}\nbutton span{font-size:18px;line-height:1;font-weight:400}\n.route{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:11px;color:var(--muted)}\n.route svg{width:62px;height:24px;flex-shrink:0;color:var(--ink)}\nfooter{display:flex;justify-content:space-between;gap:20px;padding-block:22px 30px;color:var(--muted);font-size:12px}\nfooter p{margin:0}\n@media(max-width:700px){\nheader,main,footer{width:calc(100% - 36px)}\nheader{min-height:68px}\n.brand{font-size:26px}\n.team{font-size:10px}\n.intro{display:block;padding:27px 0 22px}\n.eyebrow{font-size:10px;margin-bottom:8px}\nh1{font-size:35px;letter-spacing:-1.3px}\n.intro>p{font-size:13px;max-width:340px;margin:12px 0 0}\n.filters{padding:12px;gap:10px;align-items:center}\n.month{gap:9px}\nlabel{font-size:12px}\nselect{font-size:13px;padding-left:9px;min-height:40px;width:157px}\n.summary{font-size:10px;max-width:75px}\n.summary strong{display:block}\n.event{grid-template-columns:42px minmax(0,1fr);gap:0 16px;padding:22px 0}\n.date{grid-row:1 / 3;border-right:0}\n.date strong{font-size:29px}\n.date span{font-size:9px;letter-spacing:.6px;margin-top:6px}\nh2{font-size:22px;margin-bottom:6px}\n.details{font-size:12px;margin-bottom:8px}\n.venue{display:block;margin:3px 0 0;line-height:1.4}\n.description{font-size:12px;line-height:1.5}\n.action{grid-column:2;flex-direction:row;align-items:center;padding:0;margin-top:14px;gap:10px}\n.availability{font-size:11px}\n.availability small{font-size:10px}\nbutton{min-height:38px;font-size:12px;padding:8px 11px;gap:13px}\n.route{margin-top:8px;gap:8px;font-size:10px}\nfooter{font-size:11px;display:block;padding-top:18px}\nfooter p+p{margin-top:5px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"brand\" aria-label=\"Common\">Common<span aria-hidden=\"true\"></span></div>\n<div class=\"team\"><strong>Field team programme</strong>Bristol, UK</div>\n</header>\n<main>\n<section aria-labelledby=\"page-title\">\n<div class=\"intro\">\n<div>\n<p class=\"eyebrow\">Learn together. Look closer.</p>\n<h1 id=\"page-title\">Upcoming events</h1>\n</div>\n<p>Time away from the desk to develop your methods, compare observations and connect with fellow researchers.</p>\n</div>\n<form class=\"filters\" aria-label=\"Filter events\">\n<div class=\"month\">\n<label for=\"month\">Month</label>\n<select id=\"month\" name=\"month\">\n<option selected>October 2026</option>\n<option>November 2026</option>\n<option>December 2026</option>\n</select>\n</div>\n<div class=\"summary\"><strong>3 events</strong> · All times BST</div>\n</form>\n<ol class=\"events\">\n<li>\n<article class=\"event\" aria-labelledby=\"workshop-title\">\n<div class=\"date\"><strong>08</strong><span>Oct · Thu</span></div>\n<div>\n<h2 id=\"workshop-title\">Design workshop</h2>\n<p class=\"details\"><time datetime=\"2026-10-08T09:30:00+01:00\">09:30–12:00</time><span class=\"venue\">Common studio · 14 Jamaica Street</span></p>\n<p class=\"description\">Turn field notes into a focused research plan. Bring one live project question and a few observations to work through with the group.</p>\n</div>\n<div class=\"action\">\n<div class=\"availability\"><strong><span class=\"dot\" aria-hidden=\"true\"></span>6 places left</strong><small>18 people · Materials provided</small></div>\n<button type=\"button\" aria-label=\"View event: Design workshop\">View event <span aria-hidden=\"true\">↗</span></button>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\" aria-labelledby=\"walk-title\">\n<div class=\"date\"><strong>15</strong><span>Oct · Thu</span></div>\n<div>\n<h2 id=\"walk-title\">Community walk</h2>\n<p class=\"details\"><time datetime=\"2026-10-15T10:00:00+01:00\">10:00–11:30</time><span class=\"venue\">Meet outside Common studio · 14 Jamaica Street</span></p>\n<p class=\"description\">Practice observing everyday public spaces around Stokes Croft. We’ll pause to compare notes, not collect interviews.</p>\n<div class=\"route\">\n<svg viewBox=\"0 0 62 24\" role=\"img\" aria-label=\"Loop route returning to the starting point\">\n<path d=\"M8 17H45C58 17 58 5 45 5H25C16 5 17 17 8 17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"/>\n<circle cx=\"8\" cy=\"17\" r=\"3\" fill=\"currentColor\"/>\n<path d=\"m34 2 4 3-4 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"/>\n</svg>\n<span>1.6 km loop · Step-free · Dress for the weather</span>\n</div>\n</div>\n<div class=\"action\">\n<div class=\"availability\"><strong><span class=\"dot\" aria-hidden=\"true\"></span>8 places left</strong><small>12 people · Outdoors</small></div>\n<button type=\"button\" aria-label=\"View event: Community walk\">View event <span aria-hidden=\"true\">↗</span></button>\n</div>\n</article>\n</li>\n<li>\n<article class=\"event\" aria-labelledby=\"talk-title\">\n<div class=\"date\"><strong>22</strong><span>Oct · Thu</span></div>\n<div>\n<h2 id=\"talk-title\">Evening talk</h2>\n<p class=\"details\"><time datetime=\"2026-10-22T18:00:00+01:00\">18:00–19:15</time><span class=\"venue\">Arnolfini · 16 Narrow Quay</span></p>\n<p class=\"description\">What do we owe the people we observe? Researcher Maya Shah leads a conversation on consent, reciprocity and sharing findings back with communities.</p>\n</div>\n<div class=\"action\">\n<div class=\"availability\"><span class=\"sold\">Sold out</span><br><small>32 of 32 places taken</small></div>\n<button type=\"button\" aria-label=\"View event: Evening talk\">View event <span aria-hidden=\"true\">↗</span></button>\n</div>\n</article>\n</li>\n</ol>\n</section>\n</main>\n<footer>\n<p>Small groups. Shared practice. Open to every member of the field team.</p>\n<p>Access information included in each event.</p>\n</footer>\n</body>\n</html>"}]}
{"id":"sft-documents-2","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a document library for Fieldwork. Include search and type filter, a table for Project brief, Research summary and Brand guide with realistic owners, version, updated date and file sizes. Include Upload document and a compact storage summary. Make the latest version clear. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Document library\", \"Project brief\", \"Research summary\", \"Brand guide\", \"Upload document\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Document library · Fieldwork</title>\n<style>\n:root{color-scheme:light;--ink:#292c27;--muted:#6b6e65;--line:#dedfd7;--paper:#fff;--wash:#f5f5ef;--soft:#eeeeE7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--wash);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit;color:inherit}\nbutton,input,select{border-radius:6px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}\n.topbar{height:76px;padding:0 40px;border-bottom:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand-group,.account,.brand{display:flex;align-items:center;gap:12px}\n.brand{font-size:21px;font-weight:750;letter-spacing:-.7px}\n.mark{width:27px;height:27px;background:var(--ink);color:var(--paper);display:grid;place-items:center;border-radius:5px;font-size:20px;font-weight:600}\n.workspace{border-left:1px solid var(--line);margin-left:10px;padding-left:22px;color:var(--muted)}\n.account{color:var(--muted);font-size:12px}\n.avatar{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);font-size:11px;font-weight:650}\nmain{max-width:1120px;margin:0 auto;padding:42px 28px 32px}\n.eyebrow{font-size:11px;font-weight:650;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}\n.heading{display:flex;align-items:center;justify-content:space-between;gap:28px}\nh1{font-size:38px;line-height:1.15;letter-spacing:-1.3px;margin:0 0 12px;font-weight:650}\n.description{margin:0;color:var(--muted);font-size:15px}\n.upload{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:11px 17px;font-weight:600;white-space:nowrap}\n.upload svg{width:17px;height:17px}\n.summary{display:flex;align-items:center;gap:14px;margin:24px 0 16px;font-size:12px}\n.count{font-weight:650}\n.status{display:inline-flex;align-items:center;gap:6px;color:var(--muted);border-left:1px solid var(--line);padding-left:14px}\n.status svg{width:14px;height:14px}\n.library{background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden}\n.filters{display:flex;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}\n.field{display:flex;flex-direction:column;gap:6px}\n.field.search{flex:1}\n.field.type{width:190px}\nlabel{font-size:12px;font-weight:600}\n.input-wrap{position:relative}\n.input-wrap svg{position:absolute;left:12px;top:12px;width:17px;height:17px;color:var(--muted);pointer-events:none}\ninput,select{width:100%;height:42px;background:var(--paper);border:1px solid #c9ccc1;padding:0 12px}\ninput{padding-left:38px}\ninput::placeholder{color:#777a70;opacity:1}\ntable{width:100%;border-collapse:collapse;text-align:left}\ncaption,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\nth{background:#fafaf6;color:var(--muted);font-size:11px;font-weight:550;padding:12px 16px;border-bottom:1px solid var(--line)}\nth:first-child,td:first-child{padding-left:24px}\nth:last-child,td:last-child{padding-right:24px;text-align:right}\ntd{padding:23px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px}\ntbody tr:last-child td{border-bottom:0}\n.file{display:flex;align-items:center;gap:13px}\n.file-icon{width:37px;height:44px;flex-shrink:0;border:1px solid #cdd0c4;border-radius:4px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;background:var(--wash);font-size:8px;letter-spacing:.4px;font-weight:700}\n.file strong{display:block;font-size:14px;font-weight:650}\n.secondary{display:block;color:var(--muted);font-size:12px;margin-top:3px}\n.owner{white-space:nowrap}\n.version{font-weight:600}\n.latest{display:inline-block;margin-top:4px;font-size:10px;font-weight:550;border:1px solid var(--line);border-radius:4px;line-height:1.5;padding:0 5px}\n.date,.size{white-space:nowrap;font-variant-numeric:tabular-nums}\n.cell-label{display:none}\n.bottom{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;padding:24px 0}\n.storage-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:9px}\n.storage-head strong{font-weight:600}\n.storage-head span{color:var(--muted)}\nmeter{display:block;width:100%;height:5px;border:0;background:var(--line);border-radius:4px;overflow:hidden}\nmeter::-webkit-meter-bar{height:5px;border:0;background:var(--line)}\nmeter::-webkit-meter-optimum-value{background:var(--ink);min-width:4px}\nmeter::-moz-meter-bar{background:var(--ink);min-width:4px}\n.storage-note{font-size:11px;color:var(--muted);margin:6px 0 0}\n.next{border-left:1px solid var(--line);padding-left:30px}\n.next h2{font-size:11px;letter-spacing:.9px;text-transform:uppercase;margin:0 0 5px;font-weight:650;color:var(--muted)}\n.next p{font-size:13px;margin:0;max-width:390px}\n@media(max-width:700px){\n.topbar{height:64px;padding:0 16px;gap:10px}\n.brand{font-size:19px;gap:8px}\n.mark{width:24px;height:24px;font-size:18px}\n.brand-group{gap:0}\n.workspace{font-size:12px;margin-left:15px;padding-left:15px}\n.account>span:first-child{display:none}\nmain{padding:26px 16px 20px}\n.eyebrow{font-size:10px;margin-bottom:8px}\n.heading{align-items:flex-start;flex-direction:column;gap:17px}\nh1{font-size:30px;letter-spacing:-1px;margin-bottom:9px}\n.description{font-size:13px;max-width:340px}\n.upload{padding:9px 13px;font-size:13px}\n.summary{margin:19px 0 12px;font-size:11px;gap:10px}\n.status{padding-left:10px}\n.filters{padding:14px;gap:10px}\n.field.search{min-width:0}\n.field.type{width:116px;flex-shrink:0}\nlabel{font-size:11px}\ninput,select{font-size:12px;padding-right:8px;height:40px}\ninput{padding-left:32px}\n.input-wrap svg{left:10px;width:15px;top:12px}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}\ntable,tbody{display:block}\ntr{display:grid;grid-template-columns:1.15fr .8fr 1.15fr .7fr;gap:12px 8px;padding:16px 14px;border-bottom:1px solid var(--line)}\ntr:last-child{border-bottom:0}\ntd,th:first-child,td:first-child,td:last-child{padding:0;border:0;text-align:left;min-width:0;font-size:11px}\ntd:first-child{grid-column:1/-1}\n.file{gap:10px}\n.file-icon{width:30px;height:36px;font-size:7px;padding-bottom:5px}\n.file strong{font-size:13px}\n.secondary{font-size:11px;margin-top:1px}\n.owner .secondary{display:none}\n.cell-label{display:block;color:var(--muted);font-size:10px;margin-bottom:3px;font-weight:400}\n.version{font-weight:550}\n.latest{font-size:9px;margin:3px 0 0;padding:0 4px}\n.date{font-size:10.5px}\n.bottom{grid-template-columns:1fr;gap:20px;padding-top:20px}\n.next{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n  <div class=\"brand-group\">\n    <div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\">f</span>Fieldwork</div>\n    <span class=\"workspace\">The Spoke Room</span>\n  </div>\n  <div class=\"account\"><span>Shop workspace</span><span class=\"avatar\" aria-label=\"Maya Patel\">MP</span></div>\n</header>\n<main id=\"library\">\n  <p class=\"eyebrow\">The Spoke Room · Workspace files</p>\n  <div class=\"heading\">\n    <div>\n      <h1>Document library</h1>\n      <p class=\"description\">Plans, rider research and brand files for your independent bike shop.</p>\n    </div>\n    <button class=\"upload\" type=\"button\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" aria-hidden=\"true\"><path d=\"M12 16V4m-5 5 5-5 5 5M4 16v4h16v-4\"/></svg>\n      Upload document\n    </button>\n  </div>\n  <div class=\"summary\">\n    <span class=\"count\">3 documents</span>\n    <span class=\"status\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"8\"/><path d=\"m6 10 2.5 2.5L14 7\"/></svg>Latest versions shown</span>\n  </div>\n  <section class=\"library\" aria-label=\"Shop documents\">\n    <form class=\"filters\" role=\"search\">\n      <div class=\"field search\">\n        <label for=\"document-search\">Search documents</label>\n        <div class=\"input-wrap\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 5 5\"/></svg>\n          <input id=\"document-search\" type=\"search\" placeholder=\"Name or owner\">\n        </div>\n      </div>\n      <div class=\"field type\">\n        <label for=\"file-type\">File type</label>\n        <select id=\"file-type\"><option>All types</option><option>PDF</option><option>DOCX</option></select>\n      </div>\n    </form>\n    <table>\n      <caption>Current shop documents, showing the latest version of each file.</caption>\n      <thead><tr><th scope=\"col\">Document</th><th scope=\"col\">Owner</th><th scope=\"col\">Version</th><th scope=\"col\">Updated</th><th scope=\"col\">Size</th></tr></thead>\n      <tbody>\n        <tr>\n          <td><div class=\"file\"><span class=\"file-icon\" aria-label=\"Word document\">DOCX</span><div><strong>Project brief</strong><span class=\"secondary\">Spring tune-up campaign</span></div></div></td>\n          <td class=\"owner\"><span class=\"cell-label\">Owner</span>Maya Patel<span class=\"secondary\">Shop owner</span></td>\n          <td><span class=\"cell-label\">Version</span><span class=\"version\">v1.3</span><br><span class=\"latest\">Latest</span></td>\n          <td class=\"date\"><span class=\"cell-label\">Updated</span><time datetime=\"2025-03-18\">18 Mar 2025</time></td>\n          <td class=\"size\"><span class=\"cell-label\">Size</span>248 KB</td>\n        </tr>\n        <tr>\n          <td><div class=\"file\"><span class=\"file-icon\">PDF</span><div><strong>Research summary</strong><span class=\"secondary\">Insights from 12 local riders</span></div></div></td>\n          <td class=\"owner\"><span class=\"cell-label\">Owner</span>Leo Brooks<span class=\"secondary\">Researcher</span></td>\n          <td><span class=\"cell-label\">Version</span><span class=\"version\">v2.0</span><br><span class=\"latest\">Latest</span></td>\n          <td class=\"date\"><span class=\"cell-label\">Updated</span><time datetime=\"2025-03-15\">15 Mar 2025</time></td>\n          <td class=\"size\"><span class=\"cell-label\">Size</span>3.4 MB</td>\n        </tr>\n        <tr>\n          <td><div class=\"file\"><span class=\"file-icon\">PDF</span><div><strong>Brand guide</strong><span class=\"secondary\">Shop signage, print and social</span></div></div></td>\n          <td class=\"owner\"><span class=\"cell-label\">Owner</span>Nina Ellis<span class=\"secondary\">Designer</span></td>\n          <td><span class=\"cell-label\">Version</span><span class=\"version\">v3.1</span><br><span class=\"latest\">Latest</span></td>\n          <td class=\"date\"><span class=\"cell-label\">Updated</span><time datetime=\"2025-03-12\">12 Mar 2025</time></td>\n          <td class=\"size\"><span class=\"cell-label\">Size</span>8.6 MB</td>\n        </tr>\n      </tbody>\n    </table>\n  </section>\n  <footer class=\"bottom\">\n    <section aria-label=\"Storage usage\">\n      <div class=\"storage-head\"><strong>Storage</strong><span>12.2 MB of 2 GB used</span></div>\n      <meter min=\"0\" max=\"2000\" value=\"12.2\" aria-label=\"Storage used: 12.2 megabytes of 2 gigabytes\">Less than 1% used</meter>\n      <p class=\"storage-note\">Less than 1% used · Plenty of room for your next upload.</p>\n    </section>\n    <section class=\"next\">\n      <h2>Next step</h2>\n      <p>Review the brand guide before sending new shop signage to your printer.</p>\n    </section>\n  </footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-documents-3","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a document library for Common. Include search and type filter, a table for Project brief, Research summary and Brand guide with realistic owners, version, updated date and file sizes. Include Upload document and a compact storage summary. Make the latest version clear. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Document library\", \"Project brief\", \"Research summary\", \"Brand guide\", \"Upload document\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Document library · Common</title>\n<style>\n:root{--paper:#f7f7f2;--ink:#252c27;--muted:#697067;--line:#dce0d6;--green:#365b40;--pale:#eaf0e5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #8fa785;outline-offset:3px}\n.topbar{border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1160px;margin:auto;min-height:76px;padding:0 24px;display:flex;align-items:center;gap:25px}\n.wordmark{font-size:25px;font-weight:750;letter-spacing:-1.2px}\n.workspace{border-left:1px solid var(--line);padding-left:25px;color:var(--muted)}\n.account{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px}\n.avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e6e9df;color:#4c5848;font-size:10px;font-weight:650;flex-shrink:0}\nmain{max-width:1160px;margin:auto;padding:43px 24px 32px}\n.eyebrow{margin:0 0 9px;font-size:11px;letter-spacing:1.7px;text-transform:uppercase;font-weight:650;color:var(--green)}\n.heading-row{display:flex;justify-content:space-between;align-items:center;gap:24px}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:52px;line-height:1.08;letter-spacing:-1.9px;font-weight:400;margin:0}\n.intro{color:var(--muted);max-width:550px;margin:15px 0 0;font-size:15px}\n.upload{border:1px solid var(--green);background:var(--green);color:white;border-radius:4px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font-weight:600;font-size:13px}\n.plus{font-size:21px;line-height:1;font-weight:400}\n.tools{margin-top:32px;padding:21px 0;display:grid;grid-template-columns:minmax(0,390px) 180px;gap:16px;border-top:1px solid var(--line)}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\ninput,select{width:100%;height:42px;border:1px solid #cbd1c5;border-radius:4px;background:#fff;color:var(--ink);padding:9px 12px;min-width:0}\ninput::placeholder{color:#80867d}\n.library{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden}\n.table-note{padding:13px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}\n.table-note strong{font-weight:600;color:var(--ink)}\ntable{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}\nth{background:#f3f4ee;color:var(--muted);font-size:11px;font-weight:600;padding:11px 16px}\nth:first-child{width:39%;padding-left:20px}\nth:nth-child(2){width:19%}\nth:nth-child(3){width:17%}\nth:nth-child(4){width:16%}\nth:last-child{width:9%;text-align:right;padding-right:20px}\ntd{padding:23px 16px;border-top:1px solid var(--line);font-size:13px;vertical-align:middle}\ntd:first-child{padding-left:20px}\ntd:last-child{text-align:right;padding-right:20px;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}\n.document{display:flex;align-items:center;gap:13px;min-width:0}\n.file{width:36px;height:43px;border:1px solid #d6dcd0;border-radius:3px;background:#f7f8f3;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.2px;color:#65745e}\n.file.word{background:#edf1f4;border-color:#d9e0e6;color:#5d6f7c}\n.document strong{display:block;font-size:14px;font-weight:600}\n.document small{display:block;color:var(--muted);font-size:12px;margin-top:3px}\n.owner{display:flex;align-items:center;gap:8px}\n.owner .avatar{width:27px;height:27px;font-size:9px}\n.owner .blue{background:#e8edf0;color:#5e6d78}\n.owner .sand{background:#eee9df;color:#786c55}\n.version{display:flex;align-items:center;gap:7px}\n.latest{display:inline-block;border-radius:3px;padding:2px 6px;background:var(--pale);color:var(--green);font-size:10px;font-weight:600}\n.date{color:#596153;font-variant-numeric:tabular-nums}\n.mobile-label{display:none}\n.details{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.details h2{font-size:12px;font-weight:650;margin:0 0 8px}\n.storage-line{display:flex;justify-content:space-between;gap:15px;font-size:12px}\n.storage-line span{color:var(--muted)}\n.storage-bar{width:100%;height:7px;display:block;margin:10px 0 8px}\n.storage small{font-size:11px;color:var(--muted)}\n.version-note{border-left:1px solid var(--line);padding-left:32px}\n.version-note p{margin:0;color:var(--muted);font-size:13px;max-width:420px}\nfooter{display:flex;justify-content:space-between;gap:15px;padding-top:17px;font-size:11px;color:var(--muted)}\n@media(max-width:650px){\n.topbar-inner{min-height:62px;padding:0 20px;gap:17px}\n.wordmark{font-size:23px}\n.workspace{padding-left:17px;font-size:12px}\n.account{display:none}\nmain{padding:27px 18px 24px}\n.eyebrow{font-size:10px;margin-bottom:9px}\n.heading-row{display:block}\nh1{font-size:39px;letter-spacing:-1.5px}\n.intro{font-size:13px;margin-top:12px;max-width:330px}\n.upload{margin-top:18px;padding:9px 13px;font-size:12px}\n.tools{margin-top:22px;padding:17px 0;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px}\nlabel{font-size:11px}\ninput,select{font-size:12px;padding:8px;height:39px}\n.table-note{padding:10px 12px;font-size:10px}\ntable,tbody{display:block;width:100%}\nthead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\ntr{display:grid;grid-template-columns:1.15fr .85fr 1.12fr .72fr;gap:0 8px;padding:13px 12px;border-top:1px solid var(--line)}\ntbody tr:first-child{border-top:0}\ntd,td:first-child,td:last-child{border:0;padding:0;text-align:left;white-space:normal;font-size:11px;min-width:0}\ntd:first-child{grid-column:1/-1;margin-bottom:12px}\n.document{gap:10px}\n.file{height:36px;width:30px;font-size:8px}\n.document strong{font-size:13px}\n.document small{font-size:10px;margin-top:1px}\n.mobile-label{display:block;color:var(--muted);font-size:9px;margin-bottom:3px;font-weight:500}\n.owner .avatar{display:none}\n.owner{line-height:1.4}\n.version{flex-wrap:wrap;gap:3px 5px;line-height:1.4}\n.latest{font-size:8px;padding:1px 4px}\n.date{font-size:10px;white-space:nowrap}\n.details{margin-top:18px;padding:17px 0;gap:17px;grid-template-columns:1fr}\n.details h2{font-size:11px;margin-bottom:6px}\n.version-note{border-left:0;border-top:1px solid var(--line);padding:14px 0 0}\n.version-note p{font-size:12px}\nfooter{font-size:10px;padding-top:13px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<span class=\"wordmark\">Common</span>\n<span class=\"workspace\">Northline Cycles</span>\n<div class=\"account\"><span class=\"avatar\" aria-hidden=\"true\">MC</span><span>Maya Chen</span></div>\n</div>\n</header>\n<main id=\"library\">\n<header>\n<p class=\"eyebrow\">Shop workspace / Documents</p>\n<div class=\"heading-row\">\n<h1>Document library</h1>\n<button class=\"upload\" type=\"button\"><span class=\"plus\" aria-hidden=\"true\">+</span>Upload document</button>\n</div>\n<p class=\"intro\">The shop’s shared reference shelf. Find the latest plans, rider research and brand files, ready for the next handoff.</p>\n</header>\n\n<form class=\"tools\" role=\"search\">\n<div>\n<label for=\"document-search\">Search documents</label>\n<input id=\"document-search\" name=\"search\" type=\"search\" placeholder=\"Search by name or keyword\">\n</div>\n<div>\n<label for=\"document-type\">Document type</label>\n<select id=\"document-type\" name=\"type\">\n<option>All types</option>\n<option>PDF</option>\n<option>Word document</option>\n</select>\n</div>\n</form>\n\n<section class=\"library\" aria-label=\"Shared documents\">\n<div class=\"table-note\"><strong>3 documents</strong><span>Most recently updated first</span></div>\n<table aria-label=\"Document library files\">\n<thead><tr><th scope=\"col\">Document</th><th scope=\"col\">Owner</th><th scope=\"col\">Version</th><th scope=\"col\">Updated</th><th scope=\"col\">Size</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"document\"><span class=\"file word\" aria-hidden=\"true\">DOCX</span><div><strong>Project brief</strong><small>Spring service &amp; commuter campaign · DOCX</small></div></div></td>\n<td><span class=\"mobile-label\">Owner</span><span class=\"owner\"><span class=\"avatar\" aria-hidden=\"true\">MC</span>Maya Chen</span></td>\n<td><span class=\"mobile-label\">Version</span><span class=\"version\">v1.4 <span class=\"latest\">Latest</span></span></td>\n<td><span class=\"mobile-label\">Updated</span><time class=\"date\" datetime=\"2025-06-12\">12 Jun 2025</time></td>\n<td><span class=\"mobile-label\">Size</span>248 KB</td>\n</tr>\n<tr>\n<td><div class=\"document\"><span class=\"file\" aria-hidden=\"true\">PDF</span><div><strong>Research summary</strong><small>Local rider interviews &amp; service needs · PDF</small></div></div></td>\n<td><span class=\"mobile-label\">Owner</span><span class=\"owner\"><span class=\"avatar blue\" aria-hidden=\"true\">EB</span>Elliot Brooks</span></td>\n<td><span class=\"mobile-label\">Version</span><span class=\"version\">v2.1 <span class=\"latest\">Latest</span></span></td>\n<td><span class=\"mobile-label\">Updated</span><time class=\"date\" datetime=\"2025-06-10\">10 Jun 2025</time></td>\n<td><span class=\"mobile-label\">Size</span>1.8 MB</td>\n</tr>\n<tr>\n<td><div class=\"document\"><span class=\"file\" aria-hidden=\"true\">PDF</span><div><strong>Brand guide</strong><small>Logo, shop signage &amp; tone of voice · PDF</small></div></div></td>\n<td><span class=\"mobile-label\">Owner</span><span class=\"owner\"><span class=\"avatar sand\" aria-hidden=\"true\">SR</span>Sam Rivera</span></td>\n<td><span class=\"mobile-label\">Version</span><span class=\"version\">v3.0 <span class=\"latest\">Latest</span></span></td>\n<td><span class=\"mobile-label\">Updated</span><time class=\"date\" datetime=\"2025-06-06\">6 Jun 2025</time></td>\n<td><span class=\"mobile-label\">Size</span>4.6 MB</td>\n</tr>\n</tbody>\n</table>\n</section>\n\n<aside class=\"details\" aria-label=\"Storage and version information\">\n<section class=\"storage\">\n<h2>Workspace storage</h2>\n<div class=\"storage-line\"><strong>1.2 GB <span>of 5 GB used</span></strong><span>24%</span></div>\n<svg class=\"storage-bar\" viewBox=\"0 0 500 7\" preserveAspectRatio=\"none\" role=\"img\" aria-label=\"Storage: 24 percent used, 76 percent available\">\n<rect width=\"500\" height=\"7\" rx=\"3.5\" fill=\"#e1e5da\"/>\n<rect width=\"120\" height=\"7\" rx=\"3.5\" fill=\"#65805a\"/>\n</svg>\n<small>3.8 GB available · Includes all workspace files and versions</small>\n</section>\n<section class=\"version-note\">\n<h2>The right version, every time</h2>\n<p><span class=\"latest\">Latest</span> marks the current version. Use this copy for shop signage, print orders and team handoffs.</p>\n</section>\n</aside>\n<footer><span>Shared with all 6 shop teammates</span><span>Northline Cycles · Common</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-documents-8","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a document library for Fieldwork. Include search and type filter, a table for Project brief, Research summary and Brand guide with realistic owners, version, updated date and file sizes. Include Upload document and a compact storage summary. Make the latest version clear. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Document library\", \"Project brief\", \"Research summary\", \"Brand guide\", \"Upload document\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Document library — Fieldwork</title>\n<style>\n:root{--paper:#f9f8f4;--white:#fff;--ink:#282e29;--muted:#70756e;--line:#dedfd6;--green:#304b3d;--soft:#edf1e9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,a,input,select{outline-offset:4px}\nbutton{cursor:pointer}\na{color:inherit;text-decoration:none}\n.topbar{height:76px;padding:0 40px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:60px;background:var(--white)}\n.wordmark{font:29px Georgia,serif;letter-spacing:-1px}\nnav{display:flex;gap:30px;height:100%;align-items:center}\nnav a{height:100%;display:flex;align-items:center;color:var(--muted);border-bottom:2px solid transparent}\nnav a[aria-current]{border-color:var(--green);color:var(--ink)}\n.practice{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}\n.avatar{border:1px solid var(--line);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--ink);font-size:11px}\nmain{max-width:1240px;padding:30px 40px 48px;margin:auto}\n.breadcrumb{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}\n.breadcrumb strong{font-weight:500;color:var(--ink)}\n.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}\nh1{font:40px/1.15 Georgia,serif;letter-spacing:-1px;margin:0 0 10px}\n.page-head p{color:var(--muted);margin:0}\n.upload{border:1px solid var(--green);background:var(--green);color:white;border-radius:3px;padding:12px 18px;display:flex;gap:10px;align-items:center;white-space:nowrap;font-weight:500}\n.upload svg{width:17px;height:17px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 238px;gap:28px;align-items:start}\n.library{min-width:0}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:16px;padding:20px;background:#f0f0e9;border:1px solid var(--line)}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:6px}\ninput,select{width:100%;min-width:0;border:1px solid #cbd0c5;background:var(--white);border-radius:2px;color:var(--ink);height:42px;padding:8px 11px}\ninput::placeholder{color:#858980}\n.search-field{position:relative}\n.search-field svg{position:absolute;left:12px;top:13px;width:16px;height:16px;color:var(--muted)}\n.search-field input{padding-left:37px}\n.list-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:21px 0 12px;font-size:12px;color:var(--muted)}\n.list-summary strong{color:var(--ink);font-weight:500}\ntable{border-collapse:collapse;width:100%;text-align:left;background:var(--white)}\nth{font-size:11px;font-weight:500;color:var(--muted);background:var(--paper);padding:11px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\ntd{padding:21px 10px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}\nth:first-child,td:first-child{padding-left:14px}\nth:last-child,td:last-child{text-align:right;padding-right:14px;white-space:nowrap}\n.document{display:flex;align-items:center;gap:11px}\n.file{flex:0 0 31px;height:39px;border:1px solid #cdd1c6;border-radius:2px;display:flex;align-items:end;justify-content:center;padding-bottom:5px;font-size:8px;letter-spacing:.3px;color:#65705e;background:#fafbf7;position:relative}\n.file:before{content:\"\";position:absolute;top:7px;left:7px;width:15px;height:1px;background:#d3d8cc;box-shadow:0 4px #d3d8cc}\n.document strong{font-size:14px;font-weight:600;display:block;white-space:nowrap}\n.kind{display:block;color:var(--muted);font-size:11px;margin-top:2px}\n.owner{white-space:nowrap}\n.version{white-space:nowrap}\n.version b{font-weight:500;display:block;margin-bottom:4px}\n.latest{font-size:10px;display:inline-flex;align-items:center;gap:4px;color:var(--green);background:var(--soft);padding:2px 6px;border-radius:3px}\n.latest:before{content:\"\";width:4px;height:4px;background:var(--green);border-radius:50%}\n.date{white-space:nowrap}\n.library-note{display:flex;gap:8px;color:var(--muted);font-size:11px;margin:14px 0 0;max-width:500px}\n.library-note svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}\n.details{border-top:3px solid var(--ink);background:#eeeee6;padding:18px 18px 20px}\n.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;margin:0 0 16px;color:var(--muted)}\n.details h2{font:24px/1.2 Georgia,serif;margin:0 0 7px}\n.project-meta{font-size:12px;color:var(--muted);margin:0}\ndl{border-top:1px solid #d6d8ce;padding-top:16px;margin:18px 0}\ndt{font-size:11px;line-height:1.6;color:var(--muted);max-width:185px}\ndd{margin:7px 0 0;font-size:12px}\n.storage{border-top:1px solid #d6d8ce;padding-top:15px}\n.storage-head{display:flex;justify-content:space-between;font-size:11px;gap:10px;align-items:baseline}\n.storage label{margin:0;font-size:11px;font-weight:500}\nmeter{display:block;width:100%;height:6px;margin:10px 0;appearance:none;border:0;border-radius:0;background:#d8dbd1}\nmeter::-webkit-meter-bar{background:#d8dbd1;border:0;border-radius:0}\nmeter::-webkit-meter-optimum-value{background:var(--green)}\nmeter::-moz-meter-bar{background:var(--green)}\n.storage p{font-size:11px;color:var(--muted);margin:0}\n@media(min-width:1050px){td{height:104px}}\n@media(max-width:1050px) and (min-width:701px){.layout{grid-template-columns:minmax(0,1fr)}.details{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.details dl,.storage{margin:0;padding:0;border:0}.eyebrow{margin-bottom:8px}}\n@media(max-width:700px){\n.topbar{height:60px;padding:0 20px;gap:25px}.wordmark{font-size:26px}nav{margin-left:auto;gap:0}nav a{font-size:12px}nav a:not([aria-current]){display:none}.practice{margin-left:0}.practice-name{display:none}\nmain{padding:20px 20px 30px}.breadcrumb{font-size:11px;margin-bottom:20px;gap:7px}\n.page-head{align-items:flex-start;flex-direction:column;gap:17px;margin-bottom:22px}h1{font-size:34px;margin-bottom:8px}.page-head p{font-size:12px}.upload{padding:10px 14px;font-size:13px}\n.layout{grid-template-columns:minmax(0,1fr);gap:25px}\n.filters{padding:13px;grid-template-columns:minmax(0,1fr) 106px;gap:10px}label{font-size:11px}input,select{font-size:12px;height:40px;padding-left:8px}.search-field input{padding-left:31px}.search-field svg{left:10px;width:14px}.list-summary{padding-top:17px;font-size:11px}\ntable,tbody{display:block}thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}\ntr{display:grid;grid-template-columns:1fr 1.25fr .7fr;padding:14px 13px;border-bottom:1px solid var(--line);gap:0 10px}\ntbody{border-top:1px solid var(--line)}td{display:block;padding:0;border:0;font-size:11px}td:first-child{grid-column:1/-1;padding:0}.document strong{font-size:14px}.kind{display:none}.file{height:32px}\ntd.owner{grid-column:1/-1;padding:3px 0 0 42px;color:var(--muted);font-size:11px}.owner:before{content:\"Owner · \"}\ntd.version,td.date,td.size{padding:12px 0 0;text-align:left}\ntd[data-label]:before{content:attr(data-label);display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.version b{display:inline;margin-right:3px}.latest{font-size:9px;padding:1px 4px;gap:3px}.latest:before{display:none}\n.library-note{font-size:10px;margin-top:11px}.details{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.eyebrow{margin-bottom:8px}.details h2{font-size:21px}.project-meta{font-size:11px}.details dl{border:0;padding:0;margin:0}dt{font-size:10px}dd{font-size:11px}.storage{grid-column:1/-1;padding-top:12px}.storage p{font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<a class=\"wordmark\" href=\"#\" aria-label=\"Fieldwork home\">Fieldwork<span aria-hidden=\"true\">.</span></a>\n<nav aria-label=\"Main navigation\"><a href=\"#project\">Projects</a><a href=\"#library\" aria-current=\"page\">Documents</a><a href=\"#team\">People</a></nav>\n<div class=\"practice\"><span class=\"practice-name\">Fieldwork Architecture</span><span class=\"avatar\" aria-label=\"Lena Morgan\">LM</span></div>\n</header>\n<main id=\"library\">\n<div class=\"breadcrumb\" aria-label=\"Breadcrumb\"><span>Projects</span><span aria-hidden=\"true\">/</span><span>Hawthorn House</span><span aria-hidden=\"true\">/</span><strong>Documents</strong></div>\n<header class=\"page-head\">\n<div><h1>Document library</h1><p>Current working files for the Hawthorn House team.</p></div>\n<button class=\"upload\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M12 16V3m-5 5 5-5 5 5M4 15v6h16v-6\"/></svg>Upload document</button>\n</header>\n<div class=\"layout\">\n<section class=\"library\" aria-label=\"Project documents\">\n<form class=\"filters\" role=\"search\">\n<div><label for=\"search\">Search documents</label><div class=\"search-field\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"6.5\"/><path d=\"m15 15 6 6\"/></svg><input id=\"search\" name=\"search\" type=\"search\" placeholder=\"Find a document…\"></div></div>\n<div><label for=\"type\">File type</label><select id=\"type\" name=\"type\"><option>All types</option><option>PDF</option><option>Word</option></select></div>\n</form>\n<div class=\"list-summary\"><strong>3 documents</strong><span>Sorted by last updated ↓</span></div>\n<table aria-label=\"Current document versions\">\n<thead><tr><th scope=\"col\">Document</th><th scope=\"col\">Owner</th><th scope=\"col\">Version</th><th scope=\"col\">Updated</th><th scope=\"col\">Size</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"document\"><span class=\"file\" aria-hidden=\"true\">DOCX</span><div><strong>Project brief</strong><span class=\"kind\">Word document</span></div></div></td>\n<td class=\"owner\">Lena Morgan</td>\n<td class=\"version\" data-label=\"Version\"><b>v2.4</b><span class=\"latest\">Latest</span></td>\n<td class=\"date\" data-label=\"Updated\"><time datetime=\"2025-06-18\">18 Jun 2025</time></td>\n<td class=\"size\" data-label=\"Size\">2.4 MB</td>\n</tr>\n<tr>\n<td><div class=\"document\"><span class=\"file\" aria-hidden=\"true\">PDF</span><div><strong>Research summary</strong><span class=\"kind\">PDF document</span></div></div></td>\n<td class=\"owner\">Theo Bennett</td>\n<td class=\"version\" data-label=\"Version\"><b>v1.3</b><span class=\"latest\">Latest</span></td>\n<td class=\"date\" data-label=\"Updated\"><time datetime=\"2025-06-16\">16 Jun 2025</time></td>\n<td class=\"size\" data-label=\"Size\">18.2 MB</td>\n</tr>\n<tr>\n<td><div class=\"document\"><span class=\"file\" aria-hidden=\"true\">PDF</span><div><strong>Brand guide</strong><span class=\"kind\">PDF document</span></div></div></td>\n<td class=\"owner\">Amara Shah</td>\n<td class=\"version\" data-label=\"Version\"><b>v3.0</b><span class=\"latest\">Latest</span></td>\n<td class=\"date\" data-label=\"Updated\"><time datetime=\"2025-06-12\">12 Jun 2025</time></td>\n<td class=\"size\" data-label=\"Size\">64.0 MB</td>\n</tr>\n</tbody>\n</table>\n<p class=\"library-note\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"8\"/><path d=\"M10 9v5m0-9v1\"/></svg>Latest issues shown. Superseded revisions belong in the project archive, not the live issue set.</p>\n</section>\n<aside class=\"details\" id=\"project\" aria-label=\"Library details\">\n<div><p class=\"eyebrow\">Library details</p><h2>Hawthorn House</h2><p class=\"project-meta\">HH–024 · Residential<br>RIBA Stage 3 — Spatial coordination</p></div>\n<dl><dt>Architecture, interiors and landscape coordination reference documents</dt><dd>Shared with the project team</dd></dl>\n<div class=\"storage\"><div class=\"storage-head\"><label for=\"storage\">Storage</label><span>84.6 MB / 2 GB</span></div><meter id=\"storage\" min=\"0\" max=\"2000\" value=\"84.6\">84.6 MB of 2 GB</meter><p>4.2% used · 1.92 GB available</p></div>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-documents-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a document library for Rill. Include search and type filter, a table for Project brief, Research summary and Brand guide with realistic owners, version, updated date and file sizes. Include Upload document and a compact storage summary. Make the latest version clear. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Document library\", \"Project brief\", \"Research summary\", \"Brand guide\", \"Upload document\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Document library · Rill</title>\n<style>\n:root{--paper:#f6f4ef;--white:#fffefa;--ink:#242e29;--muted:#697068;--line:#dcded5;--soft:#eaece5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select,a{outline-offset:4px}\nbutton{cursor:pointer}\n.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}\n.brand{font-size:29px;font-weight:750;letter-spacing:-1.5px;display:flex;align-items:center;gap:13px}\n.mark{width:24px;height:28px;border:2px solid var(--ink);border-top:0;transform:skewY(-16deg);position:relative}\n.mark:after{content:\"\";position:absolute;left:9px;top:0;height:26px;border-left:2px solid var(--ink)}\n.studio{display:flex;align-items:center;gap:14px;font-size:13px}\n.avatar{display:grid;place-items:center;width:33px;height:33px;border:1px solid #cdd2c7;border-radius:50%;font-size:11px;font-weight:650;background:var(--soft)}\nmain{max-width:1200px;margin:auto;padding:30px 48px 40px}\n.breadcrumb{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin-bottom:29px}\n.breadcrumb span:last-child{color:var(--ink)}\n.project-code{margin:0 0 5px;font-size:11px;font-weight:650;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}\n.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}\nh1{font-size:34px;letter-spacing:-1.2px;line-height:1.2;margin:0 0 10px;font-weight:600}\n.summary{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}\n.private{border-left:1px solid #c9cec3;padding-left:12px;font-size:12px}\n.upload{border:1px solid var(--ink);background:var(--ink);color:#fffefa;border-radius:5px;min-height:43px;padding:10px 17px;font-weight:550;display:flex;align-items:center;gap:10px;white-space:nowrap}\n.upload svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}\n.library{background:var(--white);border:1px solid var(--line);border-radius:7px;overflow:hidden}\n.filters{display:flex;align-items:end;gap:15px;padding:20px 22px;border-bottom:1px solid var(--line)}\n.field label{display:block;font-size:12px;font-weight:550;margin-bottom:6px}\n.search{flex:1;max-width:420px}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;top:12px;left:12px;width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.6;pointer-events:none}\ninput,select{color:var(--ink);background:var(--white);border:1px solid #c9cec3;border-radius:4px;height:41px;width:100%}\ninput{padding:9px 12px 9px 38px}\ninput::placeholder{color:#7a8078}\n.type{width:175px}\nselect{padding:7px 30px 7px 11px}\n.filter-note{margin:0 0 10px auto;font-size:12px;color:var(--muted)}\ntable{width:100%;border-collapse:collapse;text-align:left}\nth{font-size:11px;font-weight:600;color:var(--muted);padding:13px 16px;background:#f4f5ef}\nth:first-child,td:first-child{padding-left:22px}\nth:last-child,td:last-child{padding-right:22px;text-align:right}\ntd{padding:22px 16px;border-top:1px solid var(--line);font-size:13px;vertical-align:middle}\nth:first-child{width:37%}\n.document{display:flex;align-items:center;gap:13px}\n.file{width:34px;height:42px;flex-shrink:0;border:1px solid #cbd0c4;border-radius:3px;background:#f5f5ef;display:grid;place-items:center;font-size:8px;font-weight:700;letter-spacing:.3px;position:relative}\n.file:after{content:\"\";position:absolute;top:5px;left:7px;right:7px;border-top:2px solid #a2ab9c}\n.doc-title{font-size:15px;font-weight:600;line-height:1.4}\n.doc-meta{margin-top:4px;font-size:11px;color:var(--muted)}\n.review{color:#6c5638}\n.version{display:flex;align-items:center;gap:7px;white-space:nowrap}\n.latest{font-size:10px;font-weight:600;border:1px solid #d7ddcf;border-radius:3px;padding:1px 5px;background:#eff2e9}\n.date,.size{white-space:nowrap;font-variant-numeric:tabular-nums}\n.table-foot{display:flex;justify-content:space-between;gap:15px;padding:12px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}\n.details{display:grid;grid-template-columns:1.65fr 1fr;gap:38px;margin-top:26px}\n.detail-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:9px}\nh2{font-size:13px;margin:0;font-weight:600}\n.detail-head span{font-size:12px;color:var(--muted)}\nprogress{display:block;width:100%;height:5px;border:0;border-radius:3px;overflow:hidden;background:#dfe3d8;accent-color:var(--ink)}\nprogress::-webkit-progress-bar{background:#dfe3d8}\nprogress::-webkit-progress-value{background:var(--ink)}\nprogress::-moz-progress-bar{background:var(--ink)}\n.detail-copy{margin:10px 0 0;color:var(--muted);font-size:12px}\n.detail-copy strong{color:var(--ink);font-weight:550}\n.storage{padding-left:32px;border-left:1px solid var(--line)}\n@media(min-width:1000px){main{padding-top:34px}.heading{margin-bottom:30px}td{height:98px}}\n@media(max-width:700px){\n.topbar{height:59px;padding:0 20px}.brand{font-size:25px;gap:10px}.mark{width:21px;height:24px}.mark:after{height:23px;left:8px}.studio{font-size:11px;gap:9px}.avatar{width:28px;height:28px;font-size:9px}\nmain{padding:18px 18px 26px}.breadcrumb{font-size:11px;margin-bottom:20px;gap:7px}.heading{display:block;margin-bottom:18px}.project-code{font-size:10px}h1{font-size:29px;margin-bottom:7px}.summary{gap:8px;font-size:12px}.private{font-size:10px;padding-left:8px}\n.upload{margin-top:17px;min-height:40px;padding:8px 13px;font-size:12px}\n.filters{padding:14px 13px;gap:10px}.field label{font-size:11px}.type{width:119px;flex-shrink:0}.search{min-width:0}.filter-note{display:none}input,select{font-size:12px;height:38px}input{padding-left:30px}.search-wrap svg{left:9px;top:11px;width:15px}select{padding-left:8px;padding-right:20px}\ntable,tbody{display:block}thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntr{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;padding:13px;border-top:1px solid var(--line)}\ntbody tr:first-child{border-top:0}\ntd,th:first-child,td:first-child,td:last-child{padding:0;border:0;text-align:left}\ntd{font-size:11px}td:first-child{grid-column:1/-1;margin-bottom:3px}\ntd:not(:first-child)::before{content:attr(data-label);font-size:10px;color:var(--muted);margin-right:6px}\ntd:nth-child(3),td:last-child{text-align:right}\n.version{display:inline-flex;gap:5px}.latest{font-size:9px;padding:0 4px}.doc-title{font-size:14px}.doc-meta{margin-top:2px;font-size:10px}.file{width:29px;height:35px;font-size:7px}.document{gap:10px}\n.table-foot{padding:9px 13px;font-size:10px}.table-foot span:last-child{display:none}\n.details{grid-template-columns:1fr;gap:17px;margin-top:20px}.storage{padding:15px 0 0;border-left:0;border-top:1px solid var(--line)}.detail-head{margin-bottom:7px}.detail-copy{font-size:11px;margin-top:7px}.detail-head span{font-size:11px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\"></span>Rill</div>\n<div class=\"studio\"><span>Fieldwork Architects</span><span class=\"avatar\" aria-label=\"Maya Chen\">MC</span></div>\n</header>\n<main id=\"library\">\n<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><span>Projects</span><span aria-hidden=\"true\">/</span><span>Juniper House</span><span aria-hidden=\"true\">/</span><span>Documents</span></nav>\n<div class=\"heading\">\n<div>\n<p class=\"project-code\">24–018 · Juniper House</p>\n<h1>Document library</h1>\n<div class=\"summary\"><span>3 documents · 18.2 MB</span><span class=\"private\">Private project library</span></div>\n</div>\n<button class=\"upload\" type=\"button\"><svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M10 13V3m-4 4 4-4 4 4M3 12v5h14v-5\"/></svg>Upload document</button>\n</div>\n<section class=\"library\" aria-label=\"Project documents\">\n<form class=\"filters\" role=\"search\">\n<div class=\"field search\">\n<label for=\"search\">Search documents</label>\n<div class=\"search-wrap\"><svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"5.5\"/><path d=\"m12 12 5 5\"/></svg><input id=\"search\" type=\"search\" placeholder=\"Search by document name\"></div>\n</div>\n<div class=\"field type\"><label for=\"type\">File type</label><select id=\"type\"><option>All file types</option><option>PDF</option><option>DOCX</option></select></div>\n<p class=\"filter-note\">Current versions only</p>\n</form>\n<table>\n<thead><tr><th scope=\"col\">Document</th><th scope=\"col\">Owner</th><th scope=\"col\">Version</th><th scope=\"col\">Updated</th><th scope=\"col\">Size</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"document\"><span class=\"file\" aria-hidden=\"true\">DOCX</span><div><div class=\"doc-title\">Project brief</div><div class=\"doc-meta\">DOCX · ✓ Ready for issue</div></div></div></td>\n<td data-label=\"Owner\">Maya Chen</td><td data-label=\"Version\"><span class=\"version\">v1.4 <span class=\"latest\">Latest</span></span></td><td class=\"date\" data-label=\"Updated\">14 May 2025</td><td class=\"size\" data-label=\"Size\">2.4 MB</td>\n</tr>\n<tr>\n<td><div class=\"document\"><span class=\"file\" aria-hidden=\"true\">PDF</span><div><div class=\"doc-title\">Research summary</div><div class=\"doc-meta review\">PDF · ◷ Review required</div></div></div></td>\n<td data-label=\"Owner\">Oliver Reed</td><td data-label=\"Version\"><span class=\"version\">v2.1 <span class=\"latest\">Latest</span></span></td><td class=\"date\" data-label=\"Updated\">13 May 2025</td><td class=\"size\" data-label=\"Size\">8.6 MB</td>\n</tr>\n<tr>\n<td><div class=\"document\"><span class=\"file\" aria-hidden=\"true\">PDF</span><div><div class=\"doc-title\">Brand guide</div><div class=\"doc-meta\">PDF · ✓ Ready for issue</div></div></div></td>\n<td data-label=\"Owner\">Sofia Patel</td><td data-label=\"Version\"><span class=\"version\">v3.0 <span class=\"latest\">Latest</span></span></td><td class=\"date\" data-label=\"Updated\">09 May 2025</td><td class=\"size\" data-label=\"Size\">7.2 MB</td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-foot\"><span>Showing 3 of 3 documents</span><span>Project reference material · Concept design</span></div>\n</section>\n<div class=\"details\">\n<section aria-labelledby=\"readiness\">\n<div class=\"detail-head\"><h2 id=\"readiness\">Client issue readiness</h2><span>2 of 3 ready</span></div>\n<progress value=\"2\" max=\"3\" aria-labelledby=\"readiness\">2 of 3 ready</progress>\n<p class=\"detail-copy\"><strong>Next:</strong> Oliver to sign off the research summary before the concept review.</p>\n</section>\n<section class=\"storage\" aria-labelledby=\"storage\">\n<div class=\"detail-head\"><h2 id=\"storage\">Project storage</h2><span>18.2 MB / 1 GB</span></div>\n<progress value=\"18.2\" max=\"1000\" aria-labelledby=\"storage\">2% used</progress>\n<p class=\"detail-copy\">2% used · Plenty of room for the next design stage.</p>\n</section>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-documents-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a document library for North. Include search and type filter, a table for Project brief, Research summary and Brand guide with realistic owners, version, updated date and file sizes. Include Upload document and a compact storage summary. Make the latest version clear. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Document library\", \"Project brief\", \"Research summary\", \"Brand guide\", \"Upload document\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Document library — North</title>\n<style>\n:root{--bg:#f2f4f5;--paper:#fff;--ink:#202b35;--muted:#65717d;--line:#dce1e5;--accent:#2454cc;--soft:#edf2ff}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit}\nbutton,a,input,select{outline-offset:4px}\na{color:inherit;text-decoration:none}\n.topbar{height:80px;background:var(--paper);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1200px;height:100%;margin:auto;padding:0 40px;display:flex;align-items:center;gap:64px}\n.wordmark{font-size:29px;font-weight:750;letter-spacing:-1.4px}\n.wordmark span{color:var(--accent)}\nnav{align-self:stretch;display:flex;gap:32px}\nnav a{display:flex;align-items:center;color:var(--muted);border-bottom:3px solid transparent;padding-top:3px}\nnav a[aria-current]{color:var(--accent);border-color:var(--accent);font-weight:700}\n.account{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}\n.avatar{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;font-size:11px;font-weight:700;color:var(--ink)}\nmain{max-width:1200px;padding:46px 40px 32px;margin:auto}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--muted);margin:0 0 14px}\n.intro{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:36px}\nh1{font-family:Georgia,'Times New Roman',serif;font-size:56px;line-height:1.1;letter-spacing:-2px;font-weight:400;margin:0 0 16px}\n.description{max-width:540px;font-size:15px;line-height:1.6;color:var(--muted);margin:0}\n.upload{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;background:var(--accent);border:1px solid var(--accent);border-radius:4px;color:white;font-weight:700;cursor:pointer}\n.upload:hover{background:#1c44aa}\n.plus{font-size:23px;font-weight:400;line-height:1}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;margin-bottom:28px}\n.field{display:flex;flex-direction:column;gap:7px;min-width:0}\nlabel{font-size:12px;font-weight:700}\ninput,select{height:44px;min-width:0;width:100%;border:1px solid #c7cfd6;border-radius:4px;background:white;color:var(--ink);padding:0 13px}\ninput::placeholder{color:#7a8590}\ninput:focus,select:focus{outline:2px solid var(--accent)}\n.library{border:1px solid var(--line);background:white;border-radius:5px;overflow:hidden}\n.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}\nh2{font-size:15px;margin:0;font-weight:700}\n.count{font-size:12px;color:var(--muted)}\ntable{width:100%;border-collapse:collapse;text-align:left}\nthead{background:#f8f9fa}\nthead th{font-size:11px;letter-spacing:.3px;color:var(--muted);font-weight:600;padding:12px 20px;border-bottom:1px solid var(--line);white-space:nowrap}\ntbody th,tbody td{padding:23px 20px;border-bottom:1px solid var(--line);font-size:13px;font-weight:400}\ntbody tr:last-child>*{border-bottom:0}\ntbody th{width:42%}\n.file{display:flex;align-items:center;gap:14px;min-width:0}\n.file-icon{width:37px;height:45px;flex-shrink:0;border:1px solid #cbd3da;border-radius:3px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:8px;font-weight:700;letter-spacing:.5px;color:var(--muted);background:linear-gradient(#e6ebef,#e6ebef) 8px 10px/19px 2px no-repeat}\n.file-name{font-weight:700;font-size:14px;margin-bottom:3px}\n.file-detail{font-size:12px;color:var(--muted)}\n.version{white-space:nowrap}\n.latest{display:inline-block;background:var(--soft);color:var(--accent);padding:2px 7px;margin-left:6px;border-radius:3px;font-size:10px;font-weight:700}\n.date,.size{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}\n.size{text-align:right}\n.mobile-label{display:none}\n.storage{display:flex;align-items:center;gap:24px;padding:21px 22px;border-top:1px solid var(--line);background:#f8f9fa}\n.storage-copy{flex:1}\n.storage-title{font-size:12px;font-weight:700;margin:0 0 2px}\n.storage-note{font-size:12px;color:var(--muted);margin:0}\n.storage-meter{width:176px;flex-shrink:0}\n.storage-meter svg{display:block;width:100%;height:16px}\n.storage-amount{font-size:12px;text-align:right;white-space:nowrap}\n.storage-amount strong{font-weight:700;color:var(--ink)}\n.footnote{font-size:12px;color:var(--muted);margin:16px 0 0}\n@media(min-width:900px){.version{min-width:130px}}\n@media(max-width:700px){\n.topbar{height:62px}\n.topbar-inner{padding:0 20px;gap:26px}\n.wordmark{font-size:26px}\nnav{gap:20px;font-size:12px}\nnav a:not([aria-current]){display:none}\n.account{gap:0}\n.account-name{display:none}\n.avatar{width:30px;height:30px}\nmain{padding:26px 18px 22px}\n.eyebrow{font-size:10px;margin-bottom:10px}\n.intro{display:block;margin-bottom:22px}\nh1{font-size:39px;letter-spacing:-1.5px;margin-bottom:12px}\n.description{font-size:13px;line-height:1.55}\n.upload{margin-top:18px;min-height:42px;width:100%;font-size:13px}\n.filters{grid-template-columns:minmax(0,1fr) 132px;gap:12px;margin-bottom:20px}\ninput,select{font-size:12px;height:42px;padding:0 10px}\nlabel{font-size:11px}\n.section-heading{padding:13px 15px}\nh2{font-size:13px}\n.count{font-size:11px}\ntable,tbody{display:block}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;padding:15px;border-bottom:1px solid var(--line)}\ntbody tr:last-child{border-bottom:0}\ntbody th,tbody td{padding:0;border:0;font-size:12px}\ntbody th{grid-column:1/-1;width:auto;margin-bottom:4px}\n.file{gap:11px}\n.file-icon{width:32px;height:40px;background-size:15px 2px}\n.file-name{font-size:14px;margin-bottom:1px}\n.file-detail{font-size:11px}\n.owner{grid-column:1;grid-row:2}\n.version{grid-column:2;grid-row:2;text-align:right}\n.date{grid-column:1;grid-row:3}\n.size{grid-column:2;grid-row:3}\n.latest{margin-left:4px;font-size:9px;padding:1px 5px}\n.mobile-label{display:inline;color:var(--muted);font-size:10px;margin-right:5px}\n.storage{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:15px}\n.storage-copy{grid-column:1/-1}\n.storage-note{font-size:11px}\n.storage-meter{width:100%}\n.storage-amount{font-size:11px}\n.footnote{font-size:11px;margin-top:12px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<a class=\"wordmark\" href=\"#library\" aria-label=\"North home\">North<span>.</span></a>\n<nav aria-label=\"Workspace\">\n<a href=\"#library\">Projects</a>\n<a href=\"#library\" aria-current=\"page\">Documents</a>\n<a href=\"#library\">Practice</a>\n</nav>\n<div class=\"account\"><span class=\"account-name\">North workspace</span><span class=\"avatar\" aria-label=\"Alex Sutton\">AS</span></div>\n</div>\n</header>\n<main id=\"library\">\n<p class=\"eyebrow\">PRACTICE RESOURCES</p>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<h1 id=\"page-title\">Document library</h1>\n<p class=\"description\">A shared reference for project teams, from client briefs to practice standards. Find the latest revision in one place.</p>\n</div>\n<button class=\"upload\" type=\"button\"><span class=\"plus\" aria-hidden=\"true\">+</span>Upload document</button>\n</section>\n<form class=\"filters\" role=\"search\" aria-label=\"Find documents\">\n<div class=\"field\">\n<label for=\"search\">Search documents</label>\n<input id=\"search\" name=\"search\" type=\"search\" placeholder=\"Search titles or owners\">\n</div>\n<div class=\"field\">\n<label for=\"type\">Document type</label>\n<select id=\"type\" name=\"type\">\n<option>All types</option>\n<option>PDF</option>\n<option>Word document</option>\n</select>\n</div>\n</form>\n<section class=\"library\" aria-labelledby=\"documents-heading\">\n<div class=\"section-heading\">\n<h2 id=\"documents-heading\">Shared documents</h2>\n<span class=\"count\">3 documents · Latest versions</span>\n</div>\n<table aria-label=\"Latest document revisions\">\n<thead>\n<tr><th scope=\"col\">Document</th><th scope=\"col\">Owner</th><th scope=\"col\">Version</th><th scope=\"col\">Updated</th><th scope=\"col\" class=\"size\">File size</th></tr>\n</thead>\n<tbody>\n<tr>\n<th scope=\"row\"><div class=\"file\"><span class=\"file-icon\" aria-label=\"Word document\">DOCX</span><div><div class=\"file-name\">Project brief</div><div class=\"file-detail\">Wren House · Client requirements</div></div></div></th>\n<td class=\"owner\"><span class=\"mobile-label\">Owner</span>Eleanor Shaw</td>\n<td class=\"version\">v3.2 <span class=\"latest\">Latest</span></td>\n<td class=\"date\"><span class=\"mobile-label\">Updated</span><time datetime=\"2025-06-18\">18 Jun 2025</time></td>\n<td class=\"size\">248 KB</td>\n</tr>\n<tr>\n<th scope=\"row\"><div class=\"file\"><span class=\"file-icon\" aria-label=\"PDF document\">PDF</span><div><div class=\"file-name\">Research summary</div><div class=\"file-detail\">Wren House · Site &amp; precedent studies</div></div></div></th>\n<td class=\"owner\"><span class=\"mobile-label\">Owner</span>Marcus Chen</td>\n<td class=\"version\">v2.1 <span class=\"latest\">Latest</span></td>\n<td class=\"date\"><span class=\"mobile-label\">Updated</span><time datetime=\"2025-06-12\">12 Jun 2025</time></td>\n<td class=\"size\">4.8 MB</td>\n</tr>\n<tr>\n<th scope=\"row\"><div class=\"file\"><span class=\"file-icon\" aria-label=\"PDF document\">PDF</span><div><div class=\"file-name\">Brand guide</div><div class=\"file-detail\">Practice · Identity &amp; drawing standards</div></div></div></th>\n<td class=\"owner\"><span class=\"mobile-label\">Owner</span>Olivia Reed</td>\n<td class=\"version\">v1.4 <span class=\"latest\">Latest</span></td>\n<td class=\"date\"><span class=\"mobile-label\">Updated</span><time datetime=\"2025-06-04\">04 Jun 2025</time></td>\n<td class=\"size\">12.6 MB</td>\n</tr>\n</tbody>\n</table>\n<aside class=\"storage\" aria-label=\"Workspace storage\">\n<div class=\"storage-copy\"><p class=\"storage-title\">Workspace storage</p><p class=\"storage-note\">Shared across project files and practice resources.</p></div>\n<div class=\"storage-meter\">\n<svg viewBox=\"0 0 200 16\" role=\"img\" aria-label=\"32 percent of storage used\">\n<rect x=\"0\" y=\"5\" width=\"200\" height=\"6\" rx=\"3\" fill=\"#dce1e5\"/>\n<rect x=\"0\" y=\"5\" width=\"64\" height=\"6\" rx=\"3\" fill=\"#2454cc\"/>\n<path d=\"M100 4v8M150 4v8\" stroke=\"#f8f9fa\" stroke-width=\"2\"/>\n</svg>\n</div>\n<div class=\"storage-amount\"><strong>3.2 GB</strong> of 10 GB used</div>\n</aside>\n</section>\n<p class=\"footnote\">Each entry shows the latest uploaded revision. Updated dates refer to that version.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-documents-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a document library for Alder. Include search and type filter, a table for Project brief, Research summary and Brand guide with realistic owners, version, updated date and file sizes. Include Upload document and a compact storage summary. Make the latest version clear. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Document library\", \"Project brief\", \"Research summary\", \"Brand guide\", \"Upload document\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Document library · Alder</title>\n<style>\n:root{--ink:#253e34;--muted:#65746b;--line:#d7ded5;--paper:#f7f8f3;--wash:#edf1e9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit}\nbutton,input,select{border-radius:5px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--muted);outline-offset:3px}\n.topbar{border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1160px;margin:auto;padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700;letter-spacing:-1px}\n.brand svg{width:26px;height:28px}\n.workspace{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}\nmain{max-width:1160px;margin:auto;padding:44px 30px 32px}\n.eyebrow{margin:0 0 13px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}\nh1{font-size:34px;line-height:1.2;letter-spacing:-1.1px;margin:0 0 10px;font-weight:650}\n.intro{margin:0;color:var(--muted);max-width:560px}\n.upload{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);border:1px solid var(--ink);color:var(--paper);padding:11px 17px;font-weight:600;white-space:nowrap}\n.upload svg{width:17px;height:17px;flex:none}\n.filters{margin:32px 0 28px;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;max-width:750px}\n.field{min-width:0}\n.field label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\ninput,select{width:100%;height:43px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:9px 12px;min-width:0}\ninput::placeholder{color:var(--muted);opacity:1}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;top:13px;left:12px;width:17px;height:17px;color:var(--muted);pointer-events:none}\n.search-wrap input{padding-left:38px}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);padding:17px 0 13px}\nh2{font-size:14px;margin:0;font-weight:650}\n.count{font-size:12px;color:var(--muted)}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}\ncol.document{width:43%}col.owner{width:17%}col.version{width:13%}col.updated{width:17%}col.size{width:10%}\nth{font-size:11px;font-weight:600;color:var(--muted);padding:10px 14px 10px 0;border-block:1px solid var(--line)}\ntd{padding:23px 14px 23px 0;border-bottom:1px solid var(--line);vertical-align:top}\nth:last-child,td:last-child{text-align:right;padding-right:0}\n.doc{display:flex;gap:13px;align-items:flex-start;padding-right:18px}\n.file{flex:none;width:37px;height:44px;border:1px solid var(--line);border-radius:3px;background:var(--wash);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:.03em;margin-top:2px}\n.doc strong{display:block;font-size:15px;font-weight:650;margin-bottom:4px}\n.secondary{display:block;font-size:12px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}\n.value{font-size:13px}\n.version-number{display:block;font-weight:600}\n.latest{display:inline-flex;gap:5px;align-items:center;font-size:11px;margin-top:3px}\n.latest::before{content:\"\";width:5px;height:5px;border-radius:50%;background:var(--ink)}\n.mobile-label{display:none}\ntime{white-space:nowrap}\n.storage{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;color:var(--muted);font-size:12px}\n.storage-main{min-width:0;display:grid;grid-template-columns:auto 150px;gap:7px 20px;align-items:center}\n.storage label{font-weight:600;color:var(--ink)}\n.storage-amount{font-variant-numeric:tabular-nums}\nprogress{appearance:none;width:150px;height:5px;border:0;border-radius:2px;overflow:hidden;background:var(--line)}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--ink)}\nprogress::-moz-progress-bar{background:var(--ink)}\n.storage-note{margin:0;text-align:right;max-width:270px}\n@media(max-width:650px){\n.topbar-inner{padding:14px 20px}\n.brand{font-size:21px}\n.workspace{font-size:10px;letter-spacing:.06em}\nmain{padding:25px 20px 20px}\n.eyebrow{font-size:10px;margin-bottom:10px}\n.page-heading{align-items:flex-start;flex-direction:column;gap:16px}\nh1{font-size:29px;margin-bottom:8px}\n.intro{font-size:13px;line-height:1.5}\n.upload{padding:9px 13px;font-size:13px}\n.filters{grid-template-columns:minmax(0,1fr) 112px;gap:10px;margin:22px 0}\n.field label{font-size:11px;margin-bottom:5px}\ninput,select{font-size:12px;padding:8px;height:40px}\n.search-wrap input{padding-left:31px}\n.search-wrap svg{left:10px;top:12px;width:15px;height:15px}\n.section-heading{padding:13px 0 3px}\nh2{font-size:13px}\n.count{font-size:11px}\ntable,tbody{display:block}\ncolgroup,thead{display:none}\ntr{display:grid;grid-template-columns:1.2fr .8fr 1.15fr .7fr;column-gap:7px;border-bottom:1px solid var(--line);padding:15px 0}\ntd{display:block;padding:0;border:0;min-width:0}\ntd:first-child{grid-column:1/-1;margin-bottom:12px}\nth:last-child,td:last-child{text-align:right}\n.doc{gap:10px;padding-right:0}\n.file{width:31px;height:38px;font-size:8px}\n.doc strong{font-size:14px;margin-bottom:2px}\n.secondary{font-size:11px;line-height:1.45}\n.mobile-label{display:block;font-size:10px;color:var(--muted);margin-bottom:3px;font-weight:400}\n.value{font-size:11px}\n.version-number{display:inline;font-size:11px}\n.latest{display:block;font-size:10px;margin-top:1px}\n.latest::before{display:none}\n.storage{padding:17px 0;display:block;font-size:11px}\n.storage-main{grid-template-columns:1fr auto;gap:5px 12px}\nprogress{width:100px}\n.storage-note{text-align:left;max-width:none;margin-top:9px;font-size:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 26 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M13 3 3 23h6l4-8 4 8h6L13 3Z\" fill=\"currentColor\"/></svg>\n<span>Alder</span>\n</div>\n<span class=\"workspace\">Field research workspace</span>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">North Coast study / 2025 field season</p>\n<div class=\"page-heading\">\n<div>\n<h1>Document library</h1>\n<p class=\"intro\">Shared reference files for the field team. Check the latest version before your next site visit.</p>\n</div>\n<button class=\"upload\" type=\"button\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M10 13V3m-4 4 4-4 4 4M3 12v5h14v-5\"/></svg>\nUpload document\n</button>\n</div>\n<form class=\"filters\" role=\"search\">\n<div class=\"field\">\n<label for=\"search\">Search library</label>\n<div class=\"search-wrap\">\n<svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\"/><path d=\"m13 13 4 4\"/></svg>\n<input id=\"search\" name=\"search\" type=\"search\" placeholder=\"Search files or owners\">\n</div>\n</div>\n<div class=\"field\">\n<label for=\"type\">File type</label>\n<select id=\"type\" name=\"type\">\n<option>All types</option>\n<option>PDF</option>\n<option>Word document</option>\n</select>\n</div>\n</form>\n<section aria-labelledby=\"files-heading\">\n<div class=\"section-heading\">\n<h2 id=\"files-heading\">Shared study files</h2>\n<span class=\"count\">3 documents</span>\n</div>\n<table aria-label=\"Shared study documents and their latest versions\">\n<colgroup><col class=\"document\"><col class=\"owner\"><col class=\"version\"><col class=\"updated\"><col class=\"size\"></colgroup>\n<thead><tr><th scope=\"col\">Document</th><th scope=\"col\">Owner</th><th scope=\"col\">Version</th><th scope=\"col\">Updated</th><th scope=\"col\">File size</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"doc\"><span class=\"file\">DOCX</span><div><strong>Project brief</strong><span class=\"secondary\">Study scope, recruitment criteria and site visit plan</span></div></div></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Owner</span><span class=\"value\">Maya Chen</span></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Version</span><span class=\"version-number\">v2.4</span><span class=\"latest\">Latest</span></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Updated</span><time class=\"value\" datetime=\"2025-06-18\">18 Jun 2025</time></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Size</span><span class=\"value\">184 KB</span></td>\n</tr>\n<tr>\n<td><div class=\"doc\"><span class=\"file\">PDF</span><div><strong>Research summary</strong><span class=\"secondary\">Cross-site interview synthesis, participant observations and environmental context from remote field locations</span></div></div></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Owner</span><span class=\"value\">Luis Ortega</span></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Version</span><span class=\"version-number\">v1.8</span><span class=\"latest\">Latest</span></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Updated</span><time class=\"value\" datetime=\"2025-06-16\">16 Jun 2025</time></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Size</span><span class=\"value\">3.6 MB</span></td>\n</tr>\n<tr>\n<td><div class=\"doc\"><span class=\"file\">PDF</span><div><strong>Brand guide</strong><span class=\"secondary\">Templates for participant materials and field reports</span></div></div></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Owner</span><span class=\"value\">Nina Patel</span></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Version</span><span class=\"version-number\">v1.2</span><span class=\"latest\">Latest</span></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Updated</span><time class=\"value\" datetime=\"2025-06-09\">09 Jun 2025</time></td>\n<td><span class=\"mobile-label\" aria-hidden=\"true\">Size</span><span class=\"value\">2.1 MB</span></td>\n</tr>\n</tbody>\n</table>\n</section>\n<footer class=\"storage\">\n<div class=\"storage-main\">\n<label for=\"storage\">Workspace storage</label>\n<progress id=\"storage\" value=\"1.8\" max=\"10\">18%</progress>\n<span class=\"storage-amount\">1.8 GB of 10 GB used</span>\n<span>18% used</span>\n</div>\n<p class=\"storage-note\">Across all study folders, including interview audio and field photos.</p>\n</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-0","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Maya Chen at Alder. Show Interface foundations with 20% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning · Alder</title>\n<style>\n:root{--bg:#f4f1eb;--paper:#fffdf9;--ink:#252d27;--muted:#65695f;--line:#deded3;--green:#42664e}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nheader{height:76px;border-bottom:1px solid var(--line);background:var(--paper)}\n.topbar{max-width:1120px;height:100%;margin:auto;padding:0 28px;display:flex;align-items:center;gap:30px}\n.brand{font-family:Georgia,serif;font-size:34px;letter-spacing:-2px;font-weight:bold;line-height:1}\n.workspace{padding-left:28px;border-left:1px solid var(--line);color:var(--muted);font-size:13px}\n.account{margin-left:auto;display:flex;align-items:center;gap:10px}\n.account strong{display:block;font-size:13px;font-weight:600}\n.account small{color:var(--muted);font-size:12px}\n.avatar{width:36px;height:36px;display:grid;place-items:center;border:1px solid #d5d8cb;border-radius:50%;background:#e8eadf;font-size:12px;font-weight:650}\nmain{max-width:1120px;margin:32px auto 48px;padding:0 28px}\n.page-heading{margin-bottom:22px}\nh1,h2,h3,p{margin:0}\nh1{font-size:34px;font-weight:620;letter-spacing:-1.1px;line-height:1.2}\n.page-heading p{color:var(--muted);margin-top:7px}\n.course{display:grid;grid-template-columns:1.15fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.course-main{padding:26px 30px}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}\n.course h2{font-size:29px;line-height:1.2;letter-spacing:-.8px;margin:7px 0 20px;font-weight:620}\n.progress-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin-bottom:7px}\n.progress-label strong{font-size:14px}\nprogress{appearance:none;display:block;width:100%;height:6px;border:0;border-radius:8px;overflow:hidden;background:#e7e7dd;color:var(--ink)}\nprogress::-webkit-progress-bar{background:#e7e7dd;border-radius:8px}\nprogress::-webkit-progress-value{background:var(--ink);border-radius:8px}\nprogress::-moz-progress-bar{background:var(--ink);border-radius:8px}\n.progress-note{font-size:12px;color:var(--muted);margin-top:6px}\nbutton{font:inherit;font-weight:600;background:var(--ink);color:white;border:1px solid var(--ink);border-radius:6px;padding:12px 18px;display:inline-flex;align-items:center;justify-content:center;gap:25px;cursor:pointer;margin-top:20px;min-height:46px}\nbutton:hover{background:#3c483e}\nbutton:focus-visible{outline:3px solid #899d79;outline-offset:4px}\nbutton svg{width:18px;height:18px}\n.next{border-left:1px solid var(--line);margin:26px 0;padding:6px 30px;display:flex;flex-direction:column;justify-content:center}\n.next .eyebrow{color:var(--green)}\n.next h3{font-size:21px;line-height:1.3;letter-spacing:-.4px;font-weight:600;margin:10px 0}\n.next p{color:var(--muted);max-width:340px;font-size:14px;line-height:1.6}\n.lesson-time{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin-top:15px}\n.lesson-time svg{width:15px;height:15px}\n.details{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:26px;margin-top:28px;align-items:start}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}\n.section-heading h2,.weekly h2{font-size:18px;font-weight:620;letter-spacing:-.3px}\n.section-heading span{font-size:12px;color:var(--muted);white-space:nowrap}\n.outline{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.outline li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line)}\n.outline li:last-child{border-bottom:0}\n.number{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--muted)}\n.done .number{background:#e9eee5;border-color:#e9eee5;color:var(--green)}\n.lesson-title{font-weight:560;font-size:14px;line-height:1.4}\n.status{font-size:11px;color:var(--muted);margin-top:3px}\n.done .status{color:var(--green)}\n.current{background:#eeeee5;box-shadow:inset 3px 0 var(--ink)}\n.current .number{background:var(--ink);color:white;border-color:var(--ink)}\n.current .status{font-weight:650;color:var(--ink)}\n.duration{font-size:12px;color:var(--muted);white-space:nowrap}\n.secondary-label{font-size:12px;line-height:1.45;color:var(--muted);margin-top:4px;max-width:370px;overflow-wrap:break-word}\n.weekly{border:1px solid var(--line);border-radius:10px;padding:20px;background:#eeeee5}\n.weekly .eyebrow{margin-bottom:5px}\n.weekly h2{margin-bottom:20px}\n.weekly .progress-label{font-size:13px}\n.weekly .progress-label strong{font-size:13px}\n.weekly progress{height:5px}\n.goal-note{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.6}\n.goal-note strong{display:block;font-weight:550;color:var(--ink)}\n.aside-note{margin:17px 5px 0;font-size:12px;color:var(--muted);line-height:1.65}\n@media(max-width:700px){\nheader{height:64px}\n.topbar{padding:0 20px;gap:15px}\n.brand{font-size:30px}\n.workspace{padding-left:15px;font-size:12px}\n.account{gap:8px}\n.account small{display:none}\n.account strong{font-size:12px}\n.avatar{width:30px;height:30px;font-size:10px}\nmain{padding:0 20px;margin:25px auto 32px}\nh1{font-size:29px}\n.page-heading{margin-bottom:18px}\n.page-heading p{font-size:13px;max-width:290px}\n.course{grid-template-columns:1fr}\n.course-main{padding:22px}\n.course h2{font-size:27px;margin-bottom:17px}\nbutton{width:100%;margin-top:17px}\n.next{margin:0 22px;padding:18px 0 21px;border-left:0;border-top:1px solid var(--line)}\n.next h3{font-size:18px;margin:7px 0}\n.next p{font-size:13px;line-height:1.5}\n.lesson-time{margin-top:10px}\n.details{grid-template-columns:minmax(0,1fr);gap:23px;margin-top:20px}\naside{grid-row:1}\n.weekly{padding:16px 18px}\n.weekly .eyebrow{display:none}\n.weekly h2{font-size:15px;margin-bottom:10px}\n.weekly .progress-label{margin-bottom:6px}\n.goal-note{margin-top:8px;font-size:12px}\n.goal-note strong{display:inline}\n.goal-extra,.aside-note{display:none}\n.section-heading h2{font-size:18px}\n.outline li{padding:13px 12px;gap:10px;grid-template-columns:28px minmax(0,1fr) auto}\n.number{width:27px;height:27px;font-size:11px}\n.lesson-title{font-size:13px}\n.duration{font-size:11px}\n.secondary-label{font-size:11px}\n}\n@media(max-width:360px){.workspace{display:none}.account strong{max-width:70px}.course-main{padding:20px}.next{margin:0 20px}}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"topbar\">\n    <div class=\"brand\" aria-label=\"Alder\">alder</div>\n    <div class=\"workspace\">Learning</div>\n    <div class=\"account\">\n      <div><strong>Maya Chen</strong><small>Eastside Cycles</small></div>\n      <span class=\"avatar\" aria-hidden=\"true\">MC</span>\n    </div>\n  </div>\n</header>\n<main>\n  <div class=\"page-heading\">\n    <h1>Your learning</h1>\n    <p>A little practice for a smoother day in the shop.</p>\n  </div>\n\n  <section class=\"course\" aria-labelledby=\"course-title\">\n    <div class=\"course-main\">\n      <p class=\"eyebrow\">Your current course</p>\n      <h2 id=\"course-title\">Interface foundations</h2>\n      <div class=\"progress-label\">\n        <label for=\"course-progress\">Course progress</label>\n        <strong>20%</strong>\n      </div>\n      <progress id=\"course-progress\" value=\"20\" max=\"100\">20%</progress>\n      <p class=\"progress-note\">12 of 60 minutes completed</p>\n      <button type=\"button\">\n        Continue learning\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" aria-hidden=\"true\"><path d=\"M4 12h15M13 6l6 6-6 6\"/></svg>\n      </button>\n    </div>\n    <div class=\"next\">\n      <div class=\"eyebrow\">Up next · Lesson 03</div>\n      <h3>Make the counter screen your own</h3>\n      <p>Arrange shortcuts for sales, repair tickets and customer details, so the essentials are close at hand when the shop gets busy.</p>\n      <div class=\"lesson-time\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"7.5\"/><path d=\"M10 5.5V10l3 2\"/></svg>\n        12 min · Hands-on lesson\n      </div>\n    </div>\n  </section>\n\n  <div class=\"details\">\n    <section aria-labelledby=\"outline-title\">\n      <div class=\"section-heading\">\n        <h2 id=\"outline-title\">Course outline</h2>\n        <span>6 lessons · 1 hour</span>\n      </div>\n      <ol class=\"outline\">\n        <li class=\"done\">\n          <span class=\"number\">01</span>\n          <div><h3 class=\"lesson-title\">Meet your workspace</h3><p class=\"status\">✓ Completed</p></div>\n          <span class=\"duration\">5 min</span>\n        </li>\n        <li class=\"done\">\n          <span class=\"number\">02</span>\n          <div><h3 class=\"lesson-title\">Find your way around</h3><p class=\"status\">✓ Completed</p></div>\n          <span class=\"duration\">7 min</span>\n        </li>\n        <li class=\"current\">\n          <span class=\"number\">03</span>\n          <div><h3 class=\"lesson-title\">Make the counter screen your own</h3><p class=\"status\">Up next</p></div>\n          <span class=\"duration\">12 min</span>\n        </li>\n        <li>\n          <span class=\"number\">04</span>\n          <div><h3 class=\"lesson-title\">Find bikes, parts &amp; stock</h3><p class=\"status\">Not started</p></div>\n          <span class=\"duration\">14 min</span>\n        </li>\n        <li>\n          <span class=\"number\">05</span>\n          <div><h3 class=\"lesson-title\">Keep repair jobs moving</h3><p class=\"status\">Not started</p></div>\n          <span class=\"duration\">10 min</span>\n        </li>\n        <li>\n          <span class=\"number\">06</span>\n          <div>\n            <h3 class=\"lesson-title\">Set up your team</h3>\n            <p class=\"secondary-label\">For weekend staff, seasonal mechanics and everyone covering the service counter</p>\n            <p class=\"status\">Not started</p>\n          </div>\n          <span class=\"duration\">12 min</span>\n        </li>\n      </ol>\n    </section>\n\n    <aside aria-labelledby=\"goal-title\">\n      <section class=\"weekly\">\n        <p class=\"eyebrow\">Small steps, steady progress</p>\n        <h2 id=\"goal-title\">Weekly learning goal</h2>\n        <div class=\"progress-label\">\n          <label for=\"weekly-progress\">12 of 30 minutes</label>\n          <strong>This week</strong>\n        </div>\n        <progress id=\"weekly-progress\" value=\"12\" max=\"30\">12 of 30 minutes</progress>\n        <p class=\"goal-note\"><strong>18 minutes to your goal.</strong> <span class=\"goal-extra\">A short lesson between repairs counts, too.</span></p>\n      </section>\n      <p class=\"aside-note\">Built for your shop day.<br>Try what you learn on your next sale or repair intake.</p>\n    </aside>\n  </div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-1","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Alex Okafor at Morrow. Show Interface foundations with 21% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Balance a concise overview with a denser detail section. Include a helpful brief hint beside the main action and one small recent-update detail. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning · Morrow</title>\n<style>\n:root{color-scheme:light;--bg:#f3f5f7;--surface:#fff;--ink:#202c3b;--muted:#647183;--line:#dfe5eb;--accent:#315dd8;--soft:#eef3ff}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton{font:inherit}\n.topbar{background:var(--surface);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1160px;margin:auto;min-height:80px;padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px}\n.brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:750;letter-spacing:-1px}\n.brand-mark{width:29px;height:29px;color:var(--accent)}\n.workspace{border-left:1px solid var(--line);margin-left:14px;padding-left:24px;font-size:12px;letter-spacing:1.2px;font-weight:600;color:var(--muted)}\n.identity{display:flex;align-items:center;gap:11px;font-size:13px}\n.avatar{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--bg);font-size:12px;font-weight:700}\n.identity strong,.identity small{display:block}\n.identity small{color:var(--muted);font-size:12px}\nmain{max-width:1160px;padding:30px 28px 24px;margin:auto}\n.page-heading{margin-bottom:24px}\nh1,h2,h3,p{margin:0}\nh1{font-size:32px;letter-spacing:-1px;line-height:1.2;margin-bottom:7px}\n.page-heading p{color:var(--muted)}\n.overview{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(255px,1fr);gap:20px;margin-bottom:26px}\n.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}\n.course{padding:26px 28px}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase}\n.course h2{font-size:29px;letter-spacing:-.8px;line-height:1.2;margin:8px 0}\n.description{color:var(--muted);max-width:540px;font-size:14px}\n.progress-heading{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-top:20px;margin-bottom:7px}\n.progress-heading strong{color:var(--accent);font-size:14px}\nprogress{display:block;width:100%;height:6px;border:0;border-radius:6px;overflow:hidden;background:#e8edf3;accent-color:var(--accent)}\nprogress::-webkit-progress-bar{background:#e8edf3;border-radius:6px}\nprogress::-webkit-progress-value{background:var(--accent);border-radius:6px}\nprogress::-moz-progress-bar{background:var(--accent);border-radius:6px}\n.action-row{display:flex;align-items:center;gap:18px;margin-top:22px}\n.primary{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:0;border-radius:6px;padding:12px 17px;background:var(--accent);color:white;font-size:14px;font-weight:650;white-space:nowrap;cursor:pointer}\n.primary:hover{background:#244bc0}\n.primary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}\n.primary svg{width:16px;height:16px;flex:none}\n.hint{font-size:12px;color:var(--muted);max-width:210px;line-height:1.5}\n.hint strong{display:block;font-weight:600;color:var(--ink)}\n.goal{padding:25px 24px;display:flex;flex-direction:column}\n.goal-top{display:flex;justify-content:space-between;align-items:center;gap:12px}\n.goal-top svg{height:20px;width:20px;color:var(--muted)}\n.goal h2{font-size:16px;letter-spacing:-.2px;margin-top:12px}\n.goal-total{display:block;margin:9px 0 12px;font-size:14px;color:var(--muted)}\n.goal-total strong{font-size:32px;line-height:1.1;font-weight:650;color:var(--ink);letter-spacing:-1px;margin-right:3px}\n.goal-caption{font-size:13px;margin-top:10px}\n.goal-note{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px;margin-top:auto}\n.outline{overflow:hidden}\n.outline-header{padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line)}\n.outline h2{font-size:20px;letter-spacing:-.4px}\n.outline-header p{font-size:12px;color:var(--muted);margin-top:2px}\n.course-length{font-size:12px;color:var(--muted);white-space:nowrap}\n.lessons{list-style:none;margin:0;padding:0}\n.lesson{display:grid;grid-template-columns:32px minmax(0,1fr) 150px;gap:16px;align-items:center;padding:16px 26px;border-bottom:1px solid var(--line)}\n.lesson:last-child{border-bottom:0}\n.number{width:29px;height:29px;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:50%}\n.lesson h3{font-size:14px;font-weight:600}\n.meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}\n.status{min-width:80px;text-align:right;font-size:11px}\n.complete{color:var(--accent)}\n.complete .check{font-size:13px;margin-right:3px}\n.next{background:#f5f8ff;align-items:start;border-left:3px solid var(--accent);padding-left:23px}\n.next .number{background:var(--accent);border-color:var(--accent);color:white}\n.next h3{padding-top:3px}\n.next .meta{padding-top:4px}\n.next .status{color:var(--accent);font-weight:700}\n.lesson-summary{margin-top:7px;max-width:570px;font-size:13px;color:var(--muted);line-height:1.55}\n.practice{display:block;margin-top:6px;font-size:12px;color:var(--ink)}\n.update{display:flex;align-items:flex-start;gap:8px;padding:15px 2px 0;font-size:12px;color:var(--muted)}\n.update svg{width:15px;height:15px;flex:none;margin-top:2px}\n.update strong{font-weight:600;color:#4c596a}\n@media(max-width:700px){\n.topbar-inner{padding:14px 20px;min-height:70px}\n.brand{font-size:22px;gap:8px}\n.brand-mark{width:25px;height:25px}\n.workspace{display:none}\n.identity{gap:8px;font-size:12px}\n.identity small{font-size:11px}\n.avatar{width:32px;height:32px;font-size:11px}\nmain{padding:25px 18px 20px}\nh1{font-size:28px}\n.page-heading{margin-bottom:20px}\n.page-heading p{font-size:13px}\n.overview{grid-template-columns:1fr;gap:14px;margin-bottom:22px}\n.course{padding:22px 20px}\n.course h2{font-size:26px}\n.description{font-size:13px}\n.action-row{gap:12px;margin-top:20px;align-items:center}\n.primary{font-size:12px;gap:8px;padding:12px}\n.hint{font-size:11px;flex:1}\n.goal{padding:17px 20px;display:grid;grid-template-columns:minmax(0,1fr) 110px;column-gap:18px}\n.goal-top{grid-column:1;grid-row:1}\n.goal-top svg{display:none}\n.goal h2{grid-column:1;grid-row:2;margin-top:4px;font-size:14px}\n.goal-total{grid-column:2;grid-row:1/3;margin:0;align-self:center;text-align:right;font-size:12px}\n.goal-total strong{font-size:27px}\n.goal progress{grid-column:1/-1;margin-top:12px}\n.goal-caption{grid-column:1/-1;font-size:12px;margin-top:6px}\n.goal-note{display:none}\n.outline-header{padding:17px 18px}\n.outline h2{font-size:19px}\n.course-length{font-size:11px}\n.lesson{grid-template-columns:26px minmax(0,1fr) 70px;gap:10px;padding:15px 16px}\n.number{width:25px;height:25px;font-size:11px}\n.lesson h3{font-size:13px;line-height:1.4}\n.meta{flex-direction:column;align-items:flex-end;gap:3px;font-size:11px}\n.status{min-width:0;white-space:nowrap;font-size:10px}\n.next{padding-left:13px}\n.next h3{padding-top:2px}\n.next .meta{padding-top:1px}\n.lesson-summary{grid-column:2/-1;margin-top:0;font-size:12px}\n.next .lesson-content{display:contents}\n.practice{font-size:11px}\n.update{font-size:11px;padding-top:13px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg class=\"brand-mark\" viewBox=\"0 0 30 30\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 24V7h5l7 10L22 7h5v17h-6V16l-6 8-6-8v8H3Z\" fill=\"currentColor\"/></svg>\n<span>Morrow</span><span class=\"workspace\">SHOP LEARNING</span>\n</div>\n<div class=\"identity\"><span class=\"avatar\" aria-hidden=\"true\">AO</span><div><strong>Alex Okafor</strong><small>Shop owner</small></div></div>\n</div>\n</header>\n<main>\n<header class=\"page-heading\">\n<h1>Your learning</h1>\n<p>Practical skills for a better shop experience.</p>\n</header>\n\n<div class=\"overview\">\n<section class=\"card course\" aria-labelledby=\"course-title\">\n<p class=\"eyebrow\">Your current course · 6 lessons</p>\n<h2 id=\"course-title\">Interface foundations</h2>\n<p class=\"description\">Make your shop’s digital touchpoints as helpful as a conversation at the service counter.</p>\n<div class=\"progress-heading\"><label for=\"course-progress\">Course progress · 12 of 58 min</label><strong>21%</strong></div>\n<progress id=\"course-progress\" value=\"21\" max=\"100\">21%</progress>\n<div class=\"action-row\">\n<button type=\"button\" class=\"primary\">Continue learning <svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n<p class=\"hint\"><strong>Next lesson: 9 minutes</strong>A good fit between repairs.</p>\n</div>\n</section>\n\n<aside class=\"card goal\" aria-labelledby=\"goal-title\">\n<div class=\"goal-top\"><p class=\"eyebrow\">This week</p><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"12\" cy=\"12\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"/></svg></div>\n<h2 id=\"goal-title\">Weekly learning goal</h2>\n<label class=\"goal-total\" for=\"weekly-progress\"><strong>12</strong> / 30 min</label>\n<progress id=\"weekly-progress\" value=\"12\" max=\"30\">12 of 30 minutes</progress>\n<p class=\"goal-caption\">18 minutes to your goal.</p>\n<p class=\"goal-note\">Small sessions. Useful skills.<br>Room for the workshop rush.</p>\n</aside>\n</div>\n\n<section class=\"card outline\" aria-labelledby=\"outline-title\">\n<header class=\"outline-header\">\n<div><h2 id=\"outline-title\">Course outline</h2><p>1 of 6 lessons completed</p></div>\n<span class=\"course-length\">58 min total</span>\n</header>\n<ol class=\"lessons\">\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<h3>Start with your customer</h3>\n<div class=\"meta\"><span>12 min</span><span class=\"status complete\"><span class=\"check\" aria-hidden=\"true\">✓</span>Completed</span></div>\n</li>\n<li class=\"lesson next\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div class=\"lesson-content\">\n<h3>Layout &amp; hierarchy</h3>\n<p class=\"lesson-summary\">Use spacing and visual weight to help customers find service options and the booking button.<span class=\"practice\">Your practice: give a repair-booking page a clearer path.</span></p>\n</div>\n<div class=\"meta\"><span>9 min</span><span class=\"status\">Up next</span></div>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<h3>Type that does the work</h3>\n<div class=\"meta\"><span>10 min</span><span class=\"status\">Not started</span></div>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">04</span>\n<h3>Color &amp; contrast</h3>\n<div class=\"meta\"><span>8 min</span><span class=\"status\">Not started</span></div>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">05</span>\n<h3>Forms without friction</h3>\n<div class=\"meta\"><span>11 min</span><span class=\"status\">Not started</span></div>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">06</span>\n<h3>Bring it all together</h3>\n<div class=\"meta\"><span>8 min</span><span class=\"status\">Not started</span></div>\n</li>\n</ol>\n</section>\n<p class=\"update\"><svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8a7 7 0 1 1 1 7M3 3v5h5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg><span><strong>Updated 2 days ago</strong> · Lesson 05 now includes a repair-booking example.</span></p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-2","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Samira Patel at Fieldwork. Show Interface foundations with 22% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning — Fieldwork</title>\n<style>\n:root{--ink:#29322c;--muted:#646b64;--paper:#f7f6f1;--surface:#fffefa;--line:#d9dcd3;--soft:#eeefe8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\n.site-header{border-bottom:1px solid var(--line);background:var(--surface)}\n.header-inner{max-width:1120px;margin:auto;min-height:76px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.8px}\n.brand svg{width:27px;height:27px}\n.header-label{margin-left:20px;padding-left:24px;border-left:1px solid var(--line);font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted)}\n.profile{display:flex;gap:10px;align-items:center}\n.avatar{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font-size:11px;font-weight:700}\n.profile strong{display:block;font-size:13px;font-weight:600}\n.profile small{display:block;color:var(--muted);font-size:11px}\nmain{max-width:1120px;margin:30px auto 40px;padding:0 24px}\n.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}\n.eyebrow{margin:0 0 6px;font-size:10px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}\nh1,h2,h3,p{margin-top:0}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1.1px;margin-bottom:0;font-weight:600}\n.count{margin:0 0 3px;color:var(--muted);font-size:12px}\n.course-card{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}\n.course-intro{padding:26px 30px}\n.course-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}\n.course-topline .eyebrow{margin:0}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}\n.status-mark{font-size:14px;line-height:1}\nh2{font-size:28px;line-height:1.2;letter-spacing:-.8px;font-weight:600;margin-bottom:10px}\n.description{color:var(--muted);font-size:13px;max-width:420px;margin-bottom:20px}\n.progress-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin-bottom:7px}\n.progress-label strong{font-size:15px;font-weight:650}\nprogress{display:block;appearance:none;-webkit-appearance:none;border:0;border-radius:2px;overflow:hidden;width:100%;height:5px;background:var(--soft);color:var(--ink)}\nprogress::-webkit-progress-bar{background:var(--soft)}\nprogress::-webkit-progress-value{background:var(--ink)}\nprogress::-moz-progress-bar{background:var(--ink)}\n.progress-note{font-size:11px;color:var(--muted);margin:7px 0 0}\n.resume{border-left:1px solid var(--line);padding:26px 30px;display:flex;flex-direction:column;align-items:flex-start}\n.resume h3{font-size:18px;line-height:1.35;letter-spacing:-.3px;margin-bottom:8px;font-weight:600}\n.resume p:not(.eyebrow){color:var(--muted);font-size:12px;margin-bottom:13px;max-width:340px}\n.resume .resume-time{font-size:11px!important;margin-bottom:14px!important}\n.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;background:var(--ink);color:var(--surface);border:1px solid var(--ink);border-radius:4px;padding:10px 16px;min-height:42px;font-size:12px;font-weight:600;cursor:pointer;margin-top:auto}\n.primary:hover{background:#3b443d}\nbutton:focus-visible{outline:3px solid var(--muted);outline-offset:3px}\n.primary svg{width:16px;height:16px}\n.lower-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(250px,1fr);gap:24px;margin-top:24px;align-items:start}\n.outline,.goal{border:1px solid var(--line);border-radius:8px;background:var(--surface)}\n.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:20px 24px 17px;border-bottom:1px solid var(--line)}\n.section-heading h2,.goal h2{font-size:17px;letter-spacing:-.3px;margin:0}\n.section-heading p{margin:0;color:var(--muted);font-size:11px;white-space:nowrap}\n.lessons{list-style:none;padding:0;margin:0}\n.lesson{display:grid;grid-template-columns:30px minmax(0,1fr) 92px;align-items:center;gap:12px;min-height:62px;padding:10px 24px;border-bottom:1px solid var(--line)}\n.lesson:last-child{border-bottom:0}\n.lesson.current{background:var(--soft);box-shadow:inset 3px 0 var(--ink)}\n.number{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}\n.lesson h3{font-size:13px;font-weight:550;line-height:1.35;margin:0 0 2px}\n.duration{margin:0;color:var(--muted);font-size:11px}\n.lesson-state{font-size:10px;color:var(--muted);text-align:right}\n.lesson-state.complete{color:var(--ink)}\n.lesson-state.active{font-weight:650;color:var(--ink)}\n.goal{padding:22px 24px}\n.goal .eyebrow{margin-bottom:10px}\n.goal h2{margin-bottom:18px}\n.goal .progress-label{margin-bottom:10px}\n.goal .progress-label strong{font-size:23px;letter-spacing:-.5px;font-weight:600}\n.goal .progress-label small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}\n.goal p:last-child{margin:13px 0 0;color:var(--muted);font-size:12px}\n.goal-footnote{margin:14px 4px 0;font-size:11px;color:var(--muted);line-height:1.6;max-width:270px}\n@media(max-width:700px){\n.header-inner{min-height:65px;padding:14px 18px;gap:12px}\n.brand{font-size:20px}.brand svg{width:23px;height:23px}\n.header-label,.profile small{display:none}\n.profile{gap:7px}.profile strong{font-size:11px}.avatar{width:30px;height:30px;font-size:10px}\nmain{padding:0 16px;margin:23px auto 28px}\n.page-heading{display:block;margin-bottom:18px}\nh1{font-size:29px}.count{margin:9px 0 0;font-size:11px}\n.course-card{grid-template-columns:1fr}\n.course-intro{padding:20px}\nh2{font-size:27px}\n.description{font-size:12px;margin-bottom:16px}\n.resume{padding:18px 20px 20px;border-left:0;border-top:1px solid var(--line)}\n.resume h3{font-size:17px}\n.resume p:not(.eyebrow){margin-bottom:10px;max-width:none}\n.resume .resume-time{margin-bottom:12px!important}\n.primary{width:100%}\n.lower-grid{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px}\n.section-heading{padding:17px 18px;align-items:flex-start;flex-direction:column;gap:4px}\n.lesson{padding:11px 18px;grid-template-columns:22px minmax(0,1fr) 74px;gap:8px;min-height:63px}\n.lesson h3{font-size:12px}.lesson-state{font-size:10px}\n.goal{padding:18px 20px}\n.goal h2{margin-bottom:12px}\n.goal .eyebrow{margin-bottom:5px}\n.goal-footnote{max-width:none;margin-top:10px}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 24V4h20M4 14h16M14 4v20M4 24h20V14\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg>\nFieldwork\n<span class=\"header-label\">Learning space</span>\n</div>\n<div class=\"profile\">\n<span class=\"avatar\" aria-hidden=\"true\">SP</span>\n<div><strong>Samira Patel</strong><small>Oak &amp; Spoke</small></div>\n</div>\n</div>\n</header>\n<main>\n<header class=\"page-heading\">\n<div><p class=\"eyebrow\">Oak &amp; Spoke · Independent bike shop</p><h1>Your learning</h1></div>\n<p class=\"count\">1 course in progress · 1 lesson completed</p>\n</header>\n\n<section class=\"course-card\" aria-labelledby=\"course-title\">\n<div class=\"course-intro\">\n<div class=\"course-topline\">\n<p class=\"eyebrow\">Your current course</p>\n<span class=\"status\"><span class=\"status-mark\" aria-hidden=\"true\">◐</span> In progress</span>\n</div>\n<h2 id=\"course-title\">Interface foundations</h2>\n<p class=\"description\">Build clearer digital experiences, from your service booking form to your online parts catalogue.</p>\n<div class=\"progress-label\"><label for=\"course-progress\">Course progress</label><strong>22%</strong></div>\n<progress id=\"course-progress\" max=\"100\" value=\"22\">22%</progress>\n<p class=\"progress-note\">1 of 6 lessons completed · 14 of 64 min</p>\n</div>\n<div class=\"resume\">\n<p class=\"eyebrow\">Up next · Lesson 02</p>\n<h3>Create a clear visual hierarchy</h3>\n<p>Use headings and emphasis to make repair options and service prices easier to scan.</p>\n<p class=\"resume-time\">Resume at 06:00 · 6 min left in this lesson</p>\n<button class=\"primary\" type=\"button\">\nContinue learning\n<svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n</button>\n</div>\n</section>\n\n<div class=\"lower-grid\">\n<section class=\"outline\" aria-labelledby=\"outline-title\">\n<header class=\"section-heading\">\n<h2 id=\"outline-title\">Course outline</h2>\n<p>6 lessons · 64 min total</p>\n</header>\n<ol class=\"lessons\">\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>How interfaces guide people</h3><p class=\"duration\">8 min</p></div>\n<span class=\"lesson-state complete\"><span aria-hidden=\"true\">✓ </span>Completed</span>\n</li>\n<li class=\"lesson current\" aria-current=\"step\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Create a clear visual hierarchy</h3><p class=\"duration\">12 min · 6 min left</p></div>\n<span class=\"lesson-state active\">In progress</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Make type easy to read</h3><p class=\"duration\">10 min</p></div>\n<span class=\"lesson-state\">Not started</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">04</span>\n<div><h3>Use space with intention</h3><p class=\"duration\">9 min</p></div>\n<span class=\"lesson-state\">Not started</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">05</span>\n<div><h3>Design forms that help</h3><p class=\"duration\">14 min</p></div>\n<span class=\"lesson-state\">Not started</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">06</span>\n<div><h3>Bring it together</h3><p class=\"duration\">11 min</p></div>\n<span class=\"lesson-state\">Not started</span>\n</li>\n</ol>\n</section>\n\n<aside aria-labelledby=\"goal-title\">\n<section class=\"goal\">\n<p class=\"eyebrow\">This week</p>\n<h2 id=\"goal-title\">A little time, steady progress</h2>\n<div class=\"progress-label\">\n<label for=\"weekly-progress\">Weekly learning goal</label>\n<strong>14 <small>/ 30 min</small></strong>\n</div>\n<progress id=\"weekly-progress\" value=\"14\" max=\"30\">14 of 30 minutes</progress>\n<p>16 min to go. Fit a session between workshop jobs.</p>\n</section>\n<p class=\"goal-footnote\">Your course is self-paced. Pick up where you left off, whenever the shop gives you a moment.</p>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-3","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Noah Tremblay at Common. Show Interface foundations with 23% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning — Common</title>\n<style>\n:root{--ink:#25332d;--muted:#657168;--line:#dbe0d8;--paper:#fafaf6;--green:#365f48;--soft:#eef2e9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nheader{border-bottom:1px solid var(--line);background:#fff}\n.header-inner{max-width:1160px;margin:auto;min-height:80px;padding:16px 28px;display:flex;align-items:center;gap:48px}\n.brand{font-size:25px;font-weight:750;letter-spacing:-1.2px;text-decoration:none;color:var(--ink)}\n.brand span{color:var(--green)}\nnav{display:flex;align-self:stretch;align-items:center;gap:26px}\nnav a{color:var(--muted);text-decoration:none;font-weight:600}\nnav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:11px}\n.account{margin-left:auto;display:flex;align-items:center;gap:11px}\n.avatar{width:36px;height:36px;border-radius:50%;background:#e8ecdf;display:grid;place-items:center;font-size:12px;font-weight:700}\n.account strong,.account small{display:block}\n.account strong{font-size:13px;font-weight:600}\n.account small{font-size:11px;color:var(--muted)}\nmain{max-width:1160px;margin:auto;padding:38px 28px 40px}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:29px}\nh1,h2,h3,p{margin:0}\nh1{font-family:Georgia,serif;font-size:48px;font-weight:400;letter-spacing:-1.8px;line-height:1.15}\n.subtitle{margin-top:9px;color:var(--muted)}\n.goal{width:260px;flex-shrink:0;border-left:1px solid var(--line);padding-left:24px}\n.goal-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}\n.goal h2{font-size:13px;font-weight:600}\n.goal strong{font-size:12px;white-space:nowrap}\n.goal p{font-size:11px;color:var(--muted);margin-top:5px}\nprogress{display:block;appearance:none;width:100%;height:5px;border:0;border-radius:3px;overflow:hidden;background:#dfe5da}\nprogress::-webkit-progress-bar{background:#dfe5da}\nprogress::-webkit-progress-value{background:var(--green)}\nprogress::-moz-progress-bar{background:var(--green)}\n.goal progress{margin-top:10px}\n.course{display:grid;grid-template-columns:minmax(0,1fr) 306px;grid-template-areas:\"intro next\" \"outline next\";background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden}\n.intro{grid-area:intro;padding:29px 32px 26px}\n.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}\n.intro h2{font-family:Georgia,serif;font-size:36px;font-weight:400;letter-spacing:-1px;line-height:1.2;margin:9px 0 10px}\n.description{color:var(--muted);max-width:480px;font-size:13px}\n.progress-label{display:flex;justify-content:space-between;font-size:12px;margin:21px 0 8px}\n.progress-label strong{color:var(--green)}\n.action-row{display:flex;align-items:center;gap:16px;margin-top:22px}\nbutton{font:inherit;cursor:pointer;border:0;border-radius:3px;background:var(--green);color:#fff;min-height:44px;padding:11px 18px;font-weight:600}\nbutton span{margin-left:17px}\nbutton:hover{background:#294c38}\nbutton:focus-visible,a:focus-visible{outline:3px solid #a28a40;outline-offset:4px}\n.resume{font-size:11px;color:var(--muted)}\n.next{grid-area:next;padding:30px 25px;background:var(--soft);border-left:1px solid var(--line)}\n.next .lesson-tag{display:inline-block;margin:19px 0 8px;font-size:11px;color:var(--green);font-weight:650}\n.next h3{font-family:Georgia,serif;font-size:27px;line-height:1.2;font-weight:400;letter-spacing:-.4px}\n.next .summary{font-size:13px;line-height:1.65;margin-top:13px;color:#526055}\n.time{font-size:11px;color:var(--muted);margin-top:12px}\n.preview{border-top:1px solid #d0d9ca;margin-top:28px;padding-top:23px}\n.preview h4{font-size:12px;margin:0 0 12px;font-weight:650}\nfigure{margin:0}\nsvg{display:block;width:100%;height:auto}\nfigcaption{font-size:11px;line-height:1.6;color:#5d6a5f;margin-top:12px}\n.takeaway{margin-top:24px;padding-top:18px;border-top:1px solid #d0d9ca;font-size:12px;color:#526055}\n.takeaway strong{display:block;margin-bottom:5px;color:var(--ink)}\n.outline{grid-area:outline;border-top:1px solid var(--line)}\n.outline-heading{padding:21px 32px 15px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}\n.outline h2{font-size:16px;font-weight:650}\n.outline-heading p{font-size:11px;color:var(--muted)}\n.lessons{padding:0;margin:0;list-style:none}\n.lesson{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 32px;border-top:1px solid #edf0e9;min-height:65px}\n.number{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}\n.lesson h3{font-size:13px;font-weight:550;line-height:1.4}\n.status{display:block;font-size:10px;color:var(--muted);margin-top:3px}\n.done .status{color:var(--green)}\n.active{background:#f4f6f0;box-shadow:inset 3px 0 var(--green)}\n.active .status{color:var(--green);font-weight:600}\n.duration{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}\nfooter{display:flex;justify-content:space-between;gap:18px;margin-top:16px;font-size:11px;color:var(--muted)}\n@media(max-width:700px){\n.header-inner{padding:13px 20px;min-height:68px;gap:25px}\n.brand{font-size:23px}\nnav{gap:0;font-size:12px}\n.account{gap:0}\n.account .avatar{display:none}\n.account strong{font-size:11px}\n.account small{font-size:10px}\nmain{padding:26px 20px}\n.page-heading{display:block;margin-bottom:22px}\nh1{font-size:39px;letter-spacing:-1.4px}\n.subtitle{font-size:12px;max-width:300px;margin-top:8px}\n.goal{width:100%;border-left:0;border-top:1px solid var(--line);padding:15px 0 0;margin-top:20px}\n.goal h2{font-size:12px}\n.goal p{font-size:10px}\n.course{grid-template-columns:minmax(0,1fr);grid-template-areas:\"intro\" \"next\" \"outline\"}\n.intro{padding:23px 20px}\n.intro h2{font-size:31px}\n.description{font-size:12px}\n.progress-label{margin-top:18px}\n.action-row{display:block;margin-top:19px}\nbutton{width:100%;display:flex;justify-content:space-between}\n.resume{display:block;margin-top:8px}\n.next{border-left:0;border-top:1px solid var(--line);padding:20px}\n.next .lesson-tag{margin-top:10px}\n.next h3{font-size:24px}\n.next .summary{font-size:12px;margin-top:8px;line-height:1.6}\n.time{margin-top:8px}\n.preview{margin-top:18px;padding-top:15px}\n.preview h4{margin-bottom:10px}\nfigure{display:grid;grid-template-columns:148px minmax(0,1fr);align-items:center;gap:12px}\nfigcaption{margin:0;font-size:10px}\n.takeaway{display:none}\n.outline-heading{padding:19px 20px 14px;align-items:center}\n.outline-heading p{font-size:10px}\n.lesson{padding:12px 20px;grid-template-columns:23px minmax(0,1fr) auto;gap:9px}\n.lesson h3{font-size:12px}\n.duration{font-size:10px}\nfooter{font-size:10px}\nfooter span:last-child{text-align:right}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<a class=\"brand\" href=\"#learning\" aria-label=\"Common home\">Common<span>.</span></a>\n<nav aria-label=\"Main navigation\"><a href=\"#learning\" aria-current=\"page\">Learning</a></nav>\n<div class=\"account\"><span class=\"avatar\" aria-hidden=\"true\">NT</span><div><strong>Noah Tremblay</strong><small>Maple Cycles · Montréal</small></div></div>\n</div>\n</header>\n<main id=\"learning\">\n<div class=\"page-heading\">\n<div><h1>Your learning</h1><p class=\"subtitle\">Practical skills for a smoother day at the bike shop.</p></div>\n<section class=\"goal\" aria-labelledby=\"goal-title\">\n<div class=\"goal-top\"><h2 id=\"goal-title\">Weekly learning goal</h2><strong>24 / 60 min</strong></div>\n<progress value=\"24\" max=\"60\" aria-label=\"Weekly learning goal: 24 of 60 minutes\">40%</progress>\n<p>36 minutes to go · A little between repairs adds up.</p>\n</section>\n</div>\n\n<article class=\"course\" aria-labelledby=\"course-title\">\n<section class=\"intro\">\n<p class=\"eyebrow\">Your current course · 6 lessons · 1h 44m</p>\n<h2 id=\"course-title\">Interface foundations</h2>\n<p class=\"description\">Make your shop’s digital touchpoints as clear and helpful as a conversation at the service counter.</p>\n<div class=\"progress-label\"><span>Course progress</span><strong>23%</strong></div>\n<progress value=\"23\" max=\"100\" aria-label=\"Interface foundations: 23 percent complete\">23%</progress>\n<div class=\"action-row\"><button type=\"button\">Continue learning <span aria-hidden=\"true\">→</span></button><span class=\"resume\">Resume lesson 02 · 8 min left</span></div>\n</section>\n\n<aside class=\"next\" aria-labelledby=\"next-title\">\n<p class=\"eyebrow\">Next in your outline</p>\n<p class=\"lesson-tag\">02 / In progress</p>\n<h3 id=\"next-title\">Hierarchy that helps</h3>\n<p class=\"summary\">Help riders find what matters first: repair status, pickup time and the next step. Learn to guide attention with size, spacing and emphasis.</p>\n<p class=\"time\">18 min lesson · 10 min watched</p>\n<div class=\"preview\">\n<h4>A clear next step, at a glance</h4>\n<figure>\n<svg viewBox=\"0 0 250 136\" role=\"img\" aria-labelledby=\"preview-title\">\n<title id=\"preview-title\">Example repair card: a prominent ready-for-pickup status, smaller repair details and one clear collection action.</title>\n<rect x=\"1\" y=\"1\" width=\"248\" height=\"134\" rx=\"4\" fill=\"#fff\" stroke=\"#cfd8c9\"/>\n<circle cx=\"18\" cy=\"21\" r=\"4\" fill=\"#365f48\"/>\n<text x=\"29\" y=\"25\" fill=\"#365f48\" font-family=\"system-ui,sans-serif\" font-size=\"10\" font-weight=\"600\">REPAIR #1048</text>\n<text x=\"15\" y=\"52\" fill=\"#25332d\" font-family=\"system-ui,sans-serif\" font-size=\"18\" font-weight=\"650\">Ready for pickup</text>\n<text x=\"15\" y=\"73\" fill=\"#657168\" font-family=\"system-ui,sans-serif\" font-size=\"10\">City bike tune-up · $85</text>\n<path d=\"M15 87H235\" stroke=\"#e3e7de\"/>\n<text x=\"15\" y=\"113\" fill=\"#365f48\" font-family=\"system-ui,sans-serif\" font-size=\"11\" font-weight=\"600\">See collection details</text>\n<path d=\"M218 109h14m-5-5 5 5-5 5\" fill=\"none\" stroke=\"#365f48\" stroke-width=\"1.5\"/>\n</svg>\n<figcaption>Lead with the rider’s question: “Is my bike ready?” Put supporting details second.</figcaption>\n</figure>\n</div>\n<p class=\"takeaway\"><strong>Try it at Maple Cycles</strong>Bring a repair update or booking page to the lesson. You’ll have a real example to improve.</p>\n</aside>\n\n<section class=\"outline\" aria-labelledby=\"outline-title\">\n<div class=\"outline-heading\"><h2 id=\"outline-title\">Course outline</h2><p>1 of 6 completed</p></div>\n<ol class=\"lessons\">\n<li class=\"lesson done\"><span class=\"number\" aria-hidden=\"true\">01</span><div><h3>Start with the rider</h3><span class=\"status\">✓ Completed</span></div><span class=\"duration\">14 min</span></li>\n<li class=\"lesson active\" aria-current=\"step\"><span class=\"number\" aria-hidden=\"true\">02</span><div><h3>Hierarchy that helps</h3><span class=\"status\">In progress · Pick up here</span></div><span class=\"duration\">18 min</span></li>\n<li class=\"lesson\"><span class=\"number\" aria-hidden=\"true\">03</span><div><h3>Layout &amp; spacing</h3><span class=\"status\">Not started</span></div><span class=\"duration\">20 min</span></li>\n<li class=\"lesson\"><span class=\"number\" aria-hidden=\"true\">04</span><div><h3>Type that reads clearly</h3><span class=\"status\">Not started</span></div><span class=\"duration\">16 min</span></li>\n<li class=\"lesson\"><span class=\"number\" aria-hidden=\"true\">05</span><div><h3>Colour &amp; contrast</h3><span class=\"status\">Not started</span></div><span class=\"duration\">20 min</span></li>\n<li class=\"lesson\"><span class=\"number\" aria-hidden=\"true\">06</span><div><h3>Build a better booking flow</h3><span class=\"status\">Not started</span></div><span class=\"duration\">16 min</span></li>\n</ol>\n</section>\n</article>\n<footer><span>Common · Learning for independent shops</span><span>Small lessons. Everyday improvements.</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-5","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Jules Martin at North. Show Interface foundations with 25% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning · North</title>\n<style>\n:root{--ink:#263b32;--muted:#687169;--line:#dedfd5;--paper:#fffef9;--ground:#f3f1e9;--soft:#e9eee3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--ground);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton{font:inherit}\nheader{background:var(--paper);border-bottom:1px solid var(--line)}\n.header-inner{max-width:1168px;min-height:76px;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand-group,.profile{display:flex;align-items:center;gap:12px}\n.brand{font-size:27px;font-weight:750;letter-spacing:-1.2px;display:flex;align-items:center;gap:8px}\n.brand svg{width:26px;height:28px}\n.product-label{border-left:1px solid var(--line);padding-left:20px;margin-left:12px;color:var(--muted);font-size:13px}\n.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-size:12px;font-weight:700}\n.profile-name{font-size:13px;font-weight:600}\nmain{max-width:1168px;margin:auto;padding:35px 24px 32px}\n.page-heading{margin-bottom:25px}\nh1,h2,h3,p{margin:0}\nh1{font-size:32px;line-height:1.2;font-weight:650;letter-spacing:-1px}\n.page-heading p{color:var(--muted);margin-top:7px}\n.course{background:var(--paper);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden}\n.overview{padding:28px 32px}\n.eyebrow{font-size:11px;letter-spacing:1.3px;font-weight:750;text-transform:uppercase;color:var(--muted);margin-bottom:9px}\nh2.course-title{font-size:29px;line-height:1.2;letter-spacing:-.7px;font-weight:650}\n.description{color:var(--muted);max-width:420px;margin-top:12px}\n.progress-copy{margin-top:25px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px}\n.progress-copy label{font-size:13px;font-weight:650}\n.progress-copy span{color:var(--muted)}\nprogress{appearance:none;-webkit-appearance:none;width:100%;height:7px;border:0;border-radius:8px;overflow:hidden;display:block;margin-top:9px;background:#e4e7dd}\nprogress::-webkit-progress-bar{background:#e4e7dd}\nprogress::-webkit-progress-value{background:var(--ink);border-radius:8px}\nprogress::-moz-progress-bar{background:var(--ink);border-radius:8px}\n.next{padding:28px 32px;border-left:1px solid var(--line);background:#f7f8f0}\n.next h3{font-size:19px;letter-spacing:-.3px;line-height:1.35}\n.next .summary{font-size:13px;color:var(--muted);margin-top:9px;max-width:390px}\n.action-row{display:flex;align-items:center;gap:15px;margin-top:21px}\nbutton{background:var(--ink);color:white;border:1px solid var(--ink);border-radius:6px;padding:12px 17px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:46px}\nbutton:hover{background:#384e42}\nbutton:focus-visible{outline:3px solid #a2ad7e;outline-offset:3px}\nbutton span{margin-left:15px}\n.hint{font-size:11px;line-height:1.5;color:var(--muted);max-width:115px}\n.lower{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:24px;align-items:start}\n.outline{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line)}\n.section-heading h2{font-size:18px;letter-spacing:-.3px;font-weight:650}\n.section-heading span{font-size:12px;color:var(--muted)}\nol{list-style:none;padding:0;margin:0}\n.lesson{display:flex;align-items:center;gap:14px;padding:11px 24px;min-height:60px;border-bottom:1px solid #eaece3}\n.lesson:last-child{border:0}\n.number{flex-shrink:0;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}\n.done .number{background:var(--soft);border-color:var(--soft);color:var(--ink)}\n.lesson-name{font-weight:550;font-size:13px;line-height:1.35}\n.lesson-details{min-width:0;flex:1}\n.duration{font-size:11px;color:var(--muted);margin-top:2px}\n.status{font-size:11px;white-space:nowrap;color:#536b4b}\n.current{background:#f0f3e9}\n.current .number{background:var(--ink);color:white;border-color:var(--ink)}\n.current .status{background:#dfe7d5;border-radius:4px;padding:3px 8px;font-weight:650;color:var(--ink)}\n.goal{padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:12px}\n.goal h2{font-size:16px;font-weight:650}\n.goal-stat{display:flex;align-items:baseline;gap:6px;margin-top:17px}\n.goal-stat strong{font-size:29px;letter-spacing:-1px;font-weight:650;line-height:1.1}\n.goal-stat label{color:var(--muted);font-size:12px}\n.goal p{color:var(--muted);font-size:12px;margin-top:12px}\n.goal progress{height:5px;margin-top:13px}\n.goal .encouragement{color:var(--ink);font-weight:550;margin-top:16px}\n.update{margin:20px 10px 0;padding-top:17px;border-top:1px solid #d9dccf}\n.update .eyebrow{font-size:10px;margin-bottom:6px}\n.update p{font-size:12px;color:var(--muted);line-height:1.6}\n.update time{color:var(--ink)}\nfooter{margin-top:22px;color:var(--muted);font-size:11px}\n@media(max-width:700px){\n.header-inner{min-height:66px;padding:14px 20px}\n.product-label{display:none}\n.profile{gap:8px}.profile-name{font-size:12px}\nmain{padding:25px 16px}\nh1{font-size:28px}\n.page-heading{margin-bottom:20px}\n.page-heading p{font-size:13px;max-width:310px}\n.course{grid-template-columns:1fr}\n.overview{padding:22px}\nh2.course-title{font-size:26px}\n.description{font-size:13px;margin-top:10px}\n.progress-copy{margin-top:20px}\n.next{border-left:0;border-top:1px solid var(--line);padding:20px 22px}\n.next h3{font-size:18px}\n.action-row{gap:12px;margin-top:17px}\nbutton{padding:11px 13px;font-size:13px}\nbutton span{margin-left:10px}\n.hint{font-size:10px;max-width:105px}\n.lower{grid-template-columns:1fr;gap:18px;margin-top:18px}\n.section-heading{padding:17px 18px}\n.section-heading h2{font-size:17px}\n.lesson{padding:12px 15px;gap:10px}\n.lesson-name{font-size:12px}\n.number{width:27px;height:27px;font-size:10px}\n.status{font-size:10px}\n.current .status{padding:3px 6px}\n.goal{padding:19px 21px}\n.goal-stat{margin-top:12px}\n.update{margin-top:16px}\nfooter{margin-top:20px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand-group\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 28 30\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 26V5L24 25V4M4 5L14 15\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"square\"/></svg>\nNorth\n</div>\n<span class=\"product-label\">Member learning</span>\n</div>\n<div class=\"profile\"><span class=\"avatar\" aria-hidden=\"true\">JM</span><span class=\"profile-name\">Jules Martin</span></div>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<h1>Your learning</h1>\n<p>A little learning. A more connected co-op.</p>\n</div>\n\n<section class=\"course\" aria-labelledby=\"course-title\">\n<div class=\"overview\">\n<p class=\"eyebrow\">Your course · 6 lessons</p>\n<h2 class=\"course-title\" id=\"course-title\">Interface foundations</h2>\n<p class=\"description\">Create clear, welcoming digital experiences for everyone in your food co-op.</p>\n<div class=\"progress-copy\"><label for=\"course-progress\">25% complete</label><span>21 of 84 min</span></div>\n<progress id=\"course-progress\" value=\"25\" max=\"100\">25%</progress>\n</div>\n<div class=\"next\">\n<p class=\"eyebrow\">Up next · Lesson 03 · 16 min</p>\n<h3>Make everyday actions clear</h3>\n<p class=\"summary\">Help members find their next step, from reserving a produce box to choosing a pickup time.</p>\n<div class=\"action-row\">\n<button type=\"button\">Continue learning <span aria-hidden=\"true\">→</span></button>\n<p class=\"hint\">Picks up right where you left off.</p>\n</div>\n</div>\n</section>\n\n<div class=\"lower\">\n<section class=\"outline\" aria-labelledby=\"outline-title\">\n<div class=\"section-heading\"><h2 id=\"outline-title\">Course outline</h2><span>2 of 6 completed</span></div>\n<ol>\n<li class=\"lesson done\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div class=\"lesson-details\"><h3 class=\"lesson-name\">Start with your community</h3><p class=\"duration\">9 min</p></div>\n<span class=\"status\"><span aria-hidden=\"true\">✓ </span>Completed</span>\n</li>\n<li class=\"lesson done\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div class=\"lesson-details\"><h3 class=\"lesson-name\">Organize the essentials</h3><p class=\"duration\">12 min</p></div>\n<span class=\"status\"><span aria-hidden=\"true\">✓ </span>Completed</span>\n</li>\n<li class=\"lesson current\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div class=\"lesson-details\"><h3 class=\"lesson-name\">Make everyday actions clear</h3><p class=\"duration\">16 min</p></div>\n<span class=\"status\">Up next</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">04</span>\n<div class=\"lesson-details\"><h3 class=\"lesson-name\">Design for every member</h3><p class=\"duration\">15 min</p></div>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">05</span>\n<div class=\"lesson-details\"><h3 class=\"lesson-name\">Build trust with feedback</h3><p class=\"duration\">18 min</p></div>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">06</span>\n<div class=\"lesson-details\"><h3 class=\"lesson-name\">Bring it all together</h3><p class=\"duration\">14 min</p></div>\n</li>\n</ol>\n</section>\n\n<aside aria-label=\"Learning activity\">\n<section class=\"goal\" aria-labelledby=\"goal-title\">\n<h2 id=\"goal-title\">Your weekly goal</h2>\n<p>This week · 10–16 February</p>\n<div class=\"goal-stat\"><strong>21</strong><label for=\"weekly-progress\">of 30 minutes</label></div>\n<progress id=\"weekly-progress\" value=\"21\" max=\"30\">21 of 30 minutes</progress>\n<p class=\"encouragement\">Just 9 minutes to your goal.</p>\n<p>Small steps add up—even between shifts at the co-op.</p>\n</section>\n<div class=\"update\">\n<p class=\"eyebrow\">A small course update</p>\n<p><time datetime=\"2025-02-12\">12 Feb</time> · Lesson 3 now includes a real-world member checkout example.</p>\n</div>\n</aside>\n</div>\n<footer>Made for the people who make the co-op work.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-7","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Kai Nguyen at Morrow. Show Interface foundations with 27% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning · Morrow</title>\n<style>\n:root{--ink:#234a3c;--paper:#f7f6ef;--muted:#63756a;--line:#ced7cb;--soft:#e9eee3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton{font:inherit}\nheader{border-bottom:1px solid var(--line)}\n.topbar{max-width:1152px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:20px}\n.wordmark{font-family:Georgia,serif;font-size:30px;font-weight:bold;letter-spacing:-1.5px}\n.brand-note{border-left:1px solid var(--line);padding-left:20px;font-size:13px;color:var(--muted)}\n.member{display:flex;align-items:center;gap:11px;font-size:13px}\n.avatar{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font-size:11px;font-weight:700}\n.member strong,.member small{display:block}\n.member small{color:var(--muted);font-size:11px}\nmain{max-width:1152px;padding:34px 32px 48px;margin:auto}\n.page-heading{margin-bottom:26px}\nh1{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:0 0 8px;font-weight:650}\np{margin:0}\n.page-heading p{color:var(--muted)}\n.course{background:var(--ink);color:var(--paper);border-radius:10px;padding:30px 32px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:center}\n.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}\n.course h2{font:normal 38px/1.15 Georgia,serif;letter-spacing:-.8px;margin:9px 0 12px}\n.course-description{font-size:14px;max-width:450px;color:#dbe3d6}\nbutton{border:0;border-radius:5px;padding:12px 19px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:44px}\nbutton:focus-visible{outline:3px solid var(--paper);outline-offset:4px}\n.continue{background:var(--paper);color:var(--ink);margin-top:23px}\n.continue:hover{background:var(--soft)}\n.progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}\n.progress-head label{font-size:12px}\n.percent{font-size:40px;letter-spacing:-1.5px;font-weight:500;line-height:1.2}\nprogress{display:block;width:100%;height:6px;border:0;border-radius:8px;overflow:hidden;appearance:none;background:var(--line);color:var(--ink)}\nprogress::-webkit-progress-bar{background:var(--line);border-radius:8px}\nprogress::-webkit-progress-value{background:var(--ink);border-radius:8px}\nprogress::-moz-progress-bar{background:var(--ink);border-radius:8px}\n.course progress{margin:15px 0 11px;background:#557365}\n.course progress::-webkit-progress-bar{background:#557365}\n.course progress::-webkit-progress-value{background:var(--paper)}\n.course progress::-moz-progress-bar{background:var(--paper)}\n.progress-note{font-size:12px;color:#dbe3d6}\n.content{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;margin-top:34px;align-items:start}\n.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:15px}\n.section-heading h2{font-size:19px;letter-spacing:-.4px;margin:0;font-weight:650}\n.section-heading span{font-size:11px;color:var(--muted);white-space:nowrap}\n.lessons{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}\n.lesson{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:13px;align-items:start;padding:17px 0;border-bottom:1px solid var(--line)}\n.number{font-size:12px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;margin-top:1px}\n.done .number{background:var(--ink);color:var(--paper);border-color:var(--ink)}\n.lesson h3{font-size:14px;line-height:1.45;font-weight:550;margin:0 0 5px}\n.state{font-size:11px;color:var(--muted)}\n.done .state{color:var(--ink)}\n.duration{font-size:11px;color:var(--muted);white-space:nowrap;padding-top:4px}\n.next{background:var(--soft);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:5px}\n.next .number{border-color:var(--ink)}\n.next .state{font-weight:700;color:var(--ink)}\n.aside{display:grid;gap:22px}\n.next-card{border:1px solid var(--line);border-radius:8px;padding:23px}\n.next-card .eyebrow{color:var(--muted)}\n.next-card h2{font:normal 25px/1.2 Georgia,serif;letter-spacing:-.3px;margin:10px 0}\n.next-card p{font-size:13px;color:var(--muted);line-height:1.65}\n.meta{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:13px}\nfigure{margin:19px 0 0}\nfigure svg{display:block;width:100%;height:auto;max-width:310px;margin:auto}\nfigcaption{font-size:10px;color:var(--muted);text-align:center;margin-top:9px}\n.goal{padding:0 3px}\n.goal-top{display:flex;justify-content:space-between;gap:14px;align-items:baseline}\n.goal label{font-size:13px;font-weight:650}\n.goal-top span{font-size:11px;color:var(--muted)}\n.goal progress{margin:12px 0 9px}\n.goal p{font-size:12px;color:var(--muted)}\n.goal strong{color:var(--ink);font-weight:600}\nfooter{max-width:1152px;margin:auto;padding:0 32px 25px;color:var(--muted);font-size:11px}\n@media(max-width:700px){\n.topbar{padding:17px 20px;gap:12px}\n.brand-note{display:none}\n.wordmark{font-size:27px}\n.member small{max-width:155px}\nmain{padding:25px 20px 32px}\nh1{font-size:27px}\n.page-heading{margin-bottom:22px}\n.page-heading p{font-size:13px;max-width:290px}\n.course{grid-template-columns:1fr;gap:23px;padding:24px}\n.course h2{font-size:32px;max-width:250px}\n.course-description{font-size:13px}\n.continue{margin-top:20px;width:100%;justify-content:space-between}\n.progress-head label{font-size:12px}\n.percent{font-size:28px}\n.course progress{margin-top:10px}\n.content{grid-template-columns:1fr;gap:26px;margin-top:27px}\n.section-heading{gap:8px}\n.section-heading h2{font-size:18px}\n.section-heading span{font-size:10px}\n.lesson{gap:10px;padding-top:15px;padding-bottom:15px}\n.lesson h3{font-size:13px}\n.duration{font-size:10px}\n.next-card{padding:21px}\n.next-card h2{font-size:24px}\n.aside{gap:25px}\nfooter{padding:0 20px 22px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"topbar\">\n<div class=\"brand\"><span class=\"wordmark\">morrow.</span><span class=\"brand-note\">Learning for your co-op</span></div>\n<div class=\"member\"><span class=\"avatar\" aria-hidden=\"true\">KN</span><div><strong>Kai Nguyen</strong><small>Cedar Street Food Co-op</small></div></div>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<h1>Your learning</h1>\n<p>Welcome back, Kai. A little learning, a more connected co-op.</p>\n</div>\n\n<section class=\"course\" aria-labelledby=\"course-title\">\n<div>\n<div class=\"eyebrow\">Your course · 6 lessons</div>\n<h2 id=\"course-title\">Interface foundations</h2>\n<p class=\"course-description\">Create clear, welcoming digital experiences for the people who grow, share and shop with your co-op.</p>\n<button class=\"continue\" type=\"button\">Continue learning <span aria-hidden=\"true\">↗</span></button>\n</div>\n<div>\n<div class=\"progress-head\"><label for=\"course-progress\">Course progress</label><span class=\"percent\">27%</span></div>\n<progress id=\"course-progress\" max=\"82\" value=\"22\">27%</progress>\n<p class=\"progress-note\">22 of 82 minutes completed</p>\n</div>\n</section>\n\n<div class=\"content\">\n<section aria-labelledby=\"outline-heading\">\n<div class=\"section-heading\"><h2 id=\"outline-heading\">Course outline</h2><span>2 of 6 lessons completed</span></div>\n<ol class=\"lessons\">\n<li class=\"lesson done\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>Start with the member in mind</h3><p class=\"state\">✓ Completed</p></div>\n<span class=\"duration\">8 min</span>\n</li>\n<li class=\"lesson done\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Structure information for a busy pickup day</h3><p class=\"state\">✓ Completed</p></div>\n<span class=\"duration\">14 min</span>\n</li>\n<li class=\"lesson next\" aria-current=\"step\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Make the next action clear</h3><p class=\"state\">Next lesson</p></div>\n<span class=\"duration\">18 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">04</span>\n<div><h3>Build forms members can trust</h3><p class=\"state\">Not started</p></div>\n<span class=\"duration\">12 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">05</span>\n<div><h3>Design for everyone, on every device</h3><p class=\"state\">Not started</p></div>\n<span class=\"duration\">16 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">06</span>\n<div><h3>Bring it together: the member pickup flow</h3><p class=\"state\">Not started</p></div>\n<span class=\"duration\">14 min</span>\n</li>\n</ol>\n</section>\n\n<aside class=\"aside\" aria-label=\"Your next steps\">\n<section class=\"next-card\" aria-labelledby=\"next-title\">\n<div class=\"eyebrow\">Up next · Lesson 03</div>\n<h2 id=\"next-title\">Make the next action clear</h2>\n<div class=\"meta\"><span>18 minutes</span><span aria-hidden=\"true\">·</span><span>Short lesson + practice</span></div>\n<p>Help members find their next step. Explore visual hierarchy, then give a produce-box reservation screen one clear primary action.</p>\n<figure>\n<svg viewBox=\"0 0 300 112\" role=\"img\" aria-labelledby=\"example-title\">\n<title id=\"example-title\">Example of action hierarchy: a prominent Reserve a box button, with a quieter View contents link.</title>\n<rect x=\"1\" y=\"1\" width=\"298\" height=\"110\" rx=\"6\" fill=\"#e9eee3\" stroke=\"#ced7cb\"/>\n<text x=\"19\" y=\"29\" fill=\"#234a3c\" font-family=\"system-ui,sans-serif\" font-size=\"12\" font-weight=\"600\">Saturday produce box</text>\n<text x=\"19\" y=\"47\" fill=\"#63756a\" font-family=\"system-ui,sans-serif\" font-size=\"10\">Seasonal food from our local growers</text>\n<rect x=\"19\" y=\"63\" width=\"124\" height=\"31\" rx=\"4\" fill=\"#234a3c\"/>\n<text x=\"81\" y=\"83\" fill=\"#f7f6ef\" text-anchor=\"middle\" font-family=\"system-ui,sans-serif\" font-size=\"11\" font-weight=\"600\">Reserve a box</text>\n<text x=\"166\" y=\"83\" fill=\"#234a3c\" font-family=\"system-ui,sans-serif\" font-size=\"11\" text-decoration=\"underline\">View contents</text>\n</svg>\n<figcaption>One clear action. Supporting details nearby.</figcaption>\n</figure>\n</section>\n<section class=\"goal\" aria-label=\"Weekly learning goal\">\n<div class=\"goal-top\"><label for=\"weekly-progress\">Weekly learning goal</label><span>This week</span></div>\n<progress id=\"weekly-progress\" value=\"22\" max=\"45\">22 of 45 minutes</progress>\n<p><strong>22 / 45 minutes</strong> · 23 minutes to your goal.</p>\n</section>\n</aside>\n</div>\n</main>\n<footer>Made for the people who keep our co-ops growing.</footer>\n</body>\n</html>"}]}
{"id":"sft-course-8","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Maya Chen at Fieldwork. Show Interface foundations with 28% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning — Fieldwork</title>\n<style>\n:root{--ink:#29352e;--muted:#687169;--line:#dce0d8;--green:#355c48;--pale:#edf2eb;--paper:#fafbf8}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nheader{height:76px;border-bottom:1px solid var(--line);background:#fff}\n.header-inner{max-width:1180px;height:100%;margin:auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:11px}\n.brand svg{width:29px;height:29px}\n.brand strong{font-size:20px;letter-spacing:-.6px}\n.brand-note{margin-left:22px;padding-left:22px;border-left:1px solid var(--line);color:var(--muted);font-size:13px}\n.profile{display:flex;align-items:center;gap:10px;font-size:13px}\n.avatar{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#e9ece5;font-size:11px;font-weight:600}\nmain{max-width:1180px;margin:auto;padding:34px 30px 42px}\n.page-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:30px}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0;font-weight:550}\n.page-heading p{margin:0;color:var(--muted);font-size:13px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-areas:\"hero detail\" \"outline detail\";gap:30px 48px;align-items:start}\n.hero{grid-area:hero;min-width:0}\n.eyebrow{font-size:10px;line-height:1.5;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 9px}\nh2.course-title{font:normal 40px/1.12 Georgia,\"Times New Roman\",serif;letter-spacing:-1.1px;margin:0 0 9px}\n.course-meta{color:var(--muted);font-size:13px;margin:0}\n.progress-line{display:flex;align-items:center;gap:16px;margin:19px 0 23px}\n.progress-line label{display:flex;align-items:baseline;gap:10px;white-space:nowrap;font-size:12px;color:var(--muted)}\n.progress-line strong{font-size:16px;color:var(--green);font-weight:600}\nprogress{display:block;appearance:none;border:0;background:#e0e5dc;height:5px;border-radius:0;width:100%;overflow:hidden;accent-color:var(--green)}\nprogress::-webkit-progress-bar{background:#e0e5dc}\nprogress::-webkit-progress-value{background:var(--green)}\nprogress::-moz-progress-bar{background:var(--green)}\n.next{background:var(--pale);border-left:3px solid var(--green);padding:20px 23px}\n.next .eyebrow{color:var(--green);margin-bottom:6px}\n.next h3{margin:0 0 6px;font-size:21px;line-height:1.3;font-weight:550;letter-spacing:-.4px}\n.next p.summary{max-width:540px;font-size:14px;color:#526052;margin:0 0 17px}\nbutton{font:600 13px/1.3 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;border:1px solid var(--green);background:var(--green);color:white;min-height:42px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:22px;cursor:pointer;border-radius:2px}\nbutton:hover{background:#294b39}\nbutton:focus-visible{outline:3px solid #a4b87d;outline-offset:3px}\nbutton svg{width:16px;height:16px}\n.outline{grid-area:outline;min-width:0}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:12px}\n.section-heading h2{font-size:20px;letter-spacing:-.4px;font-weight:550;margin:0}\n.section-heading p{font-size:12px;color:var(--muted);margin:0}\n.lessons{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}\n.lesson{display:grid;grid-template-columns:27px minmax(0,1fr) auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}\n.number{font-size:12px;color:#879086;font-variant-numeric:tabular-nums;align-self:start;padding-top:2px}\n.lesson h3{font-size:14px;line-height:1.35;font-weight:500;margin:0 0 3px}\n.status{font-size:11px;line-height:1.3;color:var(--muted);display:block}\n.complete{color:var(--green)}\n.check{margin-right:4px}\n.duration{font-size:12px;color:var(--muted);white-space:nowrap}\n.current .number,.current h3{color:var(--green)}\n.current h3{font-weight:650}\n.current .status{color:var(--green);font-weight:600}\n.detail{grid-area:detail;background:#eff0e9;padding:24px;min-width:0;border-top:2px solid #85927d}\n.detail h2{font-size:17px;line-height:1.3;font-weight:550;letter-spacing:-.3px;margin:0 0 17px}\n.goal-amount{display:flex;gap:7px;align-items:baseline;margin-bottom:8px}\n.goal-amount strong{font:normal 38px/1 Georgia,\"Times New Roman\",serif;letter-spacing:-1px}\n.goal-amount span{font-size:12px;color:var(--muted)}\n.goal label{display:block;font-size:12px;margin-bottom:9px}\n.goal p{font-size:12px;color:var(--muted);margin:10px 0 0}\n.detail-notes{border-top:1px solid #d3d8cd;margin-top:24px;padding-top:20px}\n.detail-notes h3{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 8px;font-weight:650}\n.detail-notes p{font-size:13px;color:#5d685c;margin:0 0 18px;overflow-wrap:break-word}\n.detail-notes p:last-child{margin:0}\nfooter{max-width:1180px;margin:0 auto;padding:0 30px 24px;color:#81877e;font-size:11px}\n@media(max-width:700px){\nheader{height:62px}.header-inner{padding:0 20px}.brand-note{display:none}.brand strong{font-size:18px}.profile{gap:7px;font-size:12px}.avatar{width:29px;height:29px}\nmain{padding:25px 20px 30px}.page-heading{margin-bottom:25px}.page-heading p{display:none}h1{font-size:27px}\n.layout{grid-template-columns:minmax(0,1fr);grid-template-areas:\"hero\" \"outline\" \"detail\";gap:26px}\nh2.course-title{font-size:34px}.progress-line{margin:16px 0 20px;gap:13px}.next{padding:17px 18px}.next h3{font-size:19px}.next p.summary{font-size:13px;margin-bottom:15px}\n.lesson{gap:9px;grid-template-columns:24px minmax(0,1fr) auto;padding:12px 0}.lesson h3{font-size:13px}.duration{font-size:11px}\n.detail{padding:20px}.detail h2{margin-bottom:12px}.goal-amount{float:right;margin:0 0 10px 16px}.goal-amount strong{font-size:29px}.goal label{padding-top:4px}.goal progress{clear:both}.detail-notes{margin-top:17px;padding-top:15px}.detail-notes p{font-size:12px;margin-bottom:12px}\nfooter{padding:0 20px 22px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 30 30\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M3 27V3h24v24H3ZM3 12h15V3M12 12v15M12 20h15\"/></svg>\n<strong>Fieldwork</strong>\n<span class=\"brand-note\">Practice learning</span>\n</div>\n<div class=\"profile\"><span class=\"avatar\" aria-hidden=\"true\">MC</span><span>Maya Chen</span></div>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<h1>Your learning</h1>\n<p>Make room for a little progress.</p>\n</div>\n<div class=\"layout\">\n<section class=\"hero\" aria-labelledby=\"course-title\">\n<p class=\"eyebrow\">Pick up where you left off</p>\n<h2 class=\"course-title\" id=\"course-title\">Interface foundations</h2>\n<p class=\"course-meta\">6 lessons · 57 minutes · Self-paced</p>\n<div class=\"progress-line\">\n<label for=\"course-progress\">Course progress <strong>28%</strong></label>\n<progress id=\"course-progress\" value=\"28\" max=\"100\">28%</progress>\n</div>\n<div class=\"next\">\n<p class=\"eyebrow\">Next up · Lesson 03 · 12 min</p>\n<h3>Arrange a project workspace</h3>\n<p class=\"summary\">Bring drawings, project milestones and your team into one clear working view, ready for the next design review.</p>\n<button type=\"button\">Continue learning <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M3 10h13m-5-5 5 5-5 5\"/></svg></button>\n</div>\n</section>\n\n<section class=\"outline\" aria-labelledby=\"outline-title\">\n<div class=\"section-heading\">\n<h2 id=\"outline-title\">Course outline</h2>\n<p>2 of 6 completed</p>\n</div>\n<ol class=\"lessons\">\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>Find your way around</h3><span class=\"status complete\"><span class=\"check\" aria-hidden=\"true\">✓</span>Completed</span></div>\n<span class=\"duration\">7 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Read the project overview</h3><span class=\"status complete\"><span class=\"check\" aria-hidden=\"true\">✓</span>Completed</span></div>\n<span class=\"duration\">9 min</span>\n</li>\n<li class=\"lesson current\" aria-current=\"step\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Arrange a project workspace</h3><span class=\"status\">Next lesson</span></div>\n<span class=\"duration\">12 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">04</span>\n<div><h3>Pin drawings and key documents</h3><span class=\"status\">Not started</span></div>\n<span class=\"duration\">10 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">05</span>\n<div><h3>Share a review-ready view</h3><span class=\"status\">Not started</span></div>\n<span class=\"duration\">9 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">06</span>\n<div><h3>Keep your workspace up to date</h3><span class=\"status\">Not started</span></div>\n<span class=\"duration\">10 min</span>\n</li>\n</ol>\n</section>\n\n<aside class=\"detail\" aria-labelledby=\"goal-title\">\n<section class=\"goal\">\n<p class=\"eyebrow\">Your learning rhythm</p>\n<h2 id=\"goal-title\">Weekly learning goal</h2>\n<div class=\"goal-amount\"><strong>30</strong><span>min / week</span></div>\n<label for=\"weekly-progress\">16 of 30 minutes learned</label>\n<progress id=\"weekly-progress\" value=\"16\" max=\"30\">16 of 30 minutes</progress>\n<p>14 minutes to go. One short session fits between project reviews.</p>\n</section>\n<div class=\"detail-notes\">\n<h3>Built for your practice</h3>\n<p>Recommended for project architects, interior designers and multidisciplinary studio collaborators.</p>\n<h3>What you’ll take away</h3>\n<p>A well-organised project workspace, with the right information close at hand.</p>\n</div>\n</aside>\n</div>\n</main>\n<footer>Fieldwork · A shared foundation for better project work.</footer>\n</body>\n</html>"}]}
{"id":"sft-course-10","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Samira Patel at Rill. Show Interface foundations with 30% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning — Rill</title>\n<style>\n:root{--bg:#f3f1eb;--paper:#fcfbf7;--ink:#24352e;--muted:#656b63;--line:#deded4;--soft:#e9ece3}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\na{color:inherit}\nheader{height:82px;border-bottom:1px solid var(--line);background:var(--paper)}\n.header-inner{max-width:1168px;height:100%;margin:auto;padding:0 32px;display:flex;align-items:center;gap:38px}\n.brand{text-decoration:none;font-family:Georgia,serif;font-size:36px;font-weight:bold;letter-spacing:-2px;line-height:1}\n.brand span{font-size:14px;font-family:system-ui,sans-serif;font-weight:400;letter-spacing:0;margin-left:20px;padding-left:20px;border-left:1px solid var(--line);vertical-align:middle}\nnav{align-self:stretch;display:flex;align-items:stretch;margin-left:auto}\nnav a{display:flex;align-items:center;text-decoration:none;border-bottom:2px solid var(--ink);font-size:13px;font-weight:600}\n.profile{display:flex;gap:10px;align-items:center;font-size:12px;line-height:1.4}\n.avatar{width:36px;height:36px;border-radius:50%;background:#e3e5db;display:grid;place-items:center;font-size:11px;font-weight:700}\n.profile strong{font-weight:600;display:block}\n.profile small{color:var(--muted);font-size:11px}\nmain{max-width:1168px;margin:auto;padding:36px 32px 48px}\n.page-heading{margin-bottom:26px}\n.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:0 0 9px}\nh1{font-size:38px;line-height:1.15;font-weight:500;letter-spacing:-1.3px;margin:0 0 10px}\n.page-heading p:last-child{margin:0;color:var(--muted);font-size:14px}\n.course{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden}\n.course-overview{padding:28px 32px}\n.course-kicker{display:flex;align-items:center;gap:12px;margin-bottom:20px}\n.course-icon{width:42px;height:42px;background:var(--soft);border-radius:5px;display:grid;place-items:center;flex-shrink:0}\n.course-kicker .eyebrow{margin:0 0 2px}\n.meta{font-size:12px;color:var(--muted)}\nh2,h3,p{margin-top:0}\n.course h2{font-size:30px;letter-spacing:-.9px;font-weight:550;line-height:1.2;margin-bottom:10px}\n.description{color:var(--muted);max-width:420px;margin-bottom:23px;font-size:13px;line-height:1.65}\n.progress-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:12px}\n.progress-heading strong{font-size:15px;font-weight:650}\nprogress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:6px;border:0;border-radius:8px;overflow:hidden;background:var(--line);color:var(--ink)}\nprogress::-webkit-progress-bar{background:var(--line);border-radius:8px}\nprogress::-webkit-progress-value{background:var(--ink);border-radius:8px}\nprogress::-moz-progress-bar{background:var(--ink);border-radius:8px}\n.progress-footer{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font-size:11px;color:var(--muted)}\n.state{display:inline-flex;align-items:center;gap:5px}\n.state:before{content:\"\";width:6px;height:6px;border:1px solid currentColor;border-radius:50%}\n.next{border-left:1px solid var(--line);padding:30px 32px;background:#f7f7f1;display:flex;flex-direction:column}\n.next .eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:17px}\n.next .eyebrow:before{content:\"→\";font-size:17px;line-height:1}\n.next h3{font-size:23px;line-height:1.25;letter-spacing:-.5px;font-weight:550;margin-bottom:9px}\n.next p{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:14px;max-width:350px}\n.next .lesson-time{font-size:11px;color:var(--muted);margin-bottom:22px}\nbutton{font:inherit;cursor:pointer}\n.continue{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:5px;padding:13px 17px;font-size:13px;font-weight:600;margin-top:auto}\n.continue span{font-size:19px;line-height:1}\n.continue:hover{background:#364c40}\nbutton:focus-visible,a:focus-visible{outline:3px solid #947a42;outline-offset:4px}\n.lower{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;margin-top:32px;align-items:start}\n.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}\n.section-heading h2,.goal h2{font-size:18px;font-weight:600;letter-spacing:-.3px;margin:0}\n.section-heading span{font-size:11px;color:var(--muted);white-space:nowrap}\n.table-wrap{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}\ntable{width:100%;border-collapse:collapse;text-align:left;font-size:12px}\nthead{background:#eeeee7;font-size:10px;letter-spacing:.5px;color:var(--muted)}\nth,td{padding:12px 17px}\nthead th{font-weight:500}\ntbody tr+tr{border-top:1px solid var(--line)}\ntbody th{font-weight:500}\n.lesson{display:flex;align-items:center;gap:13px;min-height:31px}\n.number{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex-shrink:0}\ntd.time{color:var(--muted);white-space:nowrap}\ntd.status{font-size:10px;white-space:nowrap}\n.completed{color:#53644e}\n.completed b{font-size:12px;margin-right:3px}\n.upcoming{background:#f0f2e9}\n.upcoming .number{background:var(--ink);color:var(--paper);border-color:var(--ink)}\n.up-next{border:1px solid #a5ada0;border-radius:4px;padding:3px 7px;font-weight:600}\n.not-started{color:var(--muted)}\n.goal{border:1px solid var(--line);border-radius:8px;padding:22px;background:#eaece3}\n.goal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--muted);font-size:11px}\n.goal h2{margin-bottom:20px}\n.goal label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:9px;color:var(--muted);font-size:11px}\n.goal label strong{font-size:25px;letter-spacing:-.8px;color:var(--ink);font-weight:550}\n.goal label strong small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}\n.goal progress{height:5px;background:#d1d6c9}\n.goal progress::-webkit-progress-bar{background:#d1d6c9}\n.goal p{margin:17px 0 0;font-size:12px;color:var(--muted);line-height:1.7}\n.goal p strong{color:var(--ink);font-weight:550}\n.practice-note{margin:17px 4px 0;font-size:11px;color:var(--muted);line-height:1.7}\n@media(max-width:700px){\nheader{height:68px}.header-inner{padding:0 20px;gap:16px}.brand{font-size:31px}.brand span{font-size:12px;margin-left:12px;padding-left:12px}nav{display:none}.profile{margin-left:auto}.profile small{display:none}.profile strong{font-size:11px}.avatar{width:30px;height:30px}\nmain{padding:27px 20px 32px}h1{font-size:32px}.page-heading{margin-bottom:22px}.page-heading p:last-child{font-size:13px;max-width:290px}\n.course{grid-template-columns:1fr}.course-overview{padding:22px}.course-kicker{margin-bottom:15px}.course h2{font-size:27px}.description{margin-bottom:18px}.next{border-left:0;border-top:1px solid var(--line);padding:21px 22px}.next .eyebrow{margin-bottom:10px}.next h3{font-size:21px}.next p{margin-bottom:9px}.next .lesson-time{margin-bottom:16px}\n.lower{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:26px}.section-heading{margin-bottom:12px}.section-heading h2{font-size:18px}\nth,td{padding:11px 10px}.lesson{gap:8px;min-height:34px}.number{width:23px;height:23px;font-size:10px}tbody th{font-size:11px}td.time{font-size:10px}td.status{font-size:9px}.up-next{padding:3px 5px}.goal{padding:21px}.goal h2{margin-bottom:13px}.goal-top{margin-bottom:10px}.practice-note{max-width:300px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"header-inner\">\n<a class=\"brand\" href=\"#learning\" aria-label=\"Rill learning home\">rill<span>Learning</span></a>\n<nav aria-label=\"Primary\"><a href=\"#learning\" aria-current=\"page\">Your learning</a></nav>\n<div class=\"profile\"><span class=\"avatar\" aria-hidden=\"true\">SP</span><div><strong>Samira Patel</strong><small>Rill · Architecture practice</small></div></div>\n</div>\n</header>\n<main id=\"learning\">\n<div class=\"page-heading\">\n<p class=\"eyebrow\">A little learning, built into your day</p>\n<h1>Your learning</h1>\n<p>Welcome back, Samira. Pick up where you left off.</p>\n</div>\n\n<section class=\"course\" aria-labelledby=\"course-title\">\n<div class=\"course-overview\">\n<div class=\"course-kicker\">\n<div class=\"course-icon\" aria-hidden=\"true\">\n<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"><path d=\"M4 26V4h22v22H4ZM4 12h13V4M17 12v14M17 19h9M9 12v14\"/><path d=\"M2 26h26M4 2v26\" opacity=\".35\"/></svg>\n</div>\n<div><p class=\"eyebrow\">Digital design essentials</p><span class=\"meta\">6 lessons · 60 minutes</span></div>\n</div>\n<h2 id=\"course-title\">Interface foundations</h2>\n<p class=\"description\">Bring the clarity of a well-resolved drawing to client portals, project dashboards and everyday digital tools.</p>\n<label class=\"progress-heading\" for=\"course-progress\"><span>Course progress</span><strong>30%</strong></label>\n<progress id=\"course-progress\" value=\"30\" max=\"100\">30%</progress>\n<div class=\"progress-footer\"><span>2 of 6 lessons completed</span><span class=\"state\">In progress</span></div>\n</div>\n<div class=\"next\">\n<p class=\"eyebrow\">Up next · Lesson 03</p>\n<h3>Hierarchy &amp; emphasis</h3>\n<p>Use scale and spacing to help clients and project teams find the information that matters first.</p>\n<span class=\"lesson-time\">12 min · Includes a practical exercise</span>\n<button class=\"continue\" type=\"button\">Continue learning <span aria-hidden=\"true\">→</span></button>\n</div>\n</section>\n\n<div class=\"lower\">\n<section aria-labelledby=\"outline-title\">\n<div class=\"section-heading\"><h2 id=\"outline-title\">Course outline</h2><span>2 completed · 4 remaining</span></div>\n<div class=\"table-wrap\">\n<table>\n<thead><tr><th scope=\"col\">Lesson</th><th scope=\"col\">Time</th><th scope=\"col\">Status</th></tr></thead>\n<tbody>\n<tr><th scope=\"row\"><div class=\"lesson\"><span class=\"number\">01</span><span>Reading an interface</span></div></th><td class=\"time\">8 min</td><td class=\"status completed\"><b aria-hidden=\"true\">✓</b> Completed</td></tr>\n<tr><th scope=\"row\"><div class=\"lesson\"><span class=\"number\">02</span><span>Structure &amp; alignment</span></div></th><td class=\"time\">10 min</td><td class=\"status completed\"><b aria-hidden=\"true\">✓</b> Completed</td></tr>\n<tr class=\"upcoming\"><th scope=\"row\"><div class=\"lesson\"><span class=\"number\">03</span><span>Hierarchy &amp; emphasis</span></div></th><td class=\"time\">12 min</td><td class=\"status\"><span class=\"up-next\">Up next</span></td></tr>\n<tr><th scope=\"row\"><div class=\"lesson\"><span class=\"number\">04</span><span>Type that works</span></div></th><td class=\"time\">10 min</td><td class=\"status not-started\">Not started</td></tr>\n<tr><th scope=\"row\"><div class=\"lesson\"><span class=\"number\">05</span><span>Colour &amp; contrast</span></div></th><td class=\"time\">12 min</td><td class=\"status not-started\">Not started</td></tr>\n<tr><th scope=\"row\"><div class=\"lesson\"><span class=\"number\">06</span><span>Designing for everyone</span></div></th><td class=\"time\">8 min</td><td class=\"status not-started\">Not started</td></tr>\n</tbody>\n</table>\n</div>\n</section>\n\n<aside aria-labelledby=\"goal-title\">\n<section class=\"goal\">\n<div class=\"goal-top\"><span>This week</span><span class=\"state\">Within reach</span></div>\n<h2 id=\"goal-title\">Weekly learning goal</h2>\n<label for=\"weekly-progress\"><strong>18 <small>/ 30 min</small></strong><span>60% of your goal</span></label>\n<progress id=\"weekly-progress\" value=\"18\" max=\"30\">18 of 30 minutes</progress>\n<p><strong>Just 12 minutes to go.</strong><br>Your next lesson will take you to your weekly goal.</p>\n</section>\n<p class=\"practice-note\">Small sessions, lasting skills. Make a little room for learning between project milestones.</p>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-12","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Leila Haddad at Alder. Show Interface foundations with 32% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning · Alder</title>\n<style>\n:root{--ink:#23473c;--paper:#f6f5ef;--muted:#63786e;--line:#d4dbd2;--wash:#e9ede4}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton{font:inherit}\n.site-header{border-bottom:1px solid var(--line)}\n.header-inner{max-width:1152px;margin:auto;min-height:80px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:700;letter-spacing:-1px}\n.brand svg{width:25px;height:30px}\n.header-section{margin-right:auto;margin-left:32px;font-size:14px;border-left:1px solid var(--line);padding-left:32px}\n.profile{display:flex;align-items:center;gap:12px;font-size:14px}\n.avatar{width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:650}\nmain{max-width:1152px;margin:auto;padding:40px 32px 36px}\n.page-heading{margin-bottom:32px}\nh1,h2,h3,h4,p{margin:0}\nh1{font-size:40px;line-height:1.15;font-weight:600;letter-spacing:-1.7px;margin-bottom:10px}\n.page-heading p{color:var(--muted)}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\n.course{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:30px 0;display:grid;grid-template-columns:1.45fr 1fr;gap:48px}\n.course h2{font-size:32px;line-height:1.2;letter-spacing:-1px;font-weight:600;margin:10px 0 12px}\n.course-description{max-width:465px;color:var(--muted);font-size:15px}\n.progress-block{max-width:455px;margin-top:25px}\n.progress-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}\n.progress-heading label{font-size:13px}\n.progress-heading strong{font-size:18px;font-weight:650}\nprogress{display:block;width:100%;height:6px;border:0;border-radius:0;background:var(--line);color:var(--ink);appearance:none}\nprogress::-webkit-progress-bar{background:var(--line)}\nprogress::-webkit-progress-value{background:var(--ink)}\nprogress::-moz-progress-bar{background:var(--ink)}\n.progress-note{font-size:12px;color:var(--muted);margin-top:8px}\n.next{border-left:1px solid var(--line);padding-left:36px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}\n.next h3{font-size:21px;font-weight:600;letter-spacing:-.4px;margin:9px 0}\n.next p{font-size:14px;color:var(--muted);max-width:335px}\n.lesson-meta{display:flex;gap:8px;align-items:center;font-size:12px;margin-top:13px}\n.lesson-meta span+span:before{content:\"·\";margin-right:8px}\nbutton{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:12px 17px;min-height:46px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:21px}\nbutton:hover{background:var(--paper);color:var(--ink)}\nbutton:focus-visible{outline:2px solid var(--ink);outline-offset:4px}\nbutton span{font-size:19px;line-height:1;font-weight:400}\n.lower{display:grid;grid-template-columns:1.8fr 1fr;gap:64px;margin-top:32px}\n.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:16px}\n.section-heading h3,.weekly h3{font-size:18px;font-weight:600;letter-spacing:-.3px}\n.section-heading span{font-size:12px;color:var(--muted);white-space:nowrap}\n.lessons{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}\n.lesson{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);align-items:start}\n.number{font-size:12px;padding-top:3px;color:var(--muted);font-variant-numeric:tabular-nums}\n.lesson h4{font-size:14px;font-weight:600;line-height:1.4}\n.secondary{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5;overflow-wrap:anywhere}\n.completed{color:var(--ink)}\n.check{margin-right:5px}\n.duration{font-size:12px;white-space:nowrap;padding-top:2px;color:var(--muted);font-variant-numeric:tabular-nums}\n.lesson.current{background:var(--wash);margin:0 -12px;padding:15px 12px;border-bottom-color:var(--line)}\n.current .number,.current .secondary,.current .duration{color:var(--ink)}\n.current .secondary{font-weight:600}\n.weekly{padding-left:28px;border-left:1px solid var(--line);align-self:start}\n.week-date{font-size:12px;color:var(--muted);margin:4px 0 20px}\n.goal-total{font-size:34px;line-height:1.1;letter-spacing:-1px;font-weight:600;margin-bottom:11px}\n.goal-total span{font-size:15px;color:var(--muted);font-weight:400;letter-spacing:0}\n.weekly label{display:block;font-size:12px;margin-bottom:8px}\n.weekly .remaining{font-size:13px;font-weight:600;margin-top:12px}\n.goal-note{font-size:13px;color:var(--muted);margin-top:7px;max-width:260px}\n.week-summary{border-top:1px solid var(--line);margin-top:23px;padding-top:14px;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}\n.week-summary strong{font-weight:600;color:var(--ink)}\nfooter{max-width:1088px;margin:0 auto;padding:20px 0 26px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}\n@media(max-width:700px){\n.header-inner{min-height:64px;padding:0 20px;gap:12px}\n.brand{font-size:23px}\n.header-section{display:none}\n.profile{gap:8px;font-size:12px}\n.avatar{width:29px;height:29px;font-size:10px}\nmain{padding:28px 20px}\nh1{font-size:32px;letter-spacing:-1.2px}\n.page-heading{margin-bottom:25px}\n.page-heading p{font-size:13px;max-width:280px}\n.course{grid-template-columns:1fr;gap:22px;padding:23px 0}\n.course h2{font-size:27px;margin:8px 0 10px}\n.course-description{font-size:14px}\n.progress-block{margin-top:18px}\n.next{padding:19px 0 0;border-left:0;border-top:1px solid var(--line)}\n.next h3{font-size:19px;margin:7px 0}\n.next p{font-size:13px;max-width:none}\n.lesson-meta{margin-top:10px}\nbutton{width:100%;margin-top:16px}\n.lower{grid-template-columns:1fr;gap:28px;margin-top:26px}\n.section-heading{padding-bottom:12px}\n.lesson{gap:10px;grid-template-columns:23px minmax(0,1fr) auto;padding:13px 0}\n.lesson.current{margin:0 -9px;padding:13px 9px}\n.weekly{padding:22px 0 0;border-left:0;border-top:1px solid var(--line)}\n.week-date{margin-bottom:15px}\n.goal-total{font-size:30px}\n.goal-note{max-width:none}\n.week-summary{margin-top:17px}\nfooter{margin:0 20px;padding:18px 0 24px;flex-wrap:wrap}\n}\n</style>\n</head>\n<body>\n<header class=\"site-header\">\n<div class=\"header-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 25 30\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12.5 2 2 22h21L12.5 2Z\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M12.5 12v17M7 19l5.5 4 5.5-4\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\nAlder\n</div>\n<div class=\"header-section\">Team learning</div>\n<div class=\"profile\"><span>Leila Haddad</span><span class=\"avatar\" aria-hidden=\"true\">LH</span></div>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<h1>Your learning</h1>\n<p>Practical skills for better field research.</p>\n</div>\n\n<section class=\"course\" aria-labelledby=\"course-title\">\n<div>\n<div class=\"eyebrow\">In progress · 6 lessons</div>\n<h2 id=\"course-title\">Interface foundations</h2>\n<p class=\"course-description\">Build clear, reliable tools for collecting and reviewing observations in the field.</p>\n<div class=\"progress-block\">\n<div class=\"progress-heading\"><label for=\"course-progress\">Course progress</label><strong>32%</strong></div>\n<progress id=\"course-progress\" value=\"32\" max=\"100\">32%</progress>\n<p class=\"progress-note\">2 of 6 lessons completed</p>\n</div>\n</div>\n<div class=\"next\">\n<div class=\"eyebrow\">Up next · Lesson 03</div>\n<h3>Hierarchy in the field</h3>\n<p>Help researchers find the right action at a glance, even on a small screen in bright daylight.</p>\n<div class=\"lesson-meta\"><span>14 min</span><span>Includes a field-form exercise</span></div>\n<button type=\"button\">Continue learning <span aria-hidden=\"true\">→</span></button>\n</div>\n</section>\n\n<div class=\"lower\">\n<section aria-labelledby=\"outline-title\">\n<div class=\"section-heading\"><h3 id=\"outline-title\">Course outline</h3><span>64 min total</span></div>\n<ol class=\"lessons\">\n<li class=\"lesson\">\n<span class=\"number\">01</span>\n<div><h4>Start with the observer</h4><p class=\"secondary completed\"><span class=\"check\" aria-hidden=\"true\">✓</span>Completed</p></div>\n<span class=\"duration\">8 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\">02</span>\n<div><h4>Structure &amp; navigation</h4><p class=\"secondary completed\"><span class=\"check\" aria-hidden=\"true\">✓</span>Completed</p></div>\n<span class=\"duration\">12 min</span>\n</li>\n<li class=\"lesson current\" aria-current=\"step\">\n<span class=\"number\">03</span>\n<div><h4>Hierarchy in the field</h4><p class=\"secondary\">Next lesson</p></div>\n<span class=\"duration\">14 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\">04</span>\n<div><h4>Labels that travel</h4><p class=\"secondary\">Making observation forms understandable across multilingual teams, offline handovers, and rapidly changing field conditions</p></div>\n<span class=\"duration\">10 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\">05</span>\n<div><h4>Feedback &amp; recovery</h4><p class=\"secondary\">Not started</p></div>\n<span class=\"duration\">12 min</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\">06</span>\n<div><h4>Review your field kit</h4><p class=\"secondary\">Not started</p></div>\n<span class=\"duration\">8 min</span>\n</li>\n</ol>\n</section>\n\n<aside class=\"weekly\" aria-labelledby=\"weekly-title\">\n<h3 id=\"weekly-title\">This week’s goal</h3>\n<p class=\"week-date\">14–20 April</p>\n<p class=\"goal-total\">20 <span>/ 45 min</span></p>\n<label for=\"weekly-progress\">Learning time this week</label>\n<progress id=\"weekly-progress\" value=\"20\" max=\"45\">20 of 45 minutes</progress>\n<p class=\"remaining\">25 minutes to go</p>\n<p class=\"goal-note\">Make room for two short sessions between site visits. A little practice goes a long way.</p>\n<div class=\"week-summary\"><span>Lessons completed this week</span><strong>2</strong></div>\n</aside>\n</div>\n</main>\n<footer><span>Alder · Field team development</span><span>Small lessons. Better field tools.</span></footer>\n</body>\n</html>"}]}
{"id":"sft-course-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Jules Martin at Morrow. Show Interface foundations with 33% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning — Morrow</title>\n<style>\n:root{--ink:#252e29;--muted:#6b7169;--line:#dddfd5;--paper:#f5f5ef;--green:#385c47;--soft:#eaf0e7;--accent:#a35032}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,a{-webkit-tap-highlight-color:transparent}\na{color:inherit;text-decoration:none}\na:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}\n.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:52px;padding:0 5%}\n.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:650;letter-spacing:-1px}\n.brand svg{width:27px;height:27px;color:var(--green)}\nnav{height:100%;display:flex;align-items:stretch;gap:28px}\nnav a{display:flex;align-items:center;color:var(--muted);font-size:13px}\nnav a[aria-current]{border-bottom:2px solid var(--green);color:var(--ink);font-weight:600}\n.profile{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px}\n.avatar{width:32px;height:32px;border-radius:50%;background:#e4e6dc;display:grid;place-items:center;font-size:11px;font-weight:650}\nmain{max-width:1160px;margin:auto;padding:30px 28px 40px}\n.page-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:25px}\nh1,h2,h3,p{margin:0}\nh1{font:36px/1.2 Georgia,serif;letter-spacing:-1px}\n.page-heading p{color:var(--muted);font-size:13px}\n.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}\n.course{background:#fff;border:1px solid var(--line)}\n.course-intro{padding:26px 28px 24px}\n.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}\n.course-title{font:34px/1.15 Georgia,serif;letter-spacing:-.8px;margin:9px 0}\n.description{color:var(--muted);font-size:13px}\n.progress-label{display:flex;justify-content:space-between;align-items:baseline;margin:21px 0 7px;font-size:12px;color:var(--muted)}\n.progress-label strong{color:var(--green);font-size:15px;font-weight:650}\n.track{height:5px;background:#e9ece5;overflow:hidden;border-radius:2px}\n.fill{height:100%;width:33.333%;background:var(--green)}\n.next{margin-top:23px}\n.next .eyebrow{color:var(--accent)}\n.next h3{font-size:17px;font-weight:600;margin:5px 0}\n.next p{font-size:13px;line-height:1.6;color:var(--muted);max-width:500px}\n.action{display:flex;align-items:center;gap:16px;margin-top:18px}\nbutton{border:1px solid var(--green);border-radius:3px;background:var(--green);color:white;font:600 13px/1.3 system-ui,sans-serif;padding:13px 17px;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#294a37}\nbutton span{margin-left:13px}\n.hint{font-size:11px;color:var(--muted);line-height:1.55}\n.outline{border-top:1px solid var(--line)}\n.outline-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 28px 12px}\n.outline-heading h2{font-size:15px;font-weight:650}\n.outline-heading span{font-size:11px;color:var(--muted)}\nol{list-style:none;margin:0;padding:0 12px 12px;counter-reset:lesson}\n.lesson{display:grid;grid-template-columns:28px minmax(0,1fr) 86px;align-items:center;gap:12px;min-height:58px;padding:10px 16px;border-top:1px solid #eceee7;counter-increment:lesson}\n.lesson::before{content:counter(lesson,decimal-leading-zero);font-size:12px;font-variant-numeric:tabular-nums;color:#858a81}\n.lesson-body{display:flex;justify-content:space-between;align-items:baseline;gap:12px}\n.lesson h3{font-size:13px;line-height:1.4;font-weight:500}\n.duration{font-size:11px;white-space:nowrap;color:var(--muted)}\n.status{font-size:10px;justify-self:end;color:var(--muted);white-space:nowrap}\n.done{color:var(--green)}\n.done b{font-size:12px;margin-right:4px;font-weight:500}\n.current{background:#f1f4ec;border-radius:3px;border-color:transparent}\n.current::before{color:var(--green);font-weight:700}\n.current h3{font-weight:650}\n.current .status{border:1px solid #cbd6c6;padding:2px 7px;border-radius:3px;color:var(--green);font-weight:600}\naside{display:grid;gap:24px}\n.goal{background:#e9ede3;border:1px solid #dde3d5;padding:21px}\n.goal-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.goal h2{font-size:14px;font-weight:650}\n.week{font-size:10px;color:var(--muted)}\n.goal-number{margin:17px 0 10px;font-size:13px;color:var(--muted)}\n.goal-number strong{font:32px/1 Georgia,serif;color:var(--ink);margin-right:4px}\n.goal .track{background:#d5ddce;height:4px}\n.goal .fill{width:60%}\n.goal p{margin-top:12px;font-size:12px;color:#5e685a}\n.brief{padding:0 5px}\n.brief h2{font:23px/1.2 Georgia,serif;margin:9px 0 13px}\n.brief>p{font-size:12px;line-height:1.75;color:var(--muted)}\ndl{margin:21px 0;display:grid;grid-template-columns:70px 1fr;gap:9px;font-size:11px}\ndt{color:var(--muted)}\ndd{margin:0;text-align:right}\n.practice{border-top:1px solid var(--line);padding-top:17px}\n.practice h3{font-size:12px;font-weight:650;margin-bottom:6px}\n.practice p{font-size:12px;line-height:1.75;color:var(--muted)}\n.update{margin-top:24px;border-top:1px solid var(--line);padding-top:15px;font-size:11px;color:var(--muted);line-height:1.7}\n.update strong{display:block;font-size:10px;font-weight:600;color:var(--accent);margin-bottom:4px}\nfooter{margin-top:22px;font-size:10px;color:#7d8379}\n@media(min-width:1400px){.topbar{padding-left:calc((100% - 1104px)/2);padding-right:calc((100% - 1104px)/2)}}\n@media(max-width:760px){\n.topbar{height:64px;padding:0 20px;gap:25px}\n.brand{font-size:21px;gap:7px}.brand svg{width:23px;height:23px}\nnav{gap:0}nav a{font-size:12px}nav a.secondary{display:none}\n.profile{gap:0}.profile-name{display:none}\nmain{padding:25px 18px 30px}\n.page-heading{display:block;margin-bottom:21px}\nh1{font-size:32px}\n.page-heading p{margin-top:7px;font-size:12px}\n.dashboard{grid-template-columns:minmax(0,1fr);gap:22px}\n.course-intro{padding:23px 20px}\n.course-title{font-size:31px;max-width:290px}\n.description{font-size:12px}\n.action{gap:12px}\nbutton{padding:13px 12px;font-size:12px}\nbutton span{margin-left:8px}\n.hint{font-size:10px}\n.outline-heading{padding:17px 19px 12px}\n.outline-heading h2{font-size:14px}\nol{padding:0 7px 7px}\n.lesson{grid-template-columns:22px minmax(0,1fr) 75px;gap:8px;padding:11px 12px;min-height:66px}\n.lesson-body{display:block}\n.lesson h3{font-size:12px}\n.duration{display:block;margin-top:3px;font-size:10px}\n.status{font-size:9px}\naside{grid-template-columns:minmax(0,1fr);gap:23px}\n.goal{padding:18px 20px}\n.goal-number{margin-top:12px}\n.brief{padding:0 3px}\nfooter{margin-top:25px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<a class=\"brand\" href=\"#main\" aria-label=\"Morrow home\">\n<svg viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 24V5l11 11L25 5v19M3 13l11 11 11-11\" stroke=\"currentColor\" stroke-width=\"2.3\" stroke-linejoin=\"round\"/></svg>\nMorrow\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#main\" aria-current=\"page\">Your learning</a>\n<a class=\"secondary\" href=\"#field-brief\">Field practice</a>\n</nav>\n<div class=\"profile\"><span class=\"profile-name\">Jules Martin</span><span class=\"avatar\" aria-label=\"Jules Martin\">JM</span></div>\n</header>\n<main id=\"main\">\n<div class=\"page-heading\">\n<h1>Your learning</h1>\n<p>A little practice. Better work in the field.</p>\n</div>\n<div class=\"dashboard\">\n<article class=\"course\" aria-labelledby=\"course-title\">\n<div class=\"course-intro\">\n<p class=\"eyebrow\">Core course · 6 lessons</p>\n<h2 class=\"course-title\" id=\"course-title\">Interface foundations</h2>\n<p class=\"description\">Clearer research tools, from data capture to team handoff.</p>\n<div class=\"progress-label\"><span>2 of 6 lessons completed</span><strong>33%</strong></div>\n<div class=\"track\" role=\"progressbar\" aria-label=\"Course progress\" aria-valuenow=\"33\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"fill\"></div></div>\n<section class=\"next\" aria-labelledby=\"next-title\">\n<p class=\"eyebrow\">Up next · Lesson 03</p>\n<h3 id=\"next-title\">Layout for fieldwork</h3>\n<p>Use spacing and grouping to make observation forms easier to scan on the move.</p>\n<div class=\"action\">\n<button type=\"button\">Continue learning <span aria-hidden=\"true\">→</span></button>\n<span class=\"hint\">Your place is saved.<br>About 12 min to finish.</span>\n</div>\n</section>\n</div>\n<section class=\"outline\" aria-labelledby=\"outline-title\">\n<div class=\"outline-heading\"><h2 id=\"outline-title\">Course outline</h2><span>69 min total</span></div>\n<ol>\n<li class=\"lesson\"><div class=\"lesson-body\"><h3>Seeing the interface</h3><span class=\"duration\">8 min</span></div><span class=\"status done\"><b aria-hidden=\"true\">✓</b> Completed</span></li>\n<li class=\"lesson\"><div class=\"lesson-body\"><h3>Structure &amp; hierarchy</h3><span class=\"duration\">10 min</span></div><span class=\"status done\"><b aria-hidden=\"true\">✓</b> Completed</span></li>\n<li class=\"lesson current\"><div class=\"lesson-body\"><h3>Layout for fieldwork</h3><span class=\"duration\">12 min</span></div><span class=\"status\">Up next</span></li>\n<li class=\"lesson\"><div class=\"lesson-body\"><h3>Type that travels</h3><span class=\"duration\">9 min</span></div><span class=\"status\">Not started</span></li>\n<li class=\"lesson\"><div class=\"lesson-body\"><h3>Color &amp; contrast</h3><span class=\"duration\">14 min</span></div><span class=\"status\">Not started</span></li>\n<li class=\"lesson\"><div class=\"lesson-body\"><h3>A field-ready screen</h3><span class=\"duration\">16 min</span></div><span class=\"status\">Not started</span></li>\n</ol>\n</section>\n</article>\n<aside aria-label=\"Learning details\">\n<section class=\"goal\" aria-labelledby=\"goal-title\">\n<div class=\"goal-heading\"><h2 id=\"goal-title\">Weekly learning goal</h2><span class=\"week\">Jun 10–16</span></div>\n<div class=\"goal-number\"><strong>24</strong> / 40 min</div>\n<div class=\"track\" role=\"progressbar\" aria-label=\"Weekly learning minutes\" aria-valuenow=\"24\" aria-valuemin=\"0\" aria-valuemax=\"40\"><div class=\"fill\"></div></div>\n<p>16 minutes to go. A little time between site visits adds up.</p>\n</section>\n<section class=\"brief\" id=\"field-brief\" aria-labelledby=\"brief-title\">\n<span class=\"eyebrow\">Learning brief</span>\n<h2 id=\"brief-title\">Made for the field.</h2>\n<p>Build practical interface skills for the tools your research team uses every day.</p>\n<dl>\n<dt>Level</dt><dd>Foundational</dd>\n<dt>Format</dt><dd>Self-paced</dd>\n<dt>Focus</dt><dd>Mobile data capture</dd>\n</dl>\n<div class=\"practice\">\n<h3>Try it on your next visit</h3>\n<p>Sketch your team's observation form. Can a researcher find the three most-used fields at a glance?</p>\n</div>\n<div class=\"update\"><strong>Updated 2 days ago</strong>Lesson 03 now includes an offline survey example.</div>\n</section>\n</aside>\n</div>\n<footer>Morrow / Learning for research in the real world.</footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-14","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Emilia Santos at Fieldwork. Show Interface foundations with 34% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Include a clearly explained empty secondary section without making the whole screen empty. Include a concise summary count and a meaningful subdued status label. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning · Fieldwork</title>\n<style>\n:root{--ink:#24332d;--muted:#637068;--green:#285a45;--line:#dce2d9;--paper:#fff;--soft:#eef2eb}\n*{box-sizing:border-box}\nbody{margin:0;background:#f5f6f1;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,a,input,select{font:inherit}\na{color:inherit;text-decoration:none}\nbutton,a{ -webkit-tap-highlight-color:transparent}\na:focus-visible,button:focus-visible{outline:3px solid #a67b30;outline-offset:4px}\n.topbar{background:var(--paper);border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1200px;margin:auto;min-height:76px;padding:0 28px;display:flex;align-items:center;gap:48px}\n.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:750;letter-spacing:-.6px;min-height:44px}\n.brand svg{color:var(--green)}\nnav{display:flex;align-self:stretch;gap:28px}\nnav a{display:flex;align-items:center;min-height:44px;color:var(--muted);border-bottom:3px solid transparent;padding-top:3px}\nnav a[aria-current]{color:var(--green);font-weight:650;border-color:var(--green)}\n.profile{margin-left:auto;display:flex;align-items:center;gap:11px}\n.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#e7ece3;color:var(--green);font-weight:650;font-size:12px}\n.profile strong{display:block;font-size:13px;font-weight:650}\n.profile small{display:block;color:var(--muted);font-size:12px}\nmain{max-width:1200px;margin:auto;padding:30px 28px 40px}\n.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}\nh1,h2,h3,p{margin:0}\nh1{font-size:30px;line-height:1.2;letter-spacing:-1px;font-weight:650}\n.page-heading p{margin-top:7px;color:var(--muted)}\n.team-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}\n.dot{width:6px;height:6px;display:inline-block;background:#7a8b78;border-radius:50%}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 284px;grid-template-areas:\"course goal\" \"course notebook\";grid-template-rows:auto 1fr;gap:20px;align-items:start}\n.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.course{grid-area:course}\n.course-intro{padding:24px}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}\n.title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px}\nh2{font-size:25px;font-weight:650;line-height:1.25;letter-spacing:-.6px}\n.badge{font-size:11px;font-weight:600;color:#59665c;background:var(--soft);padding:4px 8px;border-radius:5px;white-space:nowrap}\n.meta{color:var(--muted);font-size:12px;margin-top:6px}\n.progress-label{display:flex;justify-content:space-between;align-items:center;margin:20px 0 7px;font-size:12px}\n.progress-label strong{font-size:13px;color:var(--green)}\nprogress{display:block;width:100%;height:6px;appearance:none;border:0;border-radius:4px;overflow:hidden;background:#e8ece5;color:var(--green)}\nprogress::-webkit-progress-bar{background:#e8ece5}\nprogress::-webkit-progress-value{background:var(--green);border-radius:4px}\nprogress::-moz-progress-bar{background:var(--green);border-radius:4px}\n.next-lesson{margin-top:20px;display:flex;align-items:center;gap:24px}\n.next-copy{flex:1;min-width:0}\n.next-copy h3{font-size:14px;font-weight:650}\n.next-copy p{font-size:12px;color:var(--muted);margin-top:4px;max-width:400px;line-height:1.6}\n.continue{min-height:46px;background:var(--green);border:1px solid var(--green);border-radius:6px;color:white;font-weight:600;padding:11px 16px;white-space:nowrap;cursor:pointer}\n.continue span{margin-left:12px}\n.continue:hover{background:#204c39}\n.outline-heading{border-top:1px solid var(--line);padding:17px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}\n.outline-heading h3{font-size:15px;font-weight:650}\n.outline-heading p{font-size:12px;color:var(--muted)}\n.lessons{list-style:none;margin:0;padding:0 12px 12px}\n.lesson{display:flex;align-items:center;gap:12px;padding:12px;min-height:65px;border-top:1px solid #edf0e9}\n.number{font-variant-numeric:tabular-nums;flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;font-size:12px;color:var(--muted)}\n.lesson-copy{flex:1;min-width:0}\n.lesson-copy h4{font-size:13px;font-weight:550;line-height:1.4;margin:0}\n.duration{display:block;color:var(--muted);font-size:11px;margin-top:3px}\n.state{font-size:11px;color:#748076;white-space:nowrap}\n.done .state{color:var(--green)}\n.done .number{background:var(--soft);border-color:var(--soft);color:var(--green)}\n.current{background:#f0f4ed;border:1px solid #dbe5d5;border-radius:7px}\n.current+.lesson{border-top-color:transparent}\n.current .number{background:var(--green);border-color:var(--green);color:white}\n.current .state{color:var(--green);font-weight:650}\n.current h4{font-weight:650}\n.goal{grid-area:goal;padding:20px}\n.side-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.side-heading h2,.notebook h2{font-size:15px;letter-spacing:0;font-weight:650}\n.quiet-status{color:var(--muted);font-size:11px;display:flex;align-items:center;gap:5px}\n.goal-number{margin:18px 0 9px;font-size:27px;font-weight:650;letter-spacing:-1px;line-height:1.2}\n.goal-number span{font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}\n.goal p{margin-top:12px;font-size:12px;color:var(--muted)}\n.goal p strong{color:var(--ink);font-weight:550}\n.notebook{grid-area:notebook;padding:20px}\n.empty{margin-top:20px;padding:20px 14px;background:#f8f9f5;border:1px dashed #d6ded0;border-radius:7px;text-align:center}\n.empty svg{color:#7d8c7b;margin-bottom:10px}\n.empty h3{font-size:13px;font-weight:600}\n.empty p{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.65}\n.unlock{font-size:11px;color:var(--muted);margin-top:14px}\n@media(max-width:760px){\n.topbar-inner{padding:0 18px;min-height:64px;gap:26px}\n.brand{font-size:18px;gap:8px}\n.brand svg{width:25px}\nnav{gap:0;font-size:13px}\n.optional,.profile-text{display:none}\n.profile{margin-left:auto}\nmain{padding:24px 16px 28px}\n.page-heading{margin-bottom:18px;display:block}\nh1{font-size:28px}\n.page-heading p{font-size:12px;margin-top:6px}\n.team-label{display:none}\n.layout{grid-template-columns:minmax(0,1fr);grid-template-areas:\"goal\" \"course\" \"notebook\";gap:16px;grid-template-rows:auto}\n.goal{padding:14px 16px;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}\n.side-heading{display:block}\n.side-heading h2{font-size:13px}\n.quiet-status{margin-top:3px;font-size:10px}\n.goal-number{margin:0;font-size:24px}\n.goal-number span{font-size:12px}\n.goal progress{grid-column:1/-1;margin-top:10px;height:5px}\n.goal p{grid-column:1/-1;margin-top:7px;font-size:11px}\n.course-intro{padding:18px}\nh2{font-size:23px}\n.title-row{flex-wrap:wrap;gap:8px}\n.badge{font-size:10px;padding:3px 7px}\n.progress-label{margin-top:16px}\n.next-lesson{display:block;margin-top:17px}\n.next-copy p{font-size:12px}\n.continue{width:100%;margin-top:15px}\n.outline-heading{padding:16px}\n.outline-heading h3{font-size:14px}\n.outline-heading p{font-size:11px}\n.lessons{padding:0 8px 8px}\n.lesson{padding:11px 8px;gap:9px;min-height:68px}\n.lesson-copy h4{font-size:12px}\n.state{font-size:10px}\n.number{flex-basis:25px;width:25px;height:27px;font-size:11px}\n.notebook{padding:18px}\n.empty{margin-top:14px;padding:18px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<a class=\"brand\" href=\"#learning\" aria-label=\"Fieldwork home\">\n<svg width=\"29\" height=\"30\" viewBox=\"0 0 29 30\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 26V5h21M4 15h16M12 26V5\" stroke=\"currentColor\" stroke-width=\"3.5\"/></svg>\nFieldwork\n</a>\n<nav aria-label=\"Main navigation\">\n<a href=\"#learning\" aria-current=\"page\">Learning</a>\n<a class=\"optional\" href=\"#practice\">Practice notebook</a>\n</nav>\n<div class=\"profile\">\n<span class=\"avatar\" aria-hidden=\"true\">ES</span>\n<div class=\"profile-text\"><strong>Emilia Santos</strong><small>Field research team</small></div>\n</div>\n</div>\n</header>\n<main id=\"learning\">\n<header class=\"page-heading\">\n<div><h1>Your learning</h1><p>Emilia Santos · 1 active course · 2 lessons completed</p></div>\n<span class=\"team-label\"><span class=\"dot\"></span>Field research team</span>\n</header>\n<div class=\"layout\">\n<article class=\"card course\" aria-labelledby=\"course-title\">\n<div class=\"course-intro\">\n<p class=\"eyebrow\">Research essentials</p>\n<div class=\"title-row\"><h2 id=\"course-title\">Interface foundations</h2><span class=\"badge\">In progress</span></div>\n<p class=\"meta\">6 lessons · 1 hr 28 min · Self-paced</p>\n<div class=\"progress-label\"><label for=\"course-progress\">Course progress</label><strong>34%</strong></div>\n<progress id=\"course-progress\" value=\"34\" max=\"100\">34%</progress>\n<div class=\"next-lesson\">\n<div class=\"next-copy\">\n<h3>Next: Forms for fieldwork</h3>\n<p>Reduce data-entry errors with clear labels and sensible defaults, even during a busy field session.</p>\n</div>\n<button class=\"continue\" type=\"button\">Continue learning <span aria-hidden=\"true\">→</span></button>\n</div>\n</div>\n<section aria-labelledby=\"outline-title\">\n<div class=\"outline-heading\"><h3 id=\"outline-title\">Course outline</h3><p>2 of 6 completed</p></div>\n<ol class=\"lessons\">\n<li class=\"lesson done\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div class=\"lesson-copy\"><h4>Interface essentials</h4><span class=\"duration\">12 min</span></div>\n<span class=\"state\"><span aria-hidden=\"true\">✓ </span>Completed</span>\n</li>\n<li class=\"lesson done\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div class=\"lesson-copy\"><h4>Hierarchy &amp; clear labels</h4><span class=\"duration\">18 min</span></div>\n<span class=\"state\"><span aria-hidden=\"true\">✓ </span>Completed</span>\n</li>\n<li class=\"lesson current\" aria-current=\"step\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div class=\"lesson-copy\"><h4>Forms for fieldwork</h4><span class=\"duration\">16 min</span></div>\n<span class=\"state\">Up next</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">04</span>\n<div class=\"lesson-copy\"><h4>Feedback &amp; error recovery</h4><span class=\"duration\">14 min</span></div>\n<span class=\"state\">Not started</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">05</span>\n<div class=\"lesson-copy\"><h4>Accessible in the field</h4><span class=\"duration\">18 min</span></div>\n<span class=\"state\">Not started</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">06</span>\n<div class=\"lesson-copy\"><h4>Review a research workflow</h4><span class=\"duration\">10 min</span></div>\n<span class=\"state\">Not started</span>\n</li>\n</ol>\n</section>\n</article>\n<aside class=\"card goal\" aria-labelledby=\"goal-title\">\n<div class=\"side-heading\"><h2 id=\"goal-title\">Weekly learning goal</h2><span class=\"quiet-status\"><span class=\"dot\"></span>On track</span></div>\n<div class=\"goal-number\">30 <span>/ 45 min</span></div>\n<progress value=\"30\" max=\"45\" aria-labelledby=\"goal-title\">30 of 45 minutes</progress>\n<p><strong>15 minutes to go.</strong> One short lesson fits between field sessions.</p>\n</aside>\n<aside class=\"card notebook\" id=\"practice\" aria-labelledby=\"notebook-title\">\n<h2 id=\"notebook-title\">Practice notebook</h2>\n<div class=\"empty\">\n<svg width=\"29\" height=\"30\" viewBox=\"0 0 29 30\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><rect x=\"6\" y=\"3\" width=\"19\" height=\"24\" rx=\"2\"/><path d=\"M3 8h6M3 15h6M3 22h6M13 10h7M13 15h7M13 20h4\"/></svg>\n<h3>No reflections yet</h3>\n<p>Your first reflection comes with lesson 3. Use it to review a field form and note one improvement for your research team.</p>\n</div>\n<p class=\"unlock\">Available after lesson 3</p>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-course-15","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a learning dashboard for Kai Nguyen at Common. Show Interface foundations with 35% progress, Continue learning button, Course outline with six numbered lessons, Completed states, durations and the next lesson summary. Include a compact weekly learning goal. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Your learning\", \"Interface foundations\", \"Continue learning\", \"Course outline\", \"Completed\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Your learning · Common</title>\n<style>\n:root{--bg:#f4f2eb;--paper:#fffef9;--ink:#263b32;--muted:#687067;--line:#dedfd4;--soft:#e9eee5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:15px;line-height:1.5}\nbutton{font:inherit}\nheader{border-bottom:1px solid var(--line)}\n.topbar{max-width:1160px;margin:auto;padding:21px 28px;display:flex;align-items:center;gap:25px}\n.brand{font-size:28px;font-weight:750;letter-spacing:-1.5px;line-height:1}\n.workspace{padding-left:25px;border-left:1px solid var(--line);color:var(--muted);font-size:13px}\n.profile{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}\n.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e2e5d8;font-size:11px;letter-spacing:.04em}\nmain{max-width:1160px;margin:auto;padding:35px 28px 50px}\n.page-heading{margin-bottom:27px}\nh1,h2,h3,p{margin:0}\nh1{font-size:34px;line-height:1.2;letter-spacing:-1.1px;font-weight:650}\n.page-heading p{margin-top:8px;color:var(--muted)}\n.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:\"course goal\" \"outline next\";gap:28px}\n.card{background:var(--paper);border:1px solid var(--line);border-radius:12px}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}\n.course{grid-area:course;padding:27px 30px}\n.course .eyebrow{color:var(--muted)}\n.course h2{font-size:30px;line-height:1.2;letter-spacing:-.8px;margin:10px 0}\n.course-description{max-width:520px;color:var(--muted);font-size:14px}\n.progress-label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:12px;margin-top:23px;margin-bottom:7px}\n.progress-label strong{font-size:15px}\nprogress{display:block;appearance:none;width:100%;height:6px;border:0;border-radius:10px;overflow:hidden;background:var(--line);color:var(--ink)}\nprogress::-webkit-progress-bar{background:var(--line);border-radius:10px}\nprogress::-webkit-progress-value{background:var(--ink);border-radius:10px}\nprogress::-moz-progress-bar{background:var(--ink);border-radius:10px}\n.course-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}\n.course-bottom span{font-size:12px;color:var(--muted)}\n.primary{border:1px solid var(--ink);border-radius:6px;background:var(--ink);color:#fffef9;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:22px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}\n.primary:hover{background:#354f42}\n.primary:focus-visible{outline:3px solid #9eac81;outline-offset:3px}\n.goal{grid-area:goal;padding:25px;background:#e9ecdf;display:flex;flex-direction:column;align-items:flex-start}\n.goal h2{font-size:16px;font-weight:650}\n.goal .period{font-size:12px;color:var(--muted);margin-top:3px}\n.goal-total{margin:19px 0 10px;font-size:31px;line-height:1.1;letter-spacing:-1px;font-weight:650}\n.goal-total span{font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted)}\n.goal progress{background:#d1d7c7;height:5px}\n.goal progress::-webkit-progress-bar{background:#d1d7c7}\n.goal p{font-size:13px;margin-top:15px}\n.goal .note{font-size:12px;color:var(--muted);margin-top:7px}\n.outline{grid-area:outline;min-width:0}\n.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 13px}\n.section-heading h2{font-size:19px;font-weight:650;letter-spacing:-.3px}\n.section-heading p{font-size:12px;color:var(--muted);white-space:nowrap}\n.lessons{margin:0;padding:0;list-style:none;overflow:hidden}\n.lesson{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:13px;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line)}\n.lesson:last-child{border-bottom:0}\n.number{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}\n.lesson h3{font-size:14px;font-weight:550;line-height:1.4}\n.duration{font-size:12px;color:var(--muted);display:block;margin-top:4px}\n.status{font-size:11px;white-space:nowrap;color:var(--muted)}\n.status.done{color:#3c5d40}\n.status.done b{font-weight:500}\n.lesson.current{background:#eef0e6;box-shadow:inset 3px 0 var(--ink)}\n.current .number,.current h3{color:var(--ink);font-weight:650}\n.current .status{font-weight:650;color:var(--ink);background:#dde3d2;padding:4px 8px;border-radius:4px}\n.next{grid-area:next;align-self:start;padding:24px}\n.next .eyebrow{color:var(--muted)}\n.next h2{font-size:23px;line-height:1.25;letter-spacing:-.5px;margin-top:11px}\n.next .summary{font-size:13px;color:var(--muted);margin-top:12px}\nfigure{margin:20px 0 0;padding:12px 8px;background:#f2f2e9;border-radius:7px}\nfigure svg{display:block;width:100%;height:auto}\nfigcaption{font-size:11px;color:var(--muted);text-align:center;margin:1px 5px 4px;line-height:1.5}\n.next-footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;display:flex;gap:8px;align-items:center;color:var(--muted)}\n.practice{width:6px;height:6px;border-radius:50%;background:#718265;flex:none}\n@media(min-width:1000px){.lesson{min-height:79px}}\n@media(max-width:760px){\n.topbar{padding:19px 20px;gap:14px}.workspace{display:none}.brand{font-size:26px}\nmain{padding:26px 20px 35px}.page-heading{margin-bottom:22px}\nh1{font-size:30px}.page-heading p{font-size:14px;max-width:290px}\n.dashboard{grid-template-columns:minmax(0,1fr);grid-template-areas:\"course\" \"next\" \"outline\" \"goal\";gap:22px}\n.course{padding:23px 22px}.course h2{font-size:28px;max-width:260px}.course-description{font-size:13px}\n.course-bottom{flex-direction:column-reverse;align-items:stretch;gap:12px}.primary{width:100%;padding:12px 15px}.course-bottom>span{text-align:center}\n.next{padding:21px 22px}.next h2{font-size:22px}.next .summary{margin-top:9px}\nfigure{margin-top:15px;padding:6px 10px;display:flex;align-items:center;gap:8px}\nfigure svg{width:57%;flex:none}figcaption{text-align:left;margin:0;font-size:10px}\n.next-footer{margin-top:15px;padding-top:12px}\n.section-heading{align-items:center}.section-heading h2{font-size:19px}.section-heading p{font-size:11px}\n.lesson{grid-template-columns:22px minmax(0,1fr);gap:9px 10px;padding:15px 16px;align-items:start}\n.number{padding-top:2px}.lesson .status{grid-column:2;justify-self:start}\n.lesson h3{font-size:14px}.status{font-size:10px}.current .status{padding:2px 7px}\n.goal{padding:22px}.goal-total{margin-top:15px}\n}\n@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}\n</style>\n</head>\n<body>\n<header>\n<div class=\"topbar\">\n<div class=\"brand\" aria-label=\"Common\">common.</div>\n<div class=\"workspace\">Field team workspace</div>\n<div class=\"profile\"><span class=\"avatar\" aria-hidden=\"true\">KN</span><span>Kai Nguyen</span></div>\n</div>\n</header>\n<main>\n<div class=\"page-heading\">\n<h1>Your learning</h1>\n<p>Kai, build the skills behind better field tools.</p>\n</div>\n<div class=\"dashboard\">\n<section class=\"course card\" aria-labelledby=\"course-title\">\n<p class=\"eyebrow\">Design essentials · Course 01</p>\n<h2 id=\"course-title\">Interface foundations</h2>\n<p class=\"course-description\">Build clear, dependable interfaces for collecting observations, interviewing participants and working beyond the office.</p>\n<div class=\"progress-label\"><label for=\"course-progress\">Course progress</label><strong>35%</strong></div>\n<progress id=\"course-progress\" value=\"35\" max=\"100\">35%</progress>\n<div class=\"course-bottom\">\n<span>2 of 6 lessons completed</span>\n<button class=\"primary\" type=\"button\">Continue learning <span aria-hidden=\"true\" style=\"color:inherit;font-size:18px\">→</span></button>\n</div>\n</section>\n\n<section class=\"goal card\" aria-labelledby=\"goal-title\">\n<h2 id=\"goal-title\">Weekly learning goal</h2>\n<span class=\"period\">This week · 40-minute target</span>\n<div class=\"goal-total\">24 <span>/ 40 min</span></div>\n<progress aria-labelledby=\"goal-title\" value=\"24\" max=\"40\">24 of 40 minutes</progress>\n<p><strong>16 minutes to go.</strong></p>\n<p class=\"note\">Your next lesson fits neatly between field visits.</p>\n</section>\n\n<section class=\"next card\" aria-labelledby=\"next-title\">\n<p class=\"eyebrow\">Next lesson · 03</p>\n<h2 id=\"next-title\">Touch targets in the field</h2>\n<p class=\"summary\">Make controls easier to use with gloves, in bright light or with one hand on a clipboard.</p>\n<figure>\n<svg viewBox=\"0 0 300 88\" role=\"img\" aria-labelledby=\"target-title target-description\">\n<title id=\"target-title\">A generous touch target</title>\n<desc id=\"target-description\">An Add note control has a 44-pixel-high touch area around its plus icon.</desc>\n<rect x=\"10\" y=\"12\" width=\"211\" height=\"62\" rx=\"8\" fill=\"#fffef9\" stroke=\"#d7dccf\"/>\n<rect x=\"19\" y=\"21\" width=\"44\" height=\"44\" rx=\"5\" fill=\"#e4eadb\" stroke=\"#657a5c\" stroke-dasharray=\"3 3\"/>\n<path d=\"M33 43h16m-8-8v16\" fill=\"none\" stroke=\"#263b32\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n<text x=\"78\" y=\"48\" fill=\"#263b32\" font-size=\"14\" font-family=\"system-ui,sans-serif\">Add note</text>\n<path d=\"M237 21v44m-4-44h8m-8 44h8\" stroke=\"#687067\" fill=\"none\"/>\n<text x=\"247\" y=\"47\" fill=\"#687067\" font-size=\"11\" font-family=\"system-ui,sans-serif\">44 px</text>\n</svg>\n<figcaption>A small icon can still have a generous touch area.</figcaption>\n</figure>\n<div class=\"next-footer\"><span>16 min</span><span aria-hidden=\"true\">·</span><span class=\"practice\" aria-hidden=\"true\"></span><span>Includes a field-tool exercise</span></div>\n</section>\n\n<section class=\"outline\" aria-labelledby=\"outline-title\">\n<div class=\"section-heading\">\n<h2 id=\"outline-title\">Course outline</h2>\n<p>6 lessons · 79 min</p>\n</div>\n<ol class=\"lessons card\" role=\"list\">\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">01</span>\n<div><h3>Mapping the interface</h3><span class=\"duration\">8 min</span></div>\n<span class=\"status done\"><span aria-hidden=\"true\">✓ &nbsp;</span><b>Completed</b></span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">02</span>\n<div><h3>Visual hierarchy for busy environments</h3><span class=\"duration\">12 min</span></div>\n<span class=\"status done\"><span aria-hidden=\"true\">✓ &nbsp;</span><b>Completed</b></span>\n</li>\n<li class=\"lesson current\" aria-current=\"step\">\n<span class=\"number\" aria-hidden=\"true\">03</span>\n<div><h3>Touch targets in the field</h3><span class=\"duration\">16 min</span></div>\n<span class=\"status\">Up next</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">04</span>\n<div><h3>Forms that respect the interview</h3><span class=\"duration\">14 min</span></div>\n<span class=\"status\">Not started</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">05</span>\n<div><h3>Feedback when the connection drops</h3><span class=\"duration\">11 min</span></div>\n<span class=\"status\">Not started</span>\n</li>\n<li class=\"lesson\">\n<span class=\"number\" aria-hidden=\"true\">06</span>\n<div><h3>From field notes to a usable prototype</h3><span class=\"duration\">18 min</span></div>\n<span class=\"status\">Not started</span>\n</li>\n</ol>\n</section>\n</div>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-0","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for Alder. Include Search people, department select with Design and Engineering, six people including Maya Chen, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory · Alder</title>\n<style>\n:root{color-scheme:light;--bg:#f3f0e9;--surface:#fffdf8;--ink:#24372e;--muted:#6b7068;--line:#dedfd5;--green:#36704c}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select{border-radius:7px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a9b99c;outline-offset:3px}\n.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1080px)/2))}\n.brand{display:flex;align-items:center;gap:10px}\n.brand svg{width:31px;height:31px}\n.wordmark{font-size:27px;font-weight:750;letter-spacing:-1.2px}\n.shop-label{border-left:1px solid #c9cdc1;padding-left:18px;margin-left:10px;color:var(--muted);font-size:13px}\n.account{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}\n.account .avatar{width:32px;height:32px;font-size:11px;background:#dedfce}\nmain{max-width:1080px;margin:32px auto 28px}\n.page-heading{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center}\n.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 6px;color:var(--muted)}\nh1{font-size:32px;line-height:1.15;letter-spacing:-1px;margin:0;font-weight:650}\n.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 18px;color:#fffdf8;background:var(--ink);border:1px solid var(--ink);font-weight:600}\n.primary:hover{background:#354c3d}\n.primary svg{width:17px;height:17px}\n.intro{margin:11px 0 0;color:var(--muted)}\n.summary{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:12px;margin:16px 0 24px}\n.summary span+span{border-left:1px solid #c9cdc1;padding-left:16px}\n.summary strong{color:var(--ink);font-weight:650}\n.directory{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.filters{display:flex;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);align-items:end}\n.field{display:flex;flex-direction:column;gap:7px}\n.search-field{flex:1;max-width:440px}\nlabel{font-size:12px;font-weight:650}\n.search-wrap{position:relative}\n.search-wrap svg{width:18px;height:18px;position:absolute;left:12px;top:12px;color:var(--muted);pointer-events:none}\ninput,select{width:100%;min-height:42px;border:1px solid #cbd0c3;background:var(--surface);color:var(--ink);padding:9px 12px}\ninput{padding-left:38px}\ninput::placeholder{color:#7d8178}\n.department{width:218px}\ntable{border-collapse:collapse;width:100%;table-layout:fixed;text-align:left}\ncaption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\nthead{background:#f7f6f0;color:var(--muted)}\nth{font-size:11px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;padding:12px 22px}\nth:first-child{width:49%}\nth:nth-child(2){width:27%}\nth:nth-child(3){width:24%}\ntd{padding:15px 22px;border-top:1px solid #e8e8df;vertical-align:middle}\n.person{display:flex;align-items:center;gap:12px;min-width:0}\n.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:650;letter-spacing:.3px}\n.sage{background:#e0e6d7;color:#42553c}\n.clay{background:#eeded1;color:#79523f}\n.blue{background:#dde5e5;color:#476267}\n.lilac{background:#e6e0eb;color:#695575}\n.sand{background:#eae4cc;color:#756438}\n.gray{background:#e1e2dc;color:#5b6256}\n.name{font-weight:650;line-height:1.4}\n.you{font-weight:400;color:var(--muted);font-size:11px;margin-left:5px}\n.secondary{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4;overflow-wrap:anywhere}\n.team{font-size:13px}\n.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:1.35}\n.dot{width:6px;height:6px;background:var(--green);border-radius:50%;flex:none}\n.busy .dot{background:#aa7c31}\n.away .dot{background:#959a8e}\n.pending{background:#f9f7ef}\n.pending .avatar{background:transparent;border:1px dashed #b8bbae;color:var(--muted)}\n.invited{font-size:11px;font-weight:650;color:#7a5d26;background:#eee6cd;border-radius:4px;padding:4px 7px;display:inline-block}\n.resend{border:0;background:none;padding:0;color:var(--ink);font-size:12px;text-decoration:underline;text-underline-offset:3px}\n.table-note{padding:12px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;display:flex;align-items:center;gap:7px}\n.table-note svg{width:14px;height:14px;flex:none}\n@media(max-width:1140px){main{margin:28px 24px}.topbar{padding:0 24px}}\n@media(max-width:600px){\n.topbar{height:60px;padding:0 20px}.shop-label{display:none}.account>span{display:none}\nmain{margin:24px 16px}.page-heading{grid-template-columns:1fr;gap:16px}h1{font-size:29px}\n.primary{width:100%}.intro{font-size:13px;margin-top:14px}.summary{gap:6px 10px;margin:13px 0 20px;font-size:11px}.summary span+span{padding-left:10px}\n.filters{padding:15px;gap:12px;flex-direction:column;align-items:stretch}.search-field{max-width:none}.department{width:100%}\nthead{display:none}table,tbody{display:block}\ntr{display:grid;grid-template-columns:minmax(0,1fr) 98px;gap:7px 10px;padding:16px 15px;border-top:1px solid #e8e8df}\ntbody tr:first-child{border-top:0}\ntd{display:block;border:0;padding:0;min-width:0}\ntd:first-child{grid-column:1;grid-row:1}\ntd:nth-child(2){grid-column:1/-1;grid-row:2;padding-left:44px;font-size:11px;display:flex;flex-wrap:wrap;gap:0 6px}\ntd:nth-child(2) .secondary{font-size:11px;margin:0}\ntd:nth-child(2) .secondary::before{content:\"·\";margin-right:6px}\ntd:last-child{grid-column:2;grid-row:1;text-align:right;padding-top:3px}\n.person{gap:9px;align-items:flex-start}.avatar{width:35px;height:35px;font-size:11px}.name{font-size:13px}.secondary{font-size:11px}\n.status{font-size:11px;text-align:left;justify-content:flex-start;max-width:98px}\n.invited{font-size:10px;padding:4px 6px;text-align:left}.pending td:last-child .secondary{font-size:10px}\n.resend{font-size:11px}.table-note{padding:12px 15px;align-items:flex-start}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"23\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.7\"/><circle cx=\"25\" cy=\"23\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.7\"/><path d=\"m8 23 6-13 7 13H8l10-9h5l2 9M11 10h6M21 7h3l-2 7\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\"/></svg>\n<span class=\"wordmark\">alder</span><span class=\"shop-label\">Your neighborhood bike shop</span>\n</div>\n<div class=\"account\"><span>Oakland, CA</span><div class=\"avatar\" aria-label=\"Maya Chen account\">MC</div></div>\n</header>\n<main id=\"directory\">\n<div class=\"page-heading\">\n<div><p class=\"eyebrow\">The people behind the shop</p><h1>Team directory</h1></div>\n<button class=\"primary\" type=\"button\"><svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M10 4v12M4 10h12\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"/></svg>Invite member</button>\n</div>\n<p class=\"intro\">Find the right person for a repair, a shop project, or the next community ride.</p>\n<div class=\"summary\" aria-label=\"Team summary\"><span><strong>6</strong> members</span><span><strong>3</strong> departments</span><span><strong>1</strong> pending invitation</span></div>\n\n<section class=\"directory\" aria-label=\"People and invitations\">\n<form class=\"filters\" role=\"search\">\n<div class=\"field search-field\"><label for=\"people\">Search people</label><div class=\"search-wrap\"><svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m13 13 4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg><input id=\"people\" name=\"people\" type=\"search\" placeholder=\"Name, role, or location\"></div></div>\n<div class=\"field department\"><label for=\"department\">Department</label><select id=\"department\" name=\"department\"><option>All departments</option><option>Design</option><option>Engineering</option><option>Shop operations</option></select></div>\n</form>\n<table>\n<caption>Alder team members, locations, availability, and pending invitations</caption>\n<thead><tr><th scope=\"col\">Person</th><th scope=\"col\">Department &amp; location</th><th scope=\"col\">Availability</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"person\"><span class=\"avatar sage\" aria-hidden=\"true\">MC</span><div><div class=\"name\">Maya Chen <span class=\"you\">You</span></div><div class=\"secondary\">Brand &amp; shop experience lead</div></div></div></td>\n<td class=\"team\">Design<div class=\"secondary\">Oakland shop</div></td>\n<td><span class=\"status\"><span class=\"dot\"></span>Available</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar clay\" aria-hidden=\"true\">TB</span><div><div class=\"name\">Theo Brooks</div><div class=\"secondary\">Lead mechanic</div></div></div></td>\n<td class=\"team\">Engineering<div class=\"secondary\">Service workshop</div></td>\n<td><span class=\"status busy\"><span class=\"dot\"></span>On a repair</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar lilac\" aria-hidden=\"true\">NP</span><div><div class=\"name\">Nina Patel</div><div class=\"secondary\">Apparel &amp; merchandising</div></div></div></td>\n<td class=\"team\">Design<div class=\"secondary\">Oakland shop</div></td>\n<td><span class=\"status\"><span class=\"dot\"></span>Available</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar blue\" aria-hidden=\"true\">LR</span><div><div class=\"name\">Luis Romero</div><div class=\"secondary\">E-bike service specialist</div></div></div></td>\n<td class=\"team\">Engineering<div class=\"secondary\">Service workshop</div></td>\n<td><span class=\"status busy\"><span class=\"dot\"></span>Back at 2:30 PM</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar sand\" aria-hidden=\"true\">AW</span><div><div class=\"name\">Avery Wilson</div><div class=\"secondary\">Workshop operations &amp; community ride coordination</div></div></div></td>\n<td class=\"team\">Shop operations<div class=\"secondary\">Oakland shop</div></td>\n<td><span class=\"status\"><span class=\"dot\"></span>Available</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar gray\" aria-hidden=\"true\">SR</span><div><div class=\"name\">Sam Rivera</div><div class=\"secondary\">Sales &amp; ride support</div></div></div></td>\n<td class=\"team\">Shop operations<div class=\"secondary\">Berkeley pickup point</div></td>\n<td><span class=\"status away\"><span class=\"dot\"></span>Away today</span></td>\n</tr>\n<tr class=\"pending\">\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">JM</span><div><div class=\"name\">Jules Morgan</div><div class=\"secondary\">jules@alder.bike</div></div></div></td>\n<td class=\"team\">Design<div class=\"secondary\">Oakland shop</div></td>\n<td><span class=\"invited\">Invitation pending</span><div class=\"secondary\">Sent May 20 · <button type=\"button\" class=\"resend\" aria-label=\"Resend invitation to Jules Morgan\">Resend</button></div></td>\n</tr>\n</tbody>\n</table>\n<div class=\"table-note\"><svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\"/><path d=\"M8 7v4M8 4.5v.5\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>Availability is set by each member. Check the shop schedule for shift times.</div>\n</section>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-2","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for Fieldwork. Include Search people, department select with Design and Engineering, six people including Samira Patel, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Make status, progress and next steps distinguishable without relying on color alone. Include a concise summary count and a meaningful subdued status label. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory · Fieldwork</title>\n<style>\n:root{--ink:#293e35;--paper:#f7f7f1;--muted:#68746c;--line:#d9ded4;--wash:#edf0e7}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit;color:inherit}\nbutton,input,select{border-radius:6px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:3px}\n.topbar{border-bottom:1px solid var(--line)}\n.topbar-inner{max-width:1120px;margin:auto;padding:22px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px}\n.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.7px}\n.brand svg{width:25px;height:25px}\n.shop{text-align:right;font-size:13px;font-weight:600}\n.shop small{display:block;color:var(--muted);font-size:11px;font-weight:400}\nmain{max-width:1120px;margin:0 auto;padding:42px 32px 30px}\n.eyebrow{margin:0 0 9px;font-size:11px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}\n.heading{display:flex;justify-content:space-between;align-items:center;gap:24px}\nh1{font-size:34px;letter-spacing:-1.2px;line-height:1.2;margin:0 0 10px;font-weight:650}\n.intro{margin:0;color:var(--muted);font-size:14px;max-width:530px}\n.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:11px 17px;white-space:nowrap;font-weight:600}\n.primary span{font-size:21px;font-weight:400;line-height:1}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px;margin:30px 0 23px;padding:20px;background:var(--wash);border:1px solid var(--line);border-radius:8px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\n.search{position:relative}\n.search svg{position:absolute;left:13px;top:13px;width:18px;height:18px;color:var(--muted);pointer-events:none}\ninput,select{width:100%;height:44px;border:1px solid #bdc7bb;background:var(--paper);padding:0 12px;min-width:0}\ninput{padding-left:40px}\ninput::placeholder{color:var(--muted);opacity:1}\n.summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:12px;color:var(--muted)}\n.summary strong{color:var(--ink);font-weight:650;font-size:14px}\n.separator{margin:0 9px}\n.scope{display:flex;align-items:center;gap:6px}\n.scope svg{width:13px;height:13px}\n.directory{border:1px solid var(--line);border-radius:8px;overflow:hidden}\ntable{border-collapse:collapse;width:100%;text-align:left}\ncaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\nth{font-size:11px;font-weight:600;color:var(--muted);background:var(--wash);padding:13px 20px;letter-spacing:.2px}\ntd{padding:17px 20px;border-top:1px solid var(--line);vertical-align:middle;font-size:13px}\nth:first-child{width:38%}th:nth-child(2){width:19%}th:nth-child(3){width:21%}\n.person{display:flex;align-items:center;gap:12px;min-width:0}\n.avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:12px;font-weight:650;letter-spacing:.3px;background:var(--wash)}\n.name{display:block;font-size:14px;font-weight:600}\n.detail{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}\n.status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px}\n.dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:0 0 7px}\n.away .dot{background:transparent;border:1px solid var(--ink)}\n.off .dot{height:1px;border-radius:0;background:var(--muted)}\n.pending{background:var(--wash)}\n.pending .avatar{background:transparent;border:1px dashed var(--muted)}\n.pending-label{display:inline-block;font-size:11px;font-weight:600;border:1px dashed #8d9c8b;padding:3px 7px;border-radius:4px;white-space:nowrap}\n.text-button{display:block;background:transparent;border:0;padding:0;margin-top:6px;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}\n.note{margin:14px 0 0;font-size:12px;color:var(--muted)}\n@media(max-width:600px){\n.topbar-inner{padding:17px 20px}.brand{font-size:19px}.shop{font-size:11px}.shop small{font-size:10px}\nmain{padding:27px 20px 24px}.eyebrow{font-size:10px}\n.heading{flex-wrap:wrap;gap:18px}h1{font-size:30px}.intro{font-size:13px;max-width:310px}\n.primary{padding:9px 13px;font-size:13px}\n.filters{margin:23px 0 19px;padding:14px;grid-template-columns:1fr;gap:13px}\n.summary{font-size:11px;align-items:flex-start;flex-wrap:wrap;gap:7px}\n.summary strong{font-size:13px}.separator{margin:0 6px}\n.scope{font-size:10px}\nthead{display:none}table,tbody{display:block}\ntr{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:9px 8px;padding:15px 13px;border-top:1px solid var(--line)}\ntbody:first-of-type tr:first-child{border-top:0}\ntd{display:block;padding:0;border:0;font-size:11px}\ntd:first-child{grid-column:1;grid-row:1}\ntd:nth-child(2){grid-column:1;grid-row:2;padding-left:42px;color:var(--muted)}\ntd:nth-child(3){grid-column:2;grid-row:2;text-align:right;color:var(--muted)}\ntd:nth-child(4){grid-column:2;grid-row:1;text-align:right;align-self:center}\n.person{gap:9px;align-items:flex-start}\n.avatar{width:33px;height:33px;flex-basis:33px;font-size:10px}\n.name{font-size:13px;line-height:1.3}\n.detail{font-size:10px;margin-top:4px}\n.status{font-size:11px;gap:5px}.pending-label{font-size:10px;padding:3px 5px}\n.pending .detail{overflow-wrap:anywhere}\n.text-button{margin-left:auto;font-size:11px}\n.note{font-size:11px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"topbar-inner\">\n<div class=\"brand\">\n<svg viewBox=\"0 0 26 26\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 23V4h19M4 11h15M4 18h10\" stroke=\"currentColor\" stroke-width=\"3\"/></svg>\nFieldwork\n</div>\n<div class=\"shop\">Spoke &amp; Spanner<small>Independent bike shop</small></div>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">Your workspace / People</p>\n<div class=\"heading\">\n<div>\n<h1>Team directory</h1>\n<p class=\"intro\">Find the right person for a repair, custom build or shop shift.</p>\n</div>\n<button class=\"primary\" type=\"button\"><span aria-hidden=\"true\">+</span> Invite member</button>\n</div>\n\n<section class=\"filters\" aria-label=\"Filter team directory\">\n<div>\n<label for=\"people-search\">Search people</label>\n<div class=\"search\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"m16 16 4.5 4.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n<input id=\"people-search\" type=\"search\" placeholder=\"Name, role or location\">\n</div>\n</div>\n<div>\n<label for=\"department\">Department</label>\n<select id=\"department\">\n<option>All departments</option>\n<option>Design</option>\n<option>Engineering</option>\n</select>\n</div>\n</section>\n\n<div class=\"summary\">\n<div><strong>6 members</strong><span class=\"separator\" aria-hidden=\"true\">·</span>1 pending invitation</div>\n<span class=\"scope\"><svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><rect x=\"3.5\" y=\"7\" width=\"9\" height=\"7\" rx=\"1.5\" stroke=\"currentColor\"/><path d=\"M5.5 7V4a2.5 2.5 0 0 1 5 0v3\" stroke=\"currentColor\"/></svg>Team-only directory</span>\n</div>\n\n<div class=\"directory\">\n<table>\n<caption>Shop team members, departments, locations and today's availability</caption>\n<thead><tr><th scope=\"col\">Person</th><th scope=\"col\">Department</th><th scope=\"col\">Location</th><th scope=\"col\">Availability · today</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">SP</span><div><span class=\"name\">Samira Patel</span><span class=\"detail\">Shop owner &amp; build designer</span></div></div></td>\n<td>Design</td><td>Main shop · Bristol</td><td><span class=\"status\"><span class=\"dot\" aria-hidden=\"true\"></span>In shop</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">LR</span><div><span class=\"name\">Lucas Reed</span><span class=\"detail\">Lead mechanic</span></div></div></td>\n<td>Engineering</td><td>Workshop · Bristol</td><td><span class=\"status\"><span class=\"dot\" aria-hidden=\"true\"></span>In shop</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">MC</span><div><span class=\"name\">Maya Chen</span><span class=\"detail\">Custom build designer</span></div></div></td>\n<td>Design</td><td>Remote · Bath</td><td><span class=\"status away\"><span class=\"dot\" aria-hidden=\"true\"></span>Back at 1 pm</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">TB</span><div><span class=\"name\">Theo Brooks</span><span class=\"detail\">E-bike technician</span></div></div></td>\n<td>Engineering</td><td>Workshop · Bristol</td><td><span class=\"status off\"><span class=\"dot\" aria-hidden=\"true\"></span>Off today</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">NA</span><div><span class=\"name\">Nina Alvarez</span><span class=\"detail\">Retail &amp; merchandising</span></div></div></td>\n<td>Design</td><td>Main shop · Bristol</td><td><span class=\"status\"><span class=\"dot\" aria-hidden=\"true\"></span>In shop</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">OC</span><div><span class=\"name\">Owen Clarke</span><span class=\"detail\">Wheel builder</span></div></div></td>\n<td>Engineering</td><td>Workshop · Bristol</td><td><span class=\"status away\"><span class=\"dot\" aria-hidden=\"true\"></span>Back tomorrow</span></td>\n</tr>\n</tbody>\n<tbody>\n<tr class=\"pending\">\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">AM</span><div><span class=\"name\">Alex Morgan</span><span class=\"detail\">Workshop technician</span></div></div></td>\n<td>Engineering</td><td>Workshop · Bristol</td>\n<td><span class=\"pending-label\">Pending invitation</span><span class=\"detail\">Sent 2 days ago</span><button type=\"button\" class=\"text-button\" aria-label=\"Resend invitation to Alex Morgan\">Resend invite</button></td>\n</tr>\n</tbody>\n</table>\n</div>\n<p class=\"note\">Availability follows today’s shop rota. Invited members get access once they accept.</p>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-3","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for Common. Include Search people, department select with Design and Engineering, six people including Noah Tremblay, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves an independent bike shop. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory — Common</title>\n<style>\n:root{--ink:#26392f;--muted:#697169;--line:#dce0d7;--paper:#f5f5ef;--green:#315c45}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,a,input,select{outline-offset:4px}\nheader{border-bottom:1px solid var(--line)}\n.topbar{max-width:1160px;margin:auto;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{font-size:26px;font-weight:750;letter-spacing:-1.4px;line-height:1}\n.brand small{display:block;font-size:9px;font-weight:600;letter-spacing:2px;margin-top:8px}\n.workspace{color:var(--muted);font-size:13px}\n.workspace strong{color:var(--ink);font-weight:500}\nmain{max-width:1160px;margin:auto;padding:42px 20px 28px}\n.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:650;text-transform:uppercase;color:var(--muted);margin:0 0 14px}\n.intro{display:grid;grid-template-columns:1fr 280px;gap:45px;align-items:end;margin-bottom:30px}\nh1{font-family:Georgia,\"Times New Roman\",serif;font-size:54px;line-height:1.1;font-weight:400;letter-spacing:-1.8px;margin:0 0 15px}\n.lede{color:var(--muted);max-width:550px;margin:0 0 22px;font-size:15px}\nbutton{border:1px solid var(--green);border-radius:5px;padding:10px 16px;font-weight:600;cursor:pointer}\n.invite{background:var(--green);color:white;display:inline-flex;gap:12px;align-items:center}\n.invite span{font-size:20px;font-weight:400;line-height:1}\n.snapshot{background:#eceedf;border:1px solid #dde1d2;border-radius:6px;padding:18px}\n.snapshot h2{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 12px;font-weight:650}\n.snapshot svg{display:block;width:100%;height:18px;margin-bottom:12px}\n.legend{display:flex;justify-content:space-between;gap:8px;color:#596354;font-size:11px}\n.legend strong{display:block;color:var(--ink);font-size:20px;line-height:1.3;font-weight:550}\n.snapshot p{font-size:11px;color:var(--muted);margin:12px 0 0;border-top:1px solid #d4d9c9;padding-top:10px}\n.directory{background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}\n.filters{display:flex;align-items:end;gap:18px;padding:20px;border-bottom:1px solid var(--line)}\n.field{display:flex;flex-direction:column;gap:7px}\nlabel{font-size:12px;font-weight:600}\n.search{flex:1;max-width:350px}\ninput,select{width:100%;height:42px;border:1px solid #cbd2c7;border-radius:4px;background:#fff;color:var(--ink);padding:0 12px;min-width:0}\ninput::placeholder{color:#838980}\n.department{width:210px}\n.count{margin:0 0 10px auto;font-size:12px;color:var(--muted);white-space:nowrap}\ntable{width:100%;border-collapse:collapse;text-align:left}\nth{padding:12px 20px;background:#fafbf7;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}\ntd{padding:17px 20px;border-bottom:1px solid #e8ebe3;vertical-align:middle}\ntr:last-child td{border-bottom:0}\nth:first-child{width:35%}\nth:nth-child(2){width:19%}\nth:nth-child(3){width:23%}\n.person{display:flex;align-items:center;gap:12px}\n.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#e4eadd;color:#41513a;font-size:12px;font-weight:650;letter-spacing:.5px}\n.avatar.clay{background:#f0e5dc;color:#775847}\n.avatar.blue{background:#e1e9ec;color:#46616b}\n.avatar.lilac{background:#ebe5ed;color:#685571}\n.name{font-size:14px;font-weight:600;display:block}\n.role,.sub{font-size:12px;color:var(--muted);display:block;margin-top:2px}\n.dept,.place{font-size:13px}\n.status{font-size:12px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}\n.status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#55835a;flex-shrink:0}\n.busy:before{background:#b78a38}\n.away{color:var(--muted)}\n.away:before{background:#9b9f98}\n.pending{background:#fcfbf6}\n.pending .avatar{background:transparent;border:1px dashed #b7bead;color:#7b8273}\n.pending-label{font-size:11px;font-weight:600;color:#826429;display:inline-block;background:#f4ecd8;border:1px solid #e8dbb8;border-radius:4px;padding:4px 7px;white-space:nowrap}\n.mobile-label{display:none}\nfooter{display:flex;justify-content:space-between;gap:16px;padding-top:16px;font-size:11px;color:var(--muted)}\nfooter p{margin:0}\n@media(max-width:650px){\n.topbar{padding:18px}\n.workspace{font-size:11px;text-align:right;max-width:130px}\n.workspace strong{display:block}\nmain{padding:26px 18px}\n.eyebrow{margin-bottom:10px}\n.intro{grid-template-columns:1fr;gap:20px;margin-bottom:20px}\nh1{font-size:39px;letter-spacing:-1.2px;margin-bottom:12px}\n.lede{font-size:14px;margin-bottom:16px}\n.snapshot{padding:13px 15px;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;align-items:center}\n.snapshot h2{font-size:10px;margin:0}\n.snapshot svg{margin:0;height:14px}\n.legend{grid-column:1 / -1;justify-content:flex-start;gap:22px}\n.legend strong{display:inline;font-size:16px;margin-right:4px}\n.snapshot p{grid-column:1 / -1;margin:0;padding-top:7px}\n.filters{padding:15px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}\n.search{grid-column:1 / -1;max-width:none}\n.department{width:auto}\n.count{font-size:11px;align-self:end;margin:0 0 12px}\ntable,tbody{display:block}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:15px;border-bottom:1px solid #e8ebe3}\ntbody tr:last-child{border-bottom:0}\ntd{display:block;padding:0;border:0}\n.person-cell{grid-column:1 / -1;grid-row:1;margin-bottom:7px}\n.person{gap:10px}\n.avatar{width:36px;height:36px}\n.dept{grid-column:1;grid-row:2;padding-left:46px;font-size:11px}\n.place{grid-column:1;grid-row:3;padding-left:46px;font-size:11px;color:var(--muted)}\n.place .sub{display:inline;font-size:11px;margin:0}\n.place .sub:before{content:\" · \"}\n.availability{grid-column:2;grid-row:2 / 4;align-self:center}\n.status{font-size:11px;gap:5px}\n.pending-label{font-size:10px;padding:4px 6px}\nfooter{flex-direction:column;gap:4px}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"topbar\">\n<div class=\"brand\">Common<small>CYCLE &amp; REPAIR</small></div>\n<div class=\"workspace\">Your workspace <span aria-hidden=\"true\">/</span> <strong>People &amp; access</strong></div>\n</div>\n</header>\n<main>\n<p class=\"eyebrow\">Good people. Better rides.</p>\n<section class=\"intro\" aria-labelledby=\"page-title\">\n<div>\n<h1 id=\"page-title\">Team directory</h1>\n<p class=\"lede\">Find the right person, from the repair stand to the shop floor. Your crew across Mile End, Plateau and beyond.</p>\n<button class=\"invite\" type=\"button\"><span aria-hidden=\"true\">+</span> Invite member</button>\n</div>\n<aside class=\"snapshot\" aria-labelledby=\"coverage-title\">\n<h2 id=\"coverage-title\">Today’s availability</h2>\n<svg viewBox=\"0 0 240 16\" role=\"img\" aria-label=\"Six team members: four available, one busy and one away\">\n<g fill=\"#66845a\"><rect width=\"36\" height=\"16\" rx=\"2\"/><rect x=\"41\" width=\"36\" height=\"16\" rx=\"2\"/><rect x=\"82\" width=\"36\" height=\"16\" rx=\"2\"/><rect x=\"123\" width=\"36\" height=\"16\" rx=\"2\"/></g>\n<rect x=\"164\" width=\"36\" height=\"16\" rx=\"2\" fill=\"#b39555\"/>\n<rect x=\"205\" width=\"35\" height=\"16\" rx=\"2\" fill=\"#c3c8b9\"/>\n</svg>\n<div class=\"legend\"><span><strong>4</strong> Available</span><span><strong>1</strong> Busy</span><span><strong>1</strong> Away</span></div>\n<p>09:30 snapshot · Pending invites not included</p>\n</aside>\n</section>\n<section class=\"directory\" aria-label=\"People and invitations\">\n<form class=\"filters\" role=\"search\">\n<div class=\"field search\">\n<label for=\"people-search\">Search people</label>\n<input id=\"people-search\" type=\"search\" placeholder=\"Name or role\">\n</div>\n<div class=\"field department\">\n<label for=\"department\">Department</label>\n<select id=\"department\"><option>All departments</option><option>Design</option><option>Engineering</option><option>Operations</option></select>\n</div>\n<p class=\"count\">6 members · 1 pending</p>\n</form>\n<table>\n<thead><tr><th scope=\"col\">Person &amp; role</th><th scope=\"col\">Department</th><th scope=\"col\">Based at</th><th scope=\"col\">Availability</th></tr></thead>\n<tbody>\n<tr>\n<td class=\"person-cell\"><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">NT</span><div><span class=\"name\">Noah Tremblay</span><span class=\"role\">Service lead</span></div></div></td>\n<td class=\"dept\">Engineering</td><td class=\"place\">Montréal<span class=\"sub\">Mile End shop</span></td><td class=\"availability\"><span class=\"status\">Available</span></td>\n</tr>\n<tr>\n<td class=\"person-cell\"><div class=\"person\"><span class=\"avatar clay\" aria-hidden=\"true\">MC</span><div><span class=\"name\">Maya Chen</span><span class=\"role\">Brand &amp; merchandise designer</span></div></div></td>\n<td class=\"dept\">Design</td><td class=\"place\">Montréal<span class=\"sub\">Plateau shop</span></td><td class=\"availability\"><span class=\"status\">Available</span></td>\n</tr>\n<tr>\n<td class=\"person-cell\"><div class=\"person\"><span class=\"avatar blue\" aria-hidden=\"true\">EB</span><div><span class=\"name\">Eli Brooks</span><span class=\"role\">Bicycle mechanic</span></div></div></td>\n<td class=\"dept\">Engineering</td><td class=\"place\">Montréal<span class=\"sub\">Mile End shop</span></td><td class=\"availability\"><span class=\"status busy\">On a repair</span></td>\n</tr>\n<tr>\n<td class=\"person-cell\"><div class=\"person\"><span class=\"avatar lilac\" aria-hidden=\"true\">SL</span><div><span class=\"name\">Sofia Laurent</span><span class=\"role\">Retail &amp; web designer</span></div></div></td>\n<td class=\"dept\">Design</td><td class=\"place\">Québec City<span class=\"sub\">Remote</span></td><td class=\"availability\"><span class=\"status\">Available</span></td>\n</tr>\n<tr>\n<td class=\"person-cell\"><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">OP</span><div><span class=\"name\">Owen Patel</span><span class=\"role\">E-bike specialist</span></div></div></td>\n<td class=\"dept\">Engineering</td><td class=\"place\">Montréal<span class=\"sub\">Mile End shop</span></td><td class=\"availability\"><span class=\"status\">Available</span></td>\n</tr>\n<tr>\n<td class=\"person-cell\"><div class=\"person\"><span class=\"avatar clay\" aria-hidden=\"true\">AM</span><div><span class=\"name\">Ava Martin</span><span class=\"role\">Shop operations lead</span></div></div></td>\n<td class=\"dept\">Operations</td><td class=\"place\">Montréal<span class=\"sub\">Plateau shop</span></td><td class=\"availability\"><span class=\"status away\">Away · back Tue</span></td>\n</tr>\n<tr class=\"pending\">\n<td class=\"person-cell\"><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">JL</span><div><span class=\"name\">Jordan Lee</span><span class=\"role\">jordan@common.bike</span></div></div></td>\n<td class=\"dept\">Engineering</td><td class=\"place\">Mile End shop<span class=\"sub\">Invited 2 days ago</span></td><td class=\"availability\"><span class=\"pending-label\">Pending invitation</span></td>\n</tr>\n</tbody>\n</table>\n</section>\n<footer><p>One crew, two shops. Remote teammates included.</p><p>Invitations expire after 7 days.</p></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-4","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for Rill. Include Search people, department select with Design and Engineering, six people including Leila Haddad, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use grouped rows and dividers instead of repeating generic cards. Include one unusually long secondary label and handle wrapping naturally. Use a practical dense layout with readable type and generous touch targets. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory · Rill</title>\n<style>\n:root{--ink:#243c32;--muted:#6d756e;--line:#e1e5dc;--paper:#fffefa;--green:#285b44}\n*{box-sizing:border-box}\nbody{margin:0;background:#f5f6f0;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select{min-height:44px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b4cdb5;outline-offset:3px}\n.topbar{height:76px;background:var(--paper);border-bottom:1px solid var(--line);padding:0 40px;display:flex;align-items:center;justify-content:space-between}\n.brand,.workspace,.identity{display:flex;align-items:center;gap:12px}\n.brand{font-size:25px;font-weight:750;letter-spacing:-1px}\n.mark{width:32px;height:32px;color:var(--green)}\n.workspace{margin-left:28px;padding-left:28px;border-left:1px solid var(--line);font-size:13px;font-weight:500;letter-spacing:0}\n.workspace small{display:block;font-size:11px;color:var(--muted);font-weight:400}\n.identity{color:var(--muted);font-size:12px}\n.avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;background:#e7eddf;color:#40583b;border-radius:50%;font-size:12px;font-weight:650;letter-spacing:.2px}\n.identity .avatar{width:34px;height:34px;flex-basis:34px;background:#e9e7dd}\nmain{max-width:1152px;margin:36px auto 28px;padding:0 32px}\n.breadcrumb{font-size:12px;color:var(--muted);margin:0 0 16px}\n.breadcrumb span{margin:0 9px;color:#adb3a9}\n.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}\nh1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0 0 9px;font-weight:650}\n.subtitle{margin:0;color:var(--muted)}\n.invite{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--green);border-radius:7px;background:var(--green);color:white;padding:0 17px;font-weight:600;white-space:nowrap}\n.invite svg{width:17px;height:17px}\n.directory{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.filters{display:flex;align-items:flex-end;gap:18px;padding:20px 22px;border-bottom:1px solid var(--line)}\n.field{display:flex;flex-direction:column;gap:6px}\n.field label{font-size:12px;font-weight:600}\n.search{flex:1;max-width:420px}\n.searchbox{position:relative}\n.searchbox svg{position:absolute;left:13px;top:14px;width:17px;height:17px;color:#7c857a;pointer-events:none}\ninput,select{width:100%;border:1px solid #cdd5c9;border-radius:6px;background:#fff;color:var(--ink);padding:9px 12px}\ninput{padding-left:39px}\ninput::placeholder{color:#8b9189}\n.department{width:210px}\n.summary{margin:0 0 12px auto;font-size:12px;color:var(--muted);white-space:nowrap}\n.summary strong{color:var(--ink);font-weight:600}\ntable{width:100%;border-collapse:collapse;table-layout:fixed}\ncol.person{width:53%}col.place{width:25%}col.status{width:22%}\nthead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;color:var(--muted);padding:12px 22px;border-bottom:1px solid var(--line)}\n.group th{padding:9px 22px;text-align:left;background:#f0f3eb;border-bottom:1px solid var(--line);font-size:12px;font-weight:650}\n.count{font-size:11px;color:var(--muted);font-weight:400;margin-left:8px}\n.member th,.member td{padding:15px 22px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}\n.member th{font-weight:400}\n.person-info{display:flex;align-items:center;gap:12px;min-width:0}\n.person-copy{min-width:0}\n.name{font-weight:600;font-size:14px;display:block}\n.role{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:3px;overflow-wrap:anywhere}\n.location{font-size:12px;color:#667267}\n.badge{display:inline-flex;gap:7px;align-items:center;max-width:100%;font-size:11px;line-height:1.4;padding:4px 9px;border-radius:5px;background:#edf4e9;color:#3f6546}\n.badge::before{content:\"\";width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#6a9462}\n.away{color:#86652c;background:#f7f0df}\n.away::before{background:#b99349}\n.neutral{color:#65716a;background:#eef0ec}\n.neutral::before{background:#8b978f}\n.blue{background:#eaf0f3;color:#536f7d}\n.blue::before{background:#7295a5}\n.peach{background:#f2e6dc;color:#896648}\n.lilac{background:#eae6f0;color:#746484}\n.blue-avatar{background:#e1ebed;color:#4c6d72}\n.sage{background:#e5eadd;color:#65734d}\n.sand{background:#efe9d8;color:#877349}\n.pending .avatar{background:transparent;border:1px dashed #b8c3b3;color:#7c8975}\n.pending .badge{background:#f7eedc;color:#8a692d}\n.pending .badge::before{background:#b38c3c}\n.member:last-child th,.member:last-child td{border-bottom:0}\ntbody+tbody .group th{border-top:1px solid var(--line)}\n.table-note{margin:0;padding:13px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;background:#fafbf6}\n.footer{display:flex;justify-content:space-between;gap:18px;margin:16px 2px 0;color:var(--muted);font-size:11px}\n.footer p{margin:0}\n@media(max-width:700px){\n.topbar{height:66px;padding:0 16px}.brand{font-size:23px;gap:8px}.workspace{margin-left:14px;padding-left:14px;font-size:12px}.workspace small,.identity>span{display:none}\nmain{margin:23px auto;padding:0 16px}.breadcrumb{margin-bottom:13px}\n.heading{align-items:flex-start;flex-direction:column;gap:17px;margin-bottom:20px}\nh1{font-size:29px}.subtitle{font-size:13px}.invite{min-height:44px}\n.filters{padding:16px;gap:12px;flex-wrap:wrap}\n.search{flex:1 1 100%;max-width:none}.department{width:100%}\n.summary{margin:0;font-size:11px}\ncolgroup{display:none}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntable,tbody{display:block}\n.group{display:block}.group th{display:block;padding:9px 16px}\n.member{display:grid;grid-template-columns:minmax(0,1fr) 98px;column-gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}\n.member th,.member td{padding:0;border:0}\n.member th{grid-column:1;grid-row:1}\n.member .location{grid-column:1;grid-row:2;padding-left:48px;margin-top:4px;font-size:11px}\n.member .availability{grid-column:2;grid-row:1 / span 2;align-self:center}\n.person-info{align-items:flex-start;gap:10px}\n.avatar{width:38px;height:38px;flex-basis:38px}\n.name{font-size:13px}.role{font-size:11px}\n.badge{font-size:10px;padding:4px 6px;gap:5px}\n.member:last-child{border-bottom:0}\n.table-note{padding:12px 16px;font-size:11px}\n.footer{display:block;line-height:1.6}.footer p+p{margin-top:5px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\">\n<svg class=\"mark\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M16 28V14M16 19C7 19 3 14 4 5c8 0 12 5 12 14Z\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\"/><path d=\"M16 23c0-10 4-15 12-15 0 9-4 15-12 15Z\" fill=\"currentColor\"/></svg>\nRill\n<div class=\"workspace\"><div>Shared Table Co-op<small>Good food, together.</small></div></div>\n</div>\n<div class=\"identity\"><span>Co-op workspace</span><div class=\"avatar\" aria-label=\"Olivia Hart\">OH</div></div>\n</header>\n<main id=\"directory\">\n<p class=\"breadcrumb\">Workspace <span>/</span> People</p>\n<div class=\"heading\">\n<div><h1>Team directory</h1><p class=\"subtitle\">Meet the people helping our co-op feed the neighborhood.</p></div>\n<button class=\"invite\" type=\"button\"><svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><path d=\"M10 4v12M4 10h12\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"/></svg>Invite member</button>\n</div>\n<section class=\"directory\" aria-label=\"Co-op team members\">\n<div class=\"filters\">\n<div class=\"field search\">\n<label for=\"search\">Search people</label>\n<div class=\"searchbox\"><svg viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"m13 13 4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg><input id=\"search\" type=\"search\" placeholder=\"Name, role or location\"></div>\n</div>\n<div class=\"field department\"><label for=\"department\">Department</label><select id=\"department\"><option>All departments</option><option>Design</option><option>Engineering</option></select></div>\n<p class=\"summary\"><strong>6 members</strong> · 1 pending</p>\n</div>\n<table aria-label=\"Team directory, grouped by department\">\n<colgroup><col class=\"person\"><col class=\"place\"><col class=\"status\"></colgroup>\n<thead><tr><th scope=\"col\">Person &amp; role</th><th scope=\"col\">Location</th><th scope=\"col\">Availability</th></tr></thead>\n<tbody>\n<tr class=\"group\"><th colspan=\"3\" scope=\"rowgroup\">Design <span class=\"count\">3 members</span></th></tr>\n<tr class=\"member\">\n<th scope=\"row\"><div class=\"person-info\"><span class=\"avatar\">LH</span><div class=\"person-copy\"><span class=\"name\">Leila Haddad</span><span class=\"role\">Design lead · Member experience</span></div></div></th>\n<td class=\"location\">Detroit, MI</td><td class=\"availability\"><span class=\"badge\">Available</span></td>\n</tr>\n<tr class=\"member\">\n<th scope=\"row\"><div class=\"person-info\"><span class=\"avatar peach\">MR</span><div class=\"person-copy\"><span class=\"name\">Mateo Rivera</span><span class=\"role\">Product designer · Online pantry</span></div></div></th>\n<td class=\"location\">Portland, OR · Remote</td><td class=\"availability\"><span class=\"badge away\">Away today</span></td>\n</tr>\n<tr class=\"member\">\n<th scope=\"row\"><div class=\"person-info\"><span class=\"avatar lilac\">NO</span><div class=\"person-copy\"><span class=\"name\">Nia Okafor</span><span class=\"role\">Community access, multilingual wayfinding &amp; neighborhood food-sharing programs</span></div></div></th>\n<td class=\"location\">Detroit · Eastside</td><td class=\"availability\"><span class=\"badge blue\">Co-op shift</span></td>\n</tr>\n</tbody>\n<tbody>\n<tr class=\"group\"><th colspan=\"3\" scope=\"rowgroup\">Engineering <span class=\"count\">3 members</span></th></tr>\n<tr class=\"member\">\n<th scope=\"row\"><div class=\"person-info\"><span class=\"avatar blue-avatar\">AM</span><div class=\"person-copy\"><span class=\"name\">Arjun Mehta</span><span class=\"role\">Platform engineer · Member accounts</span></div></div></th>\n<td class=\"location\">Chicago, IL · Remote</td><td class=\"availability\"><span class=\"badge\">Available</span></td>\n</tr>\n<tr class=\"member\">\n<th scope=\"row\"><div class=\"person-info\"><span class=\"avatar sage\">JP</span><div class=\"person-copy\"><span class=\"name\">June Park</span><span class=\"role\">Inventory systems engineer</span></div></div></th>\n<td class=\"location\">Detroit · Market hub</td><td class=\"availability\"><span class=\"badge blue\">At the hub</span></td>\n</tr>\n<tr class=\"member\">\n<th scope=\"row\"><div class=\"person-info\"><span class=\"avatar sand\">ET</span><div class=\"person-copy\"><span class=\"name\">Eli Thompson</span><span class=\"role\">Engineer · Volunteer scheduling</span></div></div></th>\n<td class=\"location\">Ann Arbor, MI · Remote</td><td class=\"availability\"><span class=\"badge neutral\">Back Monday</span></td>\n</tr>\n</tbody>\n<tbody>\n<tr class=\"group\"><th colspan=\"3\" scope=\"rowgroup\">Invitations <span class=\"count\">1 awaiting acceptance</span></th></tr>\n<tr class=\"member pending\">\n<th scope=\"row\"><div class=\"person-info\"><span class=\"avatar\">MC</span><div class=\"person-copy\"><span class=\"name\">Maya Chen</span><span class=\"role\">maya@sharedtable.coop</span></div></div></th>\n<td class=\"location\">Design · Sent 2 days ago</td><td class=\"availability\"><span class=\"badge\">Pending invitation</span></td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-note\">Invited members appear in their department after accepting their email invitation.</p>\n</section>\n<footer class=\"footer\"><p>Shared with co-op staff and volunteer coordinators.</p><p>Availability helps us plan together. It isn’t a shift roster.</p></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-5","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for North. Include Search people, department select with Design and Engineering, six people including Jules Martin, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use a warm neutral surface and a dark high-contrast accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory · North</title>\n<style>\n:root{color-scheme:light;--bg:#f5f2ec;--paper:#fffdf9;--ink:#24382f;--muted:#6c7169;--line:#e3e3d9;--accent:#193e31}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit}\nbutton,input,select{outline-offset:4px}\n:focus-visible{outline:2px solid var(--accent)}\nheader{border-bottom:1px solid var(--line);background:var(--paper)}\n.topbar{max-width:1160px;margin:auto;padding:19px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}\n.brand{display:flex;align-items:center;gap:24px}\n.wordmark{font-size:25px;font-weight:750;letter-spacing:-1px;line-height:1}\n.coop{border-left:1px solid var(--line);padding-left:24px;font-size:13px}\n.tagline{color:var(--muted);font-size:12px}\nmain{max-width:1160px;margin:auto;padding:36px 32px 28px}\n.intro{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:28px}\n.eyebrow{margin:0 0 7px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}\nh1{font-size:34px;line-height:1.15;letter-spacing:-1.1px;margin:0 0 10px;font-weight:650}\n.subtitle{margin:0;color:var(--muted);font-size:14px}\n.invite{display:flex;align-items:center;gap:14px}\nbutton{border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:#fffdf9;min-height:44px;padding:10px 17px;font-weight:600;cursor:pointer;white-space:nowrap}\nbutton:hover{background:#28513f}\n.plus{font-size:20px;line-height:1;margin-right:8px;font-weight:400;vertical-align:-1px}\n.hint{max-width:135px;margin:0;font-size:12px;line-height:1.5;color:var(--muted)}\n.directory{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;padding:21px 24px}\nlabel{display:block;font-size:12px;font-weight:650;margin-bottom:7px}\ninput,select{width:100%;min-height:43px;border:1px solid #cdd1c7;border-radius:6px;background:var(--paper);color:var(--ink);padding:10px 12px}\ninput::placeholder{color:#82857e;opacity:1}\n.search{position:relative}\n.search svg{position:absolute;left:13px;top:13px;width:17px;height:17px;color:var(--muted);pointer-events:none}\n.search input{padding-left:39px}\n.summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px 17px;color:var(--muted);font-size:12px}\n.summary strong{color:var(--ink);font-weight:650}\n.pending-count{display:inline-flex;align-items:center;gap:7px}\n.dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#467052}\n.pending-count .dot{background:#ac873e}\ntable{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}\nthead{background:#f5f5ef}\nth{font-weight:500;font-size:11px;color:var(--muted);padding:11px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\nth:first-child,td:first-child{padding-left:24px;width:32%}\nth:nth-child(2){width:27%}\nth:nth-child(3){width:22%}\nth:last-child{width:19%}\ntd{padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px;overflow-wrap:anywhere}\ntbody tr:last-child td{border-bottom:0}\n.person{display:flex;align-items:center;gap:12px;min-width:0}\n.avatar{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;background:#e5eadf;color:#3d5545;font-size:12px;font-weight:650;letter-spacing:.2px}\n.avatar.clay{background:#eee1d8;color:#765943}\n.avatar.slate{background:#e1e7e8;color:#4b6165}\n.avatar.gold{background:#eee8d4;color:#71623b}\n.name{display:block;font-size:13px;font-weight:650}\n.secondary{display:block;color:var(--muted);font-size:12px;margin-top:2px}\n.role{font-weight:500}\n.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}\n.status.away{color:#77766b}\n.status.away .dot{background:#a8a89a}\n.status.busy .dot{background:#ac873e}\n.pending{background:#faf8f1}\n.pending .avatar{background:transparent;border:1px dashed #bdb8a6;color:#827b65}\n.pending-badge{display:inline-block;background:#f0ead8;color:#7a622d;border-radius:4px;padding:3px 7px;font-size:11px;font-weight:600}\n.footnote{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font-size:11px;color:var(--muted)}\n.footnote p{margin:0}\n.footnote strong{font-weight:600;color:#515e51}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media(max-width:760px){\n.topbar{padding:18px 20px}\n.brand{gap:16px}.coop{padding-left:16px;font-size:12px}.tagline{display:none}\nmain{padding:26px 20px}\n.intro{display:block;margin-bottom:22px}\nh1{font-size:30px}.subtitle{max-width:320px}\n.invite{margin-top:21px;gap:14px}.hint{max-width:155px}\n.filters{padding:18px 16px;gap:13px;grid-template-columns:minmax(0,1fr)}\n.summary{padding:0 16px 15px;font-size:11px}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}\ntable,tbody{display:block;width:100%}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) 100px;column-gap:10px;row-gap:10px;border-top:1px solid var(--line);padding:15px 16px}\ntd,th:first-child,td:first-child{display:block;width:auto;padding:0;border:0}\ntd:first-child{grid-column:1;grid-row:1}\ntd:nth-child(2){grid-column:1;grid-row:2;padding-left:46px}\ntd:nth-child(3){grid-column:2;grid-row:2;color:var(--muted);font-size:11px}\ntd:nth-child(4){grid-column:2;grid-row:1;align-self:center}\n.person{gap:10px;align-items:center}.avatar{width:36px;height:36px}\n.name{font-size:12px}.secondary{font-size:10px}\n.role{font-size:11px}.status{font-size:10px;gap:5px}\n.pending-badge{font-size:10px;line-height:1.4}\n.footnote{display:block;font-size:10px}.footnote p+p{margin-top:6px}\n}\n</style>\n</head>\n<body>\n<header>\n  <div class=\"topbar\">\n    <div class=\"brand\"><span class=\"wordmark\">North<span style=\"color:#7a8b67\">.</span></span><span class=\"coop\">Oakland Food Co-op</span></div>\n    <span class=\"tagline\">Member-owned. Community-led.</span>\n  </div>\n</header>\n<main>\n  <section class=\"intro\" aria-labelledby=\"title\">\n    <div>\n      <p class=\"eyebrow\">Our people</p>\n      <h1 id=\"title\">Team directory</h1>\n      <p class=\"subtitle\">Good food takes a team. Find the people behind our co-op.</p>\n    </div>\n    <div class=\"invite\">\n      <button type=\"button\"><span class=\"plus\" aria-hidden=\"true\">+</span>Invite member</button>\n      <p class=\"hint\">For staff, growers &amp; volunteer leads.</p>\n    </div>\n  </section>\n  <section class=\"directory\" aria-label=\"Co-op team members\">\n    <form class=\"filters\" role=\"search\">\n      <div>\n        <label for=\"people\">Search people</label>\n        <div class=\"search\">\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 5 5\"/></svg>\n          <input id=\"people\" name=\"people\" type=\"search\" placeholder=\"Name, role or email\">\n        </div>\n      </div>\n      <div>\n        <label for=\"department\">Department</label>\n        <select id=\"department\" name=\"department\">\n          <option>All departments</option>\n          <option>Design</option>\n          <option>Engineering</option>\n          <option>Community</option>\n          <option>Food &amp; sourcing</option>\n          <option>Operations</option>\n        </select>\n      </div>\n    </form>\n    <div class=\"summary\"><span><strong>6 members</strong> in our co-op</span><span class=\"pending-count\"><span class=\"dot\" aria-hidden=\"true\"></span>1 invitation pending</span></div>\n    <table>\n      <caption class=\"sr-only\">Six team members and one pending invitation, with roles, locations and availability.</caption>\n      <thead><tr><th scope=\"col\">Member</th><th scope=\"col\">Role / department</th><th scope=\"col\">Location</th><th scope=\"col\">Availability / status</th></tr></thead>\n      <tbody>\n        <tr>\n          <td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">JM</span><div><span class=\"name\">Jules Martin</span><span class=\"secondary\">jules@north.coop</span></div></div></td>\n          <td><span class=\"role\">Service designer</span><span class=\"secondary\">Design</span></td>\n          <td>Oakland, CA<span class=\"secondary\">Co-op office</span></td>\n          <td><span class=\"status\"><span class=\"dot\" aria-hidden=\"true\"></span>Available</span></td>\n        </tr>\n        <tr>\n          <td><div class=\"person\"><span class=\"avatar slate\" aria-hidden=\"true\">MP</span><div><span class=\"name\">Mina Park</span><span class=\"secondary\">mina@north.coop</span></div></div></td>\n          <td><span class=\"role\">Platform engineer</span><span class=\"secondary\">Engineering</span></td>\n          <td>Portland, OR<span class=\"secondary\">Remote</span></td>\n          <td><span class=\"status away\"><span class=\"dot\" aria-hidden=\"true\"></span>Back Monday</span></td>\n        </tr>\n        <tr>\n          <td><div class=\"person\"><span class=\"avatar clay\" aria-hidden=\"true\">TB</span><div><span class=\"name\">Theo Brooks</span><span class=\"secondary\">theo@north.coop</span></div></div></td>\n          <td><span class=\"role\">Food systems engineer</span><span class=\"secondary\">Engineering</span></td>\n          <td>Oakland, CA<span class=\"secondary\">Co-op office</span></td>\n          <td><span class=\"status\"><span class=\"dot\" aria-hidden=\"true\"></span>Available</span></td>\n        </tr>\n        <tr>\n          <td><div class=\"person\"><span class=\"avatar gold\" aria-hidden=\"true\">AO</span><div><span class=\"name\">Ada Okafor</span><span class=\"secondary\">ada@north.coop</span></div></div></td>\n          <td><span class=\"role\">Member experience lead</span><span class=\"secondary\">Community</span></td>\n          <td>Berkeley, CA<span class=\"secondary\">Neighborhood store</span></td>\n          <td><span class=\"status busy\"><span class=\"dot\" aria-hidden=\"true\"></span>Back at 2 pm</span></td>\n        </tr>\n        <tr>\n          <td><div class=\"person\"><span class=\"avatar clay\" aria-hidden=\"true\">RA</span><div><span class=\"name\">Rosa Alvarez</span><span class=\"secondary\">rosa@north.coop</span></div></div></td>\n          <td><span class=\"role\">Produce &amp; grower lead</span><span class=\"secondary\">Food &amp; sourcing</span></td>\n          <td>Richmond, CA<span class=\"secondary\">Distribution hub</span></td>\n          <td><span class=\"status busy\"><span class=\"dot\" aria-hidden=\"true\"></span>On delivery</span></td>\n        </tr>\n        <tr>\n          <td><div class=\"person\"><span class=\"avatar slate\" aria-hidden=\"true\">EC</span><div><span class=\"name\">Eli Chen</span><span class=\"secondary\">eli@north.coop</span></div></div></td>\n          <td><span class=\"role\">Volunteer coordinator</span><span class=\"secondary\">Operations</span></td>\n          <td>Oakland, CA<span class=\"secondary\">Neighborhood store</span></td>\n          <td><span class=\"status\"><span class=\"dot\" aria-hidden=\"true\"></span>Available</span></td>\n        </tr>\n        <tr class=\"pending\">\n          <td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">SR</span><div><span class=\"name\">Sam Rivera</span><span class=\"secondary\">sam@eastbaygrowers.org</span></div></div></td>\n          <td><span class=\"role\">Grower liaison</span><span class=\"secondary\">Food &amp; sourcing</span></td>\n          <td>Richmond, CA<span class=\"secondary\">Grower partner</span></td>\n          <td><span class=\"pending-badge\">Pending invitation</span><span class=\"secondary\">Sent Jun 12</span></td>\n        </tr>\n      </tbody>\n    </table>\n  </section>\n  <footer class=\"footnote\">\n    <p><strong>Recent update:</strong> Jules Martin joined Design · Jun 11</p>\n    <p>Visible only to members of this workspace.</p>\n  </footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-7","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for Morrow. Include Search people, department select with Design and Engineering, six people including Kai Nguyen, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves a community food co-op. Adapt supporting copy and secondary details to that audience. Make long names and uneven text lengths feel intentional rather than forcing equal-height blocks. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a very restrained two-tone visual language with clear hierarchy. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory · Morrow</title>\n<style>\n:root{--paper:#f8f9f4;--white:#fff;--ink:#233e32;--muted:#647368;--line:#d9e1d7;--wash:#edf2e9}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}\nbutton,input,select{font:inherit;color:inherit}\nbutton,input,select{border-radius:6px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #879c78;outline-offset:3px}\n.topbar{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:20px}\n.brand{font-size:27px;font-weight:750;letter-spacing:-1.3px}\n.workspace{display:flex;align-items:center;gap:24px}\n.workspace span{border-left:1px solid var(--line);padding-left:24px;color:var(--muted);font-size:13px}\n.account{display:flex;align-items:center;gap:10px}\n.account strong{font-size:13px;font-weight:600}\n.account small{display:block;font-size:11px;color:var(--muted)}\n.avatar{width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;background:var(--wash);border:1px solid var(--line);border-radius:50%;font-size:13px;font-weight:600;letter-spacing:.3px}\n.account .avatar{width:34px;height:34px;flex-basis:34px;font-size:11px}\nmain{max-width:1168px;margin:0 auto;padding:46px 32px 32px}\n.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:700;margin:0 0 12px;color:var(--muted)}\n.heading{display:flex;align-items:center;justify-content:space-between;gap:24px}\nh1{font-size:40px;line-height:1.15;letter-spacing:-1.6px;margin:0 0 12px;font-weight:600}\n.intro{margin:0;color:var(--muted);font-size:15px;max-width:540px}\n.invite{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:11px 17px;white-space:nowrap;font-weight:600;display:flex;align-items:center;gap:12px}\n.plus{font-size:22px;line-height:16px;font-weight:400}\n.filters{display:flex;align-items:end;gap:16px;margin:32px 0 24px}\n.field{display:flex;flex-direction:column;gap:7px}\n.field label{font-size:12px;font-weight:600}\n.search{width:360px}\ninput,select{background:var(--white);border:1px solid #bdcbbc;height:44px;width:100%;padding:0 12px}\ninput::placeholder{color:#7c887d;opacity:1}\nselect{min-width:200px;padding-right:28px}\n.roster{background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.roster-title{display:flex;align-items:baseline;gap:12px;padding:17px 22px;border-bottom:1px solid var(--line)}\n.roster-title h2{margin:0;font-size:15px;font-weight:600}\n.roster-title p{margin:0;color:var(--muted);font-size:12px}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}\nth{font-size:11px;letter-spacing:.6px;font-weight:600;color:var(--muted);background:var(--paper);padding:11px 22px;border-bottom:1px solid var(--line)}\nth:first-child{width:38%}\nth:nth-child(2){width:17%}\nth:nth-child(3){width:23%}\nth:nth-child(4){width:22%}\ntd{padding:20px 22px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}\ntbody tr:last-child td{border-bottom:0}\n.person{display:flex;align-items:center;gap:13px}\n.person-info{min-width:0}\n.name{font-size:14px;font-weight:600;line-height:1.4}\n.secondary{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}\n.department{font-size:12px}\n.location{font-size:13px}\n.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:1.4}\n.dot{height:6px;width:6px;flex:0 0 6px;border-radius:50%;background:var(--ink)}\n.dot.out{background:transparent;border:1px solid var(--muted)}\n.dot.later{background:#9aab91}\n.availability .secondary{padding-left:13px}\n.pending{background:#f5f7f1}\n.pending .avatar{background:transparent;border-style:dashed;color:var(--muted)}\n.pending-label{display:inline-block;font-size:11px;font-weight:600;border:1px solid #b6c3ac;border-radius:4px;padding:3px 7px}\n.mobile-label{display:none}\n.note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;color:var(--muted);font-size:12px;max-width:650px}\n.note svg{flex:0 0 26px;color:var(--ink);margin-top:1px}\n.note p{margin:0}\n.note strong{font-weight:600;color:var(--ink)}\nfooter{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:36px;padding-top:16px;color:var(--muted);font-size:11px}\n@media(max-width:650px){\n.topbar{height:64px;padding:0 20px}\n.workspace{gap:14px}\n.workspace span{font-size:11px;padding-left:14px;max-width:120px;line-height:1.4}\n.account-text{display:none}\n.brand{font-size:25px}\nmain{padding:27px 20px 24px}\n.eyebrow{font-size:10px;margin-bottom:10px}\n.heading{display:block}\nh1{font-size:33px;letter-spacing:-1.2px;margin-bottom:9px}\n.intro{font-size:14px}\n.invite{margin-top:18px;padding:9px 14px;font-size:13px}\n.filters{margin:24px 0 20px;gap:12px}\n.search{width:auto;flex:1;min-width:0}\n.field{min-width:0}\n.filters .field:last-child{width:138px}\nselect{min-width:0;padding-left:9px;font-size:13px}\ninput{font-size:13px}\n.roster-title{padding:13px 15px;gap:10px;flex-wrap:wrap}\n.roster-title p{font-size:11px}\ntable,tbody{display:block}\nthead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\ntr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;padding:17px 15px;border-bottom:1px solid var(--line)}\ntr:last-child{border-bottom:0}\ntd{display:block;border:0;padding:0;min-width:0}\ntd:first-child{grid-column:1/-1}\n.person{gap:11px}\n.person-info{flex:1}\n.avatar{width:38px;height:38px;flex-basis:38px;font-size:12px}\n.name{font-size:14px}\n.mobile-label{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}\n.department,.location{font-size:12px}\n.location .secondary{margin-top:1px;font-size:11px}\ntd.availability{grid-column:1/-1}\n.availability .secondary{display:inline;padding-left:7px;margin:0;font-size:11px}\n.note{font-size:11px;margin-top:16px}\nfooter{margin-top:26px;align-items:start}\nfooter span:last-child{text-align:right}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"workspace\"><div class=\"brand\">Morrow</div><span>Community food co-op</span></div>\n<div class=\"account\"><div class=\"avatar\" aria-hidden=\"true\">JD</div><div class=\"account-text\"><strong>Jun Davis</strong><small>Workspace admin</small></div></div>\n</header>\n<main id=\"directory\">\n<p class=\"eyebrow\">WORKSPACE / PEOPLE</p>\n<div class=\"heading\">\n<div><h1>Team directory</h1><p class=\"intro\">Good food takes a team. Find the people helping our co-op grow.</p></div>\n<button class=\"invite\" type=\"button\"><span class=\"plus\" aria-hidden=\"true\">+</span>Invite member</button>\n</div>\n<form class=\"filters\" role=\"search\">\n<div class=\"field search\"><label for=\"people\">Search people</label><input type=\"search\" id=\"people\" name=\"people\" placeholder=\"Name or role\"></div>\n<div class=\"field\"><label for=\"department\">Department</label><select id=\"department\" name=\"department\"><option>All departments</option>Design</option><option>Engineering</option><option>Community</option><option>Operations</option></select></div>\n</form>\n<section class=\"roster\" aria-labelledby=\"roster-heading\">\n<div class=\"roster-title\"><h2 id=\"roster-heading\">Our people</h2><p>6 members · 1 pending invitation</p></div>\n<table aria-label=\"Morrow team members and pending invitations\">\n<thead><tr><th scope=\"col\">Person</th><th scope=\"col\">Department</th><th scope=\"col\">Location</th><th scope=\"col\">Availability</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"person\"><div class=\"avatar\" aria-hidden=\"true\">KN</div><div class=\"person-info\"><div class=\"name\">Kai Nguyen</div><span class=\"secondary\">Product designer</span></div></div></td>\n<td class=\"department\"><span class=\"mobile-label\">Department</span>Design</td>\n<td class=\"location\"><span class=\"mobile-label\">Location</span>Oakland, CA<span class=\"secondary\">Temescal co-op</span></td>\n<td class=\"availability\"><span class=\"status\"><i class=\"dot\" aria-hidden=\"true\"></i>Available today</span><span class=\"secondary\">9 am–3 pm PT</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><div class=\"avatar\" aria-hidden=\"true\">AR</div><div class=\"person-info\"><div class=\"name\">Alexandra Rivera-Santos</div><span class=\"secondary\">Member experience design lead</span></div></div></td>\n<td class=\"department\"><span class=\"mobile-label\">Department</span>Design</td>\n<td class=\"location\"><span class=\"mobile-label\">Location</span>Berkeley, CA<span class=\"secondary\">Remote</span></td>\n<td class=\"availability\"><span class=\"status\"><i class=\"dot\" aria-hidden=\"true\"></i>Available today</span><span class=\"secondary\">10 am–4 pm PT</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><div class=\"avatar\" aria-hidden=\"true\">IO</div><div class=\"person-info\"><div class=\"name\">Imani Okafor</div><span class=\"secondary\">Software engineer</span></div></div></td>\n<td class=\"department\"><span class=\"mobile-label\">Department</span>Engineering</td>\n<td class=\"location\"><span class=\"mobile-label\">Location</span>Richmond, CA<span class=\"secondary\">Remote</span></td>\n<td class=\"availability\"><span class=\"status\"><i class=\"dot later\" aria-hidden=\"true\"></i>Back this afternoon</span><span class=\"secondary\">1–5 pm PT</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><div class=\"avatar\" aria-hidden=\"true\">TB</div><div class=\"person-info\"><div class=\"name\">Theo Brooks</div><span class=\"secondary\">Frontend engineer</span></div></div></td>\n<td class=\"department\"><span class=\"mobile-label\">Department</span>Engineering</td>\n<td class=\"location\"><span class=\"mobile-label\">Location</span>Oakland, CA<span class=\"secondary\">Temescal co-op</span></td>\n<td class=\"availability\"><span class=\"status\"><i class=\"dot out\" aria-hidden=\"true\"></i>Out today</span><span class=\"secondary\">Back tomorrow</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><div class=\"avatar\" aria-hidden=\"true\">MP</div><div class=\"person-info\"><div class=\"name\">Mina Patel</div><span class=\"secondary\">Member &amp; volunteer coordinator</span></div></div></td>\n<td class=\"department\"><span class=\"mobile-label\">Department</span>Community</td>\n<td class=\"location\"><span class=\"mobile-label\">Location</span>Alameda, CA<span class=\"secondary\">Island pickup hub</span></td>\n<td class=\"availability\"><span class=\"status\"><i class=\"dot\" aria-hidden=\"true\"></i>Available today</span><span class=\"secondary\">7 am–1 pm PT</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><div class=\"avatar\" aria-hidden=\"true\">JL</div><div class=\"person-info\"><div class=\"name\">Joseph Lee</div><span class=\"secondary\">Produce sourcing &amp; distribution lead</span></div></div></td>\n<td class=\"department\"><span class=\"mobile-label\">Department</span>Operations</td>\n<td class=\"location\"><span class=\"mobile-label\">Location</span>Oakland, CA<span class=\"secondary\">North Oakland packing space</span></td>\n<td class=\"availability\"><span class=\"status\"><i class=\"dot later\" aria-hidden=\"true\"></i>On a farm visit</span><span class=\"secondary\">Back at 2 pm PT</span></td>\n</tr>\n<tr class=\"pending\">\n<td><div class=\"person\"><div class=\"avatar\" aria-hidden=\"true\">RT</div><div class=\"person-info\"><div class=\"name\">Rae Thompson</div><span class=\"secondary\">rae.thompson@example.com</span></div></div></td>\n<td class=\"department\"><span class=\"mobile-label\">Department</span>Operations</td>\n<td class=\"location\"><span class=\"mobile-label\">Location</span>Not set<span class=\"secondary\">Added when they join</span></td>\n<td class=\"availability\"><span class=\"pending-label\">Pending invitation</span><span class=\"secondary\">Invited May 14</span></td>\n</tr>\n</tbody>\n</table>\n</section>\n<aside class=\"note\" aria-label=\"About availability\">\n<svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"13\" cy=\"13\" r=\"10\" stroke=\"currentColor\"/><path d=\"M13 6v7l5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"M3 13h2M21 13h2M13 21v2\" stroke=\"currentColor\"/></svg>\n<p><strong>Co-op hours, not online status.</strong> Availability is shared by each teammate to help plan handoffs, pickup days and time together. All times are Pacific.</p>\n</aside>\n<footer><span>Morrow · Rooted in community.</span><span>Staff &amp; co-op collaborators</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-8","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for Fieldwork. Include Search people, department select with Design and Engineering, six people including Maya Chen, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Put the next action first, with a compact secondary summary. Include one unusually long secondary label and handle wrapping naturally. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory — Fieldwork</title>\n<style>\n:root{color-scheme:light;--ink:#252c28;--muted:#6a706a;--line:#dce0d7;--paper:#f5f5ef;--green:#294d3b}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select{border-radius:3px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a7baa5;outline-offset:3px}\n.shell{max-width:1240px;margin:auto;padding:0 40px}\nheader{border-bottom:1px solid var(--line)}\n.topbar{height:80px;display:flex;justify-content:space-between;align-items:center}\n.brand{font:30px Georgia,serif;letter-spacing:-1.2px}\n.workspace{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}\n.practice-mark{width:30px;height:30px;border:1px solid #bfc7bb;display:grid;place-items:center;font-size:10px;letter-spacing:1px;color:var(--ink)}\nmain{padding-top:38px!important;padding-bottom:32px!important}\n.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}\n.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:8px 0 12px}\nh1{font:40px/1.15 Georgia,serif;letter-spacing:-1.1px;margin:0}\n.invite{background:var(--green);color:#fff;border:1px solid var(--green);padding:11px 17px;white-space:nowrap;display:flex;align-items:center;gap:10px;font-weight:550}\n.plus{font-size:21px;line-height:16px;font-weight:300}\n.summary{color:var(--muted);font-size:13px;margin:0 0 30px}\n.summary span+span:before{content:\"·\";padding:0 9px;color:#a0a699}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:30px;align-items:start}\n.directory{min-width:0;background:#fdfdf9;border:1px solid var(--line);border-radius:4px;overflow:hidden}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;padding:20px;border-bottom:1px solid var(--line)}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\ninput,select{height:40px;width:100%;min-width:0;border:1px solid #ccd2c7;background:#fff;color:var(--ink);padding:0 11px}\ninput::placeholder{color:#81877e}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;top:12px;left:12px;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.6;pointer-events:none}\n.search-wrap input{padding-left:36px}\ntable{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}\ncaption{text-align:left;padding:17px 20px 12px;font-weight:600}\ncaption span{font-weight:400;color:var(--muted);margin-left:8px;font-size:12px}\nth{font-size:10px;letter-spacing:.7px;text-transform:uppercase;font-weight:500;color:var(--muted);padding:0 12px 10px;border-bottom:1px solid var(--line)}\nth:first-child{width:42%;padding-left:20px}\nth:nth-child(2){width:19%}\nth:nth-child(3){width:17%}\nth:last-child{width:22%}\ntd{padding:17px 12px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}\ntd:first-child{padding-left:20px}\ntbody tr:last-child td{border-bottom:0}\n.person{display:flex;gap:11px;align-items:center;min-width:0}\n.avatar{width:35px;height:39px;flex:0 0 35px;background:#e6eadd;color:#48583d;display:grid;place-items:center;font-size:11px;letter-spacing:.6px;border-radius:2px}\n.clay{background:#eee4db;color:#7b5b47}\n.slate{background:#e3e8e9;color:#4e6267}\n.rose{background:#ede4e2;color:#785d58}\n.person-copy{min-width:0}\n.name{display:block;font-size:13px;font-weight:600}\n.role{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:3px;overflow-wrap:anywhere}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;line-height:1.3}\n.dot{width:5px;height:5px;border-radius:50%;background:#608063;flex-shrink:0}\n.busy .dot{background:#b18a4f}\n.focus .dot{background:#87939b}\n.pending{background:#f7f6ef}\n.pending .avatar{border:1px dashed #c4c8bb;background:transparent;color:#82877b}\n.pending-status{color:#8a6b36;gap:5px}\n.pending-status .dot{background:transparent;border:1px solid #ad8d54;width:6px;height:6px}\naside{border-top:2px solid #52614e;padding-top:15px}\naside h2{font:21px/1.2 Georgia,serif;margin:5px 0 18px}\n.facts{margin:0}\n.facts>div{padding:12px 0;border-top:1px solid var(--line)}\ndt{font-size:11px;color:var(--muted);margin-bottom:4px}\ndd{margin:0;font-size:13px;line-height:1.5}\n.available-count{color:#42613e}\n.note{margin:17px 0 0;font-size:11px;line-height:1.6;color:var(--muted)}\nfooter{padding-top:17px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:15px}\n@media(min-width:1100px){td{padding-top:19px;padding-bottom:19px}}\n@media(max-width:1000px){.layout{grid-template-columns:minmax(0,1fr)}aside{display:grid;grid-template-columns:160px 1fr;gap:0 24px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.facts>div{border:0;padding:0}.note{grid-column:2;margin-top:10px}}\n@media(max-width:600px){\n.shell{padding:0 20px}.topbar{height:62px}.brand{font-size:27px}.workspace{font-size:10px;gap:8px}.practice-mark{display:none}\nmain{padding-top:23px!important}.eyebrow{font-size:9px}.heading{gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:7px}\nh1{font-size:33px}.invite{padding:9px 12px;font-size:12px}.summary{font-size:11px;margin-bottom:21px}.summary span+span:before{padding:0 5px}\n.layout{gap:24px}.filters{grid-template-columns:minmax(0,1fr) 126px;padding:14px;gap:10px}label{font-size:11px}input,select{font-size:12px;padding-right:5px}.search-wrap input{padding-left:30px}.search-wrap svg{left:9px;width:14px}\ntable,tbody{display:block}caption{display:block;padding:13px 14px 10px;font-size:12px;border-bottom:1px solid var(--line)}caption span{font-size:11px}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntbody tr{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:6px 8px;padding:13px 14px;border-bottom:1px solid var(--line)}\ntbody tr:last-child{border:0}\ntd,td:first-child{display:block;border:0;padding:0;min-width:0}\ntd:first-child{grid-column:1;grid-row:1}\ntd:nth-child(2){grid-column:1;grid-row:2;padding-left:41px;font-size:10px;color:var(--muted)}\ntd:nth-child(3){grid-column:2;grid-row:2;font-size:10px;color:var(--muted);text-align:right}\ntd:last-child{grid-column:2;grid-row:1;text-align:right;padding-top:2px}\n.person{gap:9px;align-items:flex-start}.avatar{width:32px;height:35px;flex-basis:32px;font-size:10px}.name{font-size:12px}.role{font-size:10px;margin-top:2px}.status{font-size:10px;justify-content:flex-end}\naside{display:block}aside h2{font-size:20px;margin:4px 0 13px}.facts{grid-template-columns:1fr 1fr;gap:14px}.facts>div:last-child{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}dt{font-size:10px}dd{font-size:12px}.note{margin-top:12px}\nfooter{font-size:10px}footer span:last-child{white-space:nowrap}\n}\n</style>\n</head>\n<body>\n<header>\n<div class=\"shell topbar\">\n<div class=\"brand\">Fieldwork<span style=\"color:#798574\">.</span></div>\n<div class=\"workspace\"><span>Practice workspace</span><span class=\"practice-mark\" aria-label=\"Fieldwork practice\">FW</span></div>\n</div>\n</header>\n<main class=\"shell\">\n<div class=\"eyebrow\">People &amp; practice</div>\n<div class=\"heading\">\n<h1>Team directory</h1>\n<button class=\"invite\" type=\"button\"><span class=\"plus\" aria-hidden=\"true\">+</span>Invite member</button>\n</div>\n<p class=\"summary\"><span>6 members</span><span>3 studios</span><span>1 invitation pending</span></p>\n<div class=\"layout\">\n<section class=\"directory\" aria-label=\"Find a team member\">\n<div class=\"filters\" role=\"search\">\n<div>\n<label for=\"people\">Search people</label>\n<div class=\"search-wrap\">\n<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\"/><path d=\"m13 13 4 4\"/></svg>\n<input id=\"people\" type=\"search\" placeholder=\"Name, role or location\">\n</div>\n</div>\n<div>\n<label for=\"department\">Department</label>\n<select id=\"department\"><option>All departments</option><option>Design</option><option>Engineering</option></select>\n</div>\n</div>\n<table>\n<caption>Practice members <span>6 people · 1 pending</span></caption>\n<thead><tr><th scope=\"col\">Person</th><th scope=\"col\">Department</th><th scope=\"col\">Studio</th><th scope=\"col\">Availability</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">MC</span><div class=\"person-copy\"><span class=\"name\">Maya Chen</span><span class=\"role\">Project architect</span></div></div></td>\n<td>Design</td><td>London</td><td><span class=\"status\"><i class=\"dot\"></i>Available</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar clay\" aria-hidden=\"true\">TO</span><div class=\"person-copy\"><span class=\"name\">Theo Okafor</span><span class=\"role\">Associate director</span></div></div></td>\n<td>Design</td><td>Bristol</td><td><span class=\"status busy\"><i class=\"dot\"></i>In a review</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar rose\" aria-hidden=\"true\">SR</span><div class=\"person-copy\"><span class=\"name\">Sofia Rossi</span><span class=\"role\">Interior architect</span></div></div></td>\n<td>Design</td><td>London</td><td><span class=\"status\"><i class=\"dot\"></i>Available</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar slate\" aria-hidden=\"true\">EM</span><div class=\"person-copy\"><span class=\"name\">Eli Morgan</span><span class=\"role\">Structural engineer</span></div></div></td>\n<td>Engineering</td><td>Manchester</td><td><span class=\"status busy\"><i class=\"dot\"></i>On site</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">LF</span><div class=\"person-copy\"><span class=\"name\">Lena Fischer</span><span class=\"role\">Environmental design engineer</span></div></div></td>\n<td>Engineering</td><td>Bristol</td><td><span class=\"status\"><i class=\"dot\"></i>Available</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar clay\" aria-hidden=\"true\">NP</span><div class=\"person-copy\"><span class=\"name\">Noah Patel</span><span class=\"role\">Digital delivery &amp; building information modelling coordination</span></div></div></td>\n<td>Engineering</td><td>London</td><td><span class=\"status focus\"><i class=\"dot\"></i>Focus time</span></td>\n</tr>\n<tr class=\"pending\">\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">RH</span><div class=\"person-copy\"><span class=\"name\">Robin Hughes</span><span class=\"role\">r.hughes@fieldwork.studio</span></div></div></td>\n<td>Design</td><td>London</td><td><span class=\"status pending-status\"><i class=\"dot\"></i>Pending invitation</span></td>\n</tr>\n</tbody>\n</table>\n</section>\n<aside aria-labelledby=\"practice-details\">\n<div><div class=\"eyebrow\">At a glance</div><h2 id=\"practice-details\">Studio rhythm</h2></div>\n<dl class=\"facts\">\n<div><dt>Available now</dt><dd class=\"available-count\">3 of 6 members</dd></div>\n<div><dt>Shared studio hours</dt><dd>09:30–17:30 · UK</dd></div>\n<div><dt>Next practice gathering</dt><dd>Thursday pin-up<br>14:00 · London + online</dd></div>\n</dl>\n<p class=\"note\">From desk crits to site visits, availability helps you find the right moment to connect.</p>\n</aside>\n</div>\n<footer><span>Availability is shared by each team member.</span><span>Fieldwork / People</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-11","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for North. Include Search people, department select with Design and Engineering, six people including Noah Tremblay, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves an architecture practice. Adapt supporting copy and secondary details to that audience. Use an editorial heading with a practical, information-rich body. Use a modest inline SVG mark or miniature visual to explain a relevant detail, not a generic decorative hero. Use a cool neutral surface and a single confident accent. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory — North</title>\n<style>\n:root{--bg:#f1f3f5;--paper:#fff;--ink:#202b36;--muted:#64717e;--line:#dce1e6;--accent:#2458b5}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select{border-radius:5px}\nbutton{cursor:pointer}\nbutton:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9ab8ed;outline-offset:3px}\n.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}\n.brand{display:flex;align-items:center;gap:22px}\n.wordmark{font:700 31px/1 Georgia,serif;letter-spacing:-1.5px}\n.brand-note{border-left:1px solid #ccd3da;padding-left:22px;color:var(--muted);font-size:12px}\n.account{display:flex;align-items:center;gap:10px;font-size:12px}\n.account-avatar{width:32px;height:32px;border:1px solid #cbd2da;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600}\nmain{max-width:1160px;padding:46px 32px 32px;margin:auto}\n.intro{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-bottom:36px}\n.eyebrow{font-size:11px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted);margin:0 0 9px}\nh1{font:400 52px/1.08 Georgia,serif;letter-spacing:-1.8px;margin:0 0 15px}\n.lede{color:var(--muted);margin:0;max-width:440px;font-size:15px}\n.studios{width:250px;flex-shrink:0;border-left:1px solid var(--line);padding-left:24px}\n.studios h2{font-size:12px;font-weight:600;margin:0 0 12px}\n.studios svg{display:block;width:100%;height:auto}\n.panel{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}\n.panel-top{padding:22px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}\nh2{margin:0;font-size:17px;font-weight:600}\n.summary{color:var(--muted);font-size:12px;margin:3px 0 0}\n.summary span{margin:0 6px;color:#b0b9c2}\n.invite{border:1px solid var(--accent);background:var(--accent);color:white;min-height:40px;padding:8px 15px;font-size:13px;font-weight:600;white-space:nowrap}\n.invite span{font-size:18px;vertical-align:-1px;margin-right:7px;font-weight:400}\n.filters{display:grid;grid-template-columns:minmax(200px,1fr) 230px;gap:16px;padding:22px 24px 24px}\nlabel{display:block;margin-bottom:7px;font-size:12px;font-weight:600}\ninput,select{width:100%;height:42px;border:1px solid #cbd3dc;background:white;color:var(--ink);padding:0 12px}\ninput::placeholder{color:#7b8793}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;left:12px;top:13px;color:#768390;pointer-events:none}\n.search-wrap input{padding-left:37px}\ntable{width:100%;border-collapse:collapse;text-align:left}\nthead{background:#f7f8fa;border-top:1px solid var(--line)}\nth{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.3px;padding:11px 20px}\ntd{padding:17px 20px;border-top:1px solid #e8ecf0;vertical-align:middle}\nth:first-child,td:first-child{padding-left:24px}\nth:last-child,td:last-child{padding-right:24px}\n.person{display:flex;align-items:center;gap:12px}\n.avatar{height:38px;width:38px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#e8edf3;color:#46586b;font-size:12px;font-weight:600}\n.name{font-weight:600;font-size:13px}\n.secondary{display:block;color:var(--muted);font-size:11px;margin-top:2px}\n.role{font-size:13px}\n.city{font-size:13px}\n.status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;background:#f0f2f5;color:#586574;font-size:11px;font-weight:500;white-space:nowrap}\n.status::before{content:\"\";width:5px;height:5px;border-radius:50%;background:#8793a0}\n.available{color:var(--accent);background:#edf2fc}\n.available::before{background:var(--accent)}\n.pending{background:#fafbfc}\n.pending .avatar{background:transparent;border:1px dashed #aab5c1;color:#6c7885}\n.pending .status{background:transparent;border:1px dashed #b9c3cf;padding:3px 7px}\n.pending .status::before{display:none}\n.table-note{border-top:1px solid var(--line);padding:13px 24px;margin:0;font-size:11px;color:var(--muted)}\nfooter{display:flex;justify-content:space-between;gap:12px;padding:17px 2px;color:var(--muted);font-size:11px}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media(max-width:700px){\n.topbar{height:64px;padding:0 20px}.brand{gap:14px}.brand-note{padding-left:14px;font-size:10px}.account-name{display:none}\nmain{padding:28px 16px 20px}.intro{display:block;margin-bottom:24px}h1{font-size:40px;letter-spacing:-1.3px}.lede{font-size:13px;max-width:330px}\n.studios{width:100%;border-left:0;padding:17px 0 0;display:flex;gap:16px;align-items:center}.studios h2{font-size:11px;max-width:72px;margin:0;line-height:1.5}.studios svg{width:220px;max-width:calc(100% - 88px)}\n.panel-top{padding:18px 16px 0}h2{font-size:16px}.summary{font-size:11px}.invite{padding:8px 11px;font-size:12px}.invite span{margin-right:4px}\n.filters{padding:18px 16px;grid-template-columns:minmax(0,1fr) 128px;gap:10px}input,select{font-size:12px;padding:0 8px}.search-wrap input{padding-left:31px}.search-wrap svg{left:9px}\ntable,tbody{display:block}thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}\ntr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"person status\" \"role studio\";gap:8px 10px;padding:14px 16px;border-top:1px solid var(--line)}\ntd,th:first-child,td:first-child,th:last-child,td:last-child{padding:0;border:0;min-width:0}\ntd:nth-child(1){grid-area:person}td:nth-child(2){grid-area:role;padding-left:42px}td:nth-child(3){grid-area:studio;text-align:right}td:nth-child(4){grid-area:status;align-self:center;text-align:right}\n.avatar{width:32px;height:32px;font-size:10px}.person{gap:10px}.name{font-size:12px}.role,.city{font-size:11px}.secondary{font-size:10px;margin-top:0}.status{font-size:10px;padding:3px 6px;gap:5px}\n.table-note{padding:12px 16px;line-height:1.6}footer{font-size:10px;flex-wrap:wrap;padding-top:13px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"brand\"><span class=\"wordmark\">North.</span><span class=\"brand-note\">Architecture &amp; interiors</span></div>\n<div class=\"account\"><span class=\"account-name\">Lena Kim</span><span class=\"account-avatar\" aria-label=\"Lena Kim\">LK</span></div>\n</header>\n<main>\n<header class=\"intro\">\n<div>\n<p class=\"eyebrow\">Our practice / People</p>\n<h1>Team directory</h1>\n<p class=\"lede\">Find the right colleague, from the first sketch to the final site visit.</p>\n</div>\n<aside class=\"studios\" aria-labelledby=\"studio-title\">\n<h2 id=\"studio-title\">One practice.<br>Three studios.</h2>\n<svg viewBox=\"0 0 240 52\" role=\"img\" aria-label=\"Studio distribution: Toronto 3 people, Montréal 2 people, Vancouver 1 person\">\n<g fill=\"#2458b5\">\n<rect x=\"0\" y=\"0\" width=\"22\" height=\"7\" rx=\"1\"/><rect x=\"26\" y=\"0\" width=\"22\" height=\"7\" rx=\"1\"/><rect x=\"52\" y=\"0\" width=\"22\" height=\"7\" rx=\"1\"/>\n<rect x=\"86\" y=\"0\" width=\"22\" height=\"7\" rx=\"1\"/><rect x=\"112\" y=\"0\" width=\"22\" height=\"7\" rx=\"1\"/>\n<rect x=\"169\" y=\"0\" width=\"22\" height=\"7\" rx=\"1\"/>\n</g>\n<g fill=\"#64717e\" font-family=\"system-ui,sans-serif\" font-size=\"10\">\n<text x=\"0\" y=\"28\">Toronto</text><text x=\"86\" y=\"28\">Montréal</text><text x=\"169\" y=\"28\">Vancouver</text>\n<text x=\"0\" y=\"45\">3 people</text><text x=\"86\" y=\"45\">2 people</text><text x=\"169\" y=\"45\">1 person</text>\n</g>\n</svg>\n</aside>\n</header>\n<section class=\"panel\" aria-labelledby=\"people-title\">\n<div class=\"panel-top\">\n<div><h2 id=\"people-title\">People</h2><p class=\"summary\">6 members <span>·</span> 1 pending invitation</p></div>\n<button class=\"invite\" type=\"button\"><span aria-hidden=\"true\">+</span>Invite member</button>\n</div>\n<form class=\"filters\" role=\"search\">\n<div><label for=\"search\">Search people</label><div class=\"search-wrap\">\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\"/><path d=\"m13 13 4 4\"/></svg>\n<input id=\"search\" name=\"search\" type=\"search\" placeholder=\"Name, role or studio\">\n</div></div>\n<div><label for=\"department\">Department</label><select id=\"department\" name=\"department\"><option>All departments</option><option>Design</option><option>Engineering</option></select></div>\n</form>\n<table>\n<caption class=\"sr-only\">North team members, studios, availability and pending invitations</caption>\n<thead><tr><th scope=\"col\">Person</th><th scope=\"col\">Role &amp; department</th><th scope=\"col\">Studio</th><th scope=\"col\">Availability</th></tr></thead>\n<tbody>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">NT</span><span class=\"name\">Noah Tremblay</span></div></td>\n<td class=\"role\">Project architect<span class=\"secondary\">Design</span></td>\n<td class=\"city\">Montréal<span class=\"secondary\">Eastern time</span></td>\n<td><span class=\"status available\">Available</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">MC</span><span class=\"name\">Maya Chen</span></div></td>\n<td class=\"role\">Design director<span class=\"secondary\">Design</span></td>\n<td class=\"city\">Vancouver<span class=\"secondary\">Pacific time</span></td>\n<td><span class=\"status\">In review</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">SA</span><span class=\"name\">Sofia Alvarez</span></div></td>\n<td class=\"role\">Interior architect<span class=\"secondary\">Design</span></td>\n<td class=\"city\">Toronto<span class=\"secondary\">Eastern time</span></td>\n<td><span class=\"status\">On site</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">EB</span><span class=\"name\">Elliot Brooks</span></div></td>\n<td class=\"role\">BIM coordinator<span class=\"secondary\">Engineering</span></td>\n<td class=\"city\">Toronto<span class=\"secondary\">Eastern time</span></td>\n<td><span class=\"status available\">Available</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">AP</span><span class=\"name\">Amira Patel</span></div></td>\n<td class=\"role\">Structural engineer<span class=\"secondary\">Engineering</span></td>\n<td class=\"city\">Montréal<span class=\"secondary\">Eastern time</span></td>\n<td><span class=\"status\">On leave</span></td>\n</tr>\n<tr>\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">OR</span><span class=\"name\">Oliver Reed</span></div></td>\n<td class=\"role\">Building performance lead<span class=\"secondary\">Engineering</span></td>\n<td class=\"city\">Toronto<span class=\"secondary\">Eastern time</span></td>\n<td><span class=\"status\">At capacity</span></td>\n</tr>\n<tr class=\"pending\">\n<td><div class=\"person\"><span class=\"avatar\" aria-hidden=\"true\">JC</span><span class=\"name\">Jordan Clarke</span></div></td>\n<td class=\"role\">Architectural designer<span class=\"secondary\">Design · Invited 18 Jun</span></td>\n<td class=\"city\">Toronto<span class=\"secondary\">Eastern time</span></td>\n<td><span class=\"status\">Pending invitation</span></td>\n</tr>\n</tbody>\n</table>\n<p class=\"table-note\">Planning a project team? Confirm availability and allocations with the studio lead.</p>\n</section>\n<footer><span>North · Internal practice directory</span><span>Studio counts exclude pending invitations.</span></footer>\n</main>\n</body>\n</html>"}]}
{"id":"sft-team-13","prompt":[{"role":"system","content":"Design a coherent, detailed, usable product interface for the brief. Output exactly one complete <!DOCTYPE html> document with semantic HTML and one inline <style> block. No markdown, explanations, JavaScript, external resources, web fonts, iframes or network requests. Use system fonts; inline SVG is allowed. Use visible associated labels for native form controls, real buttons, inputs, selects and tables. Render required copy verbatim. Design for both 1280px desktop and 390px mobile without horizontal page overflow or clipped controls. Make deliberate choices for typography, color, spacing, information density and visual hierarchy. Add useful detail, realistic content, meaningful status cues, thoughtful empty/error states when asked, and restrained visuals that fit the product. Richness means purposeful craft, not extra decoration, gradients, components or verbosity. Keep code concise, preferably under 3000 tokens. This is a static prototype: do not imply a working backend. Do not include instructions to a reviewer or self-evaluation."},{"role":"user","content":"Create a team directory for Morrow. Include Search people, department select with Design and Engineering, six people including Jules Martin, varied roles, locations, availability and initials avatars. Include Invite member and a clearly labelled pending invitation row. Context: the product serves a field research team. Adapt supporting copy and secondary details to that audience. Use a restrained inline illustration or data graphic only where it explains the content. Include a helpful brief hint beside the main action and one small recent-update detail. Use an understated editorial style with a distinct compact detail area. Keep the whole main task visible and coherent at both sizes. Required visible text: \"Team directory\", \"Search people\", \"Design\", \"Engineering\", \"Invite member\"."}],"completion":[{"role":"assistant","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Team directory — Morrow</title>\n<style>\n:root{--paper:#f7f7f2;--white:#fff;--ink:#243b32;--muted:#68736b;--line:#dfe3da;--green:#37634e}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\nbutton,input,select{font:inherit}\nbutton,input,select,a{outline-offset:4px}\nbutton{cursor:pointer}\n.shell{max-width:1184px;margin:auto;padding:0 32px}\n.topbar{border-bottom:1px solid var(--line)}\n.topbar .shell{height:78px;display:flex;align-items:center;justify-content:space-between}\n.brand{display:flex;align-items:center;gap:12px;font:27px Georgia,serif;letter-spacing:-1px}\n.mark{display:grid;place-items:center;width:30px;height:32px;border:1px solid var(--ink);font-size:22px}\n.workspace{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:12px}\n.account{display:grid;place-items:center;width:32px;height:32px;background:#e5e8df;border-radius:50%;color:var(--ink);font-weight:600;font-size:11px}\nmain{padding-top:27px!important;padding-bottom:30px!important}\n.breadcrumb{font-size:12px;color:var(--muted);margin:0 0 19px}\n.breadcrumb span{margin:0 9px;color:#a3aaa0}\n.page-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}\nh1{font:normal 44px/1.1 Georgia,serif;letter-spacing:-1.6px;margin:0 0 10px}\n.subtitle{margin:0;color:var(--muted)}\n.invite{display:flex;align-items:center;gap:15px;max-width:370px}\n.primary{border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:white;padding:11px 16px;white-space:nowrap;font-weight:600}\n.primary span{font-weight:400;font-size:19px;margin-right:8px;line-height:0}\n.hint{font-size:12px;line-height:1.5;color:var(--muted);margin:0;max-width:162px}\n.layout{display:grid;grid-template-columns:minmax(0,1fr) 218px;gap:28px;align-items:start}\n.directory{min-width:0}\n.filters{display:grid;grid-template-columns:minmax(0,1fr) 198px;gap:16px;margin-bottom:20px}\nlabel{display:block;font-size:12px;font-weight:600;margin-bottom:7px}\ninput,select{width:100%;height:42px;border:1px solid #cdd4c9;background:var(--white);border-radius:4px;color:var(--ink);padding:0 12px;min-width:0}\ninput::placeholder{color:#8a9189}\n.search-wrap{position:relative}\n.search-wrap svg{position:absolute;left:12px;top:13px;color:var(--muted);pointer-events:none}\n.search-wrap input{padding-left:37px}\n.table-card{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--white)}\n.table-title{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;border-bottom:1px solid var(--line)}\n.table-title h2{font-size:13px;font-weight:600;margin:0}\n.count{font-size:11px;color:var(--muted)}\ntable{width:100%;border-collapse:collapse;text-align:left;font-size:12px}\nth{font-size:11px;font-weight:500;color:var(--muted);padding:10px 16px;background:#fafbf7}\ntd{padding:14px 16px;border-top:1px solid var(--line);vertical-align:middle}\n.person{display:flex;align-items:center;gap:11px}\n.avatar{width:35px;height:35px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#e2e9de;color:#435942;font-size:11px;font-weight:600;letter-spacing:.3px}\n.peach{background:#eee2d6;color:#7c5c3f}\n.blue{background:#e0e8eb;color:#49636e}\n.lilac{background:#e9e3ec;color:#6c5976}\n.sand{background:#ece9d9;color:#6b6546}\n.name{display:block;font-weight:600;font-size:13px;color:var(--ink)}\n.role{display:block;color:var(--muted);font-size:11px;margin-top:2px}\n.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap}\n.dot{width:6px;height:6px;border-radius:50%;background:#4e795b;flex-shrink:0}\n.field .dot{background:#aa7b38}\n.limited .dot{background:#969b93}\n.pending{background:#fafaf6}\n.pending .avatar{background:transparent;border:1px dashed #b8c0b1;color:var(--muted)}\n.pending .status{white-space:normal;color:#79643f}\n.pending .dot{background:transparent;border:1px solid #a4874f}\n.empty-value{color:#90978c}\n.recent{font-size:11px;color:var(--muted);margin:14px 0 0;display:flex;align-items:baseline;gap:9px}\n.recent strong{font-weight:600;white-space:nowrap;color:#59665b}\naside{border-top:2px solid var(--ink);padding-top:16px;margin-top:3px}\n.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:600;margin:0 0 18px}\n.metrics{display:flex;gap:32px;padding-bottom:19px;border-bottom:1px solid var(--line)}\n.metric strong{display:block;font:30px/1.2 Georgia,serif}\n.metric span{display:block;font-size:11px;color:var(--muted);margin-top:4px}\naside h3{font-size:13px;margin:20px 0 7px}\naside p{font-size:12px;color:var(--muted);margin:0}\n.cities{color:var(--ink);margin-bottom:9px}\n.checkin{margin-top:21px;padding:13px 14px;background:#ecefe5;border-radius:3px}\n.checkin h3{margin:0 0 5px;font-size:11px}\n.checkin p{font-size:11px}\n.checkin strong{font-weight:500;color:var(--ink)}\n.note{font-size:11px;margin-top:18px}\n@media(max-width:900px){\n.layout{grid-template-columns:minmax(0,1fr)}\naside{display:grid;grid-template-columns:1fr 1.4fr 1.3fr;gap:22px;margin-top:0}\n.aside-intro .eyebrow{margin-bottom:10px}\n.metrics{padding-bottom:0;border:0}\naside h3{margin-top:0}\n.checkin{margin:0;align-self:start}\n.note{grid-column:1/-1;margin-top:-8px}\n}\n@media(max-width:600px){\n.shell{padding-left:20px;padding-right:20px}\n.topbar .shell{height:64px}\n.brand{font-size:24px}\n.workspace{gap:10px;font-size:10px}\nmain{padding-top:20px!important}\n.breadcrumb{margin-bottom:16px}\n.page-heading{display:block;margin-bottom:24px}\nh1{font-size:36px;letter-spacing:-1.1px}\n.subtitle{font-size:12px}\n.invite{margin-top:20px;gap:14px}\n.primary{padding:10px 13px;font-size:12px}\n.hint{font-size:11px}\n.filters{grid-template-columns:minmax(0,1fr) 150px;gap:10px;margin-bottom:16px}\ninput,select{font-size:12px;padding-right:6px}\nlabel{font-size:11px}\n.table-title{padding:12px}\ntable,tbody{display:block;width:100%}\nthead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\ntr{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:8px 4px;padding:13px 12px;border-top:1px solid var(--line)}\ntd{border:0;padding:0;min-width:0}\ntd:first-child{grid-column:1;grid-row:1}\ntd:nth-child(2){grid-column:1;grid-row:2;padding-left:45px;color:var(--muted);font-size:10px}\ntd:nth-child(3){grid-column:2;grid-row:2;text-align:right;color:var(--muted);font-size:10px}\ntd:last-child{grid-column:2;grid-row:1;text-align:right;align-self:center}\n.person{gap:10px}\n.avatar{width:30px;height:30px;font-size:10px}\n.name{font-size:12px}\n.role{font-size:10px}\n.status{font-size:10px;gap:5px;justify-content:flex-end}\n.recent{font-size:10px;gap:7px}\naside{grid-template-columns:1fr 1fr;gap:17px;margin-top:5px}\n.metrics{gap:24px}\n.metric strong{font-size:25px}\n.checkin{grid-column:1/-1}\n.note{margin-top:-5px}\n}\n</style>\n</head>\n<body>\n<header class=\"topbar\">\n<div class=\"shell\">\n<div class=\"brand\"><span class=\"mark\" aria-hidden=\"true\">m</span>Morrow</div>\n<div class=\"workspace\"><span>Field research workspace</span><span class=\"account\" aria-label=\"Your profile: Kit Morgan\">KM</span></div>\n</div>\n</header>\n<main class=\"shell\">\n<p class=\"breadcrumb\">Workspace <span aria-hidden=\"true\">/</span> People</p>\n<div class=\"page-heading\">\n<div><h1>Team directory</h1><p class=\"subtitle\">The people behind the questions, visits and field notes.</p></div>\n<div class=\"invite\"><button type=\"button\" class=\"primary\"><span aria-hidden=\"true\">+</span>Invite member</button><p class=\"hint\">Bring colleagues in before the next field round.</p></div>\n</div>\n<div class=\"layout\">\n<section class=\"directory\" aria-label=\"People directory\">\n<div class=\"filters\" role=\"search\" aria-label=\"Find a team member\">\n<div><label for=\"people-search\">Search people</label><div class=\"search-wrap\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"m12 12 5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg><input id=\"people-search\" type=\"search\" placeholder=\"Name or role\"></div></div>\n<div><label for=\"department\">Department</label><select id=\"department\"><option>All departments</option><option>Design</option><option>Engineering</option><option>Research</option><option>Operations</option></select></div>\n</div>\n<div class=\"table-card\">\n<div class=\"table-title\"><h2>Everyone</h2><span class=\"count\">6 members · 1 invitation</span></div>\n<table aria-label=\"Team members and pending invitations\">\n<thead><tr><th scope=\"col\">Person</th><th scope=\"col\">Department</th><th scope=\"col\">Location</th><th scope=\"col\">Availability</th></tr></thead>\n<tbody>\n<tr><td><div class=\"person\"><span class=\"avatar\">JM</span><div><span class=\"name\">Jules Martin</span><span class=\"role\">Research designer</span></div></div></td><td>Design</td><td>London, UK</td><td><span class=\"status\"><i class=\"dot\"></i>Available</span></td></tr>\n<tr><td><div class=\"person\"><span class=\"avatar peach\">AO</span><div><span class=\"name\">Amara Okafor</span><span class=\"role\">Field researcher</span></div></div></td><td>Research</td><td>Accra, GH</td><td><span class=\"status field\"><i class=\"dot\"></i>In the field</span></td></tr>\n<tr><td><div class=\"person\"><span class=\"avatar blue\">TC</span><div><span class=\"name\">Theo Chen</span><span class=\"role\">Research engineer</span></div></div></td><td>Engineering</td><td>Singapore, SG</td><td><span class=\"status\"><i class=\"dot\"></i>Available</span></td></tr>\n<tr><td><div class=\"person\"><span class=\"avatar lilac\">SR</span><div><span class=\"name\">Sofia Reyes</span><span class=\"role\">Research ops lead</span></div></div></td><td>Operations</td><td>Bogotá, CO</td><td><span class=\"status limited\"><i class=\"dot\"></i>Limited</span></td></tr>\n<tr><td><div class=\"person\"><span class=\"avatar sand\">NP</span><div><span class=\"name\">Noah Patel</span><span class=\"role\">Product designer</span></div></div></td><td>Design</td><td>London, UK</td><td><span class=\"status\"><i class=\"dot\"></i>Available</span></td></tr>\n<tr><td><div class=\"person\"><span class=\"avatar blue\">LF</span><div><span class=\"name\">Lina Fischer</span><span class=\"role\">Data engineer</span></div></div></td><td>Engineering</td><td>Berlin, DE</td><td><span class=\"status field\"><i class=\"dot\"></i>In the field</span></td></tr>\n<tr class=\"pending\"><td><div class=\"person\"><span class=\"avatar\">EM</span><div><span class=\"name\">Ellis Morgan</span><span class=\"role\">Invited 2 days ago</span></div></div></td><td>Operations</td><td class=\"empty-value\">Not set</td><td><span class=\"status\"><i class=\"dot\"></i>Pending invitation</span></td></tr>\n</tbody>\n</table>\n</div>\n<p class=\"recent\"><strong>Recent update</strong><span>Amara set “In the field” · 14 min ago</span></p>\n</section>\n<aside aria-label=\"Field coordination details\">\n<div class=\"aside-intro\"><h2 class=\"eyebrow\">FIELD DESK</h2><div class=\"metrics\"><div class=\"metric\"><strong>6</strong><span>Members</span></div><div class=\"metric\"><strong>5</strong><span>Base cities</span></div></div></div>\n<div><h3>Out in the field</h3><p class=\"cities\">Amara in Accra · Lina in Berlin</p><p>Allow extra time for replies during visits and travel.</p></div>\n<div class=\"checkin\"><h3>Next team check-in</h3><p><strong>Tue, 14 May · 09:00 UTC</strong><br>Field debrief &amp; session planning</p></div>\n<p class=\"note\">Availability is shared by members. Locations show their home base.</p>\n</aside>\n</div>\n</main>\n</body>\n</html>"}]}
