Lee W logoLee W

Design system

Brand

The palette, type, shapes, diagram recipe and imagery rules: the north star for anything drawn or written for the site.

Principles

Five rules, and everything below is one of them applied

  1. Paper and ink.

    A white ground, black text and one colour: the primary for anything that acts, a pale tint of it, the accent, for anything that highlights. Nothing else is coloured.

  2. Tokens only.

    Every colour, radius and family is a token from the brand. A drawing that hard-codes a hex will not follow the site that shows it.

  3. One family, and its mono.

    Google Sans Flex at every size, Google Sans Code for kickers, numbers, values and code. Weight and tracking do the work.

  4. Generous space.

    Long leading, a 38rem reading measure, wide page padding. Whitespace is the layout; rules and shadows are not.

  5. One marker line.

    Every drawing is the sketch recipe: shapes outlined in the ink line, the one colour solid for the point and at a tint for the rest, the faceless man where someone does something, mono words, white paper. No gradients, no drop shadows, no 3D.

Palette

Nineteen tokens paint everything

The page is light. The chrome, the rail and the phone bars, is the same palette inverted. Swatches are painted from the live variables; the values beneath are the same colour as data.

Page

  • background

    #ffffff
    oklch(1 0 0)

    The ground. Paper on the page, near-black in the chrome.

  • foreground

    #000000
    oklch(0 0 0)

    Ink: body text, headings, icons at rest.

  • primary

    #cc0099
    oklch(0.565 0.242 343.5)

    The one colour: links, buttons, focus rings, the quote mark, diagram shapes.

  • primary-foreground

    #ffffff
    oklch(1 0 0)

    Text and marks placed on the primary.

  • accent

    #ffdbf0
    oklch(0.93 0.05 343.5)

    A pale tint of the primary, a fill only: text selection, notices, the menu row in focus. Never a button, never text.

  • accent-foreground

    #000000
    oklch(0 0 0)

    Text placed on the accent.

  • secondary

    #000000
    oklch(0 0 0)

    The inverse button: ink on paper, paper on chrome.

  • secondary-foreground

    #ffffff
    oklch(1 0 0)

    Text on the secondary.

  • muted

    #eeeeee
    oklch(0.95 0 0)

    A quiet fill: chips, hover, skeletons, embed backgrounds.

  • muted-foreground

    #555555
    oklch(0.45 0 0)

    Secondary text: standfirsts, captions, eyebrows, metadata.

  • card

    #ffffff
    oklch(1 0 0)

    A raised surface: every card in every shelf.

  • card-foreground

    #000000
    oklch(0 0 0)

    Text on a card.

  • popover

    #ffffff
    oklch(1 0 0)

    Floating surfaces: menus, dialogs, tooltips.

  • popover-foreground

    #000000
    oklch(0 0 0)

    Text on a popover.

  • border

    #e1e1e1
    oklch(0.91 0 0)

    Every rule and outline. The only line colour.

  • input

    #ffffff
    oklch(1 0 0)

    The field control’s fill.

  • ring

    #cc0099
    oklch(0.565 0.242 343.5)

    The focus ring. Follows the primary.

  • destructive

    #e7000b
    oklch(0.577 0.245 27.325)

    Errors and irreversible actions, tinted, never solid.

  • destructive-foreground

    #ffffff
    oklch(1 0 0)

    Text on a solid destructive fill (rare).

Chrome

  • background

    #070707
    oklch(0.13 0 0)

    The ground. Paper on the page, near-black in the chrome.

  • foreground

    #ffffff
    oklch(1 0 0)

    Ink: body text, headings, icons at rest.

  • primary

    #dd0199
    oklch(0.595 0.250 347.6)

    The one colour: links, buttons, focus rings, the quote mark, diagram shapes.

  • primary-foreground

    #ffffff
    oklch(1 0 0)

    Text and marks placed on the primary.

  • accent

    #4e203d
    oklch(0.32 0.08 343.5)

    A pale tint of the primary, a fill only: text selection, notices, the menu row in focus. Never a button, never text.

  • accent-foreground

    #ffffff
    oklch(1 0 0)

    Text placed on the accent.

  • secondary

    #ffffff
    oklch(1 0 0)

    The inverse button: ink on paper, paper on chrome.

  • secondary-foreground

    #000000
    oklch(0 0 0)

    Text on the secondary.

  • muted

    #161616
    oklch(0.2 0 0)

    A quiet fill: chips, hover, skeletons, embed backgrounds.

  • muted-foreground

    #ffffff 60%
    oklch(1 0 0 / 0.6)

    Secondary text: standfirsts, captions, eyebrows, metadata.

  • card

    #1b1b1b
    oklch(0.22 0 0)

    A raised surface: every card in every shelf.

  • card-foreground

    #ffffff
    oklch(1 0 0)

    Text on a card.

  • popover

    #090909
    oklch(0.14 0 0)

    Floating surfaces: menus, dialogs, tooltips.

  • popover-foreground

    #ffffff
    oklch(1 0 0)

    Text on a popover.

  • border

    #1d1d1d
    oklch(0.23 0 0)

    Every rule and outline. The only line colour.

  • input

    #292929
    oklch(0.28 0 0)

    The field control’s fill.

  • ring

    #dd0199
    oklch(0.595 0.250 347.6)

    The focus ring. Follows the primary.

  • destructive

    #e7000b
    oklch(0.577 0.245 27.325)

    Errors and irreversible actions, tinted, never solid.

  • destructive-foreground

    #ffffff
    oklch(1 0 0)

    Text on a solid destructive fill (rare).

