The Weaver's First Unset Dye: On the Fading Hues of a Perfectly Woven, Yet Unfixed, Palette

There is a moment in the craft of weaving, after the last thread is tied off but before the dye is set, where the work appears complete. The pattern is intricate, the colours vibrant and true. To the untrained eye, it is a finished tapestry. But the master weaver knows this is the most fragile state of all. Without the crucial, final step of fixing the dye with a mordant, those brilliant hues will bleed, fade, and ultimately betray the intended design when exposed to the elements.

In our craft, we face a similar, silent betrayal with our colour palettes. We can spend hours in Figma or Sketch, meticulously selecting a harmonious system of primary, secondary, and accent colours. We export our variables, implement them with modern CSS custom properties, and behold—a perfectly woven digital interface. But without the crucial step of ‘fixing’ these colours for the web, we risk a jarring, user-facing shift in our design’s very essence.

This manifests in the subtle, yet deeply disruptive, phenomenon of a Flash of Unstyled Color (FOUC). One approach, the traditionalist’s method, is to do nothing. We let the browser paint what it can, as it can. The page loads, the HTML is rendered in the browser’s default blacks and grays, and then—a moment later—our CSS kicks in and the ‘true’ colours snap into place. It’s a blink, a hiccup, a fleeting glimpse of the unfinished work. For the user, it’s a moment of visual instability that subtly undermines the polish we worked so hard to achieve.

The contrasting, modern approach is to use the `font-display: optional` directive for our colour palette itself. This is achieved through the `@font-face` rule’s `font-display` descriptor, but applied not to a typeface, but to our colour resources. By treating our critical colour variables as a required, blocking resource we tell the browser: “Do not paint anything until you have these.” The browser holds the render, waiting for the CSSOM to be complete with our palette defined. Only then does it paint the page, ensuring the user’s first impression is the finished, stable tapestry.

The trade-off, as with all things performance, is a delicate one. The first approach prioritizes getting *something* to the user immediately, risking a flash of the undyed thread. The second prioritizes visual stability and integrity, potentially at the cost of a slightly delayed First Contentful Paint. The choice isn’t about right or wrong, but about intention. Are we weavers who value the immediate appearance of content, or are we masters who insist the first view must be the final, fixed design? The answer lies in knowing what our dye is, and how crucial it is to set it before the world sees the cloth.

Notes & further reading

A few pages I came back to while writing this: