Two original invitation mood boards with element notes and a paper-versus-gloss revision

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Paper and ink, cut and fold</title><style>
:root{font:16px/1.65 system-ui,sans-serif;color:#27343d;background:#eeeee8}*{box-sizing:border-box}body{margin:0}main{max-width:1050px;margin:auto;padding:24px}h1{font:700 2.5rem/1.15 Georgia,serif;max-width:20ch}h2{font:700 1.6rem/1.3 Georgia,serif}h3{font-size:1.15rem}.notice{padding:18px;border-left:5px solid #a74e32;background:#fff5e2}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}button,textarea{font:inherit}button{padding:10px 14px;min-height:46px;border:1px solid #566873;background:#fff;color:#27343d;border-radius:4px;text-align:left;white-space:normal;cursor:pointer}button[aria-pressed=true]{background:#27343d;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #a65013;outline-offset:3px}.board{padding:22px;border:1px solid #b3b6a8;margin:24px 0}.board-a{background:#f4e8d0}.a-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:center}.a-hero{grid-row:span 2;transform:rotate(-2deg);padding:10px;background:#fff9eb;box-shadow:5px 7px 0 #b7a78a}.a-detail{transform:rotate(2deg);background:#fff9eb;padding:10px}.a-type{padding:18px;border-top:3px solid #a74e32}.specimen-a{font:2.1rem/1.25 Georgia,serif;margin:8px 0}.board-b{background:#21324d;color:#f4e8d0}.b-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:0;border:2px solid #f4e8d0}.b-hero{background:#f4e8d0;grid-row:span 2;padding:12px}.b-structure{padding:20px;background:#d97564;color:#21324d}.b-type{padding:20px;border-top:2px solid #f4e8d0}.specimen-b{font:800 2rem/1.15 system-ui,sans-serif;letter-spacing:-.03em;margin:8px 0}.board figure{margin:0}.board figcaption{font-size:16px;margin:12px 0 0}.board-b .b-hero figcaption{color:#21324d}svg{display:block;width:100%;height:auto}.swatches{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}.swatch{flex:1 1 115px;min-width:0}.chip{display:block;height:44px;border:1px solid currentColor}.revision{padding:20px;background:#fff9eb;margin-top:22px;border:1px dashed #a74e32}.revision-art{max-width:420px;margin:16px 0}.rationale,.notes{padding:22px;background:#fff;border:1px solid #b3b6a8;margin:24px 0}.rationale p{padding-left:14px;border-left:4px solid #7a8d83}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-weight:700}textarea{display:block;width:100%;min-height:105px;margin-top:8px;padding:10px;border:1px solid #708181;border-radius:3px;color:#27343d;resize:vertical}.confirm{padding:16px;background:#fff5e2}footer{padding:20px 0;border-top:1px solid #b3b6a8}#status{min-height:3em}[hidden]{display:none!important}@media(max-width:520px){main{padding:18px}h1{font-size:2rem}.board{padding:16px}.a-layout,.b-layout,.fields{grid-template-columns:1fr}.a-hero,.b-hero{grid-row:auto}.a-hero{margin:8px 4px 12px}.toolbar button{flex:1 1 auto}.specimen-a,.specimen-b{font-size:1.8rem}}
</style></head><body><main><header><p><strong>ORIGINAL VISUAL EXPLORATION · FICTIONAL BRIEF</strong></p><h1>Give the reference a job.</h1><p>Explore an invitation to a community print exchange. Compare a handmade-paper direction with a geometric alternative, and explain what each element contributes.</p><p class="notice">Date, place, invitation wording, dimensions, production requirements, brand assets and approver: TO CONFIRM. No final poster, logo or brand system is approved. All drawings below are original inline SVG; type specimens use system fonts.</p></header>
<nav class="toolbar" aria-label="Visual directions"><button id="paper" aria-pressed="true">Paper and ink</button><button id="fold" aria-pressed="false">Cut and fold</button></nav>
<section id="board-a" class="board board-a" aria-label="Direction A Paper and ink"><h2>A / Paper and ink</h2><p>Loose layers, uneven marks, serif title exploration.</p><div class="a-layout"><figure class="a-hero"><svg viewBox="0 0 420 400" role="img" aria-label="Original overlapping irregular cream and rust paper sheets with uneven ink marks"><path d="M35 60 306 33 338 308 61 337Z" fill="#a74e32"/><path d="M73 36 374 73 338 359 46 319 58 247 42 177Z" fill="#dfc9a5"/><path d="M50 73 328 58 352 107 334 171 345 245 322 339 66 327 79 256 58 202 69 140Z" fill="#fff8e8" stroke="#27343d" stroke-width="3"/><path d="M99 139Q137 113 169 141T239 136 296 147M105 176Q143 155 180 180T292 178M96 218Q133 197 170 220T292 215M107 264Q169 242 222 269T287 258" fill="none" stroke="#27343d" stroke-width="5" stroke-linecap="round"/><path d="m230 91 58-5-10 33-48 6Z" fill="#a74e32"/><circle cx="127" cy="294" r="12" fill="none" stroke="#a74e32" stroke-width="5"/></svg><figcaption>Original layered-paper illustration. The main visual can borrow the uneven edges; the invitation wording stays separate.</figcaption></figure><figure class="a-detail"><svg viewBox="0 0 300 150" role="img" aria-label="Original irregular ink line crossing a cream paper fragment"><path d="M12 26 276 12 288 125 20 140 29 93Z" fill="#f4e8d0"/><path d="M28 78Q53 53 79 76T132 73 183 76 234 70 277 78" fill="none" stroke="#27343d" stroke-width="6" stroke-linecap="round"/><path d="m74 104 108-7" stroke="#a74e32" stroke-width="3"/></svg><figcaption>Uneven ink line: a border or small accent, rather than an outline around every text block.</figcaption></figure><div class="a-type"><p class="specimen-a">An exchange<br>of impressions.</p><p>System-serif specimen only. Final invitation text and font: TO CONFIRM.</p></div></div><div class="swatches" aria-label="Direction A provisional palette"><div class="swatch"><span class="chip" style="background:#f4e8d0"></span>Cream #F4E8D0</div><div class="swatch"><span class="chip" style="background:#27343d"></span>Ink #27343D</div><div class="swatch"><span class="chip" style="background:#a74e32"></span>Rust #A74E32</div></div>
<div class="revision"><h3>One material reference to revise</h3><div class="toolbar" aria-label="Direction A revision"><button id="before" aria-pressed="true">Before revision</button><button id="after" aria-pressed="false">After revision</button></div><div id="revision-tile" class="revision-art"><svg id="gloss" viewBox="0 0 420 210" role="img" aria-label="Mismatched glossy blue-to-violet gradient tile"><defs><linearGradient id="gloss-gradient" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#3185ed"/><stop offset="1" stop-color="#7541bb"/></linearGradient></defs><rect width="420" height="210" rx="20" fill="url(#gloss-gradient)"/><path d="M10 20Q170-10 400 35L400 82Q210 30 18 100Z" fill="white" opacity=".4"/><path d="M29 180Q190 110 390 170" fill="none" stroke="#d5d3ff" stroke-width="7"/></svg><svg id="matte" viewBox="0 0 420 210" role="img" aria-label="Revised original cream paper detail with an uneven ink line" hidden><path d="M12 23 386 9 410 70 394 184 29 201 14 142 26 86Z" fill="#f4e8d0" stroke="#a74e32" stroke-width="3"/><path d="M45 111Q83 77 120 108T196 104 271 107 374 99" fill="none" stroke="#27343d" stroke-width="7" stroke-linecap="round"/><path d="m63 157 248-12" stroke="#a74e32" stroke-width="3"/></svg></div><p id="revision-note">Before: the glossy blue-to-violet tile conflicts with this board's stated matte-paper direction.</p><p>Only this reference tile changes. Neither direction is selected or approved by the revision.</p></div></section>
<section id="board-b" class="board board-b" aria-label="Direction B Cut and fold" hidden><h2>B / Cut and fold</h2><p>Angular forms, structured blocks, sans-serif title exploration.</p><div class="b-layout"><figure class="b-hero"><svg viewBox="0 0 420 410" role="img" aria-label="Original angular folded-paper forms in coral navy and cream"><path d="M27 47 241 23 380 199 190 382 37 233Z" fill="#d97564"/><path d="M27 47 217 175 241 23Z" fill="#21324d"/><path d="M217 175 380 199 190 382Z" fill="#b8584c"/><path d="M56 84 217 175 86 283Z" fill="#f4e8d0"/><path d="M217 175 294 93 345 169Z" fill="#f4e8d0"/><path d="M217 175 190 382 110 287Z" fill="#21324d"/><path d="M34 349 136 349M34 364 109 364" stroke="#21324d" stroke-width="6"/></svg><figcaption>Original cut-and-fold motif. Angular planes replace the loose paper-stack image.</figcaption></figure><div class="b-structure"><svg viewBox="0 0 220 155" role="img" aria-label="Original structured layout study with a large image block and separate information bars"><rect x="8" y="8" width="204" height="71" fill="#21324d"/><rect x="8" y="91" width="138" height="17" fill="#f4e8d0"/><rect x="8" y="120" width="88" height="17" fill="#21324d"/><rect x="167" y="91" width="45" height="46" fill="#f4e8d0"/></svg><p>Explore a firmer separation between the main image and invitation information.</p></div><div class="b-type"><p class="specimen-b">PRINT.<br>TRADE.<br>REPEAT.</p><p>System-sans specimen only. Final invitation text and font: TO CONFIRM.</p></div></div><div class="swatches" aria-label="Direction B provisional palette"><div class="swatch"><span class="chip" style="background:#21324d"></span>Navy #21324D</div><div class="swatch"><span class="chip" style="background:#d97564"></span>Coral #D97564</div><div class="swatch"><span class="chip" style="background:#f4e8d0"></span>Cream #F4E8D0</div></div><p>No audience reaction, readability test or approved brand value is established by these references.</p></section>
<section class="rationale"><h2>What should the designer borrow?</h2><div class="toolbar" aria-label="Element rationale"><button id="element0" aria-pressed="true">Paper illustration</button><button id="element1" aria-pressed="false">Ink line</button><button id="element2" aria-pressed="false">Serif specimen</button><button id="element3" aria-pressed="false">Palette</button></div><h3 id="rationale-title">Paper illustration</h3><p id="rationale-text">Explore layered paper as the main visual; keep invitation wording separate.</p><p>These are proposed uses for the next draft, not final artwork or evidence of an audience response.</p></section>
<section class="notes"><h2>Your blank direction notes</h2><div class="fields"><label>Project brief<textarea id="own-brief"></textarea></label><label>Proposed direction<textarea id="own-direction"></textarea></label><label>Reference IDs<textarea id="own-references"></textarea></label><label>Source and permission notes<textarea id="own-permission"></textarea></label><label>Element rationale<textarea id="own-rationale"></textarea></label><label>Feedback<textarea id="own-feedback"></textarea></label><label>Next revision<textarea id="own-revision"></textarea></label></div><div class="toolbar"><button id="reset" aria-expanded="false" aria-controls="confirmation">Clear my direction notes</button></div><div id="confirmation" class="confirm" hidden><p>Clear all seven fields? The boards, selected element and revision will stay unchanged.</p><div class="toolbar"><button id="keep">Keep my notes</button><button id="clear">Clear all seven fields</button></div></div><p id="status" role="status" aria-live="polite">All seven fields are blank. No direction has been approved.</p></section><footer>Typing lasts in this open page and disappears on reload. Nothing is sent or stored. Keep original references, permissions and final design files in the project's maintained records.</footer></main><script>
'use strict';const byId=id=>document.getElementById(id);let direction='paper',element=0;const rationale={paper:[['Paper illustration','Explore layered paper as the main visual; keep invitation wording separate.'],['Ink line','Try an irregular illustration border or small accent, not an outline around every text block.'],['Serif specimen','Explore this title treatment; final font and actual invitation text are TO CONFIRM.'],['Palette','Provisional cream, ink and rust colors to try with the paper illustration.']],fold:[['Folded forms','Explore a cut-and-fold motif instead of loose layers.'],['Block arrangement','Test a firmer separation between the main image and invitation information.'],['Sans specimen','Explore this type treatment with the block arrangement; final font and actual text are TO CONFIRM.'],['Palette','Alternative navy, coral and cream colors to try with the geometric forms.']]};
function showRationale(){const entries=rationale[direction];entries.forEach((x,i)=>{byId('element'+i).textContent=x[0];byId('element'+i).setAttribute('aria-pressed',String(i===element));});byId('rationale-title').textContent=entries[element][0];byId('rationale-text').textContent=entries[element][1];}
for(const key of ['paper','fold'])byId(key).addEventListener('click',()=>{direction=key;byId('paper').setAttribute('aria-pressed',String(key==='paper'));byId('fold').setAttribute('aria-pressed',String(key==='fold'));byId('board-a').hidden=key!=='paper';byId('board-b').hidden=key!=='fold';showRationale();});for(let i=0;i<4;i++)byId('element'+i).addEventListener('click',()=>{element=i;showRationale();});
for(const key of ['before','after'])byId(key).addEventListener('click',()=>{const revised=key==='after';byId('before').setAttribute('aria-pressed',String(!revised));byId('after').setAttribute('aria-pressed',String(revised));byId('gloss').toggleAttribute('hidden',revised);byId('matte').toggleAttribute('hidden',!revised);byId('revision-note').textContent=revised?"Replace the glossy gradient with a paper-and-line detail so this reference supports Direction A's stated material treatment.":"Before: the glossy blue-to-violet tile conflicts with this board's stated matte-paper direction.";});
const fields=['own-brief','own-direction','own-references','own-permission','own-rationale','own-feedback','own-revision'];function close(){byId('confirmation').hidden=true;byId('reset').setAttribute('aria-expanded','false');}for(const id of fields)byId(id).addEventListener('input',()=>{byId('status').textContent="Draft changed. Review your current direction notes.";});byId('reset').addEventListener('click',()=>{byId('confirmation').hidden=false;byId('reset').setAttribute('aria-expanded','true');byId('keep').focus();});byId('keep').addEventListener('click',()=>{close();byId('status').textContent='Kept all seven direction-note fields. No direction was approved.';byId('reset').focus();});byId('clear').addEventListener('click',()=>{for(const id of fields)byId(id).value='';close();byId('status').textContent='All seven fields were cleared. Boards, selected element and revision are unchanged.';byId('own-brief').focus();});
</script></body></html>