Mushroom Alien Games — Design System

Version 01.2608.0002 (Stable) Derived from: Brand Reference 01.2608.0001, mag_colour.svg Scope: Layer 1 (site-wide). Layer 2 (per-game) mechanism is in SITE_ARCHITECTURE.md. © 2026 Willem van Wyk

Positioning filter

“Mushroom Alien Games makes small, elegant tabletop games. Simple rules on the surface, complex gameplay underneath.”

Test every visual decision against this. If a choice is showy on the surface and shallow underneath, it fails, regardless of how good it looks in isolation.

Colour tokens — LOCKED

:root {
  --substrate:  #F2ECDE;
  --panel:      #EAE2CE;
  --teal:       #06373C;
  --teal-faded: #4A6A6D;
  --orange:     #C85915;
  --rule:       #C9BFA6;
}

Substrate is no longer provisional. See check below.

Contrast check (WCAG 2.1)

Confirms the brand reference’s own rule with actual numbers: orange is never body text. Use it for links, buttons, labels, large figure numbers, icons, always at large-text or UI-component size, never in a paragraph.

Colour vision deficiency simulation — teal vs orange (the pair that has to stay distinct)

The common forms hold up well, lightness carries the distinction even when hue collapses. Tritanopia is markedly weaker. Practical rule: never let teal-vs-orange alone carry meaning (e.g. a status or state indicator) — pair colour with an icon or shape, per the dual-coding principle already in the course notes. No pure white or pure black anywhere in the palette, confirmed.

Method note (confidence: moderate-high): standard sRGB relative-luminance WCAG maths, plus a Vienot/Brettel-style linear-RGB simulation matrix, computed directly rather than run through Coblis. Same underlying approach, not identical implementation, treat as a strong proxy rather than a certified result.

Typography

<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700&family=IBM+Plex+Serif:ital,wght@0,400;1,400&family=IBM+Plex+Mono&display=swap" rel="stylesheet">

Fallbacks: Arial / Georgia / monospace. Three tiers of typographic hierarchy maximum on any page.

Spacing scale

Not specified in the original brand reference, added here so the build has one consistent scale rather than ad hoc values.

8px base unit: 8 / 16 / 24 / 32 / 48 / 64 / 96. Section padding ~64px desktop / 32px mobile — rounds the brand reference’s own section rhythm (30-34px in the source HTML) onto the scale.

Components

Figure/caption apparatus (the signature motif — build these as reusable classes/includes, not one-off CSS per page):

• .fig-label — Orange, Archivo medium, small-caps treatment. e.g. “FIG. 3”
• .caption — Faded Teal, IBM Plex Mono, 12px
• hr.hairline — 1px var(--rule), full-width section divider

Version stamp footer (reinstated — see flag in BUILD_BRIEF.md): Format: [Site/page name] · v[GG.YYMM.rrrr] ([Stable|WIP]) · © [year] Willem van Wyk, IBM Plex Mono, Faded Teal. Reads as a catalogue number in-world, per the brand reference’s Fig. 3 rationale. Pull the version value from _config.yml, single source, not hand-duplicated per page.

Sticky header: full header on load, collapses to a minimal bar with one persistent CTA after scrolling past the hero. CTA text = “Press kit” or “Get in touch”, never “Buy now”.

Panels: .panel — var(--panel) background, 1px var(--rule) border, no radius or a very small one. Archival specimen-card look, not a rounded modern-SaaS card.

Hard rules

• No pure white (#FFF) or pure black (#000) anywhere
• No parallax, WebGL, scroll-jacking, autoplay
• One orange element per viewport is usually enough
• “Mycelium” appears at most once or twice site-wide — motif, not gimmick
• No em dashes or en dashes in any copy, checked programmatically
• UK spelling throughout

Photography direction

Warm daylight, Substrate-toned (cream/linen) surfaces, generous negative space for type overlay, shallow depth of field on hero shots. Each game’s own photography stays inside this lighting/surface language even where that game’s Layer 2 colour sits on top of the frame (props, styling).

Asset inventory

Two-layer identity — summary

Layer 1 = this document, applies site-wide. Layer 2 = per-game, contained to that game’s own page(s), never leaks into Layer 1. Adding a new game does not change this document. Technical mechanism: SITE_ARCHITECTURE.md.