How It's Built

Most local news sites look like they were built in a hurry, because they were. When ad revenue collapsed and newsrooms shrank, design was the first thing to go. The templates stayed.

We took a different approach. We studied publications like the Financial Times and ProPublica, borrowed specific techniques (the FT's publication grid for story hierarchy, ProPublica's approach to sourcing transparency, Bloomberg's data density), and adapted them for a town of 7,700. The goal was a site where the presentation reflects the same care as the reporting.

The default web palette is cool grays and blue links. We wanted something that felt like Marengo. The buff brick of the Opera House on State Street set the starting point: warm cream backgrounds, stone-toned borders, and a terracotta accent pulled from the color of the brick itself. No blue anywhere on the site. No cool gray. Every color belongs to the same warm family.

Prices go up and down. We use two specific colors for that: a warm red-brown for increases, a muted green for decreases. Both pulled from the same warm family so they don't clash with the rest of the page.

Two typefaces. Newsreader, a serif, carries every headline, deck, pull quote, and byline. It reads well at large sizes and gives the page an editorial register that sans-serif headlines can't. Source Sans 3, a humanist sans-serif, handles navigation, labels, buttons, metadata, and body text. We chose it over Inter because its proportions have more warmth.

We use lighter weights for decks and pull quotes so they read as breathing room, not as another headline competing for attention. Heavier weights are reserved for small labels and kickers, where the text needs to punch above its size.

The homepage uses a publication grid instead of a single column of cards. The lead story gets a large headline and a deck. Secondary stories sit in a two-column row beneath it. A compact three-column section shows more coverage below that. A sidebar runs alongside with the forecast, next council meeting, and a headline-only list. The size differences between sections are how we signal what matters most on a given day.

We avoided card backgrounds, drop shadows, and rounded corners. Sections are separated by 1-pixel dividers and 3-pixel accent bars above labels. Keeping the surface plain means the type and the writing carry the page, which is the point.

Our rail corridor article includes a map built from actual railroad geometry data (OpenStreetMap), with the proposed platform location at Taylor Street and labeled stops from Chicago to Rockford. The price tracker shows commodity and fuel trends as sourced charts with labeled axes.

Maps use MapLibre GL on a greyscale basemap, desaturated to match the warm palette. Charts are inline SVG, rendered at build time with no client-side JavaScript. If a number appears in a chart, the source appears in the footnotes.

This takes more work than embedding a screenshot or an iframe. The trade-off is that readers can see exactly where the platform would go and what it would displace, which is the point of including a map in the first place.

Every claim in every article carries a numbered footnote that links to the primary source: the council minutes, the budget memo, the Census data table. Readers can check the work without leaving the page.

When an article moves from reporting to analysis, section labels mark the transition. "Why It Matters" or "What Happens Next" tells the reader that what follows includes interpretation. The "Ground Level" label identifies longer analytical pieces about how national events affect Marengo. Corrections go at the top of the article with a note about what changed. We don't silently edit published work.

Utility elements like the weather strip, the next council meeting, and emergency numbers use inverted dark backgrounds so they're easy to find but visually separate from the editorial content.

The site is still young and we're still figuring out what works for a community this size. If something looks off or could work better, we'd like to hear about it: hello@marengopost.com.

← Back to About