On the primary

  1. The words on a primary band, the article header’s and the reading list’s, sit inside .on-primary, a remap like the chrome’s. The ink becomes the primary’s foreground, and the rest follow it: the muted text at 78%, the primary itself, the border as a 35% hairline and the secondary as an 18% fill.

  2. So the trail, the heading, the standfirst and the byline keep their own recipes and still read on the colour. Nothing on the band is restyled by hand.

  3. The drawing sits outside it. A hero is drawn on the page tokens, so inside the remap its line and its colour would both turn white on its own white paper.

Type

One family and its mono

Every heading is the Heading component with a level and a variant. Every hero and section opens with the Header trio: a kicker, a heading, a subheading. Body leading is 1.7, 1.8 in an article.

  • Heading hero

    2.25rem/3rem, 600, 1.15, tight tracking, balanced

    The page's H1, in a hero

    The quick brown fox jumps over the lazy dog.

  • Heading statement

    1.5rem/1.875rem, 600, snug, tight tracking

    A claim or a number: the splash, the CV stat, sign-in

    The quick brown fox jumps over the lazy dog.

  • Heading title

    1.25rem, 600, tight tracking

    A block's title: the newsletter, a CV era

    The quick brown fox jumps over the lazy dog.

  • Heading item

    1.125rem, 600

    A list or card title, an admin section

    The quick brown fox jumps over the lazy dog.

  • Heading entry

    1rem, 600

    A row inside a list: a CV entry

    The quick brown fox jumps over the lazy dog.

  • Heading small

    0.875rem, 600

    A group of fields, a sub-exhibit

    The quick brown fox jumps over the lazy dog.

  • Kicker

    Mono, 0.875rem, 500, uppercase, wide tracking, muted, a primary stroke

    The eyebrow above a heading, one to four words

    The quick brown fox jumps over the lazy dog.

  • Number

    Mono, 0.875rem, 500, primary, two digits

    The lead of a numbered list

    01 02 03

  • Value

    Mono, 0.75rem, muted

    A colour value, a key, a size

    The quick brown fox jumps over the lazy dog.

  • Subheading

    1.25rem, relaxed, muted, 38rem measure

    The standfirst under a heading

    The quick brown fox jumps over the lazy dog.

  • Body

    1.125rem, 1.8, 38rem measure

    Article text

    The quick brown fox jumps over the lazy dog.

  • UI

    0.875rem, 500

    Buttons, the rail, forms

    The quick brown fox jumps over the lazy dog.

  • Caption

    0.875rem, muted

    Figure captions, metadata

    The quick brown fox jumps over the lazy dog.

Shape and space

One radius, and every corner derives from it

Pages are 64rem wide, padded 1.5rem on phones and 2.5rem beyond. The reading measure is 38rem.

  • sm

    8px

    Small inline chips

  • md

    10px

    Menus, small controls

  • lg

    12px

    Images, embeds, focus outlines

  • xl

    16px

    ArticleBox, swatches

  • 2xl

    20px

    Cards, panels

  • full

    9999px

    Buttons, chips, the brand mark

Components

The primitives, as shipped

Buttons are pills: the primary acts, the secondary is ink, the outline is quiet. Cards are one recipe, chips are one recipe, lists are one recipe.

  • Buttons

  • Badges, chips and marks

    • Published
    • Draft
    • Soon
    • Next.js
    • Convex

    ReviewLee’s pick

  • Cards

  • Article blocks

    A quote is set larger on the ink, opened by a mark in the primary. Its credit is the author, then the work, linked to its source.

    Someone quotable, The work it came from

Diagrams

The heroes’ marker line, in the body

