Editorial Magazine — Public Site
A server-rendered magazine front end, built to a pixel-level design spec, where every word on the page comes from the backend.
Overview
Challenge & approach
The brief was an exact brutalist design system and a site that stays correct as editors change it:
Fidelity to the design — 18 pages and 12 states checked against the mock-ups with element-by-element and pixel comparison at 1280, 768 and 375 px, including hover and keyboard focus. A living style guide reads its colours, type sizes and spacing straight from the design tokens, so it cannot drift.
SEO — Per-page titles and descriptions, canonical URLs, Open Graph with a mandatory share image, Twitter cards, JSON-LD (article, scored review, podcast episode, breadcrumbs), a sitemap and a generated share image. A script audits every sitemap URL for length, tags and structure.
Resilience — Dedicated empty states for every content type, branded 404 and error pages, a last-resort page for when the backend is down, and no hardcoded fallbacks. Keyboard focus, heading semantics and contrast follow the design rules.
Architecture — Feature-Sliced Design with a shared component registry and an automated check for layer violations and duplicate code; incremental caching so a content change shows up within a minute.