Exploration · not shipped · nothing in client/ or public/ was touched

Six knot marks for the installed icon

Every mark below is built from the product's own cord language — one weight, round ends, and a plate-coloured casing wherever a strand passes over another, the same convention the six ladder glyphs use. The current icon is not among them: a gold tile carrying a W is a letterform, and the knots are the better asset.

What each mark was optimised for, in this order

  1. Recognisable at 16px — counters open, crossings countable or deliberately dropped.
  2. A closed silhouette — it has to survive as a solid black stamp.
  3. Optically centred in a rounded square, which is almost never the bounding-box centre.
  4. Faithful to a specific knot — last, and sacrificed first.

All six are authored on a 512 board and fit inside the 80%-diameter maskable safe circle, so the launcher, the circle mask and the squircle can share one drawing. Every plate is #12151e, the product's dark surface, so the comparison is about form rather than colour. Cords are the six ladder values verified against client/src/styles/tokens.css.

01

Standing

A trefoil: the smallest figure that is genuinely a knot

Three lobes, three crossings, one closed cord with no ends to soften at small sizes, drawn in the product's own casing convention — the strand passing over is redrawn on a plate-coloured casing at twice cord width, exactly as the six ladder glyphs do it. Cord is 62 units on a 512 board, which lands at 1.9px at 16px: heavy enough that the three counters stay open rather than filling in. The cord runs the ladder's full hue rotation, gold at rung one through to blaze at rung six, so the icon carries the whole day rather than one game.

Optical centring Centred on its arc-length centroid, not its bounding box. Two of the three lobes sit below the axis and hold more ink than the single lobe above, so bounding-box centring makes it sag; aligning the centroid moves the drawing 26 units — 5.2% of the canvas — off the geometric centre, and that offset is the difference between a mark that sits in the plate and one that slides down it.

Browser tab — 16px, true size

Wordknots Schedule Notes

Bookmarks bar — 32px, true size

Wordknots Archive

Android launcher — adaptive masks, safe zone shown at 192px

48 circle
48 square
192 circle + safe zone
192 square + safe zone

iOS home screen — 60px and 180px, continuous corners

60
180

System surface — the plate is fixed, the ground is not

Light
Dark

Silhouette — one ink, no casings, no plate

The only mark on this page a stranger would call a knot at 16px, and its stamp is a clean three-lobed clover with counters still visible at 32px. What would kill it is ownership: the trefoil is the most-drawn knot in the world — the ancestor of the recycling mark, the house shape of a hundred yoga studios — so this can be borrowed but never owned. Ship it anyway; a borrowed shape that works beats an original one that does not.

02

Bound

Two closed cords, four crossings, interlaced so neither can be lifted out

One rounded-rectangle cord drawn twice, at 45° and −45°, concentric. The four crossings alternate strictly — gold over blaze north and south, blaze over gold east and west — which makes this a real two-component link and not two shapes overlapping. Both the casing and the redrawn over-strand are dash windows on the ring's own path rather than hand-traced copies, so the restored strand rejoins its own curve exactly. Cord 58 units, 1.8px at 16px. The colours are rung one and rung six: the day's first knot and its last, tied together.

Optical centring Four-fold rotational symmetry means the centroid, the bounding-box centre and the optical centre are the same point, so this is the only concept in the set that needed no compensation at all. That is not a small thing: it survives a circle mask, a squircle and a 22%-radius square identically, and the diamond counter stays dead centre in every one.

Browser tab — 16px, true size

Wordknots Schedule Notes

Bookmarks bar — 32px, true size

Wordknots Archive

Android launcher — adaptive masks, safe zone shown at 192px

48 circle
48 square
192 circle + safe zone
192 square + safe zone

iOS home screen — 60px and 180px, continuous corners

60
180

System surface — the plate is fixed, the ground is not

Light
Dark

Silhouette — one ink, no casings, no plate

Craft-wise this is the cleanest drawing on the page — no optical correction needed anywhere, and its diamond counter is the only counter in the set still open at 16px. Two readings could kill it, and neither is fixable by drawing better: it is a Celtic knot, which means heritage and whisky before it means word game, and its four-fold chirality makes it a hooked pinwheel at small sizes. Shippable, but not before someone looks hard at the 16px version with fresh eyes.

03

Fist

A monkey's fist as mass rather than line — the weave cut out of a solid ball

The only concept here that is not a stroke drawing. A filled disc carries the ball and a short hooked tail carries the working end; the wrapping is a mask cut through the fill, three near-vertical channels crossed by two horizontals that break where the vertical passes in front. Because it is mass rather than line there is no stroke weight to retune per size — the channels simply close up as the icon shrinks, which is either the point or the problem depending on how small you go.

Optical centring The disc is drawn off-centre — 24 units left and 12 units up — because the tail adds mass to the lower right. Centring the disc on the plate would leave the assembled mark leaning downhill; centring the assembly is what puts the disc where it looks right.

Browser tab — 16px, true size

Wordknots Schedule Notes

Bookmarks bar — 32px, true size

Wordknots Archive

Android launcher — adaptive masks, safe zone shown at 192px

48 circle
48 square
192 circle + safe zone
192 square + safe zone

iOS home screen — 60px and 180px, continuous corners

60
180

System surface — the plate is fixed, the ground is not

Light
Dark

Silhouette — one ink, no casings, no plate

The most robust silhouette in the set: a disc cannot fail to read, on any ground, at any size. What kills it is what the channels turn into on the way down — at 16px the three meridians and two horizontals stop reading as wrapping and start reading as latitude and longitude, and the mark is a magenta globe with a tail. Would not ship.

