I Rebuilt Real Government Websites to Find Out What My Design System Got Wrong
A design system tested only on its own docs page is a guess. So I rebuilt ministry websites page for page on afrigov, logged every gap, and fixed the system instead of the pages.
afrigov is an open-source design system for African public-service websites: accessible components, a token pack per country, plain CSS, no build step. Its docs page renders every component and passes every accessibility test in CI.
That proves less than it sounds. A docs page is content I wrote to fit the components. Real government sites have nine-item menus, organograms saved as images, 165 PDFs with no file sizes and events published as photos of flyers. A design system only finds out what it is missing when it meets content it did not choose.
So I rebuilt real ones.
The method
Each use case is a real government website rebuilt page for page on afrigov. They include Nigeria’s Federal Ministry of Communications, Innovation and Digital Economy, Ghana’s National Identification Authority and Ghana’s Ministry of Health: more than 100 pages so far.
Every rebuild follows the same four steps:
- Map and measure the real site. List its pages and audit them with afrigov-audit to get a baseline score.
- Rebuild each page with afrigov from the CDN. Two link tags, the country pack, the optional script. No custom framework.
- Log every gap in a findings file. What the content needed, what afrigov had, and what was done. A gap that needs a change in afrigov becomes an issue there.
- Audit every rebuilt page and record its score beside the real one.
The rebuilds are clearly marked as unofficial. Every page says so in its banner and is excluded from search engines, national seals are not used, and the content belongs to the governments.
The scores
The audit runs axe-core at phone and desktop width, adds checks for common government-site failures, and scores each page out of 100.
| Page | Real site | Rebuild |
|---|---|---|
| Nigeria, ministry home page | 52 (D) | 100 (A) |
| Nigeria, initiatives | 73 (C) | 100 (A) |
| Ghana, NIA home page | 38.5 (F) | 100 (A) |
| Ghana, NIA card replacement | 68.5 (C) | 100 (A) |
Every rebuilt page scores 100. The scores are re-run every week, so the comparison stays honest as the real sites change.
Weight matters as much as the score. Most readers pay for every megabyte from a prepaid phone bundle. One ministry home page went from 8.9 MB to 29 KB when rebuilt, and from 14 seconds to 3 seconds to load on a phone.
What broke
The findings files are the real output. A few examples of what the content needed and afrigov did not have:
Dropdown menus. afrigov’s navigation was flat by design. Ghana’s Ministry of Health needed six menus holding 37 pages. The first two rebuilds worked around the gap with section pages. By the third, the same need had come up enough times to justify a component: section menus that open on click, work without JavaScript, and close with Escape.
A photo behind the title. afrigov’s hero put the image beside the text, and its guidance said never put text over a photograph. But most ministry sites lead with exactly that. The answer was a cover hero with the text in a solid panel over the photo, so contrast is measured between text and panel, not text and an unpredictable image.
Events with dates you can see. The real site published each event as a picture of a flyer, with no text and no date. The rebuild read the dates off the flyers and built a proper events component: a date block, a “to be confirmed” state, and a past state that sets itself. Three flyers gave no date at all, and the page says so.
An organogram. The real page is a single image, which cannot be read aloud, searched or resized. The rebuild turns it into lists of leadership, directorates and agencies, with links.
Documents without sizes. The real site lists 165 PDFs with no file sizes. On a prepaid bundle, someone deserves to know a file is 4 MB before they tap it. afrigov’s download link shows the size; the rebuild could not, because the source never published it.
The audit as a reviewer
One finding came from the tool, not from me. On the Ministry of Health rebuild, a dated list sat on a green band, and the date line kept its default grey. That failed contrast. The audit caught it before anyone saw the page, and the fix went into afrigov itself: on a coloured band, the meta line and dividers now take the band’s colour.
That is the loop the use cases exist for. The fix lands in the design system, so every site using it gets it, rather than in one page’s CSS.
What I learned
Design systems need real content to be honest. Every significant component added in recent releases (section menus, the cover hero, events, social links, the footer address) came from a rebuild, not from a planning session.
“Never do X” guidance meets reality. Some rules held: links stay underlined and meaning never depends on colour alone. Others, like no text over images, needed a better answer rather than enforcement.
Measure, then publish the measurement. Putting the real site’s score beside the rebuild makes the case better than any argument about accessibility could. It also keeps me honest, because the rebuild’s score is public too.
The next step is the one that matters most: a real service built on afrigov by someone other than me.