Skip to main content

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.

​
Two-Family System

The portfolio relies on exactly two font families, each with a dedicated Tailwind utility class:
UtilityRoleExample usage
font-displayLarge, bold, all-caps display headingsHero title, section headers
font-sansBody copy, labels, buttons, nav linksParagraphs, skill names, CTAs
Keeping these roles separate means you can swap either face independently without touching any component markup — only tailwind.config.js needs to change.

​
font-display — Display Headings

font-display is used for every major page title in the portfolio. These headings are always rendered uppercase and at large scale. Examples from the site:
  • “DYED IN THE WOOL” — hero, text-7xl md:text-9xl
  • “THE HUMAN BEHIND THE DYE” — About section
  • “PATTERNS I’VE MADE” — Projects section
The display face should have strong weight contrast and clear letterforms at very large sizes. Slab serifs, condensed grotesks, and blackletter-adjacent display fonts all work well in this slot.

​
font-sans — Body & UI Text

font-sans handles everything that isn’t a headline: paragraph text, project descriptions, skill labels, navigation links, and button copy. It should be highly legible at small sizes (text-sm to text-base) and pair cleanly with whichever display face you choose.

​
Changing Fonts in tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'display': ['YourDisplayFont', 'serif'],
        'sans':    ['YourBodyFont', 'sans-serif'],
      },
    },
  },
};
Replace 'YourDisplayFont' and 'YourBodyFont' with the exact names your font files or Google Fonts import expose.

​
Loading a Google Font

  1. Find your chosen font on fonts.google.com and copy the <link> embed snippet.
  2. Paste it into the <head> of index.html, before your stylesheet:
<!-- index.html -->
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Your+Display+Font:wght@900&family=Your+Body+Font:wght@400;600&display=swap"
    rel="stylesheet"
  />
</head>
  1. Reference the family name exactly as Google provides it in tailwind.config.js:
fontFamily: {
  'display': ['Your Display Font', 'serif'],
  'sans':    ['Your Body Font', 'sans-serif'],
},
Google Fonts names are case-sensitive and space-sensitive — 'Space Grotesk' is not the same as 'space-grotesk'.

​
Letter-Spacing Conventions

The portfolio uses letter-spacing deliberately to reinforce the typographic hierarchy:
Tailwind classValueWhere it’s used
tracking-[0.3em]0.3 emSubtitle labels — e.g. “Hand-dyed code, made in small batches”
tracking-widestTailwind widest (~0.1 em)Uppercase button text and nav link labels
(default)0Display headings — the large size provides its own presence

​
Typical Heading Structure

The following pattern is used throughout the portfolio wherever a section opens with a hero-style title and a supporting subtitle: 
<h1 className="font-display text-7xl md:text-9xl text-dye-indigo">
  DYED IN THE WOOL
</h1>
<p className="font-sans text-dye-primary font-bold tracking-[0.3em] uppercase text-sm">
  Hand-dyed code, made in small batches
</p>
  • The <h1> uses font-display at a responsive scale, colored with dye-indigo for maximum contrast.
  • The subtitle uses font-sans in a smaller, bold, widely-tracked style colored with dye-primary to sit as a secondary accent beneath the main title.
Some display typefaces have built-in tight tracking that looks cramped at text-9xl. Others need extra breathing room. Use Tailwind’s tracking-* utilities on the heading element itself to fine-tune — for example tracking-wide or tracking-wider — without touching the subtitle’s tracking-[0.3em] value.

Build docs developers (and LLMs) love

Get started for freeTalk to us