Half price on your first envelope of letters and photos. Use code FIRSTLETTER at checkout.
Sign in

For designers and illustrators

Draw a postcard front

A Stampgoose postcard is a front and a back. Some fronts are a frame for the sender’s photo with a few lines they write themselves: a front page with their friend as the news, a magazine with their mum on the cover. We’d like more of them, and we’d like them drawn by people who draw. One SVG file, a few named slots, and it works in every envelope on the site.

Front page news · the file
Magazine cover · the file
Wanted poster · the file

How a front works

The file is the design. The sender picks it in the builder, their photo drops into the frame you left for it, and each line you marked as theirs gets a box to type in. What they type replaces your words; where they type nothing, your words stay. So the words you draw are the ones that work for anyone: SOMEONE SPECIAL, not George.

The front shows upright on a phone at about 300 pixels wide, so the type has to be big and the joke has to land from across a room. Think of the format first: a front page, a wanted poster, a film poster, a passport, a trading card, a record sleeve, a bus stop. Something that puts the person somewhere they’d never be.

The rules

  1. One SVG, 3:2. viewBox="0 0 600 900" upright (the one to draw), or 0 0 900 600 across. No width or height needed.
  2. One photo slot. An <image data-slot="photo"> with x, y, width and height, and preserveAspectRatio="xMidYMid slice" so the photo fills it. The sender crops to its shape in the builder. Give it a clip-path for a rounded or odd shape, and a filter if the photo should go sepia or black and white. Draw what shows until there’s a photo underneath it: a grey block and a camera is fine.
  3. Text slots for the lines they write. A <text data-slot="name">, one plain line, no tspans, with data-label (what the box is called in the builder), data-max (how many characters), data-width (how wide it may draw before it shrinks to fit) and a font-size on the text element itself. Add data-case="upper" to keep it in capitals whatever they type. Three or four slots is plenty.
  4. Fonts the site has. Name them in font-family with a fallback: Outfit, Figtree, Archivo, Oswald, Bricolage Grotesque, Playfair Display, Yeseva One, Cinzel, EB Garamond, Cormorant Garamond, Amiri, Special Elite, Courier Prime, Space Mono, Saira Stencil One, Permanent Marker, Caveat, Gochi Hand, Great Vibes, Creepster, Nunito. Anything else, outline it (but never a slot: slots have to stay text).
  5. Nothing from outside. No linked images, no @import, no scripts. They’re stripped. Keep the file under 200 KB.
  6. Nothing real. No actual mastheads, brands, logos or people. Invent the newspaper. It’s funnier anyway.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 900">
  <rect width="600" height="900" fill="#f4efe4"/>

  <!-- What shows until there's a photo -->
  <rect x="40" y="200" width="520" height="440" fill="#ddd"/>
  <!-- Where the photo goes -->
  <image data-slot="photo" x="40" y="200" width="520" height="440"
         preserveAspectRatio="xMidYMid slice"/>

  <!-- A line the sender can change -->
  <text data-slot="name" data-label="Their name" data-max="26" data-width="520"
        x="300" y="740" text-anchor="middle"
        font-family="Oswald, sans-serif" font-size="64" fill="#111">SOMEONE SPECIAL</text>
</svg>

The deal

We pay a flat fee for each front we take, agreed by email before you start, so nobody draws for nothing. You keep the copyright and give Stampgoose a licence to use it on the site and in its own marketing. Your name goes on the back of every postcard sent with it, where the printer’s credit goes on a real one.

Check the file below, then email it to hello@stampgoose.com with your name as you’d like it credited. One person reads that address, and it’s the person who built this.