City services, on the Meridian

Teaching artifact

Guide — how this site was built

Part of a 26-site collection designed and built by Hannah Kwakye, engineered with Fable 5. Every visual in the collection is code-drawn — no stock photos, no raster images — which on this site meant an entire isometric harbour city, a zone map, and a set of service icons, all authored as inline SVG path data. Static hand-authored HTML, CSS, and vanilla JS; two self-hosted variable font files; deployed on Netlify from a Git push.

The type system

Figtree (400–700 variable, ~20 KB woff2) carries every headline and body line — a geometric-humanist sans with enough warmth for a civic voice and enough structure for dense service tiles. JetBrains Mono (400–700 variable, ~31 KB woff2) is reserved for anything that reads as a system output: alert severity labels, the meridian coordinate chip, service codes, tracking numbers, table figures. That split does real work — the moment a tracking number like TDS-2607-08841 switches typeface, it reads as data the system generated, not copy a designer wrote.

Signature: the isometric build, drawn with real geometry

The hero scene is plotted on a 2:1 dimetric grid — the same projection used in classic isometric game art. Every block is four points: a diamond top face of half-width a, and two side faces extruded down by height h:

A small Node script generated every path in the scene — land plane, harbour inlet, two avenues, four buildings with window grids, eight stacked containers, and the crane — from that one formula, so proportions stay consistent across a hand-authored composition rather than eyeballed per shape. The build-in is pure CSS: each layer group carries an --i index and one @keyframes animation staggered by calc(var(--i) * 130ms), so the scene assembles ground → roads → buildings → containers → crane → the meridian marker, once, on load. prefers-reduced-motion: reduce simply disables the animation and shows the finished frame — no separate "reduced" artwork to maintain, no JavaScript driving it at all.

The meridian itself is a dashed line plus a pin and a monospace coordinate chip, positioned at the seam between the city blocks and the container yard — geography chosen the composition, not the other way round.

Contrast audit — computed, not eyeballed

Every text/background pair below was computed with the WCAG relative-luminance formula before it reached the stylesheet, targeting AA (4.5:1 body, 3:1 large text/UI) with several pairs clearing AAA. Container red #D64B33 reaches only 4.27:1 on white — enough for large text and UI, not for small body copy — so a darker #B8391F carries small critical text instead, and the brief's red stays reserved for backgrounds, icons, and headline-scale type.

The focus system

Every interactive element gets a two-layer ring: a 3 px crane-yellow outline with a dark navy drop-shadow halo behind it, so at least one ring reaches 3:1 contrast against any background in the page — white cards, steel panels, or the harbour-deep dark sections. Focus order follows the document; the fake buttons inside the report-a-problem mock are non-focusable <p> text for exactly the same reason as the sibling civic sites in this collection — a mock control that can be focused but does nothing is worse than no control at all.

Code-drawn assets

Nothing in this page is a raster image. The isometric city, the zone map, the six service-tile icons, the report flow's mini street map and pin, and the brand mark are all inline SVG generated from the same small set of geometry helpers, hand-tuned afterward for colour and composition. The zone map is a deliberately simplified 11×8 grid of rounded parcels, hand-assigned to zone codes (port, industrial, CBD, three residential tiers, free zone) rather than traced from a real survey — honest about being illustrative, as the map's own caption states.

Iteration log

• Pass 1 — critique

  • The harbour water inlet was nearly invisible on the first render — its diamond was sized and placed so most of it fell outside the land shape's clip path. Rescaled and repositioned it so the bay reads clearly beside the container yard, then re-screenshotted to confirm.
  • The report mock's map pin rendered as a giant red blob covering a third of the mini-map. Cause: .pin-map svg { width:100%; height:100% } was a descendant selector, so it also matched the pin's own <svg class="pin-drop"> a few levels down and outweighed its specificity. Fixed by scoping the rule to .pin-map svg.map-base and giving the pin explicit width/height.
  • The contact form's topic radio buttons rendered as a scattered column — inputs pinned far left, labels adrift on the right. Cause: .field input { width: 100% } was written for text fields but also matched the radio inputs sitting inside fieldset.field, stretching each one to fill its flex row. Fixed with :not([type="radio"]):not([type="checkbox"]) on that selector and gave fieldset.field its own border reset.

• Pass 2 — elevation

  • Rebuilt the crane from a rough two-strut sketch into a proper A-frame gantry silhouette with a trolley mid-lift on a container spreader — the screenshot moment of the hero.
  • Made the alert demo genuinely interactive (dismiss, empty state, restore) instead of a static three-card display, so the "signature interaction" claim in the brief is actually demonstrated, not just described — verified end-to-end with a scripted click-through of all three dismiss buttons and the restore action.
  • Added hover states across service tiles, notices, and category chips (lift, border-colour, cursor) gated behind @media (hover:hover) and (pointer:fine) so touch devices never get a stuck hover state.

• Pass 3 — ship

  • Measured document.documentElement.scrollWidth against the viewport at 390 px and found 112 px of horizontal overflow. Cause: the zone-map layout's mobile override collapsed to a bare 1fr column, and CSS Grid's default min-width: auto let the zone table's 480 px min-width bleed through and force the whole grid wider. Every collapsed-to-one-column media query in the sheet now uses minmax(0, 1fr) instead of 1fr, closing the same class of bug everywhere it could recur.
  • Recomputed every colour pair against the final stylesheet; caught container red at 4.27:1 on white and restricted it to large/decorative use, introducing --red-deep for small critical text.
  • Full keyboard walk: skip link → nav → hero CTAs → alert dismiss/restore → tile <details> → report chip buttons → map table region → form → footer, in document order, with the dual-ring focus visible at every stop.
  • Reduced-motion verified with forced prefers-reduced-motion: the isometric build-in and alert-dismiss transitions collapse to the finished state instantly; scroll behaviour goes instant too.
  • Zero console errors at 390 / 834 / 1440 px on every route (/, /guide/, /process/); fonts confirmed loading from /assets/fonts with no external requests anywhere in the network panel.

Deploy

Netlify, straight from the repository: publish = ".", immutable cache headers on /assets/*, and Netlify Forms handling the contact form with a honeypot field. The /guide and /process routes exist as tiny redirect stubs pointing at these anchored sections, so the collection's route contract holds.