Literature is organised by genre. It should be organised by place.
Cities shape the conditions of writing. The streets a novelist walks, the season a story is set in, the social texture of a neighbourhood at a particular historical moment — all of it enters the work. But no tool makes this spatial dimension of literature visible or navigable.
Existing entry points to world literature sit at two unhelpful extremes. Goodreads and genre sites organise by author, topic, and star rating — geography is an afterthought. Academic literary geography is rich with scholarship and empty of access: dense monographs that no one outside a seminar room navigates. Neither treats place as a primary organising principle.
Design question: How might we build an interface that treats city and era as the primary axes of literary discovery — not filters on top of a list, but the map itself?
Cities accumulate meaning across centuries. Literature makes that visible.
The conceptual spine of Strata is the palimpsest — the manuscript written over, imperfectly erased, still legible beneath. Cities are palimpsests. Each generation writes over the last. The Marais in 1880 is not the Marais in 1943 or 2005, yet all three moments share the same streets. Literature is the record of those layers.
This reframed the entire product. The interaction model isn't search — it's excavation. The map surface isn't a background — it's the primary document. The era filter isn't a refinement — it's a temporal axis that shifts the entire view.
A city without its literature is a geography without a memory.
— Strata design brief, 2026
The map as primary document: 27 cities across 6 continents, each a literary site.
Built with AI. Every decision owned.
Strata was built entirely in collaboration with Claude — not as a shortcut, but as an extended design process. Every prompt was a brief. Every revision was a critique. The product's quality followed the clarity of the intent behind each exchange.
The more specific the brief, the less revision required. AI fluency, at its core, is design fluency. Strata is a demonstration of that proposition.
The map is the interface, not the header
Most products that use maps treat them as a visual accent — a decorative layer above the real content. Strata's two-panel fixed layout puts the map and shelf on equal footing. Neither collapses into the other. Clicking the map changes the shelf. The geography drives the reading, not the reverse.
Trade-off: The fixed layout demands viewport real estate. On mobile the panels stack — map on top, shelf below — preserving the hierarchy without sacrificing the relationship.
Country click shows all cities in that country
Clicking France surfaces Paris and Marseille together — an aggregate shelf grouped by city, each group a drill-down point. This was the highest-leverage interaction decision: it changes the shelf from a city-level tool into a region-level one, making multi-city countries navigable without added UI.
Trade-off: Single-city countries skip the aggregate view entirely and go directly to city view — so the pattern doesn't add friction where it adds no value.
Era as chips, not a slider
An early build used a continuous era slider. It was removed because it introduced false precision — a continuous axis implies gradation where the data is actually categorical. Three pill chips (Pre-1920, Mid 20th C., Contemporary) are faster to use, visually clear, and honest about how the underlying data is structured.
Trade-off: The slider was more expressive as an aesthetic object. The chips are more correct as an information design choice.
Pin labels hidden until hover
On the world view with 27 cities, always-visible labels create overlapping text noise that competes with the cartographic surface. Labels are hidden by default and fade in on hover — the city name appears as an act of discovery. The map becomes a constellation of dots, readable as density without being readable as clutter.
Trade-off: New users need to learn that the dots are interactive. The hover affordance is standard for cartographic interfaces, so the learning cost is low.
Editorial restraint as a design constraint
The palette — near-monochrome, lavender-grey accent, Neue Haas Unica at weight 300–600 — was chosen to let the content carry visual weight rather than competing with it. Every element was tested against the question: does this earn its presence? Cards, shadows, and ornamental UI were rejected. Spacing, dividers, and typographic hierarchy do all the structural work.
Trade-off: The restrained palette requires stronger typographic hierarchy to compensate. Small errors in type scale or weight are more visible than they would be in a colourful UI.
Visit the live product
The shelf: each book opens to reveal a place-focused synopsis and literary quote.
A live literary geography interface — 34 books, 27 cities, 6 continents.
Strata is hosted and fully interactive. The dataset covers Africa, Asia, Europe, North America, South America, and Oceania — each city chosen because something literarily significant happened there, not merely because writers passed through.
Every book entry carries coordinates, era classification, neighbourhood, a 2-sentence place-focused synopsis, and an in-text quote. The map renders from Natural Earth GeoJSON with a custom equirectangular projection — no mapping library, full visual control.
The product demonstrates that literary geography — underbuilt as a field of public access — can be made navigable without sacrificing intellectual rigour. It also demonstrates that directing AI through a design process produces different results than using it as an autocomplete: the quality of output follows the quality of the brief.
Africa continent view: seven cities, seven literary traditions, one surface.
What building a map taught me about information architecture.
Strata began as a concept and became a product through iteration. The most important design decisions weren't visual — they were structural. What is the primary axis of navigation? What happens when a country has multiple cities? How does the shelf behave when no era filter is applied? Each of these required a clear answer before a single line of CSS was written.
Working with Claude throughout the build also clarified something about the design process itself. Prompting an AI is not different in kind from briefing a collaborator. The clearer the design intent, the more precise the output. The more ambiguous the instruction, the more revision required. AI didn't replace the thinking — it made the quality of the thinking visible faster.
If the project continues, the next layer of work would include:
- User-contributed city and book entries with editorial moderation
- Neighbourhood-level filtering — drilling from city to district
- Reading list mechanic — save and export a personal literary itinerary
- City portrait photography replacing the current placeholder slots
- Supabase backend to support real-time data and scale to 500+ books
Longer term: expanding the dataset to make literary geography a genuinely global tool — one that surfaces traditions underrepresented in English-language canon.