A diagram is code on the recipe, so it follows whichever site shows it.

  1. A 1200 by 630 frame, landscape like the figure it sits in, so a diagram can be a featured image too. An image role with a title and a desc that say what the picture says.

  2. The heroes’ marker line: every shape outlined in the black line, filled with the colour solid for the point of the picture and at a 16% tint for everything else. A curve that carries data is the line in the colour.

  3. A word sits inside a shape in the mono face when it fits, and in a key in the top left corner when it does not. Numbers and captions on the paper are the muted mono face. The lines wobble; the words never do.

  4. The man stands in where someone does something. Draw it as a component in the diagrams folder in the sketch frame, register it, and the editor can place it. Two circles, the tug and the signpost are the reference.

  5. A chart is the same recipe fed data: one series, outlined in the line, the largest value solid and the rest tint, the bars on the ground line, the numbers in the mono face. The editor and the assistant write the numbers; the code draws them.

  • The perfect jobThree overlapping circles labelled love, skill and money. The patch where all three overlap is filled in and marked with an asterisk: the perfect job.LOVESKILLMONEY**PERFECT JOB
    perfect-job · The perfect job: love, skill, money
  • The four-circle ikigai diagramFour overlapping circles: what you love, what the world needs, what you can be paid for and what you are good at. Their pairwise overlaps are labelled passion, mission, vocation and profession; ikigai is filled in where all four meet.IKIGAIWHAT YOU LOVEWHAT THEWORLD NEEDSWHAT YOU CAN BE PAID FORWHAT YOU’REGOOD ATPASSIONMISSIONVOCATIONPROFESSION
    ikigai · Ikigai, the viral four-circle diagram
  • Love and lustTwo overlapping circles labelled love and lust. The narrow overlap between them is filled in and marked with an asterisk: the discovery phase, where a man gets both.LOVELUST**DISCOVERY
    two-circles · Two circles: love, lust and the discovery phase between them
  • The fadeA curve of what is left to discover, falling steeply over twenty-four months. Two small bumps, a weekend away and a salsa class, lift it briefly. It keeps falling.01224 MONTHSA WEEKEND AWAYA SALSA CLASSWHAT’S LEFT TO DISCOVER
    the-fade · The fade: what is left to discover, and what a weekend away buys
  • The tug of warA man stands with his arms out, a rope in each hand. One rope runs into an arrow pulling left, labelled love, the other into an arrow pulling right, labelled lust. He is pulled a little each way and ends on the centre mark, where he started.LOVELUSTHIM
    the-tug · The tug of war: love one way, lust the other, him in the middle (animated)
  • Three doorsThree doors, one for each way out: secrecy, which works until it doesn’t; consent, after which she’ll want the same deal back; and suppression, which holds on a drip of resentment. Open a door to read its flaw.SECRECYSECRECYWORKSUNTIL ITDOESN’TCONSENTCONSENTSHE’LL WANTTHE SAMEDEAL BACKSUPPRESSIONSUPPRESSIONHOLDS, ON ADRIP OFRESENTMENTHOVER OR TAP A DOOR
    three-doors · Three doors: secrecy, consent, suppression (interactive)
  • The signpostA man stands thinking under a signpost with two arms pointing in opposite directions. Both arms read trust. Under one it says show me your phone, under the other don’t ask for mine.TRUSTTRUSTSHOW ME YOUR PHONEDON’T ASK FOR MINE
    the-signpost · The signpost: two arms, both reading trust, pointing opposite ways, and him under it thinking
  • The testA two by two grid. The columns are locked and unlocked, the rows honest and cheating. Honest and locked reads values his privacy, honest and unlocked nothing to find, cheating and locked something to hide, cheating and unlocked a second phone. All four cells look the same.VALUES HISPRIVACYNOTHINGTO FINDSOMETHINGTO HIDEA SECONDPHONELOCKEDUNLOCKEDHONESTCHEATING
    the-test · The test: locked or unlocked, honest or cheating, four cells alike
  • The blank chequeA phone listing what is on it: order food, WhatsApp, photos, the exes, the bank, the wallet, your mates. A band marks what you handed over, the first row, and grows down the list until it covers everything they took.ORDER FOODWHATSAPPPHOTOSTHE EXESTHE BANKTHE WALLETYOUR MATESWHAT YOUHANDED OVERWHAT THEYTOOK
    the-blank-cheque · The blank cheque: a passcode for a takeaway covers the whole phone (animated)
  • The sliceTwo rings, each his life. Before, one slice marked her takes almost the whole ring and a sliver is left for his mates. After, the ring is cut into five equal slices: her, mates, kickboxing, books and projects.HERHERMATESMATESKICKBOXINGBOOKSPROJECTSBEFOREAFTER
    the-slice · The slice: his life as a ring, her before and her after
  • The penalty boxA single axis running from always available on the left to unobtainable on the right. A box labelled the penalty box stands on the always available end, with you sat inside it on a bench. A flag to the right of centre is labelled pull back to here.THE PENALTY BOXALWAYS AVAILABLEUNOBTAINABLEPULL BACK TO HEREHOW EASY YOU ARE TO GET
    the-penalty-box · The penalty box: one axis from always available to unobtainable, and you sat at the wrong end
  • The short hugFour bars on an axis of seconds, from zero to twenty. The one-second hug is a sliver, marked least pleasant. The five and ten-second hugs are marked fine. The twenty-second bar runs the length of the axis and is marked the lab hug. No line marks a threshold.FINEFINETHE LAB HUG1 S5 S10 S20 SLEAST PLEASANT05101520SECONDS
    the-short-hug · The short hug: four hugs on an axis of seconds, the one-second sliver and the lab’s twenty
  • The cliffA line of how you feel over eight episodes. It climbs a little with each episode, then at the credits of the last one it drops off a cliff to below where it started and stays there.THE HIGHEP 1EP 2EP 3EP 4EP 5EP 6EP 7CREDITSMONDAYHOW YOU FEEL
    post-series-depression-cliff · The cliff: the high climbs episode by episode, then the credits roll (animated)
  • The gapTwo bars on one ground. The left bar, what you expected, is tall. The right bar, what you got, is a decent height but shorter. A dotted line runs from the top of the expected bar across past the got bar, and a bracket between that line and the top of the got bar is labelled the disappointment.WHAT YOUEXPECTEDWHAT YOUGOTTHE DISAPPOINTMENTTHE SAME EVENING
    expectations-gap · The gap: what you expected, what you got, and the disappointment between them
  • The boxA square with a dot in its bottom left corner. The left side reads in 4, the top hold 4, the right out 4 and the bottom hold 4. The dot goes up the left side, across the top, down the right and back along the bottom, four seconds a side, sixteen seconds a lap, and starts again.IN 4HOLD 4OUT 4HOLD 4ONE LAP, SIXTEEN SECONDSSTART IN THE CORNER.KEEP GOING FOR FIVE MINUTES
    the-box · The box: four sides, four seconds a side, a dot breathing round it (animated)
  • The silenceA timeline of six months. At month one it reads you assume, at month six it reads you find out. A band marked nothing said covers month one and stretches along the timeline until it covers every month between.MONTH 1MONTH 2MONTH 3MONTH 4MONTH 5MONTH 6YOU ASSUMEYOU FIND OUTNOTHING SAID
    ambiguity-silence · The silence: you assume at month one, you find out at month six, nothing said between (animated)
  • The fogA road seen from the driver’s seat, running to a vanishing point. Bands of fog lie over the far half, thicker the further away they are, until the road vanishes into the thickest, which reads where this is going. The near end of the road is marked you; the edge of the fog is a few weeks out.WHERE THIS IS GOINGYOUA FEW WEEKS OUT
    ambiguity-fog · The fog: a road to a vanishing point, the far half lost in it
  • The seesawA seesaw on a pivot. The left end of the plank reads exposed, lets everyone in; the right end reads armoured, lets nobody in. It starts tipped to armoured, swings over to exposed and settles level on the pivot.EXPOSEDARMOUREDLETS EVERYONE INLETS NOBODY IN
    vulnerability-seesaw · The seesaw: exposed one end, armoured the other, the balance over the pivot (animated)
  • The maskA man stands with his arm out, holding up a mask on a stick beside his plain head. The mask has eye holes and a fixed grin. He is labelled you, the mask the mask. Holding it up is the work.YOUTHE MASK
    the-mask · The mask: him, and the mask he holds up on a stick beside his head
  • The windowThe Johari window: four panes in a frame. Across the top, known to me and not known to me; down the side, known to others and not known to others. The panes read open, blind, hidden and unknown. The open pane starts small and grows until it covers most of the window.OPENBLINDHIDDENUNKNOWNKNOWN TO MENOT KNOWN TO MEKNOWN TOOTHERSNOT KNOWNTO OTHERS
    self-reflection-window · The window: the Johari window, the open pane growing over the other three (animated)
  • The ledgerTwo columns. The left is what you have: a roof, your health, your mates, a job, a full fridge, today. The right is what you want: a bigger flat, a new car, more money, her, a better job, next year. An eye sits over the want column and slides across to the have column.A ROOFYOUR HEALTHYOUR MATESA JOBA FULL FRIDGETODAYA BIGGER FLATA NEW CARMORE MONEYHERA BETTER JOBNEXT YEARWHAT YOU HAVEWHAT YOU WANT
    the-ledger · The ledger: what you have, what you want, and the eye on the wrong column (animated)
  • The staircaseFour steps rising from left to right, each taller than the one before: handshake, arm, hug, hand. A man stands on the first step, walking up. The ground underneath runs from the start of the night to the end of it.HANDSHAKEARMHUGHANDSTART OF THE NIGHTEND OF THE NIGHT
    touch-staircase · The staircase: handshake, arm, hug, hand, each step a riser, and him on the first
  • The dialsA dashboard of four half-round gauges in a row, labelled sleep, hunger, stress and pain. Each has a zone at its far end. The sleep, hunger and pain needles sit in the clear. The stress needle is buried in its zone, which is filled in: in the red.SLEEPHUNGERSTRESSPAININ THE RED
    the-dials · The dials: sleep, hunger, stress and pain on one dashboard, one in the red
  • The thin bandA timeline from left to right. A wide block marked the past, a thin band marked now, and a wide block marked the future. A circle marked your head sits inside the past and another inside the future. The thin band in the middle is marked your body and holds nothing else.YOURHEADYOURHEADYOUR BODYTHE PASTNOWTHE FUTURE
    mindful-thin-band · The thin band: the past, the future, and the only bit your body is ever in
  • The seesawA seesaw on a single pivot labelled the same stubbornness. One end carries a block marked firmness, over the words a reason; the other carries a block marked stupidity, over the words no reason. The beam tips towards one end, then the other, and settles level.FIRMNESSSTUPIDITYA REASONNO REASONTHE SAME STUBBORNNESS
    stubbornness-seesaw · The seesaw: firmness one end, stupidity the other, the same stubbornness is the weight (animated)
  • The spectrumOne bar reading passive on the left, assertive in the middle and aggressive on the right. The middle is a solid band marked the sweet spot. A man labelled me starts on the passive end, swings past the middle into aggressive and settles on the band.PASSIVEASSERTIVEAGGRESSIVESAYS NOTHINGTHE SWEET SPOTSHOUTSME
    assertiveness-spectrum · The spectrum: passive, assertive, aggressive, the sweet spot marked, and me finding it (animated)
  • The wavesTwo waves on one line over time, one labelled you and one labelled them. They start half a cycle out of step, crossing each other, then your wave slides along until the two sit exactly on top of each other and read as one.THEMYOUWHAT THEY FEEL, WHAT YOU FEELTIME
    empathy-waves · The waves: you and them, half a cycle out of step, sliding into one band (animated)
  • The feedback loopFour circles on a ring, read clockwise: say, hear, reflect, clarify. An arrow leads from each one to the next, and the last leads back to say. In the middle of the ring it reads and round again.SAYHEARREFLECTCLARIFYAND ROUNDAGAIN
    active-listening-loop · The feedback loop: say, hear, reflect, clarify, and round again
  • The drainA tank labelled you, full to the top. Down the left, five asks: cover my shift, lend us fifty quid, just five minutes, can you pick me up, listen to this, each with an arrow at the tank. The level sinks a step per ask until the tank is nearly empty. Nothing points the other way.COVER MY SHIFTLEND US FIFTY QUIDJUST FIVE MINUTESCAN YOU PICK ME UPLISTEN TO THISWHAT THEY ASKYOUFULLEMPTY
    boundaries-drain · The drain: a tank of your energy, emptied an ask at a time (animated)
  • The fenceA row of fence posts down the middle. Inside, on the left: your time, your sleep, your money, your evenings. Outside, on the right: their drama, their deadline, their last minute, their mess.YOUR TIMEYOUR SLEEPYOUR MONEYYOUR EVENINGSTHEIR DRAMATHEIR DEADLINETHEIR LAST MINUTETHEIR MESSINSIDEOUTSIDETHE LINE
    boundaries-fence · The fence: what is yours inside, what is theirs outside
  • The forkA block reading rupture on the left. Two lines lead from it to two solid blocks on the right, fix it above and f*ck it off below. A dotted line straight ahead reads bury it, forgive and forget, and stops short of anything.RUPTUREFIX ITF*CK IT OFFBURY ITFORGIVE AND FORGET
    forgiveness-fork · The fork: rupture, then fix it or f*ck it off; bury it is a dead end
  • KintsugiA bowl broken in two by a crack from the rim to the foot. The left piece reads rupture, the right piece reads repair. A seam fills the crack from the top down until the bowl is whole again with the seam still showing.RUPTUREREPAIRTHE CRACK, FILLED, NOT HIDDENKINTSUGI
    forgiveness-kintsugi · Kintsugi: a bowl in two pieces, the crack filled and the seam left showing (animated)
  • The mirrorA man on the left, labelled you, points at a tall mirror. In the mirror his reflection points straight back at him.YOUTHE MIRROR
    the-mirror · The mirror: he points at everyone else, the reflection points back at him
  • The cageA woman, labelled her, stands between two sets of four bars. The bars on the left are the checking, the bars on the right are the rules. Both sets slide in until the nearest bars stand right against her, then slide back out.THE CHECKINGTHE RULESHER
    the-cage · The cage: her in the middle, the checking and the rules closing in as bars (animated)
  • The rollercoasterA line of how he felt over a month. It starts low, spikes the night he gets her number, spikes again on every message with a dip between each one, peaks at the drink, then the replies thin out and it crashes below where it started and stays there.HOW I FELTWHERE I STARTEDNIGHT ONEMESSAGESTHE DRINKLEFT ON READA MONTH ON
    limerence-rollercoaster · The rollercoaster: a month of his mood, a spike on every message, the crash when they stop (animated)
  • The markA box reading the law leads to a diamond asking does it need her to be a mark. Three lines leave the diamond: yes to a box reading poison, sometimes to a box reading depends, no to a box reading keep.THE LAWPOISONDEPENDSKEEPDOES IT NEEDHER TO BEA MARK?YESSOMETIMESNO
    the-mark · The mark: one question sorts the 48 laws into poison, depends and keep
  • The bath curveA line of core temperature from eight in the evening to midnight. It runs flat, climbs while you are in the bath between nine and ten, then falls steadily once you are out, dropping below where it started as you get into bed, which is where sleep comes.THE BATHASLEEP8PM9PM10PMBEDMIDNIGHTCORETEMPERATURE
    fall-asleep-faster-curve · The bath curve: core temperature up in the bath, down when you get out, asleep on the way down (animated)
  • The skin protocolA grid of two rows and three columns. The morning row reads cleanse, moisturise, SPF 30. The night row reads cleanse, tretinoin, moisturise. All six cells look the same, and under each is what it does.MORNINGNIGHTCLEANSEMOISTURISESPF 30CLEANSETRETINOINMOISTURISESTEP 01STEP 02STEP 03DIRT AND OILHYDRATEPROTECTTHE DAY OFFREPAIRLOCK IT IN
    skin-protocol-grid · The skin protocol: morning and night, three steps each, six cells alike
  • The sleep sandwichThree slabs stacked like a sandwich. The top reads study, at 9pm. The thick middle reads sleep, the night. The bottom reads study again, at 9am. The night in the middle is the biggest layer.STUDYSLEEPSTUDY AGAIN9PMNIGHT9AM
    learn-faster-sandwich · The sleep sandwich: study, sleep, study again, the night as the thick filling
  • The learning curveA curve of effort against practice, from day one to a year in. It falls steeply at first and flattens to almost nothing. Near the top a point is marked failed my test twice; at the bottom another is marked without a second thought.THINKING ABOUT EVERYTHINGDAY ONEPRACTICEA YEARFAILED MY TEST TWICEWITHOUT A SECOND THOUGHTEFFORT
    automaticity-curve · The learning curve: effort falling with practice, failed my test twice at the top, without a second thought at the bottom
  • Newsletter signupsMay: 120. Jun: 180. Jul: 90. Aug: 240. Sep: 300.12018090240300MayJunJulAugSep
    chart · Bar chart
  • Newsletter signupsMay: 120. Jun: 180. Jul: 90. Aug: 240. Sep: 300.12018090240300MayJunJulAugSep
    chart · Line chart
  • Traffic by categoryRelationships: 40. Career: 25. Money: 20. Health: 15.Relationships40 (40%)Career25 (25%)Money20 (20%)Health15 (15%)
    chart · Donut chart

