Ravel
A flowing editorial grid built on generous whitespace and deliberate rhythm. Ravel pairs serif headings with airy line heights to guide the eye through long-form content without fatigue.
Locally Lost
Locally Lost is a working notebook for layout experiments, theme architecture, and the kind of design decisions that only surface after you have shipped a dozen projects and broken things in production. This is not a portfolio — it is a pattern library with opinions, built from years of testing WordPress themes, static site generators, and the grey areas between them.
What you will find here: demo layouts dissected down to their grid math and spacing logic, practical guides that skip the theory-only approach, and field notes from real builds. Every demo has been stress-tested with actual content, not lorem ipsum. The guides focus on problems we have hit repeatedly — semantic markup that screen readers actually parse correctly, type scales that hold up on mobile, caching strategies that do not fight your deploy pipeline.
Whether you are a theme author trying to debug a column collapse, a site owner evaluating layout options, or a designer shipping landing pages under deadline, the material here is meant to save you time and spare you the mistakes we already made.
Demo Layouts
View all demos →Chun
Bold asymmetric columns with strong vertical rhythm. Chun uses weight contrast and tight margins to create visual tension that keeps readers anchored in dense material.
Saga
A long-form storytelling layout designed around immersive reading flow. Saga pushes content width wider than typical blogs, using pull quotes and section breaks to pace the narrative.
Stargazer
Dark-canvas layout with cinematic proportions and carefully tuned contrast. Stargazer treats negative space as a first-class design element.
Retro Fitted
Vintage-inspired grid with structured columns and ruled dividers. Retro Fitted borrows from broadsheet newspaper layouts and adapts them for screens.
Picturesque
Image-forward layout where the visual hierarchy leads with photography. Picturesque balances large hero images with tight supporting text blocks.
Guides
All guides →Green Web Design: Reducing Your Site's Carbon Footprint (2026)
How lighter pages, efficient hosting, and thoughtful design decisions reduce your website's carbon footprint — with measurable actions that also improve performance and UX.
Mobile E-commerce UX: Designing for 66% of Sales (2026)
UX patterns for mobile e-commerce that actually convert — covering thumb-zone navigation, checkout flow, product page layout, and the mobile-specific friction points that kill sales.
Web Performance Benchmarks 2026: Core Web Vitals & Page Speed Trends
Where web performance stands in 2026 — industry benchmarks, mobile vs desktop gaps, CMS-specific data, and the practical targets your site should aim for.
Accessibility Audit 2026: Why 94% of Sites Fail WCAG (and How to Fix It)
The most common WCAG failures in 2026 with practical fixes — covering colour contrast, keyboard navigation, ARIA misuse, form accessibility, and automated testing strategies.
Advanced Typography: Variable Fonts & Readability Best Practices (2026)
Implementing variable fonts for performance and design flexibility, with field-tested readability rules for line height, measure, optical sizing, and responsive type scales.
Designing for Voice Search and Conversational UX in 2026
How voice search changes content structure, schema markup, and UX patterns — practical implementation for sites that want to rank in voice results and serve conversational intent.
Progressive Web Apps vs Native Apps: SEO & UX Implications (2026)
A practical comparison of PWAs and native apps in 2026 — covering discoverability, offline capability, installation flows, and the real-world UX tradeoffs developers face.
Core Web Vitals 2026: Meeting the Sub-2.5s Load Time Mandate
What changed in Core Web Vitals for 2026, how the new INP metric affects your architecture, and the practical steps to hit sub-2.5s LCP on real mobile devices.
Full Site Editing (FSE) in WordPress: The Block Theme Revolution of 2026
How block themes and Full Site Editing have matured in 2026 — practical architecture decisions for theme authors navigating templates, theme.json, and the template hierarchy.
Container Queries in CSS: Responsive Layouts Without Media Queries
How container queries change component-level responsive design — practical patterns for cards, grids, and navigation that adapt to their container, not the viewport.
CSS Innovations 2026: Emerging Features That Replace JavaScript
The CSS features shipping in 2026 that eliminate common JavaScript patterns — scroll-driven animations, anchor positioning, view transitions, and more with real implementation examples.
AI-Powered Personalization on the Web: Agentic Websites in 2026
What agentic websites actually mean for front-end implementation — from adaptive layouts to privacy-first personalization patterns that work without third-party cookies.
Immersive 3D & Spatial UX: Bringing Depth to Websites in 2026
Practical guidance on adding 3D elements and spatial depth to web interfaces without destroying performance or accessibility — what works, what breaks, and where the line is.
Human-Centric Web Design Trends for 2026: Warmth and Authenticity Over Minimalism
How 2026 web design is shifting from sterile minimalism toward warmer, more authentic experiences — and what that means for layout decisions, typography, and component design.
WordPress Theme Structure
A structural guide to WordPress theme architecture — template hierarchy, theme.json configuration, block patterns, and the organisational decisions that determine whether a theme is maintainable or a liability.
Cache and Performance
Practical caching strategies and performance optimisation for static sites — asset fingerprinting, CDN cache headers, image optimisation, and the measurement practices that separate fast sites from slow ones.
SVG and UI Icons
A practical guide to implementing SVG icons in web interfaces — inline vs sprite sheets, accessibility patterns, sizing systems, and the performance tradeoffs of different icon delivery methods.
Typography and Readability
Practical typography guidance for web layouts — type scale, line length, vertical rhythm, font pairing, and the readability decisions that separate professional work from amateur output.
Semantic HTML Layouts
A practical guide to building page layouts with semantic HTML elements — how proper document structure improves accessibility, maintainability, and search engine comprehension.
Recent Notes
All notes →Dancing in the Moonlight
A moment of spontaneity, rhythm, and the spaces where memory lives.
Upcycled Clothing: Environmental and Economic Benefits
Why giving garments a second life matters more than fast fashion wants you to think.
Lost Judgment — New Trailer
Breaking down the cinematic direction and gameplay reveals from the latest trailer.