yewen jin

Accept the Cookies

2026Frontend / Web Design / UI

Online exhibition site for a four-artist collective, funded by Immersive Arts UK. Four self-contained visual worlds in one framework-free static build, deployed to Cloudflare Workers.

Accept the Cookies is an online exhibition by a network of self-directed artists — Jim Osman, Livi Wilmore, Loy and Symoné — working on human relationships with cyberspace, funded by Immersive Arts UK. I did the web design and build; the artists supplied their own work and copy. The curatorial premise was shared collaboration but not shared authorship, so the four rooms had to look like they came from four different internets — a ZX Spectrum loader, a plastic-button console, a CCTV archive, a cyber-body interface — without bleeding into each other or into the shared retro-HUD homepage.

How it works

  • Rooms are isolated by construction, not convention. Each artist page links exactly one stylesheet — its own assets/theme.css — and never the global homepage CSS. A room cannot inherit a token it didn't declare. The rationale is written into AGENTS.md so future contributors don't "fix" it.
  • A design-token system with zero tooling. Every theme.css opens with a :root declaring three exhaustive scales: semantic colour names, font sizes (--fs-*) and spacing (--sp-*). No Sass, no PostCSS, no theme compiler — the discipline a build tool would enforce is documented and reviewed by hand.
  • Jim's room is built to a written design spec rather than to taste: 8px grid, square corners, flat colour, bitmap type, 1–2px borders. Its type scale keeps fractional pixel values (14.4 / 19.2 / 38.4px) because rounding is crisper at 1× but worse at 2× and 3×.
  • The homepage is a fluid HUD — title console, statement panel, four orbit links, frame overlay, footer — positioned by percentage inside .hud-shell and sized by 30 clamp() expressions. Only two media queries exist (980px, 560px), and they swap the large raster frames for bordered neon panels rather than rescaling the composition, because the frame images distort when squeezed.
  • Framework-free was a durability decision. The site has to outlive the funding period and stay editable by the artists: nothing to reinstall, no lockfile to go stale, no build that can stop reproducing. .assetsignore is the deploy-safety boundary — Cloudflare serves the repository root, so anything committed is potentially public.
  • Accessibility was scoped in, not retrofitted. 53 aria-label attributes; the lightbox is a role="dialog" with aria-modal, a close button and Escape handling; Livi's gallery routes thumbnails, arrow controls and keyboard through one showSlide() so the active state never desynchronises; Loy's project list fires its hover preview on focus as well as mouseenter.

Numbers

7,102 lines of hand-written HTML and CSS across 15 pages and 8 stylesheets. 12 media queries total; the homepage uses 2 of them and 30 clamp() expressions. Zero runtime and zero build-time dependencies. The source loop for Symoné's room was a 708 MB GIF that exceeded both GitHub's and Cloudflare's limits — it ships as a 7.3 MB MP4, a ~96× reduction, with the master excluded from git and from the deploy upload.

Deployed to Cloudflare Workers static assets by GitHub Actions on push to main. No automated test, lint or format tooling — the only checked gate is git diff --check, and correctness is verified by eye across breakpoints. That's the cost side of the no-build-step decision.

HTMLCSSJavaScriptCloudflare WorkersWranglerGitHub Actions
Live ↗GitHub
static-sitecss-architecturecloudflare-workersexhibition