Heroes

A marker sketch at the top of every post

The napkin drawing of the post’s claim, in code on the tokens: live on the article, a 4:3 WebP on the cards, and the dashed band cropped out as the share image.

  1. A 4:3 frame, 1200 by 900, for the article and the cards. The share image is its middle band, 1200 by 630, dashed on every drawing here: everything that carries the meaning sits inside it, and only the ground and the man may run past it.

  2. White paper, a black marker line 10 wide with round ends, and one colour: solid for the point of the picture, once or twice, and a 16% tint for anything else that needs a fill.

  3. Every line runs through one turbulence filter, so it wobbles as if drawn by hand. Words never wobble.

  4. No title and no credit. A word sits inside a shape only when it fits in the mono face; otherwise a key in the top left corner names the shape, or an asterisk the key explains marks it.

  5. The man is a circle and five straight lines with no face, and appears only when the post is about what someone does.

  6. A hero may move, on the diagram rules, but its still is the picture: the card and the share image are the same drawing, rendered without the motion.

  • The river crossingA farmer in a straw hat sitting in a rowing boat on a river, an oar over the side.
    the-river-crossing · The river crossing: the farmer in a rowing boat on the river, an oar over the side (animated)
  • Wetter the more it driesA bathroom tap with one drop of water hanging from the spout over a basin.
    wetter-the-more-it-dries · The tap: one drop hanging from a bathroom tap over the basin, falling (animated)
  • The surgeonA close-up of a surgeon in a scrub cap and a mask, only the eyes showing. Beside them a scalpel and a pair of forceps lie on a tray under the theatre lamp.
    the-surgeon · The surgeon: a close-up in a scrub cap and a solid mask, only the eyes showing, the tools on a tray under the theatre lamp (animated)
  • Privacy ParadoxA man stands thinking under a signpost. Its two arms point opposite ways and both read trust. A question mark hangs over his head.TRUSTTRUST?
    privacy-paradox · The signpost: two arms, both reading trust, pointing opposite ways, and him underneath (animated)
  • VulnerabilityA man stands on the ground beside an empty turtle shell, out of it.SHELL
    vulnerability · The empty shell: the turtle’s shell sat on the ground, and him stood beside it, out of it (animated)
  • TouchA woman and a man stand close together, her hand on his arm. A small heart hangs over his head.
    touch · The touch: her hand on his arm, and a heart over his head (animated)
  • StubbornnessA man leans back with his heels dug into the ground while a big arrow pushes him from behind.
    stubbornness · Heels dug in: an arrow pushes him from behind and he leans back against it (animated)
  • Skin ProtocolA sun on the left and a crescent moon on the right, with three small bottles standing on the ground under each.MORNINGNIGHT
    skin-protocol · Morning and night: a sun and a moon, three bottles under each (animated)
  • Self-reflectionA man sits on a plain chair facing a blank wall, an empty thought bubble over his head.
    self-reflection · The wall: him on a plain chair facing a blank wall, an empty thought bubble overhead (animated)
  • Post Series DepressionA man slumps on a sofa in front of a telly whose screen reads credits. The remote lies on the floor.CREDITS
    post-series-depression · The credits: him slumped on the sofa, the telly reading credits, the remote on the floor (animated)
  • PossessivenessA woman walks away to the right, her arm pulled out behind her. A man stands planted behind her, holding her by the wrist.
    possessiveness · The wrist: she walks away, and he holds on (animated)
  • NeedinessA man holds up his phone. Its screen says read at 14:02, and the clock on the wall says 14:42.READ14:0214:42
    neediness · Read at 14:02: him holding up his phone, the clock on the wall at 14:42 (animated)
  • “Listen to your body”One big gauge, a pale half ring whose last quarter is solid. The needle points into the solid quarter.
    listen-to-your-body · The gauge: one big dial, the needle in the solid quarter (animated)
  • LimerenceA small man stands under a huge thought bubble. Inside it, tiny, is a woman.
    limerence · The bubble: a huge thought bubble, and her, tiny, inside it (animated)
  • Learn FasterA stack on the ground: a book, a fat pillow marked sleep, and another book on top. Both books read study.STUDYSTUDYSLEEP
    learn-faster · The sandwich: a book, a pillow, a book, the sleep the thick part in the middle (animated)
  • HuggingTwo people in a close hug, arms round each other, under a stopwatch that reads twenty seconds.20 SEC
    hugging · Twenty seconds: two people in a proper hug, a stopwatch over their heads (animated)
  • Fall asleep fasterA bed with a thermometer on the wall beside it reading low, and a mug on the bedside table crossed out with one line.
    how-to-fall-asleep-faster · The cool room: a bed, the thermometer low, the coffee crossed out (animated)
  • How to be “mindful”A man stands on the ground with no head on his shoulders, only a dotted ring where it should be. His head floats off to the right, a dotted line back to where it belongs.
    how-to-be-mindful · The drifted head: his body on the ground, his head off to the right, a dotted line back (animated)
  • GratitudeA man sits on top of a big pile of pale blocks, looking across at one coloured block on its own, far away on the ground.
    gratitude · The pile: him sat on plenty, looking across at the one block he hasn’t got (animated)
  • The FriendzoneAn open door with friend written in its doorway. A man walks back towards it along a dotted loop on the floor that comes out of the door and goes back in.FRIEND
    friendzone · The door: friend in the doorway, and him walking back in along a loop he has walked before (animated)
  • ForgivenessTwo arrows leave the same point. A solid one loops up and round and comes back to the point. A pale one runs straight off the edge of the picture.FIX ITWALK
    forgiveness · Two ways out: one arrow loops back round to fix it, the other walks straight off the page (animated)
  • ExpectationsA man stands under a thought bubble with a big star in it. On the ground in front of him is one small dot.
    expectations · The star and the dot: what he pictured over his head, what he got at his feet (animated)
  • EmpathyTwo people sit side by side on a bench, facing the same way. One small cloud hangs over both of their heads.
    empathy · The bench: two people side by side, facing the same way, under one cloud (animated)
  • BreathworkA man stands with a pale circle in front of his chest and four short ticks around it, like the counts of a breath.
    breathwork · The breath: a circle in front of his chest, four counts round it, filling and emptying (animated)
  • BoundariesA man stands inside a circle drawn on the ground. Another figure has stopped just outside its edge.
    boundaries · The line: a circle drawn round him on the ground, and somebody stopped at its edge (animated)
  • AutomaticityA field of long grass with one worn path curving through it to the horizon, and a man walking along the path.
    automaticity · The path: a track worn through long grass, and him walking it (animated)
  • AuthenticityA man stands with his arms at his sides. On the ground beside him lies a mask on a stick, with two eye holes and a fixed smile.
    authenticity · The mask: him standing plain, the mask dropped on the ground beside him (animated)
  • AssertivenessA man stands up straight. A speech bubble from him says no.NO
    assertiveness · The word: him standing straight, and a speech bubble that says no (animated)
  • AmbiguityA man and a woman face each other. Between them is a speech bubble drawn only in dots, with a question mark in it.?
    ambiguity · The unsaid: him and her face to face, a dotted bubble between them with a question mark (animated)
  • Active listeningA woman is talking, a speech bubble full of lines over her head. Opposite her across a table, a man has dropped his head to the phone buzzing on it.
    active-listening · The phone: she’s talking, and his head has gone to the phone buzzing on the table (animated)
  • AccountabilityA man points away from himself. The big arrow leaving his hand loops round and comes back to point at his own head.
    accountability · The boomerang: he points away, and the arrow comes round and points back at him (animated)
  • 48 Laws of PowerA book stands on its end with 48 on the cover. A tick sits on one side of it and a cross on the other.48
    48-laws-of-power · The book: 48 on the cover, a tick on one side and a cross on the other (animated)
  • TemptationA man holds hands with his partner while another woman walks past. A dotted arrow runs from his head to hers.
    temptation · The glance: him holding her hand, his eyes on the woman walking past (animated)
  • ApocAIlypseA robot twice a man’s height, a square head on the same five lines, stands over him.
    apocailypse · The robot: twice his height, a square head on the same five lines, standing over him (animated)
  • The Four HorsemenA heart with four arrows aimed at it, two from each side: criticism, contempt, defensiveness and stonewalling.CRITICISMCONTEMPTDEFENSIVENESSSTONEWALLING
    the-four-horsemen · The heart under fire: criticism, contempt, defensiveness and stonewalling, all aimed at it (animated)
  • ASAP Breakup GuideA heart cracked down the middle, its two halves pulled apart, and a man walking briskly away from it to the right.
    asap-breakup-guide · The crack: a heart pulled apart, and him walking away from it fast (animated)
  • The Perfect Partner ParadoxA seesaw over a ground line labelled perfect. The familiar block weighs its end down onto the line while the forbidden block sits up in the air at the other end: only one end can ever touch it.PERFECTPERFECTFAMILIARFORBIDDENPERFECT
    perfect-partner-paradox · The seesaw: the ground is perfect, the familiar weighs its end down onto it, the forbidden stays up in the air (animated)
  • All You Need Is Love?A column of seven blocks, trust, respect, connection, communication, values, compatibility and adaptability, with a heart balanced on its tip on top.TRUSTRESPECTCONNECTIONCOMMUNICATIONVALUESCOMPATIBILITYADAPTABILITY
    all-you-need-is-love · The column: seven blocks that hold it up, and love balanced on top (animated)
  • Perfect JobThree overlapping circles, love, skill and money. A man sits in the patch where all three meet.MONEYLOVESKILL
    perfect-job · The sweet spot: love, skill and money, and him sat where all three meet (animated)
  • A sincere apoloogyA man sat on a toilet, side on, and a note propped on the floor beside him that says I’m sorry.I’M SORRY
    apoloogy · Him sat on the toilet, a note propped beside him that says I’m sorry (animated)
  • Riddle 005A man stands thinking. A trail of dots rises from his head to a big card that reads riddle 005.RIDDLE005
    riddles · The riddle placeholder, for a riddle with no hero of its own yet: him thinking, the dots up to the card with the riddle’s number (animated)