04

Trace

The board's own path, tied off — a genuine two-tier mark

This is the only concept that could not belong to another product. The large mark is the 4×4 board with a cord threading five of its tiles and crossing itself five times; the loop closes, so there is no loose end. The small mark is the same object with the board dropped and one tile removed: four tiles, one crossing, cord raised from 36 units to 62 — 1.1px to 1.9px at 16px. That is the whole argument for a two-tier system in one pair of drawings: the rich mark's cord is a third of the small mark's, because at 192px it has to share the plate with sixteen dots and five crossings, and at 16px it has to survive alone. It is also the only concept here that was tested against three alternative simplifications — one crossing, two crossings and all five — and the one shown is simply the least bad of the four.

Optical centring Both tiers are centred on the cord, not on the board. The five visited tiles pull the loop's centroid 7 units up and left of the board's centre, so the whole assembly — dots included — is offset by that amount and then scaled to 1.12 to fill the maskable circle. The small mark's four tiles pull it 17.5 units high, and it is pushed back down by exactly that.

Small sizes below use the simplified mark; 180px and 192px use the rich one.

Browser tab — 16px, true size

Wordknots Schedule Notes

Bookmarks bar — 32px, true size

Wordknots Archive

Android launcher — adaptive masks, safe zone shown at 192px

48 circle
48 square
192 circle + safe zone
192 square + safe zone

iOS home screen — 60px and 180px, continuous corners

60
180

System surface — the plate is fixed, the ground is not

Light
Dark

Silhouette — one ink, no casings, no plate

The best story on the page and the worst execution, and I would rather say so than sell it. Look at the silhouette panel: the rich mark stamps as a scribble with sixteen loose dots floating around it, which is the opposite of a closed shape, and the simplified mark stamps as the letter Z. A knot built from straight segments needs its gaps to survive, and below about 48px they do not. Do not ship this geometry — the idea deserves another attempt with curves.

05

Bight

One cord, one crossing, one very large counter

Maximum reduction: the moment before any knot exists, when a cord has been folded and crossed once and nothing has been pulled through yet. The eye is 236 units across against a 60-unit cord, which makes it by far the largest counter in the set — and counters, not strokes, are what fail first as an icon shrinks. The crossing is a dash window on the path itself, so the over-strand rejoins its own curve rather than a traced approximation of it.

Optical centring Set 12 units above the frame's centre. The eye occupies about half the mark's bounding box and is almost entirely empty, so it weighs far less than it measures; the dense region — the crossing and the two legs — sits low, and lifting the whole figure brings that mass toward the middle.

Browser tab — 16px, true size

Wordknots Schedule Notes

Bookmarks bar — 32px, true size

Wordknots Archive

Android launcher — adaptive masks, safe zone shown at 192px

48 circle
48 square
192 circle + safe zone
192 square + safe zone

iOS home screen — 60px and 180px, continuous corners

60
180

System surface — the plate is fixed, the ground is not

Light
Dark

Silhouette — one ink, no casings, no plate

The counter does exactly what it was built to do — at 16px it is still visibly open when every other concept's interior has closed. What kills it is that the resulting outline is a letterform: a round bowl with a tail crossing under it is the letter Q, in gold, in a tab strip, next to the word "Wordknots". Nothing about the drawing can be fixed without giving up the counter that makes it work. Would not ship.

06

Cinch

A bundle bound — three of the six ladder cords under one turn

The only orthogonal mark in the set and the only one carrying more than two colours. It follows the constrictor's actual logic: the binding turn passes in front of the middle cord and behind the outer two, which is what makes a constrictor grip. Cord 46 units for everything, and the casings are 1.5× cord rather than the product's usual 2× — at 2× the binding's casing would nick the cord above it.

Optical centring A mark much wider than it is tall reads larger than a symmetric one of the same bounding width, so the bundle spans 61% of the canvas where every other concept spans about 78%. Held to the same width it looks like it is bursting the plate; held here it looks small, which is the honest cost of a horizontal figure inside a square.

Browser tab — 16px, true size

Wordknots Schedule Notes

Bookmarks bar — 32px, true size

Wordknots Archive

Android launcher — adaptive masks, safe zone shown at 192px

48 circle
48 square
192 circle + safe zone
192 square + safe zone

iOS home screen — 60px and 180px, continuous corners

60
180

System surface — the plate is fixed, the ground is not

Light
Dark

Silhouette — one ink, no casings, no plate

It is the only concept that shows the product's colour system doing work, and it is still the weakest. The crossings are the entire idea and they are sub-pixel below roughly 64px, so at 16px this collapses into three stripes and a bar — which is a battery indicator. Do not ship.

Recommendation

Ship
01 Standing. At 16px it is the only one of the six that still reads as a knot rather than as a letter, a globe, a battery or a pinwheel, and its silhouette stamps as a single closed clover — which is exactly the order of priorities this page was built to test.
Runner-up
02 Bound. The best-made drawing here and the only one centred by construction rather than correction, held back by two readings nobody can control: Celtic heritage, and a hooked pinwheel at small sizes.

Two things worth carrying forward regardless of which mark wins. Standing's weakness is ownership rather than legibility, and the lever for that is the cord itself — the hue rotation, the weight, the casing gaps — not the topology; changing the knot to something rarer will cost more legibility than it buys distinctiveness. And Trace should not be abandoned: it is the only idea here that could not belong to another product, and its failure is specifically that straight segments cannot hold a visible gap at 16px. Redrawn as curved cord with two crossings instead of five, and with the board implied rather than dotted, it is worth one more round.