Wordknots · app icon · round four
Icon exploration · round four
This round abandons the abstract knot symbol, and it should have been abandoned two rounds ago. Round one invented six knots and they looked like nothing in the game. Round two rebuilt from the six shipped lobby glyphs and the best of them read as a generic AI app icon. Round three drew that same glyph nine ways in its correct ultraviolet and it read as something worse. Three failures, one cause: an abstract knot centred in a rounded square is generic no matter how well it is drawn, because every other icon on the home screen is also an abstract symbol centred in a rounded square. Recolouring it, cropping it and re-weighting it are all moves inside a template that was the problem.
So nothing below is a symbol. Every mark on this page is built from two objects the product already owns: a letter tile — rounded square, corner radius 20% of the side, one bold capital, which is literally .tile out of client/src/styles/board.css — and a cord. No other app icon on a home screen is letter tiles joined by rope, and that is the most ownable thing this product has.
The knot is a real knot. It is derived, not drawn: an open arc of the trefoil parametrisation, so its three crossings and their over-under alternation are topologically guaranteed rather than eyeballed, and it is then tensioned by dragging the two standing parts apart the way a loaded rope actually behaves. Because the crossings are cased in the plate colour — the same casing technique the shipped glyphs in client/brand/glyphs/ use — the rope reads as passing through itself, which is what makes it a tie rather than a tangle.
And the knot is always visible. The shipped wordmark's join is not: its cord runs behind the tiles, so a round-two concept that cropped to that join showed an empty gap. In every composition below the cord is visible entering and leaving each tile, and the knot sits in the open between them.
Every specimen is at genuinely true pixel size. That is audited live at the bottom of this page, not asserted.
The shipped icon — client/brand/icon.svg — is a gold tile carrying a W on a navy plate, with a cord passing behind it. It already has the right instinct: a tile and a cord. It is missing the second word and it is missing the knot.
Palette, read out of client/src/styles/tokens.css and the brand files, nothing invented: #0D1330 plate · #F7C24F rung 1 gold · #FDFCF8 light tile · #a77ce0 cord on a dark ground · #8c56d6 traced-tile core · #f2eee5 the app's own paper. The rejected round-two error — painting a rung-4 object gold — cannot recur here, because no mark below depicts a specific rung.
Concept 01
Two tiles, one cord, an overhand knot pulled up between them.
The brief, taken literally. W and K — the two words — are real board tiles: rounded square, corner radius 20% of the side, one bold capital, exactly .tile in board.css. They sit on the wordmark's own top-left-to-bottom-right diagonal, and the plain diagonal has been replaced by a cord that is genuinely tied. The knot is a three-crossing overhand and the cord is visible entering and leaving both tiles, which is the thing the shipped wordmark's join cannot do: there the connector runs behind the tiles, so a crop of the join shows nothing at all.
What would kill it: two letters is two objects, and at 32 px they are 6 px squares — the whole composition has to hand over to the reduced tier earlier than a one-letter mark would. It also leans on the diagonal, which is the shipped wordmark's one weak habit. Would I ship it: yes. It is the only mark here that answers all three parts of the brief at once — letters, a visible knot, and the game's own tile language — and it is the recommendation.
Concept 02
The same two tiles hung from the knot instead of strung through it.
Same two tiles, same knot, different physics: the cord does not pass through the pair, it carries them. That buys a triangular silhouette, which matters more than it sounds — a triangle fills a square corner to corner instead of sitting as a centred symbol with an even inset on all four sides, and “centred symbol, even inset” is the exact shape that was rejected three times.
What would kill it: the two descending cords read as a handle. At 96 px this is a shopping bag or a coat hanger with letters on it, and once you have seen that you cannot stop seeing it. Would I ship it: no. It came closer than I expected — the triangular fill is genuinely better than concept 01's, and the fix is a shorter drop rather than a redesign — but a mark you have to talk someone out of seeing as a handbag is not a mark.
Concept 03
The shipped wordmark, squared up, with a diagonal that is actually tied.
client/brand/wordmark.svg puts WORD on gold tiles, KNOTS on white ones, and runs a plain 12 px diagonal from the D to the K. CLAUDE.md says that join should be “a recognizable knot, without reading as crossed out”, and today it is neither: it is a line through the gap. Here it is a real overhand, tied in the middle of the run, on the same diagonal.
What would kill it: nine tiles in 512 px means an 88 px tile, and below about 120 px the whole thing is two grey bars. This is a wordmark repair that happens to be square, not an icon. Would I ship it as the icon: no. Would I ship the fix: yes — this diagonal belongs in the wordmark whatever the icon turns out to be, and that is the single most useful thing on this page.
Concept 04
Four real tiles with the cord tracing through them, tying off as it goes.
A two-by-two corner of the actual board — W O over K N, the first two letters of each word in reading order — with the cord running the way a player runs it: tile centre to tile centre, orthogonal, and tying off between the third tile and the fourth. This is the most literal answer to “make it look like it looks in the game”, and a two-by-two grid of letters is the single most legible “word game” signal a stranger can be given.
What would kill it: the knot is the smallest thing in the composition and it is the first thing to go — by 48 px it is a smudge in the middle and the mark is a letter grid with a stain on it. Four letters also means four small letters. Would I ship it: yes, second. Its silhouette is the strongest here and it is the only concept a stranger reads as “word game” before they read anything else.
Concept 05
The reduced tier, standing on its own.
One letter is the only thing that survives 16 px intact, and one knot beside it is the only cord detail that survives with it. This is the mark every other concept on this page hands over to at 32 and 16, offered here as a candidate in its own right — which is fair, because it is exactly the shipped icon plus the one thing the shipped icon is missing.
What would kill it: it does not do what the brief asked. “The words connected” is two words; this is one letter and a lump. At 232 px the knot also reads as a pretzel sitting next to a letter rather than as something tying anything. Would I ship it alone: no. Would I ship it as the 16/32 tier: yes — and it has to exist regardless of which rich mark wins.
Concept 06
The wordmark’s own join, cropped until the knot is the subject.
The D of WORD and the K of KNOTS run off opposite corners and the knot between them fills the frame. Nothing is centred, nothing has an even inset, and the two tiles are cut by the canvas edge rather than floated inside it — three structural breaks from the template that was rejected in rounds one to three.
What would kill it: it is the closest thing on this page to the thing that was already rejected. Shrink it and the cropped letters stop reading as letters, and what is left is a purple tangle centred in a dark square — which is round three with corners. Would I ship it: no. I am naming it: this one still looks like a logo rather than like the game.
Concept 07
A turn taken round the second tile, cinched.
The cord does not pass between the two tiles, it takes a full turn around the second one and ties off against it. The turn runs behind the tile, so the visible rope is a band round its edges and a knot below — the letter is never struck through, which is the specific failure CLAUDE.md warns about. The two words are physically held together rather than decorated with a line.
What would kill it — and does: a closed loop around a letter reads as a ring, and a ring around a letter reads as a target, a badge, or a prohibition sign. At 48 px the K looks cancelled, which is the exact defect the composition was built to avoid, arriving by a different route. Would I ship it: no. Shown because the failure is instructive: “not struck through” is not the same as “not enclosed”.
Placement & optical centring
Round three found that round two's blanket 8 px lift was wrong for a radially symmetric mark, so nothing here inherits a number. Every row below is measured live in your browser with getBBox() on each mark's ink, with the plate excluded — the plate always fills the canvas and would make every offset read as zero. Offset is the ink's own centre minus the canvas centre in 512-unit coordinates; positive y is down.
Safe circle is the worst corner of the ink box measured against Android's maskable radius of 204.8 units. Every composition here overruns it, which is expected and not a defect: a full-bleed icon and a maskable icon are two exports, and the maskable row inside each concept above shows the identical ink scaled to 0.74. Read the column as a deliberate worst case rather than as a verdict: a bounding-box corner is frequently empty. Concept 01 puts its two tiles on opposite corners, so the two corners the number is computed from carry no ink at all — which is why 0.74 visibly clears for it and why concepts 06 and 07, whose ink genuinely reaches their corners, are the two that still crop at that scale.
| Mark | Ink box | Offset x, y | Safe circle | What was done |
|---|---|---|---|---|
| measuring… | ||||
The rule applied: a mark whose mass is one large flat tile is not balanced by centring its bounding box, because a 196 px gold square outweighs an equal area of 32 px rope by a long way. Concepts 01 and 04 are laid out symmetrically and take no correction. Concept 02 is deliberately bottom-anchored: the tiles sit 22 units off the lower edge and the knot floats, so its ink box sits low on purpose and centring it would leave the tiles swimming. Concept 06 is deliberately off-centre in both axes and its numbers should be read as intent, not as drift.
These are not equals, and two of them fail.
Recommendation
01 — Tied
It is the only mark that answers the whole brief at once: two letters for two words, a knot that is visibly tied and visibly holding them, drawn in the board's own tile and cord. It survives to 48 px with both letters intact, its silhouette holds with every colour removed, and it repairs the shipped wordmark's defect rather than inheriting it. Its cost is honest: it hands over to the reduced tier at 32 px, and the reduced tier is concept 05.
Runner-up
04 — Board fragment
The strongest silhouette here and the fastest “word game” read for a stranger, because a grid of letters needs no decoding. It loses to concept 01 on one point only, and it is the point this whole round exists for: the knot is the smallest object in it and the first to disappear, so the mark that is meant to say knots stops saying it before the icon stops being visible.
Ships either way
05 — One tile, one knot
Whichever rich mark wins needs this underneath it at 16 and 32. It is not a compromise, it is the same object with the second tile removed — same tile geometry, same cord weight ratio, same knot.
Named, as asked
Where this round still misses
06 — The join is the one I would throw away first: shrink it and the cropped letters stop being letters, leaving a purple tangle centred in a dark square, which is round three with corners on it. 07 — Hitched fails differently and more usefully: a closed loop round a letter reads as a target or a prohibition sign, so avoiding a strike-through is not the same as avoiding enclosure. 03 — The stack is not an icon at all and I am not pretending otherwise — but its knotted diagonal is the correct fix for client/brand/wordmark.svg regardless of which icon wins, and that may be the most useful thing on this page. And on my own recommendation, the honest reservation: 01 is two letters, and two letters is not a word. A stranger reads “W K”, not “Wordknots”. Concept 04 is the one that reads as a word game without being told, and if that matters more than the knot being legible, 04 should win instead.
Verification
Round two shipped a page claiming true size where 28 of 185 specimens were flex-shrunk — 192 px rendering at 154. The cause was flex-shrink:1, the default on every flex item. The fix is .row>*{flex:0 0 auto} with the overflow moved to a scrolling parent. The check below runs on load and on resize: it compares every specimen's measured getBoundingClientRect().width against its own width attribute, and fails on any discrepancy over half a pixel.
auditing…
No repository file was modified to produce this page and nothing was deployed. The manifest, favicon, apple-touch-icon and every shipped asset under client/ and public/ are untouched; this page reads them and reproduces the shipped icon only as the “before”. Palette values are quoted from client/src/styles/tokens.css, client/brand/wordmark.svg and client/brand/icon.svg. Tile geometry is quoted from client/src/styles/board.css. The crossing-casing technique is the one already used by client/brand/glyphs/*.svg. No external asset, font, script or network request is involved: this document is self-contained.