--- name: illustration-vintage-emblem description: Draws original hand-authored SVG badge illustrations in a vintage emblem style for design and coding subjects. Identifying traits: a seven-colour screen-print palette (green-black ink, cream, terracotta, sand, tan, pale, a touch of teal) with no gradients; one chunky hero object in thick 3.6 px ink outlines, shaded with woodcut gouges and lit with pale streaks; a terracotta sun disc behind it, cut free by a 7.5 px cream keyline; a hard horizontal edge slicing the scene into a dark splash band with cream droplets punched out; a heavy condensed wordmark over a letterspaced serif tagline. Covers lockups, hero objects, gulls, splash bands and lettering. Use when someone asks for a vintage emblem, retro badge, crest, logo-style, screen-print, poster, sticker, patch or merch-style illustration, or a badge card for a team, event, release, empty state, 404 page, blog header or marketing card. --- # Illustration: Vintage emblem A screen-printed badge on cream paper: one bold object on a sun disc, a splash of ink along a hard bottom edge, and a heavy condensed wordmark with a small serif tagline. It suits named things (a club, a release, a principle, a team ritual) where the words are part of the picture. Use `illustration-two-colour-brush` instead for loose brush-painted scenes in two inks; `illustration-teal-spot` for a single-colour spot object with no lettering; `illustration-flat-with-black` for a flat character scene with solid black shapes. Extracted from a set of 42 original design-and-coding cards in 14 styles; the three cards in examples/ are this style's shipped cards. ## The look in one sentence One chunky object, outlined in thick green-black ink and shaded with carved ink wedges, stands on a terracotta sun disc that a 7.5 px cream keyline cuts it free from, while a hard horizontal edge slices the scene into a dark splash band with cream droplets punched out, all locked up over a heavy condensed wordmark. ## Palette Measured from the examples. Seven flat colours, nothing else. | Role | Hex | Where it goes | |---|---|---| | Card | `#f8f0e3` | full-bleed background (78–85 % of the rendered card), keyline, cream highlights, droplets cut into the ink, the billow | | Ink | `#1f2b25` | outlines, shadow wedges, splash band, gulls, wordmark, tagline (45–51 % of all non-cream pixels, wordmark included) | | Terracotta | `#c8693f` | the sun disc; one repeat on the subject (nose cone, beetle shell, porthole ring, flame) | | Sand | `#d9a873` | main fill of the subject (fins, crown, lens rim, flame core) | | Tan | `#b5824f` | darker fill: trunks, grips, the shaded tone under sand | | Pale | `#ecd2a8` | highlight streaks, rock faces, glass | | Teal | `#3f8273` | accent only: one band, ring, collar or set of node dots per card, 2–4 % of non-cream pixels | - Never: gradients, opacity, textures, hatching, filters, pure black or white, a sixth hue. - Terracotta never touches the sun: anything terracotta on the subject sits inside the keyline. - Teal never fills a large shape; a teal fin set was cut from the first card. ## Line and fill All numbers are in lockup units (the lockup is scaled 0.95–0.97, so on the card they come out about 4 % smaller). - **Subject outlines: 3.6** ink strokes, `stroke-linejoin="round"` (`OUT` in the kit). Small inner parts 2.2–2.8 (nozzle, collar, porthole ring 2.0). - **Union outlines:** shapes that read as one mass (trunk + roots, a cluster of puffs) get one outline: an ink underlay stroked at 7.2 (2 × OUT), then the fills (`unionOutline`). - **Keyline:** the subject's silhouette shapes again, filled and stroked cream at **15** (a 7.5 px cream gap), drawn after the sun and before the subject. Include every lobe, handle and spike, or the subject melts into the disc. - **Shade is ink cut into colour**, on the right/lower side (light from the upper left): - woodcut gouges: `wedge()` 1.8–4.2 wide (10 on a trunk), blunt base, sharp tip; - crescents inside round parts (`crescent()`, thickness 2–4.2); - a two-tone offset for puffy masses: tan underneath, sand shifted (−2.6, −7.6) on top, so tan shows as a lower-right crescent (`puffs()`). - **Light is pale or cream streaks** on the upper left: `streak()` half-width 1–2.4, both ends sharp; 2–5 per object. Short round-capped pale strokes (1.8–3.6) are fine on narrow parts. - Flat fills only. No outline on the gulls, splash, droplets or wordmark (the wordmark uses a 2.2 same-colour stroke only to round its corners). ## Characters No people. The hero object is the character: - **One hero**, chunky and nearly symmetric, 80–210 px wide, built from 3–8 big shapes. Secondary structures compete with it: a launch tower beside the rocket was cut. - It breaks the sun's circle: the rocket's nose rises above the disc, the tree crown is wider than the disc, the magnifier sits left so the disc shows as a crescent. - Each big shape: flat fill, 3.6 outline, one ink shadow shape or 1–3 gouges on the right, 1–3 pale streaks on the left. - Detail is carved, not drawn: rivets as ink dots r 1.15, grain as gouges, a code glyph `` in cream strokes 2.4 inside a porthole. - Coding cues live inside the object (a `` porthole, roots laid out as a git graph with cream-and-teal nodes, a beetle under a lens) or in the splash (curly braces and chevrons as ink strokes 5.2–5.4). - Creatures are cut like woodcuts: ink head and legs (tapered tubes with round joints), coloured shell with ink striae and pale streaks. - **Round objects** (lens, dial, porthole, wheel), the Debug Club recipe: a sand ring outlined 3.6; inside a clip of the ring, a tan ring offset (+2.4, +2.4), an ink crescent on the right (thickness 4–4.6) and 5–6 short gouges on the right; a cream arc highlight on the upper left of the ring (stroke 2.6, two dashes); then the glass or dial in pale outlined 3.6, with a sand ring offset (+6, +6) and cream streaks on the upper left, all clipped to the glass. - Small parts that stick out of a round object (crown, pushers, handle collar) are stadiums or quads standing on its rim, sand or tan, each outlined 3.6 and each in the keyline. ## Decor and props - **Gulls:** 2–4 ink "m" silhouettes (`gull(x, y, s)`, s 7–10.5), in the sky beside or above the disc, never overlapping the subject, sizes varied, one mirrored. - **Splash band** along the crop (`foam()`): an ink band from x 96–100 to 380–384, rising to a crest near y 216–224, 5 lobes a side (r 6.5–13.7, mirrored about x 240); cream holes r 1–3.2 punched into the dark (8–15 of them), teardrop drops r 1.8–3.2 flung outward at ±48–72°, 4–6 loose specks r 1–1.5. - **Centre of the band** is the subject's base and changes per card: a cream cloud billow with ink lobes behind (rocket), a dark knoll with pale boulders and grass tufts (tree), ink spikes with drop tips (magnifier). A cloud bank is ONE outlined mass shaped like a mound, tallest under the hero: `puffs(list, { merge: true, dark: PALE, light: CREAM })`; draw part of it after the hero so the hero sits in it. - Optional ink flecks: tiny triangle chips, grass blades as `wedge()` tufts. - Never: stars, sparkles, frames, ribbons, banners, circles of text, dates, a second sun or moon. ## Composition - **Card:** full-bleed ``, square corners. - **Emblem:** sun disc r 86–88 at (240, 114–118); the scene clipped by `` so everything ends on one hard horizontal edge at y 229. Emblem 276–328 px wide, about 205 px tall. - **Wordmark:** top at y 258–260, centred on x 240, scale 0.68–0.95, cap 38–53 lockup units (the CLI prints it), 190–310 px wide on the card. Words of 12+ letters need `--max-width 320` (or `wmMaxWidth: 320` in `card()`) to keep the cap at 38. **Tagline** baseline = wordmark top + cap + 19. - **Lockup:** everything in `` with cy = (top of the emblem + tagline baseline) / 2, so the whole badge is centred. Shipped lockups span y 30–331 (84 % of the card height). - One focal point, dead centre, symmetric weight; the sky stays clean except gulls. ## Techniques Two helpers in `scripts/`, no dependencies. From the skill folder: - `node scripts/wordmark.mjs "RELEASE DAY" --tagline "TAG • SHIP • REST" --prefix rd-` prints the wordmark ``, the tagline `` and the lockup numbers. A–Z, 0–9 and `- . ! '`. `--max-width 280` (default) sets the scale; `node scripts/wordmark.mjs --sheet alphabet.svg` renders every glyph. It reproduces the shipped OPEN SOURCE and DEBUG CLUB wordmarks exactly. - `node scripts/emblem-kit.mjs demo.svg` writes a self-test card. `card()` builds the whole SVG shell (card, crop, sun, keyline, lockup centring, wordmark, tagline). When the hero rises above the sun (a rocket nose, a bow), pass `top:` its highest y, or the lockup centres on the sun and sits low. ```js import * as K from '/abs/path/to/illustration-vintage-emblem/scripts/emblem-kit.mjs'; const P = 'rd-', fo = K.foam(); // the Debug Club band; pass lobes/holes/flung to vary it const body = 'M210 60 L270 60 L270 200 L210 200Z'; // your hero's silhouette paths const svg = K.card({ prefix: P, label: 'Release Day', word: 'RELEASE DAY', tag: 'TAG • SHIP • REST', keyline: `` + fo.keyline, // silhouettes: cream, stroked 15 emblem: ` ${K.outlined(body, K.SAND)} ${fo.ink}${fo.holes}` }); ``` A cloud bank the hero sits in: back puffs, hero, front puffs, each set under one outline; every puff also goes in the keyline. ```js const rnd = K.rng(23); const back = [K.puff(190, 206, 30, 12, 9.5, rnd), K.puff(292, 206, 30, 12, 9.5, rnd)]; const front = [K.puff(240, 214, 36, 17, 11.5, rnd), K.puff(196, 222, 26, 11, 9.5, rnd), K.puff(284, 222, 26, 11, 9.5, rnd)]; const pb = K.puffs(back, { prefix: P + 'b', dark: K.PALE, light: K.CREAM, merge: true }); const pf = K.puffs(front, { prefix: P + 'f', dark: K.PALE, light: K.CREAM, merge: true }); // defs: pb.defs + pf.defs; keyline: [...back, ...front].map(c => K.puffShape(c, K.OUT)).join('') // emblem: splash, pb.svg, hero, pf.svg ``` Carving inside a shape, clipped so gouges never cross the outline (as the rocket body and beetle shell do): ```xml ``` ## Failure modes - **Hero lost among props.** A launch tower beside the rocket split the focus; one hero only. - **Teal everywhere.** Teal fins made the badge read as a different palette; keep teal to one band or ring. - **Busy base.** A row of separately outlined cloud puffs looked like bubble wrap (the self-test hit this again with `puffs()` defaults); use one merged cream billow (`merge: true`) in the centre and ink lobes with punched holes at the sides. - **Flat cloud sausage.** Equal-height puffs in a row read as a bolster; make the bank a mound, tallest under the hero. - **Wordmark too small.** A 13-letter word at the default width came out with a 33-unit cap; widen to `--max-width 320` before shortening the words. - **Crown reads as balls or a mushroom.** Plain circles for foliage; build clumps from bump rings with ink curls under the top bumps, gouges up from the bottom and the two-tone offset (`puffs()`). - **Roots or lines read as scribble.** Free diagonal shapes; lay them out as lanes with vertical tangents (`gstep`), like a git graph, with nodes. - **Subject melts into the sun.** Keyline missing on a lobe or handle; every silhouette shape goes into the keyline group. - **Wordmark looks typed.** A system font in `` changes per machine; build the wordmark with `wordmark.mjs`. Only the 12.5 px tagline may be `` (Georgia bold, tracking 2), as in Ship It. - **Wordmark letters fold over.** A corner radius wider than half the inner width makes cream slivers inside round glyphs; `wordmark.mjs` clamps it, so keep custom glyphs within it too. - **Lockup off centre.** The scale was applied without re-centring; compute cy from the emblem top and the tagline baseline (`card()` does). ## Examples - `examples/ship-it.svg`: rocket lifting off a cream billow, terracotta nose and porthole ring with a `` glyph, teal band, sand fins; carved shadow down the right of the body; wordmark at scale 0.95 with a `` tagline. - `examples/open-source.svg`: old tree on a dark knoll with pale boulders; crown of two-tone leafy clumps; roots as git-graph lanes with cream-and-teal nodes; grass tufts in the splash; wordmark scale 0.74. - `examples/debug-club.svg`: big magnifier offset left so the sun shows as a crescent, a carved beetle in the glass, grip with ink bands and a teal collar; ink spikes, braces and chevrons in the splash; wordmark scale 0.84. ## Workflow Commands run from the skill folder (Playwright must resolve for render: `npm i -D playwright-core` there or globally). 1. **Brief:** name the subject, pick ONE hero object that says it, and write the wordmark (1–3 words) and a three-beat tagline with `•` separators. 2. **Hero:** sketch its silhouette in 3–8 big shapes; decide how it breaks the sun's circle and what sits at its base in the splash band. 3. **Words:** `node scripts/wordmark.mjs "WORD" --tagline "A • B • C" --prefix xx-` to see the scale and cap height. If the cap is under 38, rerun with `--max-width 320`; only then shorten the words. 4. **Block:** write a generator (`card.gen.mjs`) that imports `emblem-kit.mjs` by absolute path. Silhouettes first (they feed the keyline), then fills, ink shade, pale streaks, splash, gulls. Use `K.card()` for the shell. 5. **Render:** `node scripts/render.mjs card.svg card.png`. 6. **Sheet:** `node scripts/render.mjs --sheet sheet.png examples/*.svg card.svg`. Same weight of ink, same palette share, same lockup size? 7. **Zoom:** `node scripts/render.mjs card.svg z.png --zoom x,y,w,h --scale 6` on the keyline, the carving, the splash holes and the wordmark joins. 8. **Critique** on the five criteria in references/craft.md (character drawing = the hero object's construction). Fix and re-render; expect 3–4 rounds. 9. **Lint:** `node scripts/lint.mjs card.svg --prefix xx- --palette style.json`. It should pass with no warnings. ## Verify - [ ] Only the seven palette colours appear; `lint --palette` prints no WARN. - [ ] Cream full-bleed card rect, square corners. - [ ] A terracotta sun disc r 86–88 sits behind the hero, and the hero breaks its circle. - [ ] A cream keyline about 7.5 px wide separates every part of the hero from the disc. - [ ] Every hero shape has a 3.6 ink outline; shade is ink wedges or crescents, light is pale streaks. - [ ] No gradients, opacity, hatching, textures or filters. - [ ] The scene ends on one hard horizontal edge, with an ink splash band, punched cream holes and flung drops. - [ ] 2–4 gulls, none touching the hero. - [ ] Teal appears once or twice, small. - [ ] Wordmark is paths from `wordmark.mjs`, cap 38–53 lockup units, centred, at most 310 px wide; tagline 12.5 serif bold with `•`. - [ ] Lockup centred vertically: equal space above the emblem and below the tagline (± 6 px). - [ ] The subject reads at 1x without the words.