Genesis of Darkness

The site needed to be fast, maintainable, and visually distinct. Astro 5 was the right call because it ships minimal JavaScript by default — important for a content-heavy site where load performance affects whether readers stay long enough to get hooked. We ruled out component frameworks early; the interactivity on this site didn't justify the bundle weight.

We wrote all the CSS from scratch rather than reaching for a utility framework. The design was too specific — six different world color themes, custom animations, a dark aesthetic that still had to meet WCAG 2.1 AA contrast standards — for any framework to be a net positive. The 225+ CSS tokens we defined became the design system's backbone, keeping the six world themes consistent without duplicating rules.

The 18-document design system wasn't originally scoped as a deliverable. It grew out of necessity: with six color themes and a complex component library, we needed a single source of truth or the site would become unmaintainable. By the time we shipped, it covered typography, spacing, animation timing, color semantics, and component states.

Each of the six worlds in the book has a distinct tone and visual identity. We mapped those to color themes on the site so that navigating between world pages felt like actually moving between them. The challenge was doing this without duplicating CSS or creating a maintenance nightmare.

We solved it with a token-based theming layer: each world overrides a set of semantic color tokens at the root level, and every component reads from those tokens rather than hardcoded values. Switching themes is a single attribute change on the body element. The character profiles use the same system — the filtering UI lets readers sort by world, and the active theme shifts to match.

We built four interactive puzzle games into the site. These weren't added as engagement gimmicks — the author's marketing strategy positioned the site as a destination, not just a landing page. Readers who finished the book would have reasons to come back and dig deeper.

Each puzzle is tied to lore from the book. Solving them unlocks content — backstory fragments, world details — that isn't available anywhere else on the site. The state persistence and difficulty progression mean the experience has structure: you don't unlock everything at once, and the harder puzzles gate the deeper lore. All of this runs in vanilla JS with localStorage for persistence, no backend required.

Dark-themed sites frequently fail accessibility audits because designers chase atmosphere at the expense of contrast. We treated WCAG 2.1 AA compliance as a constraint from day one, not a checkbox at the end. Every color token was tested against its background at the time it was defined, not after the fact.

The animated elements required separate consideration. The glyph-to-text reveals, the parallax starfield, and the word-by-word scroll animation all respect the prefers-reduced-motion media query. Users who have that set get the content without the motion. This took deliberate planning because the animations are load-bearing for the atmosphere — we had to find static fallbacks that still worked visually.

The 50,000-word go-to-market strategy covered Amazon optimization, SEO, social media, email, paid ads, and a phased launch timeline. It was scoped and delivered alongside the site build, which meant the site architecture had to account for SEO requirements from the start — URL structures, metadata, structured data for the blog posts — rather than retrofitting them later.

Having both deliverables running in parallel created useful pressure. Decisions made in the marketing strategy sometimes changed what the site needed to do, and vice versa. The character filtering system, for example, was informed by keyword research that showed readers searching for character-specific content from similar books.