Behind every number here is a person.

Why this exists

A dashboard that refuses to shout

Most dashboards are built to excite: red alerts, climbing counters, maps that pulse. That grammar is wrong for this subject. When the numbers describe violence — much of it inside homes, most of it never reported — spectacle is a second injury.

Safe Harbour proposes the opposite grammar. One quiet column of text. Charts that sit still. A single warm colour, reserved for a single meaning: help. Nothing on this page animates harm, nothing counts up, nothing flashes.

The concept gives a public dashboard three jobs, and only three: show where support services are — and where they are not; show whether people who report are actually reached; and show duty-bearers where the next service belongs. That is all a dashboard should do here. The rest is the work itself.

The map of support

Forty-seven points of light

Each light is one support service — a shelter, a counselling desk, a legal-aid clinic — placed by region. Region shapes are simplified, and no service’s exact location is shown. That is deliberate: this map exists to show coverage, never to point at a building.

Trends

Two charts, read calmly

Two views, one question: is help getting closer? Both charts follow the same rules — axes start at zero, every line is labelled directly, colour is colourblind-safe, and each chart ends in a plain-language takeaway. Every figure is illustrative concept data, invented to demonstrate the design.

Method

How to read this data

• Every figure here is illustrative. The numbers were invented to demonstrate the design of a dashboard, and were shaped to be plausible — but they are not real statistics and must never be cited as fact.
• More reports would not mean more violence. In any real deployment, report counts rise when trust in reporting channels rises. Read reporting figures next to service coverage, never alone.
• Much goes unrecorded. Any real figure on this subject is a floor, not a ceiling. A responsible dashboard says so on every chart, as this one does.
• Nothing here identifies anyone. Lights are placed by region, not by address. There are no district breakdowns, no time-of-day maps, no filter that could narrow the data toward a household. That limit is a feature.
• Language is a design decision. This page says person and survivor, not case. Its charts describe services and journeys, not incidents.

Get help

If you need help now

• If you are in immediate danger, call 112.
• You can also go to the nearest police station and ask for the Domestic Violence and Victim Support Unit (DOVVSU) desk.
• A hospital or clinic can treat injuries first — you do not have to file a report before receiving care.
• If it is safe to do so, tell one person you trust. You do not have to carry this alone.
• Because this is a design concept, it deliberately lists no other numbers. A real deployment would carry verified helplines, tested every month, in English and in Ghanaian languages.

For responders

If you work with this data

For the journalists, officers, health workers, and planners a real Safe Harbour would serve, the concept proposes four working rules:

• Report the service, not the scene. The public-interest story in this data is where help is and is not — coverage, distance, reach — never the details of any incident.
• Cite ranges and directions, not false precision. Under-reporting makes decimal places a fiction. “The gap narrowed for a fourth year” is accurate; “exactly 4,230” is not a claim this data can carry.
• Never let a map become an address. Publish nothing finer than regional level. If a breakdown could identify a household, a shelter, or a person, it does not get published.
• Pair every statistic with a path to help. Any chart from this data that appears in public should carry a helpline beside it. Data about violence, published without a door out of it, is voyeurism.

Design process

The case study

The brief

The starting point was a public request for quotations for a national data-transparency dashboard on gender-based and domestic violence: publish trends, map support services, and serve three audiences — the public, survivors, and duty-bearers. Safe Harbour is a self-directed design response to that kind of brief, built to demonstrate an approach rather than to win the work.

The problem

How do you publish data about violence without committing spectacle? Standard dashboard grammar — alarms, counters, heat — is optimised for urgency, and urgency reads as sensation. Worse, the people most likely to need this page are the people a loud page endangers: a survivor reading it in a shared home cannot afford a screen that shouts.

Directions rejected

The command centre

A dark grid of KPI tiles and live counters. Rejected: it treats people as throughput, and its “live” numbers imply a precision this subject can never honestly have.

The alarm

Red palette, urgent type, a crisis aesthetic. Rejected: fear silences exactly the people the site exists for, and lurid colour turns testimony into content.

The scroll story

An animated scrollytelling journey through “one survivor’s experience”. Rejected without hesitation: animating harm, however tastefully, is still animating harm.

The direction chosen: a memorial essay

A single narrow column, long-form pacing, generous silence between sections — the typographic grammar of remembrance rather than of monitoring. Data appears calmly, always inside sentences of context, and the page’s one warm colour is reserved for one meaning: help.

Key decisions and trade-offs

• Map help, not harm. The signature visual maps support services as points of light, and the choropleth shows distance to help rather than incident density. The need is legible in the gaps; no region is painted as a danger zone.
• Amber means help — only. One colour carries meaning on this page. Lights, the 112 card, the quick-exit button, and the “connected to support” line share it; nothing else may use it.
• Static charts, on purpose. No filters, no drill-downs. The trade-off is real — analysts lose slicing — but so is the gain: there is no interaction path that narrows this data toward an identifiable person.
• A quick exit, honestly described. The escape hatch is one keystroke away, and the page tells the truth about what it cannot do (erase history) instead of implying a safety it cannot provide.
• AAA as the floor, not the ceiling. Every text pair on the page measures at least 7:1. A survivor should never be defeated by contrast.

