Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dyed-in-the-wool/llms.txt
Use this file to discover all available pages before exploring further.
The dye-* Token System
Every color in Dyed in the Wool is expressed through a set of custom Tailwind tokens prefixed with dye-. Rather than scattering raw hex values across components, each role in the design — brand teal, accent magenta, page background — maps to exactly one token. Changing a token value in tailwind.config.js immediately propagates that change everywhere the token is referenced: navigation, headings, buttons, blobs, skill meters, and more.
Default Token Values
| Token | Default Hex | Role |
|---|---|---|
dye-primary | #0d9488 | Main brand teal |
dye-light | #2dd4bf | Secondary highlight / blobs |
dye-magenta | #db2777 | CTA accent / hover states |
dye-indigo | #1e3a8a | Large display headings |
dye-ocean | #0369a1 | Cursor trail / skill accents |
dye-dark | near-black | Body text |
dye-fabric | off-white / cream | Page background |
Overriding the Palette
Opentailwind.config.js and replace the hex values inside theme.extend.colors:
Token Roles in Detail
dye-primary
The core brand color. Used for active nav link text, decorative dots, icon fills, and any “on-brand” foreground element that needs to read as the portfolio’s signature hue.
dye-light
A lighter, more saturated variant of the primary. Appears in the animated background blobs on the hero section and as the fill color on certain skill-bar elements. Because it sits alongside dye-primary in the same visual region it should remain tonally close to it.
dye-magenta
The complementary accent. It draws attention to calls-to-action, button hover fills, and the enlarged cursor state when hovering interactive elements. A high-contrast, warm hue works best here — something that “pops” against both dye-fabric and dye-indigo.
dye-indigo
Used exclusively for the large font-display headings (e.g. “DYED IN THE WOOL”, “THE HUMAN BEHIND THE DYE”). Because these headings render at text-7xl to text-9xl, dye-indigo should be a dark, legible color with strong contrast against dye-fabric.
dye-ocean
Applied inside the DyeDropCursor ink-drop trail circles and used as an accent tone on select skill items. It occupies the “cool mid-tone” slot — distinct from dye-primary but in the same cool family.
dye-dark
The general body text color. Near-black by default so it reads clearly over the cream dye-fabric background without being harsh pure-black.
dye-fabric
The page background. The name evokes undyed cloth — an off-white or cream that gives the portfolio a craft / artisan feel. Avoid pure white here; a slight warmth keeps the textile metaphor intact.
Updating the DyeDropCursor Trail
The DyeDropCursor component uses its own hardcoded color array that is separate from the Tailwind token system:
dye-primary, dye-light, a lighter teal tint, dye-magenta, and dye-ocean respectively. If you change the Tailwind tokens, also update this array so the cursor trail stays in sync with the rest of the palette. The array can be any length — each drop cycles through the list in order.