Article header

The band every post opens with

The real header with sample words: the trail, the title, the standfirst and the byline inside the remap, and the hero outside it on its own white paper.

Privacy Paradox

Should your missus be allowed to go through your phone?

Privacy ParadoxA man stands thinking under a signpost. Its two arms point opposite ways and both read trust. A question mark hangs over his head.TRUSTTRUST?
HeroArticle · The privacy-paradox post’s words and hero, no author and today’s date

Riddle

The riddle a riddle post opens on

The question, then the hint and the answer behind two buttons. Both are in the page for a search engine to read and stay closed until the reader opens them.

The riddle goes here, retold in plain British English: the opening paragraph, with no number and no label.

Give me a hint

A hint narrows it down without giving it away.

Reveal the answer

The answer, said flatly

One line of take, only when it adds something.

Source: The source, linked to its official home

RiddleCard · The format with placeholder words, opened to show the answer

Socials

Every post’s hero, ready to post

The headline and the drawing in a square that every network keeps, made from the hero by the render script.

  1. Two formats from one drawing: the Instagram post at 4:5, 1080 by 1350, and the story and the reel at 9:16, 1080 by 1920.

  2. A 1:1 safe square sits in the middle of both, and everything keeps 72 in from its edges. Above and below it is paper, so a network that crops to the square loses nothing.

  3. Inside it, top to bottom: the post’s title in the sans at 800, three lines at most, the hero framed like a card, and the site’s name in the mono face in the primary.

  4. No standfirst and no credit. The headline is the title as the article prints it, and the drawing is the hero, rendered and never redrawn.

  • Privacy ParadoxA man thinking under a signpost whose two arms both read trust and point opposite waysPrivacy ParadoxPrivacy ParadoxA man stands thinking under a signpost. Its two arms point opposite ways and both read trust. A question mark hangs over his head.TRUSTTRUST?LEEW.BLOG
    4x5 · Instagram post, 1080 by 1350, the safe square and its padding dashed
  • Privacy ParadoxA man thinking under a signpost whose two arms both read trust and point opposite waysPrivacy ParadoxPrivacy ParadoxA man stands thinking under a signpost. Its two arms point opposite ways and both read trust. A question mark hangs over his head.TRUSTTRUST?LEEW.BLOG
    9x16 · Story and reel, 1080 by 1920, the safe square and its padding dashed

Profile image

One face for the logo, the byline and the tab

The photo cut out and set in the marker line’s rings, so the face in the rail, on a post and in the browser tab is the same picture.

  1. One picture does every job: the logo in the rail, every byline and the head of the contact dialog, the tab icon and the home screen icon.

  2. It is the photo cut out of its background, brightened and set in drawn rings. From the outside in: a thin white ring, the primary edged in a darker shade of it, a white ring as wide as the primary and its edges, then the primary at a 16% tint behind the face.

  3. The hair breaks out over the top of the rings and nothing else does. The rings wobble like every drawing; the photo does not.

  4. The rings are part of the picture, so no component adds one. The outside is clear, so it sits on the paper, the dark rail or the primary band.

  5. It is one file in the codebase. Replace it and ship, and every place changes together; nothing keeps a copy. The tab icon is drawn from its middle when the site is built, the face in one ring, since the rings are noise at 16px.

  • Lee W logo
    profile.webp · The one file, with a clear background, in the brand folder
  • Lee W logoLee WLee W logoLee W
    SiteBrand · The rail at 48px and the phone bar at 32px, where the thin white ring shows

    Byline · On every post at 56px, opening the contact dialog
    icon · The browser tab at 32px and 16px: the middle of the same file, in one ring

Icons

Two sets and no others

