Roll Up, Roll Up: A Fete-Ready Tombola Ticket Press for Screens and Cheap Printers

Village fetes run on cheerful chaos: a trestle table that wobbles, a cake stand held together by hope, and a tombola drum that sounds suspiciously like a biscuit tin. The tickets, though, deserve better than a marker pen and a prayer. At CodeChroma we like colour with a job to do, so here is a browser-based ticket press that borrows the fete palette — bunting red, raffle pink, cake-stand cream, rosette blue and gold — and turns it into something a community group can actually print, read and use.

The aim is not to recreate a nostalgic poster. It is to make a small, dependable tool: enter the event name, choose a ticket count, generate repeatable serials, and print A4 sheets that look like they belong at the stall without turning every ticket into an ink sponge.

Start with the stall, not the swatches

A fete palette can go wrong in two directions. One is washed-out pastel everything, which looks lovely on a mood board and disappears under the strip lights of a village hall. The other is full-saturation carnival colour, which is jolly until someone needs to read a three-digit serial number at arm's length.

The useful middle ground is a palette with strong ink, warm paper and bright accents used in small doses. Think bunting as a stripe, not as a background behind every word. Raffle pink is a lovely ticket edge; it is a terrible place for 12px text.

Here is a starting token set in OKLCH. It is not sacred, but it behaves predictably when you lighten or darken it:

:root {
  --paper: oklch(0.97 0.025 85);
  --ink: oklch(0.24 0.035 45);
  --bunting-red: oklch(0.55 0.18 28);
  --raffle-pink: oklch(0.82 0.09 5);
  --cake-cream: oklch(0.93 0.055 85);
  --rosette-blue: oklch(0.48 0.14 250);
  --rosette-green: oklch(0.52 0.12 150);
  --ribbon-gold: oklch(0.72 0.13 80);
}

Use the dark ink for anything structural: event name, serial, prize line, terms. Use the bright hues for borders, stub blocks, stripes and small badges. That way the ticket still feels like a fete, but it reads like a form.

Tickets that know their own anatomy

A tombola ticket has a job to do quickly: identify the event, show a serial, maybe show a prize or a price, and provide a stub or tear line. The screen version and the print version should share the same markup so you are not maintaining two versions of the same idea.

A solid structure is a list of ticket elements, each with a heading, serial and optional prize line. Keep the serial as text, not an image, and do not rely on colour alone to separate the stub from the main ticket. A dashed border, a label and a bit of spacing all help when the printer is low on magenta.

A simplified ticket shell might look like this:

<article class='ticket' aria-label='Tombola ticket 0042'>
  <header>
    <p class='event'>Marlowe Green Summer Fete</p>
    <p class='serial'>No. 0042</p>
  </header>
  <p class='prize'>Prize: homemade marmalade</p>
  <footer class='stub'>Keep this half</footer>
</article>

The accessible name matters even for print-first tools, because organisers will use the screen version to check the layout. If a volunteer needs a screen reader to review the batch, the ticket still needs to make sense as a list of articles, not a pile of decorative divs.

Serial numbers without the spreadsheet panic

Repeatable layouts are the difference between a fun afternoon and an argument by the tea urn. Generate serials from a short event code plus the ticket index, so the same settings always produce the same set. That makes reprints possible and stops the dreaded duplicate number.

A tiny deterministic function is enough:

function ticketCode(seed, index) {
  const base = seed.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 3) || 'FET';
  return base + '-' + String(index + 1).padStart(4, '0');
}

This is not cryptography. It is bookkeeping with a bit of confetti. Store the event code, ticket count and prize list in localStorage so an organiser can come back after a cup of tea and print another sheet without retyping everything.

Print CSS: A4, gutters and the cheap-printer tax

Home printers are wonderful, temperamental machines. They shift margins, drink ink and occasionally decide that cream is a personal insult. Treat print CSS as a layout problem first and a colour problem second.

A practical starting point:

@page {
  size: A4;
  margin: 12mm;
}

.ticket {
  width: 70mm;
  min-height: 45mm;
  break-inside: avoid;
  border: 1.5px solid var(--bunting-red);
  background: var(--paper);
  color: var(--ink);
}

@media print {
  .ticket {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

Avoid large solid areas of raffle pink or rosette blue. A stripe or a small corner block gives the colour hit without asking the printer to flood the page. If the organiser is printing 200 tickets on a budget inkjet, cream paper and dark text are your friends.

Contrast checks for screen and paper

On screen, check the usual contrast ratios: aim for at least 4.5:1 for normal body text, 3:1 for large text, and 3:1 for meaningful borders or icons. Do not stop at the hex code. Check the actual combinations you ship: ink on paper, ink on cake cream, white on bunting red if you use it, and serial text on any tinted panel.

Paper adds its own test. Print one sheet, take it into the kitchen, and look at it under the sort of lighting a village hall actually has. Can you read the serial from arm's length? Can you tell the stub from the main ticket without colour? Does the prize line vanish when the printer runs low on cyan? If the answer wobbles like a blancmange, darken the ink or reduce the tint.

Gold is the classic trap. Ribbon gold looks celebratory on screen and can turn into a pale smear on paper. Keep it for a border or a small rosette badge, never for the information someone needs to read.

Make it useful to the organiser

The nicest generator is the one a PTA member can use without a tutorial. Give it clear fields: event name, event code, number of tickets, optional prize list, and a print button. Show a live preview. Add a warning if the serial text is too light against its background. Let the organiser choose between a screen-readable layout and a denser print sheet.

Most importantly, keep colour in service of the stall. The bunting stripes should say 'summer fete', the cream should feel like a cake stand, and the serial should still be readable when someone is holding three tickets and a slice of Victoria sponge. That is the CodeChroma version of best in show: bright enough to be fun, structured enough to work.