Meridian — Case Study

The brief

Coworking sites nearly all look the same: a stock photo of a bright office, three price cards, a booking button. The category has settled into a template, and a brand that wants to charge a premium cannot afford to look like the template.

Meridian is a fictional boutique coworking group with three addresses, in Lisbon, Copenhagen and Singapore. The exercise was to build the entire marketing site a business like that actually needs, 15 pages, not one, and to make it hold together across all of them: six service pages with real pricing logic, three location pages, a news archive with a working article template, and a contact page. Then to document the result well enough that another developer could pick it up cold.

What was wrong with the first draft

The project began life as a different brand, and an early draft of the homepage was already built. It was clean and completely forgettable. Reviewing it honestly turned up four problems, and each one drove a decision later in the build:

A palette sampled from the mark

The name came first and the mark came from the name. A meridian is the line a globe is cut on, so the logo is exactly that: an ink ring, its eastern half filled, an inner vertical lens for the line itself. It reads at 26px, which is the size it runs at in the nav, and that constraint decided the shape.

The palette is then sampled directly out of the logo file, four colours and no more. Nothing on the site uses a colour that is not in the mark, which is the cheapest way to make a young brand feel deliberate.

Those three accents all fail WCAG AA as text on the off-white page, at 2.30:1, 1.89:1 and 1.80:1. So the system carries one hard rule: accents are fills, strokes and shapes, never text on a light background. When an accent needs to carry words, it inverts, ink on a solid accent fill, which measures 7:1 or better on all three. The rule got broken twice during the build and the contrast audit caught it both times, which is the argument for writing rules down rather than remembering them.

One typographic detail carries the mark into the copy. On every h1, the dot on the first lowercase "i" is replaced by the coral shape from the logo. It is done with a CSS mask that cuts the dot off the glyph rather than covering it, because headlines sit on photographs and a coloured patch would show its edges. The real letter stays in the DOM, so find-in-page, copy-paste and screen readers are untouched.

Choices that made it feel like a brand

Making three cities behave like one business

Three locations multiply every decision. A desk costs a different amount in Lisbon than in Singapore. Two of the six services do not run in all three cities. A visitor arriving on a service page and a visitor arriving on a location page want the same facts arranged in opposite orders.

The resolution was to give each service page its own pricing component rather than force one table to do every job, plan cards where price varies by branch, comparison tables where it varies by tier, rate cards where it varies by hour, and to make the compare table on the locations hub the single source of truth for what runs where. Currency stays in US dollars across all three cities on purpose, so one membership reads as one price rather than three.

The hero on every interior page is the same component with a different photograph, and the nav dropdown for Services carries its prices inline, so the most common question gets answered before the click.

No framework, no build step, no dependencies

All 15 pages are hand-written HTML with three stylesheets and one 250-line JavaScript file. There is nothing to install and nothing to compile: the site runs from any static host, or from a folder. tokens.css holds the palette, type scale and rhythm, and it is the file you edit first, because everything downstream reads from it.

The two fonts are stand-ins for licensed faces, wired so that swapping them is two token changes and a link tag. Scroll reveals use an IntersectionObserver with a two second failsafe that shows anything the observer never reported on, because .reveal starts at zero opacity and a missed callback would otherwise hide content permanently. All motion collapses under prefers-reduced-motion, including the perks marquee, which rewraps into a readable list instead of freezing mid-scroll.

Verification ran as a loop, not a final pass: headless Chrome for screenshots at 375, 768, 1366, 1440 and 1920, plus a script checking every page for tag balance, missing alt text, duplicate ids, unresolved aria-controls, broken internal links and missing asset paths after every change.

The document is part of the deliverable

A prototype nobody can extend is a dead end, so the build ships with a written design system covering the palette and the one rule that governs it, the type scale, the full component inventory, the page architecture table, the accessibility findings, asset provenance, and a section titled Known gaps that lists honestly what is not done: forms are markup only, the news filters are visual, there is no sitemap yet, and it has only been tested in Chrome.

Read the design system ↗

That last section is the one that matters most on a handover. A developer picking this up cold learns in a minute what would otherwise cost them a day of discovery, and a client reading it knows exactly what they are buying.

• Every colour pair in the build checked against WCAG AA, including glass composited over dark and bright photo crops.
• Alt text on every image, semantic landmarks, a skip link on every page, and keyboard-operable nav dropdowns with aria-expanded tracking state.
• Image-light, dependency-free pages, so Core Web Vitals start in the green rather than needing to be rescued later.
• A pricing model that stays internally consistent across 15 pages, so changing one figure has one obvious place to change it.