Living Styleguide — Illustration System

01

Palette

Narrow by design. Pencil-gray line work on paper, one stamp red, design-system accents only where a card needs a colored element. Never pure black.

Illustration colors

Pencil

#3A3A3A

Stamp

#D9455F

Paper

#FBFAF7

Accent (ex)

#0FB5A6

Line character

Stroke width 4, round caps, no fill on limbs. Heads are paper-filled circles r19. The pencil jitter filter adds a hand-drawn wobble; keep it subtle.

02

The Anti AI-Slop stamp

The rubber-stamped seal. Ties a page or card to the failure-modes body of work. Editorial only — never on the slideshow theme. Rendered live below via the real stampF filter. This exact filtered version is fixed-color and one-off by design — for a CSS-recolorable, CSS-scalable version of this same seal (plus three siblings: Anti-Slop, Human-Only, Co-Evolution), see living-styleguide-stamps.html.

A · card-full · op .9

Page content sits
over the mark.

B · page-faint · op .10

Stamp · two variants

Card-full & page-faint

Same seal, same filter. Variant A sits full-strength in a card corner. Variant B is a faint watermark behind page content.

color #D9455F · rotate −14°
A · card opacity ~0.9, corner
B · page opacity ~0.10, behind content
text Inter 700, ANTI / AI-SLOP

Failure-modes-family only. Never on the slideshow theme.

<!-- same stampF filter both -->
<g filter="url(#stampF)"
   transform="rotate(-14 ...)"
   stroke="#D9455F"
   opacity="0.9">  <!-- .10 for page -->

03

The stickmen

The two figures in a tug-of-war. Same pencil primitives, now leaning back against a shared rope. The pair sways on a slow loop — neither wins; the tension is the point.

Stickmen · tug-of-war

The tension pose

Both figures lean back off a shared, sagging rope. The pair sways left and right on a loop; neither wins.

head r19, paper fill
lean ±14° → ±6° each cycle
rope quadratic sag, w3.5
loop 2.4s ease-in-out
stroke pencil #3A3A3A, w4, round

Reduced-motion → static mid-pose. The sway is decorative; the meaning survives frozen.

@keyframes tug{
  0%,100%{transform:translateX(-9px)}
  50%{transform:translateX(9px)}}
/* both figures + rope sway together */

04

The pencil writes the hero

Replaces the static ladder in the hero role: a pencil sprite travels left-to-right and lays down the underline beneath a hero word as the page loads. The stroke reveals under the tip.

Pencil · self-drawing

Draws the hero line

A pencil sprite glides left-to-right; the underline reveals under its tip via stroke-dash. The classic hand-drawn "writes itself" move.

pencil #3A3A3A body, wood tip
line accent color, w5, sagged path
reveal stroke-dashoffset → 0
timing 2s, glide matches reveal

Reduced-motion → line shown complete, pencil hidden. The tip must sit on the line's leading edge or the illusion breaks.

.pline{stroke-dasharray:340;
  stroke-dashoffset:340;
  animation:draw 2s ... forwards}
@keyframes draw{to{
  stroke-dashoffset:0}}
/* pencil translateX matches the reveal */

05

Social card layout

The square social card (2400×2400, rasterized from SVG for posting). Cards are cut from the page's content, not written separately. The layout zones are fixed; the illustration and headline vary.

Social card

2400 × 2400

Fixed zones: kicker, big headline with one accent word, illustration zone, credit. Content is cut from the page, not authored fresh.

size 2400×2400 → PNG
ground paper #FBFAF7
zones kicker · headline · art · credit
line rhythm 1.25× font (never tighter)
export cairosvg

Headline lines get a full 1.25× line rhythm and the art gets its own band — never let a line sit on top of the next or on the illustration.

Cadence: 3 days card-only, 4th day card + link. Cards feed LinkedIn / X / Substack daily.

The Living Styleguide