**Willemstad's Multi-Layer Colour System** Willemstad uses a hierarchical colour variable system with four distinct layers that cascade from most specific to most general. At the top, **tmp variables** (`--color-tmp-*`) provide the highest priority override layer, allowing users to inject custom colours via CSS snippets. The **pax variables** (`--color-pax-*`) form the Style Settings layer, where mathematical colour relationships are calculated and applied when users select different accent schemes or base tone presets. **Set variables** (`--color-set-*`) contain the predefined colour values for specific presets like the MetBrewer collections. At the foundation, base colour variables establish the core fallback values that ensure the theme always has valid colours even if all override layers are empty. This cascade system means colours resolve as `var(--color-tmp-*, var(--color-pax-*, var(--color-set-*, [base-value])))`, ensuring user customisations always take precedence while maintaining systematic fallbacks. The **set layer** activates when you choose a preset like "Gruvbox" or "Kandinsky," populating specific colour values throughout the interface. The **pax layer** becomes active when Style Settings calculates colour relationships, allowing real-time colour manipulation without breaking the underlying preset structure. This architecture enables seamless switching between curated presets, mathematical colour generation, and complete user override while maintaining design consistency and proper contrast ratios across all interface elements.