Ashanti Regional Library Network — every street ends at a shelf

Drawer 01

The nine-branch shelf

Every branch is a spine on the region's shelf. Pull one out — tap or hover a spine, or move through them with the keyboard — and its catalog card slides free: address, hours, and the collection that branch keeps better than anyone else.

Kumasi Adum — Central Library

Address: Prempeh II Street, Adum, Kumasi
Open: Mon–Sat 8:00–20:00
Focus collection: The Ashanti Archive — royal history, Kumasi city records, and the region's deepest general research floor.

Ejisu Branch

Address: Yaa Asantewaa Avenue, near the roundabout, Ejisu
Open: Mon–Fri 9:00–18:00 · Sat 9:00–14:00
Focus collection: The Yaa Asantewaa Room — resistance history, biography, and the War of the Golden Stool told from home.

Obuasi Branch

Address: Mine Road, Tutuka, Obuasi
Open: Mon–Fri 8:30–19:00 · Sat 9:00–15:00
Focus collection: Mining, geology & engineering — technical manuals, safety codes, and a century of gold-town memory.

Mampong Branch

Address: College Road, opposite the market lorry park, Mampong
Open: Mon–Fri 9:00–18:00 · Sat 9:00–13:00
Focus collection: Agriculture & food systems — crop science, farm business records, and seed-fair pamphlets going back decades.

Konongo Branch

Address: Odumase High Street, Konongo
Open: Mon–Fri 9:00–18:00 · Sat 9:00–14:00
Focus collection: Commerce & small business — bookkeeping, trade law in plain language, and a market-women's oral ledger project.

Bekwai Branch

Address: Poano Road, behind the district hospital, Bekwai
Open: Mon–Sat 9:00–17:00
Focus collection: Children's literature & early readers — the region's largest picture-book floor and a daily story hour.

Offinso Branch

Address: New Market Road, Offinso
Open: Mon–Fri 9:00–18:00 · Sat 9:00–13:00
Focus collection: Teacher training & pedagogy — lesson archives, curriculum sets, and a practice room for the College of Education.

Agona Branch

Address: Station Road, Agona
Open: Mon–Fri 9:00–18:00 · Sat 9:00–14:00
Focus collection: Health sciences & community nursing — reference sets shared with the nursing training college next door.

Juaso Branch

Address: Asante Akim Road, by the station, Juaso
Open: Mon–Fri 9:00–17:00 · Sat 9:00–13:00
Focus collection: Twi literature & oral history — recorded elders, proverb collections, and new writing in the language of home.

Drawer 02

The campaign

Citywide poster series · no. 03 of 09

Every street ends
at a shelf.

Nine branches across the Ashanti Region. Whichever road you live on, follow it far enough and there is a library waiting — with your name on a card.

Geo-targeted campaign concept: each town's poster redraws its own streets converging on its own branch. Shown here — the network master poster.

Drawer 03

What the drawers hold

Six services, standard at every branch. Each one filed where you'd expect — under the brass handle with its number stamped on the label.

Borrowing & returns

Six books at a time, three weeks each, returnable at any of the nine branches — the card is regional, not local.
Children's floor

Story hour every day at 15:30, homework tables until close, and a first library card issued the day a child can sign one.
Digital commons

Free wifi, loan laptops, and the full e-resource shelf — journals, past exam papers, and the national digital library.
Study rooms

Bookable by the hour at the desk — quiet rooms for candidates, group rooms for everyone else, both free with a card.
The mobile shelf

A library van on a published fortnightly route, carrying requested titles to the villages between the nine branches.
Community archive

Bring the family papers, the shop ledger, the wedding photographs — we digitise them free and file a copy in the town's own drawer.

Drawer 04

Apply for a library card

Drawer 05

Process — the case study

Concept project — adapted from a public RFQ. Frontend only; portals and interactive elements shown are static UI demonstrations. This is a fictional presentation and is not affiliated with the Ghana Library Authority or any real organization. Branch addresses, hours, and collections are plausible inventions.

The brief

The source RFQ asked for three things at once: a redesign of a regional library system's web presence, a rebrand of its identity, and a geo-targeted awareness campaign across nine branch towns. Most responses would treat those as three deliverables. This concept argues they are one: a library network's identity is its shelf — so the brand, the site, and the campaign should all be built from the same object, the book spine.

The problem

Regional library systems are usually presented as administration — an org chart with opening hours. But nobody loves an administration; people love their branch. The design problem was to make one network feel like nine local libraries, and nine local libraries feel like one card. Everything on this page is an answer to that tension: one shelf, nine spines.

Direction chosen — and what was rejected

The chosen direction is the card catalog as a design system: sections are drawers with index-tab headers, content sits on ruled cards with stamped accession numbers, and the palette — oxblood cloth, parchment, brass hardware, midnight ink — is taken straight from the furniture of a mid-century reading room.

Two directions were rejected. A "modern civic portal" look — flat blue, rounded sans, service tiles — was rejected because it erases exactly what a rebrand should amplify: the sensory memory of a library. And a nostalgic skeuomorphic pastiche — wood textures, page-curl effects — was rejected because it performs oldness instead of dignity; the catalog here is a typographic system, not a photograph of one.

Key decisions & trade-offs