Single-path brand marks for the networks, Lucide for the interface. Both take the current colour.

Writing

Plain British English, typeset properly

The same rules for a person and for an AI writing copy, code strings or alt text.

  1. Curly quotes and apostrophes: ’ “ ”. Never the straight ones. Writers may type straight quotes in the editor; the site curls them.

  2. No em dash and no en dash. Use a comma, a full stop or a colon. A hyphen joins words only.

  3. British spelling, sentence case everywhere, no full stop at the end of a heading, kicker, label or button.

  4. Kickers are one to four words. Numbers in a list are two digits, 01 to 99, in the mono face.

  5. Dates read 01 Sep, 2026: two-digit day, three-letter month, four-digit year. One formatter prints every one of them.

  6. No exclamation marks, no ellipsis, no emoji. Second person, short sentences, one idea each. Alt text says what the picture shows, never “image of”.

  7. Two dots for a pause, as in “wait..”. Never three and never the ellipsis character. It is wrong on purpose, and nothing corrects it.

  8. A swear is rare and for effect, its first vowel asterisked: sh*t, f*ck, b*llocks. Brutal is fine; vulgar is not.

  9. Plain English, short and punchy. Open with the claim, name real examples, end honestly. No filler and no sentence that could open any article.

Imagery

Photos are photos, everything else is drawn

Both follow the five principles.

  1. Photos are WebP, long edge at most 2000px, uploaded through the media library. Never store a URL. The profile image is the one picture that is a file instead (Profile image).

  2. Alt text is never empty: the logo is “<site> logo”, an icon “<site> icon”, the profile image in a byline the author’s name, a body image what it shows.

  3. Body images take the lg radius and the full measure. No captions baked into pixels; the caption is the ArticleMedia figure’s figcaption, small and muted, closed by a rule.

  4. Anything drawn, whether a diagram, an illustration or a social card, is an SVG on the tokens. Hex values here are for tools that cannot read a variable, and are the light palette.

  5. Brand marks are single-path icons filled with the current colour, always icon-only with an aria-label on the link. UI icons are Lucide, size-4, and aria-hidden beside their own text.