Wordknots · app icon

Icon exploration · round three

The ring, nine ways

This round is Turk's Head and nothing else. One asset, client/brand/glyphs/turks-head.svg, path data untouched in every mark below.

The gold was an error, and it was mine. Round two painted every mark #F7C24F on #0D1330. Turk's Head is rung 4 — ultraviolet — and the app has never drawn it gold. Its cord on a dark surface is #a77ce0, its core is #8c56d6, and the filament running inside the rope resolves to #c2a5eb. Round two also deleted that filament layer “for weight”; concepts 05 and 09 put it back.

Colour was only half the note. “Generic AI app icon” is a shape, not a hex value: a symbol centred with an even inset, on a dark rounded square, in one bright accent. Round two matched that template exactly, so recolouring it cannot fix it. Five of the nine below break the template structurally — by scale, crop, figure/ground or colour system. Four do not, and I say which.

Every specimen is drawn at true pixel size. Nothing here is a scaled mockup.


The correction, on its own

The same mark, the same plate, the same inset. Only the ink is different. 48, 32, 24 and 16 px.

Round two — wrongcord #F7C24F · rung 1–6 all gold
Rung 4 — ultravioletcord #a77ce0 · .level-4

Rung 4's palette, read out of client/src/styles/tokens.css: #8c56d6 core · #a77ce0 cord, dark · #7445b4 content, light · #a379e5 content, dark · #f5f1ff filament, at 35% lit · glow 1px at 33%.


01

Ultraviolet, plated

turks-head.svg · cord #a77ce0 on the shipped plate #0D1330 · ink at 66% of the square · two tiers

Would not ship — but this is the fix, isolated. Same square, same plate, same 66% inset as round two; only the ink changed, from a colour rung 4 never wears to the one it does. It is a real correction and it is not a design. What would kill it: it is still a small symbol centred with an even inset on a dark rounded square in one bright accent, which is the exact template the owner called out. Keep it as the control the rest of the page is measured against.

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

02

Ultraviolet on a violet ground

same mark · plate #2A1150, built from #8c56d6 rather than generic navy · 66%

Would ship, second tier. The plate stops being generic dark-app navy and becomes the rung's own hue driven down to a ground — the tile now has a colour identity instead of borrowing one. Cord against ground is 5.1:1, so the weave holds — a tenth less separation than the navy plate gives the same cord. What would kill it: the mark is still centred with a safe inset, so this fixes the palette without touching the structure the owner objected to, and at 16px the low-contrast violet-on-violet is the weakest small render on this page.

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

03

Cropped — the ring runs off the tile

same mark at 108% of the square, so all four edges cut it · cord 39px at 512 instead of 24

Would ship. The ring is drawn at 108% of the square, so the braid runs off all four edges and only the corners stay open. Nothing is centred-with-an-inset any more: the tile is a window onto a rope that is plainly bigger than it. The weave is now 39px of cord at 512 rather than 24, which is why it survives the shrink. What would kill it: it is unarguably a crop, and a crop is a decision someone has to be willing to defend — at 16px it stops being a ring and becomes a violet texture.

A harder crop was tested and dropped. At 145% the braid stops closing into a ring and becomes four unrelated bars, which is an accident rather than a decision — the two tiles here are 108% and 145% at 96 px, and the second is the one to argue with:

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

04

Reversed — the cord is the field

same mark, figure and ground swapped · field #a77ce0, ring #12151e, casings in the field · 66%

Would ship, second tier. Figure and ground swap: the cord becomes the whole field and the knot is the dark channel cut through it. It is the brightest tile here, so it is the one that survives a cluttered home screen best, and the crossings still read because the casing is painted in the field. What would kill it: its silhouette is identical to 01's, so the inversion is a colour move dressed as a structural one — and a full-bleed lavender square is a lot of one hue to ask a launcher to carry.

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

05

Exactly as the app draws it

cord #a77ce0 + filament #c2a5eb at 0.24 of cord weight + 1px/33% halo, on --surface #12151e · ink at 70%, the card's own 80%-of-slot fit

Would ship, and it is the honest one. This is the lobby card's own drawing at icon scale: cord #a77ce0, the filament round two deleted, and the same 1px/33% halo, on the app's own #12151e. Put it beside the card below and it is visibly the same object, which no other mark here can claim. What would kill it: structurally it is 01 — small symbol, even inset, dark square — and the filament and halo it is built on are invisible below about 48px, so everything that makes it special is gone exactly where icons are usually seen.

Icon and card, side by side the card glyph is 48 px, exactly as the lobby draws it

Turk's Head
rung 4 · ultraviolet
a lobby card, rebuilt here from lobby.css and tokens.css
concept 05, 60 px

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

06

Ladder-painted

same mark cut into six 60° wedges · #eddd7f #95d35e #58a1d7 #a77ce0 #d554b1 #e05243, the six --accent-cord-dark values in ladder order

Would ship, and it answers a real objection. The ring is cut into six 60° wedges carrying the six cord values in ladder order, so one cord climbs rung 1 to rung 6 as it goes round. A single-rung colour says the icon means Turk's Head; this says it means Wordknots, six games a day. What would kill it: six hues on one small object is close to the rainbow-gradient reflex the owner is already suspicious of, and below 32px it is a coloured smudge with no ladder legible in it. Rung 6's blaze against the plate is 4.7:1, the weakest ink on any dark tile here.

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

07

The light-theme twin

cord #8c56d6 (--accent-core, the light-theme ink) on --lobby-panel #f9f7f2 · 66%

Would not ship alone. The level's light ink #8c56d6 on the light panel, so the pair below shows what the launcher actually gets if the icon follows the app's theme. It is the calmest tile on the page, the only one that does not shout, and at 4.4:1 the lowest contrast anywhere on this page. What would kill it: an installed icon has no idea which theme the app is in, and a near-white tile disappears into a light wallpaper and into the light launcher row it sits in. Ship one icon, and it should be the dark one.

