How this site was woven

Brand identity

A monogram made of thread

The mark is an M whose uprights are the warp — the vertical threads a loom holds in tension — and a single gold weft passing across it: over the uprights, under the diagonals, the way plain weave actually interlaces. The wordmark sets “Makers” in Fraunces with the ™ tucked high, like a maker’s label stitched into a hem.

Six services, one continuous thread

Each of the six things Makers carries gets an icon drawn in the same voice: a single stroke weight, round caps, no fills — as if each icon were bent from one length of wire, or sewn in one run of the machine. On scroll they draw themselves in like thread pulled through cloth.

The pattern, derived from the mark

Tile the monogram’s grid — warp bars crossed by two gold wefts — and you get the brand pattern used on story-card corners and this page’s header. One drawing, three jobs: mark, motif, texture.

A lesson we learned

Drawing icons through the shadow DOM

The icons live once in the document as <symbol> definitions and are placed with <use>. Our first build styled them with .t-icon path { stroke: … } — and in the first design-critique screenshots every icon rendered as a solid black blob. The reason is worth knowing: CSS selectors cannot reach inside a <use> element’s shadow tree, so the paths never got their strokes; they fell back to SVG’s default black fill.

The fix is to stop selecting the paths and instead set inherited SVG presentation properties on the host <svg> — fill, stroke, stroke-dasharray and friends all cascade through the shadow boundary:

.t-icon          { fill: none; stroke: currentColor; stroke-width: 2.4; }
/* every path carries pathLength="1", so one rule draws any icon: */
.js .t-icon.draw     { stroke-dasharray: 1 1; stroke-dashoffset: 1;
                       transition: stroke-dashoffset 1.6s var(--ease-out); }
.js .t-icon.draw.in  { stroke-dashoffset: 0; }

pathLength="1" is the quiet hero: it normalises every stroke to the same unit length, so the dash math never needs to know how long a path really is. When an icon scrolls into view, an IntersectionObserver adds .in and the whole icon sews itself in.

Iteration protocol

Three passes, logged honestly

Every site in this collection goes through the same discipline before it ships: screenshot everything at three widths, critique it as if it were someone else’s work, act on the findings — then push two things further, then hunt down whatever is broken. Here is what each pass actually changed on this site:

1. Pass i. Design critique

   • The thread icons were rendering as solid black fills — CSS can’t select into <use> shadow trees. Restyled them with inherited presentation properties on the host SVG (the fix documented above), which also made the draw-in animation actually work for the first time.
   • The hero eyebrow was set in clay red on the dark loom — handsome on ivory, illegible on emerald. Switched it to light gold and deepened the scrim’s left side so the lede clears the brightest weft band.
   • Fast scrolling could shoot past a section before its reveal fired, leaving cards invisible; the observer now also reveals anything already scrolled past, so no viewer can outrun the loom.

2. Pass ii. Elevation

   • The hero headline now rises word by word out of the weave — each word masked in its own clipping span, staggered 75 ms apart, skipped entirely under reduced motion.
   • The “Born in Ghana” map gained weft packets: gold shuttles that travel the arcs from Accra outward once the threads have drawn in — SMIL motion started by JavaScript only when motion is allowed.
   • The workroom dashboard’s sparkline now weaves itself in when the section arrives, endpoint blinking on last — a small thing, but it makes the mock feel alive without a single fake metric changing.

3. Pass iii. Ship quality

   • Every route, anchor, form state and cross-link tested; the waitlist form verified with its honeypot, inline success message, and ?success return path.
   • Zero console errors at every width on all three pages; reduced-motion verified with the shader replaced by the static cloth and all draw-ins pre-completed.
   • Proofread every word — including the GLSL comments — and confirmed the pre-launch honesty notes (illustrative personas, founding pricing) survive on every page that needs them.