Yellow Boards Editable templates. Type YOUR message, download it, Free - No log in - No data collected.
(Digital and Print files)
Licence: Free personal use only. Commercial use NOT permitted.
Send messages across digital platforms or print physical objects.
OUT POST
const message=document.getElementById("message"); const preview=document.getElementById("preview"); const size=document.getElementById("sizeControl"); const download=document.getElementById("downloadBtn"); const board=document.getElementById("board"); message.addEventListener("input",()=>{ preview.textContent=message.value||"Your message"; }); size.addEventListener("input",()=>{ preview.style.fontSize=size.value+"px"; }); download.addEventListener("click",()=>{ html2canvas(board,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="out-post.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); VILLAGE GOSSIP
const message2=document.getElementById("message2"); const preview2=document.getElementById("preview2"); const size2=document.getElementById("sizeControl2"); const download2=document.getElementById("downloadBtn2"); const board2=document.getElementById("board2"); message2.addEventListener("input",()=>{ preview2.textContent=message2.value || "Your message"; }); size2.addEventListener("input",()=>{ preview2.style.fontSize=size2.value+"px"; }); download2.addEventListener("click",()=>{ html2canvas(board2,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="village-gossip.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); BENNY BOARDS
const message3=document.getElementById("message3"); const preview3=document.getElementById("preview3"); const size3=document.getElementById("sizeControl3"); const download3=document.getElementById("downloadBtn3"); const board3=document.getElementById("board3"); message3.addEventListener("input",()=>{ preview3.textContent=message3.value || "Your message"; }); size3.addEventListener("input",()=>{ preview3.style.fontSize=size3.value+"px"; }); download3.addEventListener("click",()=>{ html2canvas(board3,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="benny-boards.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); BELLA BOARDS
const message4=document.getElementById("message4"); const preview4=document.getElementById("preview4"); const size4=document.getElementById("sizeControl4"); const download4=document.getElementById("downloadBtn4"); const board4=document.getElementById("board4"); message4.addEventListener("input",()=>{ preview4.textContent=message4.value || "Your message"; }); size4.addEventListener("input",()=>{ preview4.style.fontSize=size4.value+"px"; }); download4.addEventListener("click",()=>{ html2canvas(board4,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="bella-boards.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); Mildly Annoyed Mable
const message6=document.getElementById("message6"); const preview6=document.getElementById("preview6"); const size6=document.getElementById("sizeControl6"); const download6=document.getElementById("downloadBtn6"); const board6=document.getElementById("board6"); message6.addEventListener("input",()=>{ preview6.textContent=message6.value || "Your message"; }); size6.addEventListener("input",()=>{ preview6.style.fontSize=size6.value+"px"; }); download6.addEventListener("click",()=>{ html2canvas(board6,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="mildly-annoyed-mable.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); NOT AMUSED GEORGE
const message7=document.getElementById("message7"); const preview7=document.getElementById("preview7"); const size7=document.getElementById("sizeControl7"); const download7=document.getElementById("downloadBtn7"); const board7=document.getElementById("board7"); message7.addEventListener("input",()=>{ preview7.textContent=message7.value || "Your message"; }); size7.addEventListener("input",()=>{ preview7.style.fontSize=size7.value+"px"; }); download7.addEventListener("click",()=>{ html2canvas(board7,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="not-amused-george.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); Breaking news
const message8=document.getElementById("message8"); const preview8=document.getElementById("preview8"); const size8=document.getElementById("sizeControl8"); const download8=document.getElementById("downloadBtn8"); const board8=document.getElementById("board8"); message8.addEventListener("input",()=>{ preview8.textContent=message8.value || "Your message"; }); size8.addEventListener("input",()=>{ preview8.style.fontSize=size8.value+"px"; }); download8.addEventListener("click",()=>{ html2canvas(board8,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="breaking-news.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); Famous last words
const message9=document.getElementById("message9"); const preview9=document.getElementById("preview9"); const size9=document.getElementById("sizeControl9"); const download9=document.getElementById("downloadBtn9"); const board9=document.getElementById("board9"); message9.addEventListener("input",()=>{ preview9.textContent=message9.value || "Your message"; }); size9.addEventListener("input",()=>{ preview9.style.fontSize=size9.value+"px"; }); download9.addEventListener("click",()=>{ html2canvas(board9,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="famous-last-words.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); Love Board
const message5=document.getElementById("message5"); const preview5=document.getElementById("preview5"); const size5=document.getElementById("sizeControl5"); const download5=document.getElementById("downloadBtn5"); const board5=document.getElementById("board5"); message5.addEventListener("input",()=>{ preview5.textContent=message5.value || "Your message"; }); size5.addEventListener("input",()=>{ preview5.style.fontSize=size5.value+"px"; }); download5.addEventListener("click",()=>{ html2canvas(board5,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="love-board.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); });
📤 Share Yellow Boards
PRINT OUT POST
const message10=document.getElementById("message10"); const preview10=document.getElementById("preview10"); const size10=document.getElementById("sizeControl10"); const download10=document.getElementById("downloadBtn10"); const board10=document.getElementById("board10"); message10.addEventListener("input",()=>{ preview10.textContent=message10.value||"Your message"; }); size10.addEventListener("input",()=>{ preview10.style.fontSize=size10.value+"px"; }); download10.addEventListener("click",()=>{ html2canvas(board10,{ scale:1, useCORS:true }).then(canvas=>{ const link=document.createElement("a"); link.download="print-out-post-print.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); PRINT VILLAGE GOSSIP
const message11=document.getElementById("message11"); const preview11=document.getElementById("preview11"); const size11=document.getElementById("sizeControl11"); const download11=document.getElementById("downloadBtn11"); message11.addEventListener("input",()=>{ preview11.textContent = message11.value || "Your message"; }); size11.addEventListener("input",()=>{ preview11.style.fontSize = size11.value + "px"; }); // TEXT WRAP FIX function wrapText(ctx, text, x, y, maxWidth, lineHeight) { const words = text.split(" "); let line = ""; for (let n = 0; n < words.length; n++) { const testLine = line + words[n] + " "; const metrics = ctx.measureText(testLine); const testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { ctx.fillText(line, x, y); line = words[n] + " "; y += lineHeight; } else { line = testLine; } } ctx.fillText(line, x, y); } download11.addEventListener("click",()=>{ const canvas=document.createElement("canvas"); canvas.width=3000; canvas.height=3500; const ctx=canvas.getContext("2d"); const img=new Image(); img.crossOrigin="anonymous"; img.onload=()=>{ ctx.drawImage(img,0,0,3000,3500); const fontSize = size11.value * 5; ctx.font = fontSize + "px 'Archivo Black', Arial"; ctx.fillStyle="#000"; ctx.textAlign="center"; ctx.textBaseline="middle"; const text = message11.value || "Your message"; wrapText( ctx, text, 1500, 1750, 2000, fontSize * 1.2 ); const link=document.createElement("a"); link.download="village-gossip-print.png"; link.href=canvas.toDataURL("image/png"); link.click(); }; img.src=document.getElementById("boardImage11").src; }); PRINT BENNY BOARDS
const message12=document.getElementById("message12"); const preview12=document.getElementById("preview12"); const size12=document.getElementById("sizeControl12"); const download12=document.getElementById("downloadBtn12"); const board12=document.getElementById("board12"); message12.addEventListener("input",()=>{ preview12.textContent = message12.value || "Your message"; }); size12.addEventListener("input",()=>{ preview12.style.fontSize = size12.value + "px"; }); download12.addEventListener("click",()=>{ html2canvas(board12,{ scale:1, useCORS:true, backgroundColor:null }).then(canvas=>{ const exportCanvas=document.createElement("canvas"); exportCanvas.width=3000; exportCanvas.height=3500; const ctx=exportCanvas.getContext("2d"); ctx.drawImage( canvas, 0, 0, canvas.width, canvas.height, 0, 0, 3000, 3500 ); const link=document.createElement("a"); link.download="print-benny-boards-12.png"; link.href=exportCanvas.toDataURL("image/png"); link.click(); }); }); PRINT BELLA BOARDS
const message13 = document.getElementById("message13"); const preview13 = document.getElementById("preview13"); const size13 = document.getElementById("sizeControl13"); const download13 = document.getElementById("downloadBtn13"); const board13 = document.getElementById("board13"); message13.addEventListener("input", () => { preview13.textContent = message13.value || "Your message"; }); size13.addEventListener("input", () => { preview13.style.fontSize = size13.value + "px"; }); download13.addEventListener("click", () => { const printWidth = 3000; const printHeight = 3500; html2canvas(board13, { scale: 1, useCORS: true, backgroundColor: "#ffffff" }).then(canvas => { const printCanvas = document.createElement("canvas"); printCanvas.width = printWidth; printCanvas.height = printHeight; const ctx = printCanvas.getContext("2d"); ctx.drawImage( canvas, 0, 0, canvas.width, canvas.height, 0, 0, printWidth, printHeight ); const link = document.createElement("a"); link.download = "print-bella-boards-3000x3500.png"; link.href = printCanvas.toDataURL("image/png"); link.click(); }); }); Mildly Annoyed Mable
const message15=document.getElementById("message15"); const preview15=document.getElementById("preview15"); const size15=document.getElementById("sizeControl15"); const download15=document.getElementById("downloadBtn15"); message15.addEventListener("input",()=>{ preview15.textContent=message15.value || "Your message"; }); size15.addEventListener("input",()=>{ preview15.style.fontSize=size15.value+"px"; }); // 3000px PRINT DOWNLOAD download15.addEventListener("click",()=>{ const canvas=document.createElement("canvas"); // PRINT SIZE canvas.width=3000; // keeps the same image ratio canvas.height=3000 * (583 / 1080); const ctx=canvas.getContext("2d"); const img=new Image(); img.crossOrigin="anonymous"; img.onload=()=>{ // draw background image ctx.drawImage( img, 0, 0, canvas.width, canvas.height ); // scale text from screen size to print size const scale = canvas.width / 1080; ctx.font = (size15.value * scale) + "px 'Archivo Black', Arial"; ctx.fillStyle="#000"; ctx.textAlign="center"; ctx.textBaseline="middle"; const text = message15.value || "Your message"; // same position as preview const x = (25 + 25) * scale * 10.8; const y = (44 + 6) * scale * 10.8; // simple wrap const maxWidth = (50 * 10.8) * scale; const words=text.split(" "); let line=""; let lineHeight=size15.value * scale * 1.2; for(let n=0;n maxWidth && n>0){ ctx.fillText(line,x,y); line=words[n]+" "; y += lineHeight; } else{ line=test; } } ctx.fillText(line,x,y); const link=document.createElement("a"); link.download="print-mildly-annoyed-mable-15.png"; link.href=canvas.toDataURL("image/png"); link.click(); }; img.src=document.getElementById("boardImage15").src; }); NOT AMUSED GEORGE
const message16=document.getElementById("message16"); const preview16=document.getElementById("preview16"); const size16=document.getElementById("sizeControl16"); const download16=document.getElementById("downloadBtn16"); const board16=document.getElementById("board16"); message16.addEventListener("input",()=>{ preview16.textContent=message16.value || "Your message"; }); size16.addEventListener("input",()=>{ preview16.style.fontSize=size16.value+"px"; }); download16.addEventListener("click",()=>{ html2canvas(board16,{ width:3000, height:3500, scale:1, useCORS:true, backgroundColor:null }).then(canvas=>{ const link=document.createElement("a"); link.download="print-not-amused-george16.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); Breaking news
const message17=document.getElementById("message17"); const preview17=document.getElementById("preview17"); const size17=document.getElementById("sizeControl17"); const download17=document.getElementById("downloadBtn17"); const board17=document.getElementById("board17"); message17.addEventListener("input",()=>{ preview17.textContent=message17.value || "Your message"; }); size17.addEventListener("input",()=>{ preview17.style.fontSize=size17.value+"px"; }); download17.addEventListener("click",()=>{ html2canvas(board17,{ scale:1, useCORS:true }).then(canvas=>{ const bigCanvas = document.createElement("canvas"); bigCanvas.width = 3000; bigCanvas.height = 3500; const ctx = bigCanvas.getContext("2d"); ctx.drawImage(canvas, 0, 0, bigCanvas.width, bigCanvas.height); const link=document.createElement("a"); link.download="print-breaking-news.png"; link.href=bigCanvas.toDataURL("image/png"); link.click(); }); }); Famous last words
const message18=document.getElementById("message18"); const preview18=document.getElementById("preview18"); const size18=document.getElementById("sizeControl18"); const download18=document.getElementById("downloadBtn18"); const board18=document.getElementById("board18"); message18.addEventListener("input",()=>{ preview18.textContent = message18.value || "Your message"; }); size18.addEventListener("input",()=>{ preview18.style.fontSize = size18.value + "px"; }); download18.addEventListener("click",()=>{ html2canvas(board18,{ scale:1, useCORS:true }).then(canvas=>{ const bigCanvas = document.createElement("canvas"); bigCanvas.width = 3000; bigCanvas.height = 3500; const ctx = bigCanvas.getContext("2d"); ctx.drawImage(canvas, 0, 0, bigCanvas.width, bigCanvas.height); const link=document.createElement("a"); link.download="print-famous-last-words.png"; link.href=bigCanvas.toDataURL("image/png"); link.click(); }); }); Love Board
const message14 = document.getElementById("message14"); const preview14 = document.getElementById("preview14"); const size14 = document.getElementById("sizeControl14"); const download14 = document.getElementById("downloadBtn14"); const board14 = document.getElementById("board14"); message14.addEventListener("input", () => { preview14.textContent = message14.value || "Your message"; }); size14.addEventListener("input", () => { preview14.style.fontSize = size14.value + "px"; }); download14.addEventListener("click", () => { html2canvas(board14,{ width:3000, height:3500, scale:1, useCORS:true, backgroundColor:null }).then(canvas=>{ const link=document.createElement("a"); link.download="print-love-board-14.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); }); 📤 Share Yellow Boards
(function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "xl9d3104ue");
Origins
Yellow Boards come from a larger private digital art collection that is for the foreseeable future locked. It is observant, political and some times sensitive. It was created for people from the future to look back upon this point in history and to observe how pequliar we are. The original messages will stay locked for the future, but it felt wasteful to leave the boards unused. So they’ve been brought out to be enjoyed, personalised, and shared, while the original messages remain hidden and preserved.
How Yellow Became the Colour of Protest
Yellow has become one of the most striking and persistent colours of protest in the 21st century. Its rise didn’t come from branding agencies or political strategists — it came from the streets, from improvised tools, and from people trying to make themselves seen. The story begins in Hong Kong, where yellow first crystallised into a symbol of resistance, and from there it travelled across borders, movements, and causes until yellow boards became a recognised visual language of dissent.
Hong Kong
The Umbrella Movement in 2014 marked the moment yellow entered global protest consciousness. Protesters used umbrellas as shields against pepper spray and tear gas, but the colour yellow quickly became associated with the movement’s call for universal suffrage. Yellow ribbons, yellow banners, and yellow umbrellas filled the streets.
Out of this environment came the yellow boards — flat, bright panels carried by protesters. They were practical, visible, and symbolic all at once. A yellow board could be a shield, a sign, a message carrier, or a marker in a crowd. Its simplicity was its strength.
What Made Yellow Boards Distinct?
Yellow boards stood out because they solved several problems at once: High visibility — Yellow is one of the easiest colours for the human eye to detect at distance. In dense crowds or chaotic protest zones, a yellow board cuts through everything.Message clarity — Black text on yellow is one of the highest‑contrast combinations possible. Slogans, demands, and warnings became readable instantly.Portability — Boards could be carried, lifted, stacked, or used as makeshift protection.Reproducibility — Anyone could make one with paint and cardboard. No special materials, no gatekeeping.This made yellow boards democratic objects: accessible, adaptable, and impossible to monopolise.
How Yellow Spread Globally
After Hong Kong, yellow began appearing in other movements — not because activists coordinated, but because the colour’s meaning had become clear. In Catalonia, yellow ribbons symbolised solidarity with imprisoned independence leaders. In South Korea, yellow became associated with accountability and remembrance after the Sewol Ferry disaster. In Myanmar, protest art adopted yellow to echo Hong Kong’s visual language of resistance. Across global pro‑democracy rallies, yellow boards and yellow umbrellas appeared as signs of solidarity. Yellow had become a shorthand for visibility, courage, and civil resistance — a colour that said: we are here, and we will be seen.
Why Yellow Boards Became Recognised?
Yellow boards gained recognition because they combined symbolism with practicality. They were not abstract icons; they were tools. But tools can become symbols when used collectively, repeatedly, and publicly. Over time, yellow boards came to represent: Non‑violent defiance Collective identity The demand to be visible The right to speak and be heard
A Modern Symbol of Resistance
Today, yellow boards remain powerful because they are simple. They don’t rely on slogans, logos, or leaders. The colour itself carries the meaning. A yellow board held aloft in a crowd communicates urgency, solidarity, and determination without needing a single word. For a movement, a campaign, or a website built around the idea of visibility and voice, yellow boards offer a symbol that is both grounded in history and open to new interpretation and encouraged to have fun with memes and messaging systems.
They are now part of the visual vocabulary of modern protest — instantly recognisable even outside the context of Hong Kong.
9 Surprisingly Interesting Facts About Memes 1. Some memes have made people millionaires.** Viral creators have earned money through merchandise, NFTs, sponsorships, and advertising after their memes became famous. 2. There are "dead" memes.** Internet users often stop using a meme once it becomes too popular or overused, leading to the phrase "that meme is dead." 3. A single meme can have hundreds of versions.** Popular meme templates are constantly remixed with new captions, making the same image relevant to completely different situations. 4. Memes can spread faster than real news.** During major events, memes often appear within minutes, sometimes reaching more people than traditional news stories.
5. Some memes have been studied by psychologists.** Researchers have found that people often share memes because they help express emotions, connect with others, or cope with stress. 6. Animals are some of the internet's biggest meme stars.** Famous pets like Grumpy Cat and Doge became worldwide celebrities, with millions of fans and appearances in advertisements, books, and TV shows. 7. Companies now hire "meme managers."** Many businesses employ social media teams whose job includes creating and sharing memes to connect with younger audiences. 9. The word "meme" is older than the internet. It was coined in 1976 by biologist Richard Dawkins in his book The Selfish Gene to describe how ideas spread from person to person, much like genes.
Icon for social media
To join you just need to like yellow.
Download PNG function downloadBadge(){ html2canvas(document.getElementById("teamYellowBadge"), { useCORS:true }).then(canvas=>{ let link=document.createElement("a"); link.download="team-yellow-badge.png"; link.href=canvas.toDataURL("image/png"); link.click(); }); } 