The pair light twin and dark twin at 180, 60 and 32 px. A launcher gets one of these, not both.

light twin
dark twin — concept 01

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

08

The ring as a solid

same closed subpath, filled with fill-rule=evenodd instead of stroked · #a77ce0 on #0D1330 · 70%

Would not ship. Same closed subpath, filled with an even-odd rule instead of stroked — no path edited, and it is by a distance the most legible mark here at 16px. But filling it throws away the only thing the drawing was for: with no stroke there are no crossings, so nothing goes over or under and the knot becomes seven lozenges in a circle. What would kill it: it reads as a flower, a gear or a loading spinner long before it reads as a knot. Included because the legibility argument is real and someone should say out loud why it loses anyway.

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

09

The crop, in its own colour, lit

03's 108% crop + 02's #2A1150 ground + 05's filament · halo omitted, because a 1px halo is clipped everywhere this mark bleeds · two tiers

Ship this one. The crop from 03, on the rung's own ground from 02, with the filament from 05 back inside the cord. Three faults answered at once: the colour is rung 4's, the ground is built from that same hue instead of generic navy, and the structure is a cropped window rather than a centred sticker. The filament gives the rope a lit core at 180px and costs nothing when it vanishes at 32. What would kill it: violet cord on a violet ground is the lowest-contrast combination on this page at 5.1:1 against the navy plate's 5.7:1, and if the owner wants the icon to punch in a crowded launcher row, 03 on the navy plate is the same idea with more contrast and less identity.

Browser tab 16 and 32 px, in a tab and bare

WordknotsNew tab
light chrome
WordknotsNew tab
dark chrome

Android adaptive 48 and 192 px, circle and rounded-square masks. The dashed ring is the 80% maskable safe zone.

light launcher
dark launcher

iOS home screen 60 and 180 px, continuous corners

light home screen
dark home screen

Silhouette solid black, no colour to lean on

How the ring was placed

Turk's Head is not centred inside its own viewBox: its measured ink box is 45.74 × 46.49 centred at 24.785, 23.99, which is 1.20% right and 0.08% low of the viewBox centre. Every mark here is centred on that ink box, not on the box the file happens to declare.

One correction from round two. Round two lifted the mark 8 px, the usual compensation for a mark whose visual weight sits low in a rounded square. This mark's weight does not sit low — it is a ring, radially symmetric to within 0.08%. The lift just made it sit high. Every mark on this page is at lift 0:

Lift 0 — used hereink centre on the square centre
Lift 8 — round twovisibly high, and the gap under it is wider

Cord weight is the whole two-tier argument. The reduced tier is the same knot-ring path with its seven crossings suppressed and the cord opened 3.31 → 5.40, and it is used below 24 px in every specimen on this page. Concept 08 does not need it — a filled shape has no stroke to thicken — and neither does the 16 px render of 03 or 09, where the crop has already made the cord fat; they get it anyway, because one rule that fires on size is easier to defend than nine exceptions.

FitInk coversCord at 512at 48at 16
01 / 02 / 04 / 06 / 07 — plated66%24.1 px2.3 px0.75 px
plated, reduced tier66%37.6 px3.5 px1.17 px
05 — the card's own fit70%25.5 px2.4 px0.80 px
03 / 09 — cropped108%39.4 px3.7 px1.23 px
cropped, reduced tier108%61.5 px5.8 px1.92 px
03 alt — the crop that failed145%52.8 px5.0 px1.65 px

Read the last column. At 16 px the plated fit draws a cord 0.75 px wide — below one device pixel, which is why round two needed a second tier at all. The crop draws 1.23 px from the same path, and the reduced crop draws 1.92. That is the entire reason concept 03 survives a browser tab and concept 01 does not.

Where I land

Recommendation

09 — the crop, in its own colour, lit

It is the only mark here that answers both halves of the note at once. The colour is rung 4's, the ground is derived from that same hue rather than from generic dark-app navy, and the structure is a window onto a rope too big for it instead of a sticker centred on a plate. Its weakness is real and I would want the owner to see it before agreeing: violet cord on a violet ground is 5.1:1, where the same cord on the shipped navy plate is 5.7:1.

Runner-up

06 — ladder-painted

Deliberately not the near-twin of the recommendation. 06 is the only mark that says Wordknots rather than Turk's Head: a single-rung colour names one game out of six, and the wedges name the whole ladder in the product's own six values. If the crop is judged too aggressive, this is the other way out of the template — through the colour system rather than through the framing. If it is judged too rainbow, 03 is the recommendation with the navy plate and more punch.

Still generic — my honest read

01, 02, 05 and 07

All four are a symbol centred with an even inset on a rounded square in one accent, which is the template the owner named. 01 is that template exactly and is only here as the isolated colour fix. 02 changes the plate's hue but not its structure. 05 earns its place on coherence with the lobby card, not on distinctiveness — it is 01 with a filament nobody can see below 48 px. 07 is the calmest and the most invisible. 08 escapes the template and lands somewhere worse: a flower. If none of 03, 06 or 09 is right, the answer is another round, not one of these four.

Exploration only. No repository file was changed and nothing was deployed: the manifest, favicon, apple-touch-icon and everything under client/, public/ and the build output are untouched. Every mark is client/brand/glyphs/turks-head.svg with its path data read verbatim at build time; the only variables are ink, ground, scale, fill-vs-stroke and the wedge clip. Palette read from client/src/styles/tokens.css and client/src/styles/lobby.css. Contrast ratios computed against the tile each mark sits on. Product name: Wordknots.