The wordmark is the argument. ARLN assembles from fourteen book spines — the brand literally cannot exist without the shelf. Under reduced motion it simply stands assembled; the idea survives without the animation.
Nine real towns, honest invented details. The branch shelf names nine real Ashanti Region towns because a geo-targeted campaign is meaningless over fictional geography — while addresses and hours are clearly flagged as plausible inventions.
Interaction as object-logic. Spines pull out because books pull out; drawers open because drawers open. No interaction on this page does anything its physical counterpart wouldn't.
Brass is hardware, not text. The brief's brass fails WCAG AA as small text on parchment (3.13:1), so it is reserved for handles, rules, and bands; where brass must speak, it darkens to an AA-passing shade.

Intended impact — framed as design goals

A resident of any of the nine towns can find their branch's card — address, hours, focus collection — in one interaction.
The campaign line works at every scale: a citywide billboard, a poster by the lorry park, a stamp on a bookmark.
Membership feels like joining something with a history, and costs one short form.
The rebrand is reproducible by a sign-writer with two tins of paint — spines, bands, a shelf line.

Drawer 06

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 here meant an SVG wordmark, an SVG campaign poster, SVG drawer hardware, and a shelf of pure-CSS book spines. Static hand-authored HTML, CSS, and vanilla JavaScript; two self-hosted variable fonts; deployed on Netlify from a Git push.

The type system

Source Serif 4 (variable: optical size 8–60, weight 200–900, one 120 KB woff2) carries the scholarly register — display headings at high optical size, the poster headline at 600. Karla (variable 200–800, 32 KB) does the librarian's handwriting: labels, stamps, spine titles, form fields. Sizes are fluid clamp() steps; prose measure is capped at 66ch; ruled sections space their lines on the same rhythm the rules are drawn on.

Signature: the bookspine wordmark

Each of ARLN's four letters is drawn from rectangles proportioned like book spines — fourteen in all, each with its brass or parchment title bands. Every spine is two nested SVG groups: the outer group's transform attribute holds its final letterform position; the inner group carries a scattered start state — a per-spine translate/rotate written as CSS custom properties. Because a CSS transform would override the attribute, the two must live on different elements: that separation is the whole trick. When an IntersectionObserver sees the hero, an .assembled class transitions every inner group to transform: none with staggered delays — the toppled books stand up into a word. Under prefers-reduced-motion, and for any visitor without JavaScript, the scatter is never applied: the wordmark simply stands there, already itself.

The card-catalog system

Ruled lines are a repeating-linear-gradient stepped to the card's line-height, with a single vertical margin rule in faded oxblood — an index card in two CSS declarations. Index tabs are clipped corners on positioned headers; accession stamps are bordered Karla capitals rotated a degree or two off true, because a real stamp never lands straight. The drawers' brass pulls are a 64×18 SVG — plate and handle in three elements. The branch shelf is nine <button>s with writing-mode: vertical-rl titles; selecting one pulls it from the shelf (a transform, so no layout shift) and swaps the visible catalog card below, announced through aria-expanded and a polite live region. Without JavaScript all nine cards simply stack in reading order.

Accessibility & contrast

Body pairs run AA with headroom: midnight on parchment 14.2:1, oxblood on parchment 10.3:1, parchment on oxblood 10.3:1, muted ink 8.9:1. The brief's brass #A67C3D reads only 3.13:1 on parchment, so it is decorative hardware everywhere; textual brass is darkened to #654A1E (6.8:1). Focus is a 3 px oxblood ring over a parchment halo on light grounds, inverted on dark. The shelf is fully keyboard-operable, and all motion — assembly, pull-outs, reveals — collapses under reduced motion.

Iteration log

Pass 1 — critique
- Full-page capture caught scroll-reveals holding whole drawers at opacity 0 — the classic trap. Reveals became transform-only, so content is readable even if the observer never fires.
- The poster's sub-copy collided with the shelf at the vanishing point; the street scene moved down to the poster's lower third, and on narrow screens the copy now stacks above the art instead of overlaying it.
- The process drawer's red margin rule floated unrelated to the text; re-anchored it to the prose column's left edge like a real index card. Also: tightened branch-card padding, promoted the washed-out submit button to full oxblood.
Pass 2 — elevation
- Completed the brand lockup: "Ashanti · Regional · Library · Network" in letterspaced caps fades in only after the last spine lands — the identity finishes assembling in two beats.
- Set the poster's street dashes travelling toward the shelf — dots of lamplight walking home — with a slow breathing halo behind the branch; both stop under reduced motion.
- Added the date-due slip beside the membership form: four decades of rubber-stamped dates ending in "Renewed — for everyone", the rebrand's whole argument in one prop.
Pass 3 — ship
- Verified the no-JS and reduced-motion paths: wordmark pre-assembled, all nine branch cards stacked in reading order, zero scatter or animation — then re-shot all three widths with zero console errors.
- Walked the full keyboard order: skip link, nav, nine spines (Tab and arrow keys both work), form, footer — visible focus at every stop; card swaps announced via aria-expanded and a polite region.
- Tested the membership form's success path (?success=true), both redirect stubs, and every anchor; proofread each branch card — nine real towns, invented details flagged as inventions in the banner and the case study alike.

Deploy

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

One card. Nine branches. The whole region within reach.