Intended impact — as design goals

Demonstrate that public data on violence can be legible without being lurid; that accessibility and dignity are the same discipline practised twice; and that a dashboard’s most important feature can be what it refuses to show. Those are capabilities this concept exists to prove — no client outcomes are claimed, because there is no client.

Build guide

How this page was made

A teaching page, in the same spirit as the rest: honest, specific, and reproducible by another designer.

Concept and creative direction

The direction is a memorial essay: one measured column of Source Serif 4 on midnight, Inter for labels and data, and a palette of four colours in which candle amber is semantically locked to “help”. Motion is limited to the slow breathing of the lights and a gentle settle as sections arrive — nothing fades content in or out, nothing loops fast, nothing moves that depicts harm.

Toolchain

Designed and engineered by Fable 5, directed by Hannah Kwakye. Static hand-authored HTML, CSS, and vanilla JavaScript — no frameworks, no build step, and zero external requests at runtime. Two typefaces are self-hosted as variable woff2 files (Source Serif 4 upright + italic, Inter). Deployed on Netlify from a Git push.

Everything is code-drawn

The collection’s rule — no stock photos, no rasters, every visual authored in code — became this site’s method. The Ghana map is sixteen hand-plotted polygons on a 440×648 grid, projected from real coordinates with x = (lon + 3.3) × 97.8 and y = (11.2 − lat) × 98.5, then simplified. Neighbouring regions share their vertices exactly, so borders never gap or overlap:

<!-- Ashanti and Western North share the diagonal (130,440)→(150,505) -->
<path d="M130,370 … L150,505 L130,440 Z"/>  <!-- Ashanti -->
<path d="M22,440 L130,440 L150,505 L6,502 Z"/>  <!-- Western North -->

The same geometry is used twice — once as the points-of-light map, once as the choropleth — so the two figures can never disagree. Each light is two stacked circles: a 7-unit disc filled with a radial gradient for the glow, and a 1.9-unit core. Both charts are hand-computed SVG; the line chart’s y-scale is simply y = 330 − value × (290 / 15000).

How the signature interaction works

Each region on the lights map is an SVG <a> linking to its own row of the data table — real navigation, not a hover-only tooltip — with an aria-label carrying the region’s count and distance band. Hover or focus updates a visual caption line (marked aria-hidden, since screen readers already get the label) and highlights the region with an amber stroke; the link works both ways, so hovering a table row lights its region on the map. The candle flicker is a single CSS opacity keyframe, staggered across lights with nth-child delays so no two neighbours breathe in sync — and it is removed entirely under prefers-reduced-motion.

Accessibility engineering

This site targets WCAG AAA, and the contrast is measured, not assumed. Ratios computed with the WCAG relative-luminance formula:

Beyond contrast: semantic landmarks and a single h1; a skip link; visible focus everywhere; every chart paired with a true text equivalent (one shared region table serves both maps, so they can never drift apart); colourblind-safe encodings (the choropleth is a one-hue lightness ramp, the trend lines differ in lightness and marker shape); and prefers-reduced-motion verified — it stills the hero light, the candle flicker, the reveals, and smooth scrolling.

Why the quick exit works the way it does

Activating “Leave quickly” (or pressing Escape twice) strips the stylesheets, empties the document, retitles the tab “New tab”, swaps the favicon for a blank one, and clears the URL fragment — a neutral pale page with nothing to explain. It is honest by design: the page states plainly that the button cannot erase browsing history, and recommends private browsing where that is the risk, because implying more safety than you can deliver is the most dangerous design choice on a page like this.

Iteration log

1. Design critique.
   • Screenshot review at 390, 834, and 1440 px found the fixed quick-exit button colliding with the wordmark on small screens; the header now clears space beneath the button, so the exit is never obscured — on this site that is a safety feature, not a nicety.
   • The original fade-up reveal could leave sections invisible mid-scroll; it was replaced with a transform-only settle, so no text on this page is ever hidden behind an animation.
   • content-visibility: auto on the long sections produced paint artifacts under the headless QA renderer; removed — the page is light enough to render whole.
2. Elevation.
   • Completed the signature in both directions: regions link into the data table, and hovering or focusing a table row now lights its region on the map.
   • Direct-labelled “Ashanti” and “Savannah” on the choropleth — the lightest and darkest regions — so the takeaway sentence is verifiable on the map itself without the legend.
   • Rows targeted from the map glow softly on arrival, so keyboard travel between figure and table is visibly acknowledged at both ends.
3. Ship quality.
   • Scripted browser pass: region focus caption, Enter-to-row navigation, Escape-Escape and click exits, and the /guide and /process redirects all verified; zero console errors at all three viewports.
   • Reduced-motion verified with emulation: hero light and candles render as static frames, reveals and smooth scroll disabled.
   • Full proofread with the subject’s weight in mind — every sentence checked for accidental sensation, every figure checked for its “illustrative” label, every count re-summed (the lights total 47, matching the table).

Deploy

Netlify, CI-driven: push to Git, publish the folder as-is. Long-cache immutable headers on assets, security headers on every route, and /guide + /process shipped as tiny redirect pages so the collection’s standard routes exist here too.