Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/web-weaver/llms.txt

Use this file to discover all available pages before exploring further.

Web Weaver’s entire visual identity flows from a single :root block in assets/main.css. Six CSS custom properties define the dark mystical palette — the deep ink background, the glowing teal accents, the warm parchment text, and the amber candle flame. Changing your color scheme is as simple as editing those hex values, and the whole site updates instantly.

​
Design Tokens

The six custom properties live at the top of assets/main.css inside the :root block:
assets/main.css
:root {
  --color-teal-dark:   #0a3a3f;
  --color-teal-mid:    #14b8a6;
  --color-teal-bright: #5eead4;
  --color-parchment:   #f4f1ea;
  --color-ink:         #0f172a;
  --color-amber:       #fbbf24;
}
Each token has a specific role in the design:
TokenValueUsed for
--color-teal-dark#0a3a3fCard and panel backgrounds
--color-teal-mid#14b8a6Borders, dividers, mid-tone accents
--color-teal-bright#5eead4Headings, active nav states, highlights
--color-parchment#f4f1eaPrimary body text
--color-ink#0f172aMain page background
--color-amber#fbbf24Candle flame, warm accent glow

​
Tailwind Color Aliases

The design tokens are mapped to named Tailwind utilities throughout the component code. Wherever you see a Tailwind class like text-teal-bright or bg-ink, it resolves to the corresponding CSS variable:
Tailwind classMaps to tokenHex value
text-teal-bright / bg-teal-bright--color-teal-bright#5eead4
text-teal-mid / bg-teal-mid--color-teal-mid#14b8a6
text-teal-dark / bg-teal-dark--color-teal-dark#0a3a3f
text-parchment / bg-parchment--color-parchment#f4f1ea
text-ink / bg-ink--color-ink#0f172a
text-amber / bg-amber--color-amber#fbbf24
These aliases mean you only ever need to update the hex values in the :root block — every component that references bg-teal-dark or text-parchment automatically picks up the change.

​
Changing the Color Scheme

To swap out the default teal-and-ink palette for your own brand colors, open assets/main.css and replace the hex values in the :root block. The example below replaces the mystical teal palette with a deep violet theme:
assets/main.css
:root {
  --color-teal-dark:   #1e1040;   /* was #0a3a3f — deep violet panel background */
  --color-teal-mid:    #7c3aed;   /* was #14b8a6 — mid violet accent */
  --color-teal-bright: #c4b5fd;   /* was #5eead4 — soft lavender for headings */
  --color-parchment:   #f4f1ea;   /* unchanged  — warm off-white body text */
  --color-ink:         #0d0a1a;   /* was #0f172a — near-black violet background */
  --color-amber:       #f59e0b;   /* unchanged  — warm amber candle */
}
After saving, run npm run build (or let your dev server hot-reload) to see the updated palette applied across every component.
Dark backgrounds demand strong contrast. Keep --color-parchment light (luminance above 0.7) when paired with --color-ink. For --color-teal-bright, aim for a contrast ratio of at least 4.5:1 against --color-ink to meet WCAG AA standards for normal text. Tools like Colorable or the Chrome DevTools contrast checker make this easy to verify.

​
Typography

Web Weaver uses a curated font pair loaded from Google Fonts. Both imports live at the top of assets/main.css:
assets/main.css
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

Cormorant Garamond

A high-contrast serif with elegant italics. Used for page headings, section titles, and decorative pull quotes. Loaded at weights 300–700, including italic variants, to support both delicate and bold display text.

JetBrains Mono

A humanist monospace designed for readability. Used for body text, navigation labels, and inline code. Loaded at weights 400–700 — the slight character spacing gives the interface its spellbook-receipt quality.

​
Swapping Fonts

To replace the font pair with your own Google Fonts choices, update the @import URL and the font-family declarations below it in main.css:
assets/main.css
/* 1. Replace the import URL */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Fira+Code:wght@400;500&display=swap');

/* 2. Update the font-family rules */
.font-serif, h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

body, .font-mono {
  font-family: 'Fira Code', monospace;
}
If you self-host fonts instead of using Google Fonts, replace the @import line with @font-face declarations pointing to your local font files in the assets/ folder. Self-hosting avoids the external network request and improves page load performance for visitors in regions with restricted Google connectivity.

Build docs developers (and LLMs) love

Get started for freeTalk to us